![Merrows](../assets/merrows-mark-lagoon.svg)

# Web chat on your website

## Purpose
Put your AI employee on your own website: create the website key, allow the sites it may load on, style the widget and install it.

## Prerequisites
- Owner or Manager of the business with permission to manage integrations.
- Access to your website's code, or to the WordPress, Wix, Squarespace, Webflow or Shopify admin where the widget is installed.

## Steps

### Step 1

![web-chat-widget-and-embed, step-01](../screenshots/web-chat-widget-and-embed/step-01.webp)

**Action:** Open Web Chat under Account & Access, or go to https://portal.merrows.ai/settings/web-chat.

**What you should see:** A business with no key yet is asked for its first website address, because the chat only loads on sites you list. Create website key wakes up once an address is typed.

### Step 2

![web-chat-widget-and-embed, step-02](../screenshots/web-chat-widget-and-embed/step-02.webp)

**Action:** Type the website address and click Create website key.

**What you should see:** The key is created and the page shows it with the websites it may load on, the appearance settings, the install snippet and the usage figures.

### Step 3

![web-chat-widget-and-embed, step-03](../screenshots/web-chat-widget-and-embed/step-03.webp)

**Action:** Add another website address if the widget runs on more than one site, and remove any you no longer use.

**What you should see:** The list accepts a hostname per row. A page on a site that is not listed does not load the chat, which keeps the key from being used elsewhere.

### Step 4

![web-chat-widget-and-embed, step-04](../screenshots/web-chat-widget-and-embed/step-04.webp)

**Action:** Set the appearance: accent colour, where the launcher sits, the greeting, and save.

**What you should see:** A preview shows the launcher and the open chat as visitors see them. Changes apply to every site on the key.

### Step 5

![web-chat-widget-and-embed, step-05](../screenshots/web-chat-widget-and-embed/step-05.webp)

**Action:** Copy the snippet, or open the install instructions for your platform.

**What you should see:** The snippet is one script tag to paste before the closing body tag. WordPress has a plugin; Wix, Squarespace and Webflow take the snippet in their custom code settings; Shopify installs it from the Merrows app.

### Step 6

![web-chat-widget-and-embed, step-06](../screenshots/web-chat-widget-and-embed/step-06.webp)

**Action:** Read the usage figures and, if the key has leaked, click Rotate key.

**What you should see:** Usage shows conversations over the last days. Rotate key asks you to confirm and then invalidates the old key: every site must get the new snippet before the chat loads again. Cancel keeps the key.

## Troubleshooting
- The widget does not appear on the site: the site's hostname is not in the list, or the snippet is on a page that loads it from another domain. Add the exact hostname, including www if the site uses it.
- The chat loads but the assistant answers for the wrong business: the snippet carries another business's key. Copy it again from this page.
- Visitors see a signed-in name: identified chat passes the visitor's details from your site; see the website embed documentation for the fields.