Events

Available Events

The widget emits custom events that bubble up through the DOM. You can listen for them on the document or any parent element.

Basic Event Listening

// Listen on document for all widgets
document.addEventListener('capwave:uploadsuccess', (e) => {
  console.log('Upload successful!', e.detail.response);
});

// Listen for errors
document.addEventListener('capwave:uploaderror', (e) => {
  console.error('Upload failed:', e.detail.error);
});

// Track validation errors
document.addEventListener('capwave:validationerror', (e) => {
  console.warn('Invalid file:', e.detail.error);
});

Progress Tracking

// Show custom progress UI
document.addEventListener('capwave:uploadprogress', (e) => {
  const { progress, loaded, total } = e.detail;

  // Update your own progress indicator
  const progressEl = document.getElementById('my-progress');
  progressEl.style.width = progress + '%';

  // Show bytes transferred
  const mb = (loaded / 1024 / 1024).toFixed(1);
  console.log(`Uploaded ${mb}MB (${progress}%)`);
});

Analytics Integration

// Track with Google Analytics
document.addEventListener('capwave:fileselected', (e) => {
  gtag('event', 'file_selected', {
    'event_category': 'pitch_deck',
    'event_label': e.detail.file.name,
    'value': e.detail.file.size
  });
});

document.addEventListener('capwave:uploadsuccess', (e) => {
  gtag('event', 'upload_complete', {
    'event_category': 'pitch_deck',
    'event_label': e.detail.response.pitchDeckId
  });
});

document.addEventListener('capwave:uploaderror', (e) => {
  gtag('event', 'upload_error', {
    'event_category': 'pitch_deck',
    'event_label': e.detail.error
  });
});

Handling Success

After a successful upload, the widget will automatically redirect if the server returns a redirect URL (or if you set data-redirect-url). Listen to the success event for custom behavior:

<div
  data-capwave-upload
  data-partner-id="demo"
></div>

<script>
document.addEventListener('capwave:uploadsuccess', (e) => {
  const { redirectUrl, pitchDeckId } = e.detail.response;

  // Show success message before redirect
  showSuccessModal(`Your deck ID: ${pitchDeckId}`);
});
</script>

Global API

The widget also exposes a global CapwaveUploader object:

// Re-initialize widgets (if added dynamically)
window.CapwaveUploader.init();

// Attach upload to your own button (no widget markup needed)
const handle = window.CapwaveUploader.attach('#my-btn', { partnerId: 'xxx' });

// Clean up when done
handle.destroy();

// Access default configuration
console.log(window.CapwaveUploader.DEFAULT_CONFIG);

// Get reference to widget element
const widget = document.querySelector('capwave-uploader');

// Open file picker on a specific widget instance
widget.open();

// Reset widget to initial state
widget.reset();

// Get current config
const config = widget.getConfig();

// Get current state
const state = widget.getState();

Attach API Usage

Use CapwaveUploader.attach() to bind upload functionality to your own button:

<!-- Your own button (no widget markup needed) -->
<button id="my-upload-btn">Upload Deck</button>

<script src="https://pitch.capwave.ai/assets/pitch-deck-uploader.min.js"></script>
<script>
// Attach upload to your button
const handle = CapwaveUploader.attach('#my-upload-btn', {
  partnerId: 'your-partner-id'
});

// CSS classes are auto-applied to your button:
//   .capwave-uploading  - during upload (+ disabled attribute)
//   .capwave-success    - on success (auto-removed after 2s)
//   .capwave-error      - on error (removed on next click)

// Events fire on your button element
document.getElementById('my-upload-btn').addEventListener('capwave:uploadsuccess', (e) => {
  console.log('Done!', e.detail.response);
});

// Clean up when no longer needed
handle.destroy();
</script>

See the Attach API example for a live demo.