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?.
• 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:

<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?.

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.