Webinar Chat

The webinarChat component provides a real-time chat interface for webinars, allowing users to send messages and receive automated agent messages at specific video timestamps. It integrates with a backend to fetch registration and agent message data, and emits analytics/events for user interactions.

Props

  • None

Route Params

  • webinarRegistrationId - The unique identifier for the webinar registration. Required.

Component Attributes

  • data-cc-component="webinarChat" - Initializes the component

Custom Behavior

Custom Behavior

  • Requires children elements with the following attributes
    • data-cc-component="webinarChat": Root container.  
    • data-cc-component="chatMessages": Container for chat messages.  
    • data-cc-component="chatForm": Wrapper for the chat input form (must contain a valid HTML form element).  
    • data-cc-component="chatInput": The text input for user messages.  
    • data-cc-component="chatSend": The send button.
  • User Messages  
    • User messages are sent via a form submit.  
    • The send button is disabled if the input is empty.  
    • On submit, the message is sent via window.cc.sendMessage (if available) and appended to the chat.  
    • The input is cleared and the send button is disabled after sending.
    • Keyboard Support: Enter key submits messages (Shift+Enter for new lines).
    • Auto-scroll: Chat area automatically scrolls to show new messages.
    • Message Validation: Prevents sending empty messages.
  • Agent Messages  
    • Fetched from the backend using the registration ID.  
    • Displayed automatically at specific video offsets via showAgentMessagesAtTime(currentTime).
    • Admin Badges: Messages from moderators display an "ADMIN" badge.
    • HTML Content: Supports links and line breaks in message content.
  • Thread Management: Creates a unique thread ID for each chat session.
  • Video Integration: Tracks current video time for message context and analytics.
  • Event Handling: Listens for external chat messages via custom "chat-message-received" events.
  • Error Handling: Logs errors for missing elements, failed API calls, or invalid configurations.

Adding to a new site

  1. From the Kitchen Sink copy the Webinar Chat 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 component has:
    • data-cc-component="webinarChat"
  5. Ensure the children elements have the following:
    • Message Container (inside Root) data-cc-component="chatMessages"
    • Chat Form (Inside Root) data-cc-component="chatForm"
    • Chat Input (Inside Chat Form) data-cc-component="chatInput"
    • Chat Send (Inside Chat Form) data-cc-component="chatSend"

Adding to an existing site

  1. Add the required HTML structure with the correct attributes
    1. Root Container data-cc-component="webinarChat"
    2. Message Container (inside Root) data-cc-component="chatMessages"
    3. Chat Form (Inside Root) data-cc-component="chatForm"
    4. Chat Input (Inside Chat Form) data-cc-component="chatInput"
    5. Chat Send (Inside Chat Form) data-cc-component="chatSend"

Styling notes

This component is styled by the parent element.

‍

Use these variables for styling in Webflow:

  • chat-bubble-agent - Background color for agent messages
  • chat-bubble-user - Background color for user messages
  • chat-bubble-agent-text – Text color for agent messages
  • chat-bubble-user-text – Text color for user messages
  • chat-bubble-attendee – Background color for attendee messages
  • chat-bubble-attendee-text – Text color for attendee messages
  • chat-bubble-agent-tag – Background color for admin badges
  • chat-bubble-agent-tag-text – Text color for admin badges

Custom Functionality

Setting

How It's Used

What You Need To Do

data-cc-component="webinarChat"

Tells orchestrator to initialize this element

Make sure it exists