How to add your agent's chat widget to a website

The chat widget is a chat bubble you add to a website. Visitors click it and talk with your agent, and the conversations arrive in your Inbox. Each agent has its own widget.

Step 1: Open the widget settings

In the left menu, open Agents and click your agent. Then, open Integrations and select the Widget tab. On the right, Live Preview shows how the widget looks while you edit it.

Step 2: Set the name, avatar and colors

• Branding: customize the Assistant Name visitors see at the top of the chat, next to the Bot Avatar. Click to select or drag an image to upload it.

• Colors: select the Primary color of the bubble and the header, the Background of the chat, and the Text color. Use your brand colors.

Step 3: Write the texts

In Texts, write the Welcome Message, the first message visitors see (for example: "Hi! I'm Sofia from Bright Smile. Would you like to book an appointment?"), and the Input Placeholder, the hint inside the message box.

Step 4: Choose the position and behavior

• Position: place the bubble in the Bottom Left or Bottom Right corner of the website.

• Behavior: turn on Auto-open Chat to open the chat as soon as a visitor loads the page, and Notification Sound to play a sound when the assistant sends a new message.

Click Save at the top right.

Step 5: Add the website's domain

Open Embed. Under Allowed Domains, type the website's domain, for example brightsmile.com, without https:// or a page path, and click Add. The widget only loads on the corresponding sites of the domains in this list, so nobody else can use your agent on their site. Click Save.

• To include all the subdomains, add the domain with an asterisk, for example *.brightsmile.com.

• Turn on Allow localhost only if you or your developer want to test the widget on a local server before publishing it.

Step 6: Paste the code on the website

In Embed, choose how to add the widget and copy its code with the copy button:

• Script (recommended): paste it in the website's HTML, just before the closing </body> tag. It works on most sites and website builders that let you add custom code.

• Iframe: shows the chat inside a fixed space on a page, without the floating bubble.

• React: for websites built with React. Give this code to the developer.

Publish the change on the website and open it. The bubble appears in the corner you previously chose.

Step 7: Answer from your Inbox

Every conversation from the widget arrives in the Inbox, like the ones from your other channels. Your agent answers on its own, and you can open any conversation and reply from there. Your reply appears in the visitor's chat right away. If the visitor already left the site, they see it when they come back to it from the same browser.

Technical reference

• One widget per agent: each agent has its own widget and its own Widget ID. To use a different agent on another site, set up that agent's widget.

• Limits and formats: Assistant Name up to 40 characters, Welcome Message up to 200, Input Placeholder up to 60. Bot Avatar in PNG, JPG or SVG, up to 2 MB.

• Domains: the widget only loads on the domains in Allowed Domains. If the list is empty, it only works on localhost, for testing.

• Agent status: if the agent is deactivated or unpublished, the widget doesn't appear on the site. When you activate the agent again, the widget comes back.

• Conversation history: a visitor's conversation stays when they reload the page or come back later, as long as they use the same browser.

• Credits: the agent answers on the widget only if the account has credits, the same as on any other channel.

• Protection against abuse: a visitor who sends too many messages in a short time, or a very long message, is limited for a moment and the agent doesn't answer that message.

Common problems

Done

Your agent now talks with visitors on the website that hosts it. Open the site in a private window and send a message to check it.