Installing the Rekruti AI voicebot on your website

1. Installation

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

<script src="https://cdn.rekruti.com/voicebot.v1.3.js"
        data-backend-url="wss://relay.rekruti.com/voice"
        data-client-key="YOUR-CLIENT-KEY"
        data-agent-key="YOUR-VOICEBOT-CHANNEL-KEY"
        data-language="en"></script>

That is all that is required. It places a floating phone button in the bottom-right corner of the page; the call card, the audio, the styling and the conversation are provided by the script, and nothing else needs to be installed on your server.

Rekruti gives you this code with your keys already filled in. Two conditions apply: the page must be served over HTTPS, as browsers only give a page the microphone on a secure connection, and your agent must have a voicebot channel, which Rekruti sets up for you.

2. Display styles

The same script offers three ways to present the voicebot, chosen with the data-container and data-collapsed attributes.

Floating button (default)

Without data-container, the voicebot is a round phone button fixed in the bottom-right corner, like a chat bubble. A click opens the call card above it.

• Beside the chatbot — when the Rekruti chatbot is on the same page, the phone button moves to the left of the chat bubble instead of covering it. The two scripts can be in any order.
• One panel at a time — the call card and the chat window open in the same corner, so opening one closes the other.
• A call is never forgotten — if the visitor hides the card during a call, the call goes on and the phone button turns green and pulses until it ends. Closing the card with its × button hangs up.

Inline card

With data-container, the full card is drawn inside an element of your page instead, for example on a careers or a contact page. Add an empty element where the card should appear, and point data-container at it with a CSS selector:

<div id="voice-demo"></div>
<script src="https://cdn.rekruti.com/voicebot.v1.3.js"
        data-backend-url="wss://relay.rekruti.com/voice"
        data-client-key="YOUR-CLIENT-KEY"
        data-agent-key="YOUR-VOICEBOT-CHANNEL-KEY"
        data-language="en"
        data-container="#voice-demo"></script>

The card takes the full width of its container, up to 420 px, centred in it. If the selector matches nothing, the script falls back to the floating button.

Compact inline card

Add data-collapsed="true" to an inline card to start it as a single row — the title, the status and a smaller call button — that opens into the full card when the call starts. It suits a sidebar or a narrow column.

<script src="https://cdn.rekruti.com/voicebot.v1.3.js"
        ...
        data-container="#voice-contact"
        data-collapsed="true"></script>

3. Configuration parameters

Set on the script tag.

4. Your keys

data-client-key is the key of your Rekruti account, a GUID such as 3f2a7b10-9c4d-4e21-8a6f-1b2c3d4e5f60, the same in all your widgets. data-agent-key is the key of your agent’s voicebot channel: it is not the key of its chatbot, as each channel has a key of its own, even when the same agent answers both. Both keys come with the integration code Rekruti gives you.

If a key is missing or malformed, the card shows a configuration error when the visitor starts a call, and the server is not contacted. If the keys are not recognized, the call does not go through: check that the code on your page is exactly the one Rekruti provided.

5. Language and voice

The data-language attribute sets the language of the card (status, buttons, messages), the language the speech is transcribed in, the language the agent answers in, and the voice it speaks with:

• en — English (default).
• fr — French.

Use only these two values. On a bilingual website, set the matching language on each page, and match data-title and data-welcome to it.

The voice itself is part of the agent, not of your page: Rekruti chooses it with you when it sets up the voicebot channel — a Quebec French voice for your French-speaking callers, for example. Changing it takes nothing in the code of your page.

6. Using it with the chatbot

The voicebot is designed to sit next to the Rekruti chatbot, so visitors choose between typing and talking. Add both scripts to the page. The client key is the same; each has the key of its own channel:

<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>
<script src="https://cdn.rekruti.com/voicebot.v1.3.js"
        data-backend-url="wss://relay.rekruti.com/voice"
        data-client-key="YOUR-CLIENT-KEY"
        data-agent-key="YOUR-VOICEBOT-CHANNEL-KEY"
        data-language="en"></script>

The phone button places itself to the left of the chat bubble, and only one of the two panels is open at a time. Note the two endpoints: /chatbot for the chatbot, /voice for the voicebot.

7. 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 #ncv-launcher { 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.

8. How it works

When the visitor starts a call, the browser asks for the microphone. The widget then streams the audio over a secure WebSocket to the Rekruti relay, which transcribes it as the visitor speaks; the words appear on the card as they are recognized. When the visitor pauses, the sentence goes to your AI agent, and its answer is turned into speech and streamed back, so the agent starts speaking within moments.

• Interruptions — the visitor can talk over the agent at any time, as on the phone: it stops speaking and listens.
• Time limit — calls are limited in length, five minutes at present. The card shows the time elapsed against the limit, and the agent says goodbye when it is reached.
• Busy lines — the number of calls at the same time is limited. When every line is taken, the visitor is asked to try again in a few minutes.
• Ending the call — the call ends when the visitor hangs up, closes the floating card, or leaves the page.
• If speech fails — if the voice is unavailable, the call goes on and the answers are shown as text on the card.

9. Testing and troubleshooting

• Test before you install — ask Rekruti to call your agent with you before the voicebot goes on your site.
• The button does not appear — check that the script URL is reachable and that the code is placed before </body>. After changing the code, hard-refresh the page (Ctrl+Shift+R).
• Microphone access denied — the visitor refused the microphone, or blocked it earlier. The card says so; it can be allowed again from the lock icon of the address bar.
• The microphone is not offered at all — the page is not served over HTTPS. Browsers only allow the microphone on secure pages (and on localhost for development).
• “Cannot reach the assistant” — the relay could not be reached or refused the call. Check the keys, the backend URL, and that the page is on one of the websites of your widgets.
• Nothing happens on an https:// page — the backend URL must start with wss://, not ws://.
• Browser not supported — the voicebot needs a recent Chrome, Edge, Firefox or Safari. Older browsers get a message instead of a call.
• The agent does not hear the visitor — add ?ncv-debug to the address of the page, or data-debug="true" to the script tag, and open the browser console during a call. It shows the microphone used, the sound level sent every two seconds, and every message of the relay. A level that stays at 0.000 while the visitor speaks means the browser uses the wrong microphone, or a muted one.

10. Complete example

A floating voicebot with every option set:

<script src="https://cdn.rekruti.com/voicebot.v1.3.js"
        data-backend-url="wss://relay.rekruti.com/voice"
        data-client-key="3f2a7b10-9c4d-4e21-8a6f-1b2c3d4e5f60"
        data-agent-key="YOUR-VOICEBOT-CHANNEL-KEY"
        data-language="en"
        data-title="Alicia"
        data-subtitle="Recruiting"
        data-welcome="Hello, I'm Alicia. How can I help you?"
        data-accent-color="#141056"
        data-accent-text-color="#FFFFFF"></script>