Embed Script

Embed Script

The simplest way to add your ChatNexus chatbot to any website. Just add one line of code.

Quick Start

1. Navigate to Deploy in the left sidebar
2. Copy the generated embed code
3. Paste it before the closing </body> tag of your website

<script
    src="https://embed.chatnexus.io/scripts/embed.js"
    data-chatbot-id="YOUR_CHATBOT_ID">
</script>

Configuration Options

The embed script supports these data attributes:

The embed runtime applies the launcher's CSS width and height independently, which supports non-square artwork. The dashboard’s default launcher-size control keeps both values equal for a balanced starting point; custom integrations can override either dimension with their own CSS.

Use Your Own Button

For an internal app, you can place the chat trigger wherever it fits your interface. Add a normal, accessible button, then point the embed script to it. ChatNexus hides its floating bubble and opens the same chat window from your button.

<button id="support-chat" type="button">Chat with support</button>

<script
    src="https://embed.chatnexus.io/scripts/embed.js"
    data-chatbot-id="YOUR_CHATBOT_ID"
    data-launcher-selector="#support-chat">
</script>

You can also open the widget from your application code after the script has loaded:

window.ChatNexus.open("YOUR_CHATBOT_ID")

window.ChatNexus.close("YOUR_CHATBOT_ID") and window.ChatNexus.toggle("YOUR_CHATBOT_ID") are available too. The launcher automatically receives the correct accessibility state for screen-reader and keyboard users.

Configure the widget in ChatNexus

Open Chatbot → Settings → Embed appearance to control the visitor experience without editing your website code:

• Floating launcher — choose the launcher image, position, size, and CSS corner style (Soft corners or Circle).
• Show floating launcher — turn the floating button off when you use a custom launcher or an inline embed.
• Chat appearance — upload the assistant icon, choose whether it appears beside assistant messages, set its corner style, and customize colors.

These settings apply to the standard embed, custom launchers, and the inline chat experience. The custom launcher only changes how visitors open the chat; it does not create a separate chatbot or conversation history.

The Developers panel in the dashboard includes copy-ready examples for the standard embed, custom launcher, inline iframe, and window.ChatNexus.open() command.

Show Chat Inline

Use the direct chat URL when the chat should be permanently visible inside an app page, such as a support portal. This does not add a floating launcher.

<iframe
    src="https://embed.chatnexus.io/chatbot/YOUR_CHATBOT_ID"
    title="Support chat"
    style="width: 100%; min-height: 620px; border: 0;">
</iframe>

Enable Voice in an Embedded Chat

The standard ChatNexus embed script already creates the chat iframe with the required microphone and autoplay permissions. Most websites need no additional HTML changes. Visitors are still asked by their browser to allow microphone access when they start a live voice conversation.

If voice works in ChatNexus but not on one particular website, check that website's response headers for a restrictive Permissions Policy. A header such as this blocks microphone access before the visitor can grant permission:

Permissions-Policy: microphone=()

Remove the microphone=() restriction, or allow the ChatNexus embed origin in the site's server configuration:

Permissions-Policy: microphone=(self "https://embed.chatnexus.io")

This is a server/header configuration issue, not normally an HTML issue. If you create the iframe manually instead of using the ChatNexus script, include the permission explicitly:

<iframe
    src="https://embed.chatnexus.io/chatbot/YOUR_CHATBOT_ID"
    title="Support chat"
    allow="autoplay; microphone"
    style="width: 100%; min-height: 620px; border: 0;">
</iframe>

When the policy blocks voice, Chrome DevTools may show Permissions policy violation: microphone is not allowed in this document, and the widget may show Permission denied or Voice connection needs attention. After changing the header, redeploy the website and hard-refresh the page before testing again.

Availability Status Codes

If an embed cannot start, it shows a generic unavailable message and a small reference code instead of exposing account or configuration details. The code is also available on the root element as data-chatnexus-status for support tooling.

How It Works

• The script loads asynchronously — it won't slow down your page
• Resources are lazy-loaded — the chat widget only loads when needed
• All communication uses HTTPS encryption
• The widget is fully responsive and works on mobile devices