Installing the Rekruti AI chatbot on your website

1. Installation

Add the following script tag just before the closing </body> tag on every page where the chatbot should appear.

<script src="https://cdn.rekruti.com/chatbot.v2.2.js"
        data-backend-url="wss://relay.rekruti.com/chatbot"
        data-client-key="YOUR-CLIENT-KEY"
        data-agent-key="YOUR-CHATBOT-CHANNEL-KEY"
        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.

You do not have to put this code together yourself: Rekruti sets up your agent and its chatbot, and gives you the integration code with your keys already filled in, ready to paste.

2. Configuration parameters

Set on the script tag.

3. Your keys

Two keys tell the relay who is answering:

• data-client-key — the key of your Rekruti account, a GUID such as 3f2a7b10-9c4d-4e21-8a6f-1b2c3d4e5f60. It is the same in every widget you install.
• data-agent-key — the key of your agent’s chatbot channel. Each channel of an agent has its own key: the chatbot, the voicebot and the job form of the same agent each have theirs, so a key taken from one widget does not work in another.

Both come with the integration code Rekruti gives you; there is nothing to look up. If a key is missing or malformed, the widget shows a configuration error and does not contact the server. If the keys are not recognized, the assistant replies “Invalid ai agent configuration”: check that the code on your page is exactly the one Rekruti provided.

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 bilingual 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 Staffing”:

<script src="https://cdn.rekruti.com/chatbot.v2.2.js"
        data-backend-url="wss://relay.rekruti.com/chatbot"
        data-client-key="YOUR-CLIENT-KEY"
        data-agent-key="YOUR-CHATBOT-CHANNEL-KEY"
        data-language="en"
        data-title="Acme Staffing"
        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; }

Text on the accent must stay readable: the default, white on #0c70a1, meets the WCAG AA contrast of 4.5:1. With a light accent of your own, 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 Rekruti 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 — ask Rekruti to try the chatbot with you before it goes on your site: you see it exactly as your visitors will.
• 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” — a key is still a placeholder, or is not recognized. Paste the code exactly as Rekruti gave it to you.
• 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.
• Not on this website — your widgets only work on the websites Rekruti has added to your account. See Websites of your widgets.

9. Complete example

A chatbot with every option set:

<script src="https://cdn.rekruti.com/chatbot.v2.2.js"
        data-backend-url="wss://relay.rekruti.com/chatbot"
        data-client-key="3f2a7b10-9c4d-4e21-8a6f-1b2c3d4e5f60"
        data-agent-key="YOUR-CHATBOT-CHANNEL-KEY"
        data-language="en"
        data-title="Acme Staffing"
        data-accent-color="#141056"
        data-accent-text-color="#FFFFFF"
        data-welcome="Hello! How can I help you today?"></script>