Webinar Viewer Button

The Webinar Viewer Button component fetches the user's webinar registration information and redirects them to the correct webinar URL. It supports both mouse click and keyboard (Enter/Space) interaction for accessibility.
‍

Props

  • None

Route Params

  • webinarRegistrationId: The unique identifier for the webinar registration. Must be present in the page URL as a query parameter.

Component Attributes

  • data-cc-component="webinarViewerButton" – Initializes this component automatically on page load.

Custom Behavior

  • On click:
    • Prevents default link behavior.
    • Uses the webinarRegistrationId from the URL to fetch the registration data from:
      [brandApiDomain]/api/webinars/registration/:webinarRegistrationId/
    • Extracts webinarUrl from the response.
    • If valid, redirects the browser to the webinarUrl.
    On keydown:
    • Supports keyboard navigation with Enter or Space.
    • Triggers the same click behavior for accessibility.

Example

Go To Webinar

Adding to a new site

‍

  1. From the Kitchen Sink copy the Webinar Viewer Button component (cmd + c OR right-click → Copy).
  2. Open your Webflow project and paste the component where you'd like the start time to appear.
  3. Select the pasted element and convert it into a Webflow Component (right-click → Create Component).
  4. Publish your changes. The button will automatically initialize and be functional when the page URL includes a valid webinarRegistrationId.

Adding to an existing site

‍

  1. Add a new button or link element to your Webflow page.
  2. In the Element Settings panel, add:
    • data-cc-component → webinarViewerButton
    ‍
  3. Confirm the element is focusable (e.g., use a <button> or add tabindex="0").
  4. Publish the site and test using a valid webinarRegistrationId in the URL.

Styling notes

Apply your own styles using Webflow's Designer.

The component will not modify styling automatically.

You can safely add text, icons, or animations to the button.