💭Web Chat (deep dive)

Web Chat is the chat widget you embed on your website so visitors can talk to you (or your bot) without leaving the page. This page goes deeper than Connect a channel: configuration options, allowed domains, styling, and how to add the widget to your site.

---

Before you start

• You need a Web Chat campaign created from Integrations or Campaigns (Connect → Web Chat). If you haven’t done that, see Connect a channel — Option A.

• Configuration is done in Web Chat (or Webchat config) in the sidebar. You may have one or more Web Chat campaigns; select the one you’re editing.

---

Main configuration options

Setting	What it does	Example
Title	Heading shown in the widget (e.g. at the top of the chat).	"Chat with us"
Subtitle	Short line under the title.	"We typically reply within minutes"
Welcome message	First message the visitor sees when they open the chat (before they type).	"Hi there! How can we help you today?"
Input placeholder	Placeholder text inside the message box.	"Type a message…"
Allowed domains	Domains that are allowed to load the widget (security). Other domains cannot use your widget.	example.com, *.example.com, app.example.com
Position	Where the chat bubble appears (e.g. bottom-right, bottom-left).	Bottom right
Colors	Primary color, background, or accent so the widget matches your brand.	Your brand hex color
Size / width	If the app allows, width or max size of the chat window.	400px

Allowed domains is important: list every domain (and subdomain if needed) where the widget will be embedded. Use commas to separate (e.g. example.com, www.example.com, *.example.com). If a visitor opens your site on a domain you didn’t list, the widget may not load or may show an error.

---

Styling and behavior

• Theme — Some configs let you choose light/dark theme for the widget so it fits your site.

• Avatar / logo — You may be able to set an image or icon for the widget bubble or the header.

• Sounds — Option to play a sound when a new message arrives (if supported).

• Auto-open — Option to open the chat automatically when the page loads (use sparingly to avoid annoying users).

• Offline message — Message or state shown when no agents are available (if your app supports it).

Save after changing any option so the live widget updates (you may need to refresh the page where the widget is embedded).

---

Adding the widget to your site

After you save the Web Chat config, the app gives you one of:

Script snippet (typical)

• A short JavaScript snippet (a <script> tag with a src and maybe an id or data-* attributes).

• Where to put it — Just before the closing </body> tag on every page where you want the chat to appear. Or add it in your CMS (e.g. WordPress "Footer" or "Custom code"), or in Google Tag Manager as a custom HTML tag that loads on all pages (or on specific pages).

• One snippet per Web Chat campaign — If you have multiple Web Chat campaigns (e.g. one per brand), use the snippet that matches the campaign you configured. Don’t mix snippets from different campaigns on the same page unless the docs say so.

Embed URL or iframe

• Some setups give an embed URL or iframe code. Place it where you want the chat window to appear (e.g. in a sidebar or footer). The bubble may still appear in a fixed position depending on the implementation.

After adding the snippet

1. Publish your site (or clear cache if you use a cache plugin).

2. Open your site in a browser (on a domain you added to Allowed domains).

3. You should see the chat bubble (often bottom-right). Click it to open the chat; the welcome message and placeholder should match your config.

4. Send a test message; the conversation should appear in your Inbox and your assigned bot (if any) can reply.

---

Troubleshooting

• Widget doesn’t appear — (1) Check that the domain is in Allowed domains (no typos, include www if you use it). (2) Make sure the script is on the page (view page source and search for the script). (3) Try a hard refresh (Ctrl+F5 or Cmd+Shift+R) or another browser.

• "Domain not allowed" or similar — Add the exact domain (and subdomain) to Allowed domains in Web Chat config and save.

• Wrong welcome message or title — Edit the campaign in Web Chat config, change the fields, save, and refresh the page where the widget is embedded.

• Chat works on one page but not another — Ensure the snippet is on every page where you want the widget, or that your tag manager fires on those pages.

---

Security and privacy

• Allowed domains prevent other sites from embedding your widget and impersonating you. Keep the list up to date and avoid using wildcards unless you need them (e.g. *.example.com for all subdomains).

• HTTPS — Use HTTPS on your site so the widget loads over a secure connection. Most setups require it in production.

• Data — Messages and contact data are handled according to your agreement and privacy policy. Don’t ask for sensitive data (e.g. full credit card) in chat unless your setup is designed for it and compliant.

For a shorter overview of connecting Web Chat and assigning a bot, see Connect a channel.