Embed Script

Add your chatbot to any website with a simple script tag.

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:

AttributeDescriptionDefault
data-chatbot-idYour chatbot's unique ID (required)—
data-positionWidget position: left or rightright
data-launcher-selectorCSS selector for your own button; hides the floating bubble—

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>

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.

CodeMeaning for your support team
CNX-EMBED-403The chatbot was explicitly disabled.
CNX-EMBED-424A language model has not been selected.
CNX-EMBED-429A confirmed usage limit was reached.
CNX-EMBED-503Settings or service availability could not be confirmed.

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

Tip:

Test your embed in a staging environment before deploying to production. This lets you verify styling and functionality without affecting live users.