Webinar Registration

Props

• webinarId – (string, required): Used to fetch available webinar schedules.
• thankYouPageUrl – (string, required): Redirects the user here after a successful registration.
• webinarUrl – (string, required): Included in the payload sent to the API.

Route Params

• None

Component Attributes

• data-cc-component="webinarRegistration" – Initializes the component on page load.
• data-cc-component-webinar-id=<webinarId> – The webinar ID used to fetch available schedules.
• data-cc-component-thank-you-page-url="https://thanksabunch.ty" – Redirect URL after successful registration.
• data-cc-component-webinar-url="https://webinarshere.com" – Webinar URL included in the registration payload.

Custom Behavior

• Initializes schedule dropdown using the webinarId and user's detected timezone.
• ‍Populates timezone dropdown using Moment.js and selects the detected timezone by default.
• When the timezone dropdown changes, the schedule options update to reflect the new timezone.
• On form submission:
  • Extracts user input for email, name, timezone, and selected schedule.
  • Sends a POST request to:
  [brandApiDomain]/api/webinars/register/
  • Tracks the registration via webinar_registration event with rich metadata.
  • Redirects to the thankYouPageUrl, appending webinarRegistrationId to the URL query string.

‍

1. Copy the Webinar Registration component from the base project.
2. Paste it into your Webflow site where the form should appear.
3. Ensure the outer element has:
   • data-cc-component="webinarRegistration"
   • data-cc-component-webinar-id
   • Value:
     • 1. Click the purple circle
     • 2. Click create & connect new property
     • 3. Enter the name and any default text
     • 4. Click create when you are finished
   • data-cc-component-thank-you-page-url
   • Value:
     • 1. Click the purple circle
     • 2. Click create & connect new property
     • 3. Enter the name and any default text
     • 4. Click create when you are finished
   • data-cc-component-webinar-url
   • Value:
     • 1. Click the purple circle
     • 2. Click create & connect new property
     • 3. Enter the name and any default text
     • 4. Click create when you are finished
4. Confirm the form includes:
   • A dropdown with name="schedule"
   • A dropdown with name="timezone"
   • An input with name="email" (required)
   • (Optional) input with name="name"
5. Publish and test the full registration flow.

1. Add a Form Block and a:
   • data-cc-component="webinarRegistration"
   • data-cc-component-webinar-id=<webinarId>
   • data-cc-component-thank-you-page-url="https://thanksabunch.ty" – Redirect URL after successful registration.
   • data-cc-component-webinar-url="https://webinarshere.com"
2. Inside the form, include:
   • Dropdown with name="schedule" (empty by default)
   • Dropdown with name="timezone" (empty by default)
   • Input with name="email" (required)
   • (Optional) input with name="name"
3. Ensure your global config provides all required props.
4. Publish the site and test using the full registration flow and redirection.

The form can be styled freely using Webflow. The script assumes the form includes:

• A dropdown with name="schedule" for available times.
• A dropdown with name="timezone" for timezone selection.
• An input with name="email" (required).
• Optional input with name="name".

The form must be a valid Webflow form block wrapped by a component with data-cc-component="webinarRegistration".