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:

Embed snippet
<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 with async so 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:

Identity and context (optional)
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:

Pick your platform
<!-- 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/script with strategy="afterInteractive". Survives client-side navigation; the conferbot-js guard 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:

PlatformWhere to paste the snippet
WebflowSite Settings > Custom Code > Footer Code
SquarespaceSettings > Advanced > Code Injection > Footer
WixSettings > 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:

Co-browse init call shape
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.