> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getnexor.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Web Chat

> Configure the Web Chat widget, restrict its domains, and install Nexor's hosted loader on a website without npm.

Web Chat adds an inbound conversation widget to a website. Visitors can start a conversation with the Agent, but Web Chat is not available as the first outbound channel in a cadence.

<Note>
  If Agent Settings is not available for your role, ask an administrator of your Nexor account to configure and install the widget.
</Note>

## Open Web Chat settings

<Steps>
  <Step title="Open the Agent">
    Open the Agent and go to **Settings → Channels**.
  </Step>

  <Step title="Edit Web Chat">
    Find **Webchat** and choose **Edit**. Nexor opens the dedicated Web Chat editor for that Agent.
  </Step>

  <Step title="Save before installing">
    Configure the widget, select **Save changes**, and then test the installed widget on an allowed website.
  </Step>
</Steps>

The editor brings together three setup areas: behavior, design, and installation.

## Configure behavior

Use these controls to define the first experience and the Agent's writing style:

* **First message**: the message shown when a visitor opens the chat. It can include `{{first_name}}`, `{{last_name}}`, `{{full_name}}`, `{{email}}`, or `{{phone}}`.
* **Agent style**: free-text rules for tone, wording, and what the Agent should or should not do.
* **Example messages**: sample replies that demonstrate the preferred voice, length, and format.
* **Capture lead info**: ask for selected contact fields before the visitor can chat.

Lead capture can request **First name**, **Last name**, **Email**, and **Phone**. Select only the fields the team needs.

<Info>
  **Example messages** teach the Agent how to write. **Suggested questions** are clickable prompts displayed to visitors on the widget home screen. They serve different purposes.
</Info>

## Configure design

The design controls are grouped into these visible sections:

* **Identity**: Agent name, avatar, chat title, and chat subtitle.
* **Home screen**: a two-line home greeting, message card title, and up to four suggested questions.
* **Appearance**: accent color and a rounded or square shape.
* **Live preview**: switch between **Home** and **Chat** to review the result before saving.

The avatar accepts a public URL or an uploaded JPG, PNG, or WebP image up to 5 MB. The widget language follows the Agent's configured language.

## Add allowed domains

Open **Install**, then add the production hostnames where the widget should run.

* Enter a hostname such as `example.com`, without a protocol or path.
* Use a wildcard such as `*.example.com` when the same widget should run on that domain and its subdomains.
* You can save up to 50 entries.

The Web Chat key and its **Allowed domains** list belong to the workspace. Changing the list from one Agent affects other widgets that use the same workspace key.

<Warning>
  Add explicit domains before publishing the widget. A blank **Allowed domains** list does not currently block the standard widget, despite the empty-state message in the dashboard. Do not use a blank list as an off switch. The allowlist restricts requests when the browser reports a parent hostname, but it should not be the only control for sensitive information.
</Warning>

## Use the correct key

The **Install** section shows **API Key**, **Agent ID**, and **Client ID**. The widget key starts with `nxr_pub_` and is designed to appear in browser code.

<Warning>
  Never replace it with a REST key that starts with `nxr_live_`. A `nxr_live_` key is secret and must not be placed in HTML, JavaScript sent to a browser, screenshots, or a public repository.
</Warning>

## Install the hosted widget

The basic installation does not require npm. Under **Embed snippet**, use **Copy** to copy the generated values for the current Agent. The snippet has this shape:

```html theme={null}
<script async src="https://chat.getnexor.ai/w.js" data-workflow="..." data-key="nxr_pub_..."></script>
```

<Steps>
  <Step title="Copy from Nexor">
    Copy the complete **Embed snippet** from the Agent's **Install** section. Do not reuse IDs or keys from another workspace.
  </Step>

  <Step title="Paste it into the website">
    Add the script just before the closing `</body>` tag on every page that should show the widget.
  </Step>

  <Step title="Deploy and test">
    Publish the website, open it on an allowed hostname, and start a real conversation. Confirm the launcher, home screen, lead capture, and Agent reply.
  </Step>
</Steps>

This page covers the hosted loader copied from Nexor. It does not define the npm SDK or the REST API contract.

## Troubleshooting

### The launcher does not appear

Confirm that the script is present in the rendered page, that the `data-workflow` and `data-key` values came from the same Agent setup, and that the key starts with `nxr_pub_`. Also confirm that Web Chat is not disabled for the Agent.

### The site is not authorized

Add the exact production hostname under **Allowed domains**. Do not include `https://`, a port, or a path. Add a wildcard when subdomains need access.

### Changes do not appear in the widget

Select **Save changes**, reload the website without an old cached page, and open a new widget session. Use **Live preview** to confirm that Nexor saved the intended design.

### Nexor cannot load the Web Chat key

Reload the Agent settings and try again. Do not substitute a REST key while the public key is unavailable.

<Card title="Review Agent settings" icon="settings" href="/docs/en/guides/agents/settings">
  See how Web Chat fits with the Agent's language, prompts, and other channels.
</Card>