Typeform Embed

The Typeform Embed integration dynamically injects Typeform forms into any page that includes the required data attributes that also includes the webinar viewer component. It enables collecting user input during or after a webinar session, and relays key events (like form completion) back to the parent application for analytics.

Props

  • None

Route Params

  • None

Component Attributes

  • data-cc-component - Typeforms FormId. (string, required) It is used as a unique identifier for the embedded Typeform instance.
  • data-cc-component-embed-id - The Typeform embedId. (string, required) This attribute is used to load the embed.

Custom Behavior

  • Dynamic Embedding: The script loaded via the webinar viewer component scans the DOM for elements with data-cc-component-embed-id and injects a Typeform form into each.
  • Hidden Fields:
  • webinar_id, lead_id, is_replay, user_id and page_url are passed as hidden fields to all Typeform elements for context and analytics.
  • Event Handling: Listens for Typeform events (form-question-changed, form-submit) and relays them to the parent app via window.cc.sendMessage.
    • form-question-changed - fire an event to analytics letting them know a question has been answered
    • form-submit - hide the form
  • Form ID can be found by going to the share tab and viewing the link at the top. The form id is the last section of that url before the hidden fields.
    • https://form.typeform.com/to/cxVurA1R => formId = cxVurA1R
  • Embed ID can be found by going to the share tab and clicking "Embed in a web page" to the left. Once there you can click the code icon (</>) to get the embed code. The value assigned to data-tf-live is the embed id.
    • <div data-tf-live="01K0CE42YWSYW052FK4GZRX7PJ"></div>
      <script src="//embed.typeform.com/next/embed.js"></script>
    • In this example embedId = 01K0CE42YWSYW052FK4GZRX7PJ
  • Typeform Setup

Adding to a new site

  1. From the Kitchen Sink copy the Typeform Embed Simple 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:
      1. Click the purple circle
      2. Click create & connect new property
      3. Enter Form ID
      4. Click create when you are finished
  5. Ensure the element has:
    • data-cc-component-embed-id
    • Value:
      1. Click the purple circle
      2. Click create & connect new property
      3. Enter Embed ID
      4. Click create when you are finished

Adding to an existing site

‍

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

Styling notes

This component is styled by the parent element.

Custom Functionality

Setting

How It's Used

What You Need To Do

data-cc-component="{Form ID}"

Tells orchestrator to initialize this element

Set this value

data-cc-component-embed-id="{Embed ID}"

Tells the Typeform initializer which form to load

Set this value