Outlook Calendar Button

The Outlook Calendar Button component creates a pre-filled calendar invite for Outlook based on a webinar’s registration ID found in the URL. It builds a deep link to the Outlook calendar with localized times and relevant webinar details.
‍

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

Custom Behavior

  • Adds a click event listener to open a pre-filled Outlook 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.
    • utm_source=cc-webinar
    • utm_medium=calendar
    • utm_campaign=thank-you
    • utm_content=webinar-calendar-invite

Example

Outlook icon.
Outlook Calendar

Adding to a new site

‍

  1. From the Kitchen Sink copy the Outlook 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: outlookCalendarButton
  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.