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
- Navigate to Deploy in the left sidebar
- Copy the generated embed code
- 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:
| Attribute | Description | Default |
|---|---|---|
data-chatbot-id | Your chatbot's unique ID (required) | — |
data-position | Widget position: left or right | right |
data-launcher-selector | CSS 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.
| Code | Meaning for your support team |
|---|---|
CNX-EMBED-403 | The chatbot was explicitly disabled. |
CNX-EMBED-424 | A language model has not been selected. |
CNX-EMBED-429 | A confirmed usage limit was reached. |
CNX-EMBED-503 | Settings 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.