← Help center

Connect a Web Chat sender

Web Chat adds a chat widget to your website so visitors can message your assistant and your team. Create a separate Web Chat sender for each website where you install the widget.

Create and install Web Chat

1. Open Admin → Senders and select Connect Web chat widget.
2. Enter a Site name so you can identify the website in Yapper.
3. Add the website's origin under Allowed origins (one per line), or leave it empty and add it later.
4. Select Create widget.
5. On the new Web Chat sender, copy the Embed snippet and paste it into your website's HTML. Keep the complete snippet together and install it on every page where visitors should be able to chat.

The widget is ready after the snippet is installed and the page's origin is allowed. Customers who message through it are added to your Address book automatically.

Allowed origins and an offline widget

An origin is the site's scheme, host, and optional port. Enter one origin per line, for example:

https://www.example.com
https://shop.example.com
http://localhost:3000

Do not enter a page path such as https://www.example.com/pricing. A different subdomain, scheme, or port is a different origin, so add each one that will host the widget. https://example.com and https://www.example.com must be listed separately. Use the canonical origin without a trailing slash; do not rely on a page path or a different subdomain matching it.

If Allowed origins (one per line) is empty, the widget is offline. The sender card displays This widget is offline — add at least one allowed origin below to accept messages. If a visitor opens the widget from an origin that is not listed, the widget cannot connect or send messages. Edit the origins on the sender card and select Save settings.

Configure the visitor experience

On the Web Chat sender card, use Save settings after changing any of these fields:

• Pre-chat form: off does not show a form; optional asks for a visitor's name or email before the first message and lets them skip it; required asks for at least a name or email before the first message. Once a visitor has provided one, Yapper does not ask them again for that sender.
• Theme color: Sets the widget's accent color for the header, message bubbles, and buttons.
• Profile picture: Click the sender's picture on the Senders page to set it. It displays as the avatar beside the assistant's messages in the widget.
• Greeting: Sets the first greeting shown in the widget. While you are still setting up your assistant, the widget opens without it, and messages sent through it get no reply; your setup chat runs on the setup page instead.
• Launcher text: Sets the launcher's tooltip text.

Rotate the embed key

Select Rotate embed key, confirm with Rotate, then replace the old snippet on your website with the new Embed snippet. The old key stops working immediately. Until every copy of the snippet is replaced, that copy of the widget cannot start a new chat or refresh its connection.

When visitors receive messages

Web Chat is a live website conversation. Visitors receive assistant messages while the widget's website tab is open. If they leave or close the tab, messages are kept in the conversation and appear when they return and open the widget again.

Web Chat is not a proactive outreach channel: Schedules and follow-up batches do not send to Web Chat. Use a supported messaging sender for scheduled outreach.