---
title: How do I add the support chat widget to my website?
question: add the chat widget
area: support
order: 2
surface: both
audience: beginner
keywords: [widget, chat widget, embed, snippet, script tag, install chat, add chat to website, site key, ck_, data-key, data-name, data-accent, allowed domains, copy snippet, instance, bubble]
related: [what-is-codus-support, how-do-i-connect-a-support-chat-to-a-project, what-do-my-visitors-see-in-the-chat, why-cant-my-visitor-see-replies, what-do-the-conversation-states-mean]
updated: 2026-07-21
---

# How do I add the support chat widget to my website?

In codus, open the **chats** tab, click **▶ instances**, and create an instance for your product. It binds to the project you have open automatically. Expand the new instance and click **copy embed snippet**. Paste that one line of `<script>` into your website's HTML, ideally immediately before the closing `</body>` tag. A chat bubble appears in the corner of your site, and every message a visitor sends lands back in the **chats** tab.

## Before you start

- You need the **Support** module and to be signed in to codus cloud. See [What is codus Support?](what-is-codus-support.md).
- You need to be able to edit your website's HTML, or paste a `<script>` tag into it. Many site builders and content systems have a "custom code" or "header/footer scripts" box for exactly this.
- Decide which product this chat is for. Each product you support gets its own instance and its own snippet.

## Step 1: create an instance

An "instance" is one product or website you put the widget on.

1. Open the project in codus and click **chats** in its sidebar.
2. Click **▶ instances** in the bar near the top.
3. In the form at the bottom, type your product's name into **New instance — product name**.
4. Optionally type the domains your site runs on into **Allowed domains, comma-sep (empty = any)**, for example `app.example.com, *.example.com`.
5. Leave the project dropdown on the current project (it is filled in for you), and click **create**.

The instance is created with its own secret site key, and it opens so you can copy the snippet.

## Step 2: copy the snippet

Expand the instance and click **copy embed snippet**. The button changes to **✓ copied**. The snippet looks like this:

```html
<script src="https://app.trycodus.com/widget.js" data-key="ck_XXXXXXXX" data-name="Your product" async></script>
```

What each part does:

- **`src`** points at the widget script, hosted by codus. You do not host anything yourself.
- **`data-key`** is your instance's public site key (it always starts with `ck_`). It is safe to have in your page's source, the same way a public analytics key is. Your allowed-domains list is what stops anyone else from using it.
- **`data-name`** is the product name shown at the top of the chat window and in its greeting.
- **`async`** lets the script load without holding up your page.

## Step 3: paste it into your site

Paste the line into your website's HTML, immediately before the closing `</body>` tag. That is the safest spot: the page finishes drawing first, then the bubble appears. If your platform has a "footer scripts" or "custom code" field, paste it there.

The widget adds nothing to your layout. It draws its own bubble in a bottom corner and keeps its styling to itself, so it will not clash with your site's design.

## Optional: colour and side

You can tune two things from the instance card:

- **accent**: type a hex colour like `#0f766e` into the **accent** field. It sets the bubble and button colour. The copied snippet then includes a `data-accent` attribute.
- **side**: the bubble sits in the bottom-right by default. To move it to the bottom-left, add `data-position="left"` to the snippet by hand. There is no button for this in codus yet, so you edit the snippet you pasted.

## How do I know it worked?

Open your website. Within a second or two you should see a round chat button in the corner. Click it, type a message, and send it. Then look at codus: the conversation appears in the **chats** tab in real time, and you can watch the agent reply. If you send a test from your own machine, `localhost` is always allowed, so it works even before you have set any domains.

## Common problems

**The bubble does not appear.** Check the snippet actually made it into the live page (view the page source and search for `widget.js`). If your site is a single-page app that swaps pages without a full reload, the widget still mounts once and stays put, so that is not the issue.

**Messages send but no reply ever comes back.** This is almost always the allowed-domains list. If your site's domain is not on the list, the widget can post a message but is blocked from reading replies, so the visitor sees their own message and nothing after it. See [Why can't my visitor see replies?](why-cant-my-visitor-see-replies.md).

**Anyone could copy my key.** They could read it, but not use it. A key only works from a domain on its allowed list (empty means any, which is convenient while testing but worth locking down before launch). Set your domains in the instance's **domains** field.