# Add chat to your website

> Create a website chat channel, style the widget and get the snippet to put on your site.

Source: https://docs.message24.net/owners/channels/website-chat/

Website chat puts a chat button on your own website. Visitors chat with your team and the AI directly, and their conversations appear in your Inbox next to your other channels. You create the widget in Message24, then add one line of code to your site.

## Create the widget

1. Go to **Settings > Channels** and select **Add Channel**.
2. On the **Web Chat** card, select **Connect**.
3. On **Create Web Chat**, enter a **Channel Name**. This is the name you see in Message24.
4. Adjust the appearance and visitor form (see below), or leave the defaults and change them later.
5. Select **Create Channel**.

The page becomes **Web Chat Settings** and shows your **Embed Code** at the top.

To add another widget, for example for a second website, go back to **Add a Channel** and select **Add Another Widget**.

## Widget settings

### Appearance

- **Primary Color**: pick one of the preset colours or choose your own.
- **Widget Position**: **Bottom Right** or **Bottom Left** of the page.
- **Launcher Motion**: **None**, or **Bounce** to catch a visitor's eye. The bounce stops once they open the chat.
- **Input Placeholder**: the hint text in the message box, such as "Type your message...".

### Header and welcome

- **Business Name**: shown in the chat header. If you leave it empty, the channel name is used.
- **Business Logo URL**: the web address of your logo image. Optional.
- **Welcome message**: the first message visitors see. If you leave it empty, visitors see "Hi! How can we help?".

### Visitor details form

Choose what visitors must fill in before they can chat:

- **Name**: turn on to require the visitor's name.
- **Phone**: turn on to ask for a phone number. Tick **Required** to make it mandatory.

### Allowed origins

List the websites allowed to show your widget, one per line, for example:

```
https://example.com
https://shop.example.com
```

If you leave this empty, the widget works on any website. Once you add addresses, it works only on those.

The checkbox **Allow requests with no Origin header** is for a mobile app or other embedded use by your developer. Leave it off for a normal website.

Select **Save Settings** after making changes.

## Put the widget on your website

1. In **Web Chat Settings**, select **Copy** next to **Embed Code**. The code is a single line that looks like this:

   ```html
   <script src="https://message24.net/widget.js" data-channel-key="your-channel-key" async></script>
   ```

2. Paste it into your website's HTML, just before the closing `</body>` tag, on every page where the chat should appear. If someone else runs your website, send them the code and the [developer embed guide](/developers/website-chat/embed-widget/).
3. Open your website. The chat button appears in the corner you chose.
4. Send a test message and check that it arrives in your Inbox.

If you added allowed origins, make sure your website's address is in the list, including `https://` and any `www.`.

## Change settings later

Go to **Settings > Channels**, open the **...** menu on the web chat channel and select **Webchat Settings**. Changes to colours, text and the visitor form apply to the widget already on your site. You don't need to change the embed code.

## Regenerate the key

If your embed code has been copied somewhere it shouldn't be, select **Regenerate key** in **Web Chat Settings** and confirm.

:::caution
Regenerating the key stops the widget working on every site that uses the old embed code. Copy the new embed code and replace the old one on your website straight away.
:::

## Disconnect and reconnect

Open the **...** menu on the channel in **Settings > Channels** and select **Disconnect channel** to turn the widget off. Your conversations are kept. To turn it back on, select **Reconnect channel**. Web chat reconnects immediately, with no sign-in.

## Related

- [Channels overview](/owners/channels/overview/)
- Developers: [Embed the widget](/developers/website-chat/embed-widget/) and [Website chat overview](/developers/website-chat/overview/)