Web Widget
Embed the Conferbot chat widget on any website with one script tag. This page is the canonical embed contract - every official platform module (WordPress, Shopify, PrestaShop, and the rest) wraps exactly this snippet in the platform's native extension mechanism.
One credential: your bot ID
The only thing the embed needs is the Chatbot ID - the 24-character hex ID from your Conferbot Dashboard (Bot Settings > General, or Share > Copy Bot ID). No API key or workspace ID required. For evaluation, the public demo bot 691c970890527a0468f9b2c9 works without an account.
The embed snippet
Paste this before the closing </body> tag. It loads the widget script asynchronously from the CDN, guards against double insertion via the conferbot-js element ID, and initializes the widget once the script has loaded:
<script type="text/javascript">
(function (d, s, id) {
var js, el = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.async = true;
js.src = 'https://cdn.conferbot.com/dist/v1/widget.min.js';
js.id = id; js.charset = 'UTF-8';
el.parentNode.insertBefore(js, el);
js.onload = function () { window.ConferbotWidget('YOUR_BOT_ID', 'live_chat'); };
})(document, 'script', 'conferbot-js');
</script>The pieces that matter:
- Script URL:
https://cdn.conferbot.com/dist/v1/widget.min.js, loaded withasyncso it never blocks page rendering. - Guard ID: the script element gets
id="conferbot-js". If an element with that ID already exists, the snippet is a no-op - safe to include twice. - Initialization: after load, call
window.ConferbotWidget(botId, embedType, options?).
Embed types
The second argument, embedType, is exactly one of three strings:
"live_chat"- a floating chat bubble in the page corner. The default experience and what the platform modules use."popup_chat"- a modal chat window."fullpage_chat"- a full-page chat that opens automatically, useful for dedicated support pages.
Visitor identity and context
The optional third argument passes visitor identity and page context to the widget. options.user and options.customDatabecome the visitor's identity and context in Conferbot chats, so the bot and your human agents see who they are talking to. This is exactly what the platform modules use to attach the logged-in customer and store data:
window.ConferbotWidget('YOUR_BOT_ID', 'live_chat', {
user: {
id: 'customer-42',
name: 'Jane Doe',
email: '[email protected]',
},
customData: {
platform: 'prestashop',
storeName: 'My Store',
cartTotal: 129.9,
},
});user- the logged-in visitor:id,name,email. Omit it entirely for guests.customData- arbitrary key/value context (store name, cart total, plan, page type, ...). Shown alongside the conversation in the Conferbot inbox.
All appearance and behavior settings - position, colors, theme, language, auto-open, proactive prompts, disabled URLs - are configured in the dashboard under Customize and delivered to the widget at runtime. No redeploy needed when you restyle the bot.
Framework and platform snippets
The dashboard's embed screen (Share > Embed) offers platform tabs - HTML, React JS, Next.js, WordPress, Webflow, Wix, Squarespace, Shopify, and Admin Dashboard. With two exceptions (Next.js and Admin Dashboard, below), every tab emits the identical canonical loader from the top of this page - one loader, many homes. The only thing that changes per platform is where you paste it.
Pick your platform - the tabs below match the dashboard's embed screen:
<!-- Paste before the closing </body> tag -->
<script type="text/javascript">
(function (d, s, id) {
var js, el = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.async = true;
js.src = 'https://cdn.conferbot.com/dist/v1/widget.min.js';
js.id = id; js.charset = 'UTF-8';
el.parentNode.insertBefore(js, el);
js.onload = function () { window.ConferbotWidget('YOUR_BOT_ID', 'live_chat'); };
})(document, 'script', 'conferbot-js');
</script>- HTML: works on any website or template - paste once in the shared layout.
- Next.js: the one framework with a different shape -
next/scriptwithstrategy="afterInteractive". Survives client-side navigation; theconferbot-jsguard makes re-renders a no-op. - React (CRA, Vite, SPAs): the shell loads once, so either placement works and the widget survives route changes.
Site builders
Webflow, Squarespace, and Wix all take the unchanged canonical snippet - each just has its own custom-code slot:
| Platform | Where to paste the snippet |
|---|---|
| Webflow | Site Settings > Custom Code > Footer Code |
| Squarespace | Settings > Advanced > Code Injection > Footer |
| Wix | Settings > Custom Code > add code to Body - end |
For WordPress, Shopify, and the other platforms with first-class modules, prefer the dedicated module over the manual snippet - it installs the same loader and additionally passes the logged-in customer and store context. See the Platform Integrations overview for each module's own page.
Admin Dashboard
The Admin Dashboard tab is instructions rather than code - it covers embedding into a product that already ships the Conferbot integration in its own admin. In that product's admin, go to Settings > Chatbot, enable the chatbot toggle, paste your Bot ID, select the display type (Widget/Live Chat, Popup Chat, or Full Page Chat), and save. The widget appears for all team members on the next page load.
Co-browse add-on (optional)
The embed screen can optionally append a second loader for the co-browse SDK (cobrowse-sdk.js, served from the API host - by default https://api.conferbot.com/public/cobrowse-sdk.js). It lets a live agent co-browse the visitor's page when a chat escalates to a human: the elements matching your CSS mask selectors are hidden from the agent's view, and remote control of the page is strictly opt-in. On load, the SDK is initialized with:
window.ConferbotCobrowse.init({
botId: 'YOUR_BOT_ID',
socketUrl: 'https://api.conferbot.com',
maskSelectors: ['.card-number', '#account-balance'],
allowRemoteControl: false,
});The generated snippet also registers a message event listener for conferbot:escalation-session-created that calls ConferbotCobrowse.joinEscalationSession(session) when an agent escalation starts (buffering the session if the SDK is still loading).
Generate it, don't hand-write it
Rather than hand-writing the loader and listener boilerplate, enable it in the dashboard - Share > Embed > Enable co-browse - and copy the generated snippet. The dashboard fills in your bot ID, socket URL, mask selectors, and remote control setting.
Runtime host
The CDN only serves the widget script. At runtime the widget resolves your bot's configuration and exchanges messages with wdt.conferbot.com over Socket.IO - everything is resolved server-side from the Chatbot ID. If your site enforces a Content Security Policy, allow cdn.conferbot.com for scripts and wdt.conferbot.com for connections.
Troubleshooting
Widget blank after install?
Confirm the bot is published in the dashboard and the Chatbot ID is the 24-character hex value. A wrong or draft bot ID fails silently with an invisible widget. Testing with the demo bot 691c970890527a0468f9b2c9 isolates whether the problem is your embed or your bot configuration.
- Widget appears but ignores your styling changes: styling is fetched at runtime - hard-refresh the page after saving dashboard changes.
- Widget missing on some pages only: check the bot's disabled URLs and load-delay settings in the dashboard.
- Using a platform like WordPress or Shopify? Skip the manual snippet and install the official module instead - it also passes the logged-in customer and store context automatically.