Installing the Netcoder AI chatbot on your website

Installation guide • Chatbot

The Netcoder chatbot is a lightweight widget you add to any website with a single tag of HTML. It places a floating chat button in the corner of your pages; visitors click it to talk to your AI agent. All the processing happens on Netcoder's servers: you only embed the script, and it works on any domain.

1. Installation

Add the following script tag just before the closing </body> tag on every page where the chatbot should appear. Replace the placeholder values with the ones for your account (see section 3).

<script src="https://cdn.netcoder.com/chatbot.v2.2.js"
        data-backend-url="wss://relay.netcoder.ca/chatbot"
        data-client-key="YOUR-CLIENT-GUID"
        data-agent-key="YOUR-AGENT-GUID"
        data-language="en"></script>

That is all that is required. The button, the chat window, the styling and the conversation handling are provided by the script; nothing else needs to be installed on your server.

The simplest way to get it is from the Netcoder app: open your AI agent, then Test & Deploy, Integration code. The code is shown with your keys already filled in, ready to copy.

2. Configuration parameters

Set on the script tag.

Attribute	Required	Description	Default
`data-backend-url`	Yes	Address of the Netcoder relay: `wss://relay.netcoder.ca/chatbot`
`data-client-key`	Yes	Your client key
`data-agent-key`	Yes	The key of your AI agent
`data-language`		`en`, `fr` or `es`	`en`
`data-title`		Title of the chat window	Assistant Netcoder
`data-accent-color`		Main colour	`#D97955`
`data-accent-text-color`		Colour of the text on the main colour	`#FFFFFF`
`data-welcome`		Greeting message	That of the language

3. Getting your keys

The client key and the agent key are GUIDs that identify your account and the AI agent that answers, for example 3f2a7b10-9c4d-4e21-8a6f-1b2c3d4e5f60. Both are shown in the Netcoder app, on the page of your AI agent, under Test & Deploy, Integration code, each with a button to copy it.

If a key is missing or malformed, the widget shows a configuration error and does not contact the server. If the keys are valid but not recognized, the assistant replies “Invalid ai agent configuration”: check the values in the app.

4. Language

The data-language attribute sets the greeting, the placeholder of the input, and the language the AI agent replies in:

en — English (default).
fr — French.
es — Spanish.

If the attribute is omitted or has another value, the widget falls back to English. On a multilingual website, set the matching language on each page: data-language="fr" on your French pages and data-language="en" on your English pages.

5. Branding and appearance

Match the widget to your brand with the title and the two colour attributes:

data-title — the header title.
data-accent-color — your main brand colour.
data-accent-text-color — the colour of the text and icons drawn on the accent colour.

Example, a blue assistant titled “Acme Support”:

<script src="https://cdn.netcoder.com/chatbot.v2.2.js"
        data-backend-url="wss://relay.netcoder.ca/chatbot"
        data-client-key="YOUR-CLIENT-GUID"
        data-agent-key="YOUR-AGENT-GUID"
        data-language="en"
        data-title="Acme Support"
        data-accent-color="#0057B8"
        data-accent-text-color="#FFFFFF"></script>

6. Styling with CSS

For more than the title and the two colours, style the widget from your own stylesheet. Its styles load after yours: start your selectors with body to win, rather than using !important.

body #nc-chat-button { right: 32px; bottom: 96px; }

Selector	What it is
`--nc-accent`	Variable: the main colour, from `data-accent-color`
`--nc-on-accent`	Variable: the text on it, from `data-accent-text-color`
`#nc-chat-button`	The floating button, 60 × 60 px
`#nc-chat-window`	The chat window, 340 × 480 px; `nc-open` when open
`#nc-chat-header`	The header bar
`#nc-chat-messages`	The messages; `.nc-msg` with `.nc-user` or `.nc-bot`
`#nc-chat-form`	The input and the send button

White text on the default #D97955 is below the WCAG AA contrast of 4.5:1: darken the accent, or use a dark text colour such as #1B1B1B.

7. How it works

When a visitor sends a message, the widget sends it over a WebSocket connection to the Netcoder relay. The relay passes it to your AI agent and pushes the reply back on the same connection as soon as it is ready, usually within a few seconds. The conversation is tracked with an identifier of the visitor kept in a cookie, so the context is kept from one message to the next during the visit.

There is no time limit on an answer: the widget keeps its connection open and receives the reply whenever it arrives. If the connection drops, it reconnects by itself with an increasing delay, and what was typed in the meantime is sent as soon as it is back. Errors — an unreachable relay, or a request refused — are shown in a red bubble, so they are never mistaken for an answer.

8. Testing and troubleshooting

Test before you install — in the Netcoder app, Test & Deploy on the page of your AI agent opens the chatbot exactly as your visitors will see it.
Clear the cache — after changing the code, hard-refresh the page (Ctrl+Shift+R) so the browser loads the new configuration.
“Invalid ai agent configuration” — the client or agent key is still a placeholder, or is not recognized. Copy the keys from the app.
A red error bubble — the assistant could not be reached, or the connection dropped before the answer arrived. Check the keys and the WebSocket URL, then try again.
Nothing happens on an https:// page — the backend URL must start with wss://, not ws://: browsers block an insecure WebSocket on a secure page.
Any domain works — the chatbot can be embedded on any website; nothing needs to be configured on your server.

9. Complete example

A chatbot with every option set:

<script src="https://cdn.netcoder.com/chatbot.v2.2.js"
        data-backend-url="wss://relay.netcoder.ca/chatbot"
        data-client-key="3f2a7b10-9c4d-4e21-8a6f-1b2c3d4e5f60"
        data-agent-key="a1b2c3d4-e5f6-4788-9a0b-1c2d3e4f5a6b"
        data-language="en"
        data-title="Assistant Netcoder"
        data-accent-color="#D97955"
        data-accent-text-color="#FFFFFF"
        data-welcome="Hello! How can I help you today?"></script>

Need help, or an AI agent of your own? Book a meeting or write to us.