Skip to main content
Web Chat is the website widget. Create it under Deploy → Channels, configure Chat Settings and Appearance, then copy the embed code from Deploy Script. Agent prompts, tools, and routing live on the linked chat workflow under Build. Project-wide API keys, rate limits, and handover agents are under Admin → Settings.

​
Connect

1

Open Channels

In the project sidebar, select Deploy → Channels.
2

Create Web Chat

Select Web Chat. Enter a Channel Name. The identifier is set to website. Create the channel.
3

Open channel settings

Open the new channel. Use the tabs below to link a workflow, set messages, brand the widget, then copy embed code from Deploy Script.
The Channels list shows Web Chat as connected. You can copy the website integration code from Deploy Script.

​
Configure Chat Settings

Open the channel and select the Chat Settings tab.

​
Chat workflow

Required. Prompts, tools, and routing come from an active chat workflow. Select a workflow from the dropdown. If none appear, create and activate a Chat Flow under Build → Workflows, then return here.

​
Welcome message

The first message visitors see when they open the chat widget. Keep it short and friendly. Example: Hi, I'm the AI Agent. How can I help you today?

​
Hello message

Greeting shown when a visitor starts a fresh conversation session. Example: Hello! How can I help you today?

​
Quick questions

Pre-defined questions shown as clickable chips at the start of new sessions. Click Add, type a question (for example, What are your pricing plans?), and repeat for common asks.
Use questions your customers ask most often.
Click Save after you finish Chat Settings.

​
Customize Appearance

Open the Appearance tab to brand the widget.

​
Agent name

The name shown in the chat interface. Examples: Support Bot, Sarah, AI Assistant.

​
Bot icon

Upload an image that represents your agent (max 50KB). It appears in the widget. Optionally use the same icon for the launcher button if that option is available.

​
Primary color

Theme color for buttons and highlights. Pick a color or enter a hex code (for example, #204677) that matches your site.

​
Widget position

Where the floating button appears: Left or Right. Most sites use the right side.
Click Save after you finish Appearance.

​
Get your website integration code

Click on the Deploy Script tab in your channel settings to get the code you need:

​
Website Integration Code

A small piece of code that adds your chat agent widget to your website.
1

Copy the website integration code

You’ll see Website Integration Code. Click Copy to copy the snippet to your clipboard. The code will look something like this:

​
Add It to Your Website

1

Open your HTML file

Open your website’s HTML file in a text editor.
2

Find the body tag

Find the </body> tag (usually near the end of the file).
3

Paste the code

Paste the website integration code just before the </body> tag.
4

Save and upload

Save the file and upload the updated file to your web server.

​
Alternative: Iframe Integration

If you prefer, you can also use an iframe code. Click Copy next to the iframe code. This creates a standalone chat window you can embed anywhere. Useful if you want more control over the chat window size and placement.
After adding the code to your website, your chat agent widget will appear as a floating button on your site!

​
Test the widget

After you’ve added the website integration code to your website:
1

Visit your website

Open your website in a web browser. Look for the chat agent button in the bottom corner (left or right, depending on your setting).
2

Test the chat

Click the button. You should see the welcome message. Ask a question and confirm the agent replies using your linked workflow.
3

Test quick questions (if added)

Click one of the quick question chips and verify the conversation starts as expected.
Before go-live, also exercise the workflow in Build → Playground.

​
Troubleshooting

Possible reasons and solutions:
  • Code not added correctly: Make sure the code is placed just before the </body> tag
  • Website caching: Clear your browser cache or wait a few minutes for changes to take effect
  • Code placement: The code must be in the HTML, not in a CSS or JavaScript file
  • Check browser console: Open your browser’s developer tools (F12) and check for any error messages
What to check:
  • An active chat workflow is selected under Chat Settings
  • You clicked Save after linking the workflow
  • The workflow is published/active under Build → Workflows
What to do:
  • Try refreshing the page
  • Make sure you have permission to view the Deploy Script tab
  • Try using a different web browser
  • Check if your browser allows clipboard access

​
What’s next?