Embed an AI-powered chat widget on any website

A chat widget is a small, interactive element on a website that allows customers to quickly start a conversation with your AI customer service agent. The widget can be embedded on any website and can be customized to match your brand.

How the widget works with your customer service agent

When you embed a widget on a website, customers can use it to start a chat with your AI customer service agent. The agent can answer questions, provide helpful articles, and help customers solve problems. If needed, the agent can also escalate requests to your support team. Read more about the AI customer service agent.

Create a widget

To create a chat widget:

1. In your customer experience, select Channels, then Embed from the sidebar.

2. Select Create widget.

3. Give your widget a unique name and description.

4. Select Create.

Once you’ve created a widget, you can customize it and embed it.

Customize your widget

You can customize your widget to match your website’s look and feel.

• Spacing – Adjust the spacing between elements in your widget.

• Radius – Set the curvature of elements in your widget.

• Color – Set the widget’s color. The available colors are based on the color you set in Branding.

• Corner widget icon – Set the icon for the widget. Choose between a chat icon or upload your own PNG or SVG file.

• Chat style – Set the agent’s text bubble color.

• Attribution – Add a link to your AI terms of use.

To customize your widget:

1. Select the widget.

2. On the Customize tab, adjust the widget’s appearance and settings.

3. Select Save.

Embed your widget

You can choose to embed a widget on multiple websites or create different widgets for different websites.

To embed your widget on a website:

1. Select the widget.

2. On the Install tab, follow the steps to embed your widget.

Support options

There are two support options to choose from:

• Support for all customers – This option is best for websites without a login option. It allows you to provide the same support to anyone that visits your website. Because visitors won't be logged in, they won't get personalized support.

• Personalized support for logged-in customers – This option is best for websites with a login option. Logged-in customers can view conversation history and can raise requests without providing an email address. Visitors that aren’t logged in can still get support.

How customer access settings affect the support options available

Your customer access settings control who can access your support channels and affect how the widget works.

If you’ve selected to give access to only customers from organizations that have been added, customers will need to be logged in to use the widget, and you must choose and follow the instructions for installing the widget for the Personalized support for logged-in customers.

If you’ve selected to give access to anyone, you can choose either option.

Read more about customer access.

Authentication

If you choose the Personalized support for logged-in customers option, you need to set up authentication so you can verify logged-in customers. To do this, select Generate credentials. This will give you a Client ID and Client secret which should be supplied to your server’s backend code in order to perform the OAuth token exchange for an identity token to authenticate your customers.

Copying the code for your website

After selecting a support experience, you’ll be provided code to add to your website. This code is a template and should be modified to make it consistent with the frameworks you’re using.

Hide your widget

After your widget has been embedded, you can easily hide it without editing your code.

To hide your widget:

1. In your customer experience, select Channels, then Embed from the sidebar.

2. Turn off the toggle for the widget you want to hide.