Webinar Viewer

Props

1. checkpoints - JSON string for timed events.

Route Params

• webinarRegistrationId - The unique identifier for the webinar registration. Required.
• startHere - (Optional) - if replay will start the video at the designated time.

Component Attributes

• data-cc-component="webinarViewer" – Identifies and initializes the component

Custom Behavior

• "Enter" overlay blocks video until clicked.
• Video is muted by default, unmuted on "Enter".
• If the webinar hasn’t started, a live countdown is shown.
• If replay, can start from a specific time via startHere URL param.
• Embeds any Typeform polls on the page with tracking information added as hidden fields.
  
  • Sends analytics/events on screen_changed & form_submitted
• Sends analytics/events on play, pause, seek, progress, and checkpoints.
• Redirects to a URL when the video ends (if provided via the webinar object).
• Checkpoints - The checkpoints prop is a JSON string (or object) that defines timed events during video playback. When the video reaches a specified time, the corresponding checkpoint fires, triggering custom logic (e.g., showing a Typeform, toggling UI, sending analytics).
  
  • Checkpoint Object {
 time: number;
 action: string;
 componentId: string;
}
    
    • The time is when the checkpoint occurs
    • The action is how the checkpoint is handled
    • The componentId is how the element is selected.
    • The componentId is the value of the data-cc-component that we have on the element.
  • Checkpoint Toggle Object {
 time: 30;
 action: toggle;
 componentId: webinarOfferButton;
}
  • Checkpoint Event Object {
 time: 31;
 action: emit;
 componentId: buy_button_seen;
}

1. From the Kitchen Sink copy the Webinar Viewer component (cmd + c OR right-click → Copy).
2. Open your Webflow project and paste the component where you'd like the chat to appear.
3. Select the pasted element and convert it into a Webflow Component (right-click → Create Component).
4. Ensure the element has:
   • data-cc-component
   • Value: webinarViewer
5. Ensure the element has:
   • data-cc-component-checkpoints
   • Value:
     1. Click the purple circle
     2. Click create & connect new property
     3. Enter Checkpoints
     4. Click create when you are finished

‍

1. Create a container element.
2. Ensure the element has:
   • data-cc-component
   • Value: webinarViewer
3. Ensure the element has:
   • data-cc-component-checkpoints
   • Value:
     • 1. Click the purple circle
     • 2. Click create & connect new property
     • 3. Enter Checkpoints
     • 4. Click create when you are finished