Skip to main content

How to Create and Add a Chat Widget to Funnels and Websites

This article explains how to create a chat widget, customize its appearance and messaging, and add it to funnels or websites.

Updated over 2 months ago

Step 1: Create a Chat Widget

Navigate to Sites β†’ Chat Widget and click + New to create a new widget.

Step 2: Select the Chat Type

Choose the type of chat widget you want to create:

  • All-in-One Chat

  • SMS / Email Chat

  • Live Chat

  • WhatsApp Chat

  • Voice AI

Step 3: Customize Widget Style and Appearance

Styles and Themes

Select a predefined style or theme, enable or disable the chat prompt, and choose the chat icon.

Colors and Typography

Customize chat bubble colors, background colors, header colors, and typography settings.

Step 4: Configure Welcome Messages

First-Time and Returning Visitors

Set a welcome message for first-time visitors and a personalized greeting for returning visitors using dynamic variables.

Step 5: Configure Chat Window Messages

Static and Header Messages

Edit static messages shown in the chat window, including the header text displayed at the top of the chat.

Message Color Definitions

Each message type has its own color setting, including visitor messages, agent or AI messages, system messages, and header messages.

Step 6: Adjust Widget Position and Size

Choose where the widget appears on desktop screens and set custom width and height if required.

Step 7: Configure Required Message Behavior

All chat widgets require visitors to enter a message before starting a conversation. You can prefill this message if needed.

Step 8: Acknowledgement Messages and Language

Customize acknowledgement messages shown after submission and select the chat widget language.

Step 9: Customize "Powered By" Branding

Enable or disable agency branding and replace the default "Powered By" text with your own branding.

Step 10: Save the Chat Widget

Click Save to store all widget changes.

Step 11: Get the Chat Widget Code

Click Get Code and copy the script provided. This code can be added to your website or used via Google Tag Manager.

Step 12: Add the Chat Widget to a Funnel or Website

Add to Funnel Settings

Open the funnel settings, scroll to Chat widget, and select the chat widget you want to use.

Add to Funnel Step

You can also preview or manage the chat widget directly from the funnel step editor.

Step 13: Preview the Live Chat Widget

After saving, refresh the funnel or website page to view the live chat widget as visitors will see it.

Common Issues and Fixes

Chat Widget Not Appearing

  • Ensure the widget is saved

  • Confirm the widget is selected in funnel or website settings

  • Refresh the page after changes

Branding Changes Not Updating

  • Click Save after making branding edits

  • Refresh the preview or live page

FAQ

What chat types are supported?

All-in-One, SMS/Email, Live Chat, WhatsApp Chat, and Voice AI.

Is a message required to start a chat?

Yes. All chat types require a visitor-initiated message.

Can I customize the widget appearance?

Yes. You can customize colors, themes, icons, placement, and typography.

Can I change the "Powered By" text?

Yes. Agency branding can be customized or replaced with your own text.

Can I add different chat widgets to different pages?

Yes. Multiple widgets can be created and assigned individually.

How do I preview the widget before going live?

Save the widget and refresh the funnel or website page to preview it.

Did this answer your question?