Google Calendar Button

The Google Calendar Button component generates a pre-filled calendar event for a webinar and allows users to add it to their Google Calendar. It extracts the webinar registration ID from the page URL and fetches relevant webinar data to build the calendar invite.
‍

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="googleCalendarButton" – Initializes this component automatically on page load.

Custom Behavior

  • Adds a click event listener to open a pre-filled Google Calendar invite.
  • Default event duration is 90 minutes.
  • Tracks click interaction with metadata.
  • Uses user's local timezone.
  • Generates event title, description (with join link and tagline), and tracking UTM params.

Example

Google icon.
Google Calendar

Adding to a new site

  1. From the Kitchen Sink copy the Google Calendar 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. Find the element you want to handle the click (or add a new button, link box, etc).
  2. In the Element Settings panel, add this custom attribute:
    • Name: data-cc-component
    • Value: googleCalendarButton
  3. Publish your changes.

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.