Web chat widget

The web chat widget puts your chatbot on any website: a floating chat button in the corner of the page, or a chat window embedded in the page itself. It needs no account with another provider; you create an embed token, copy a snippet and paste it into your site.

Everything for the widget is on the chatbot project's Settings›Chat Widget tab.

Add the widget to your siteCopy Anchor Link

CustomisationCopy Anchor Link

Center opens the chat as a centred modal. Leave Trigger Text empty for an icon-only chat button.

OptionsCopy Anchor Link

Auto messages send a message after a delay (in milliseconds) when their conditions match, optionally with buttons and quick replies.

Sessions and feedbackCopy Anchor Link

Under Session Management:

• Auto-end inactive sessions with an Inactivity Timeout (minutes).
• Show feedback after session end, with thumbs, multiple-choice or text questions.
• Allow session restart, on by default.

For satisfaction surveys across all channels, use the project's CSAT settings tab instead. See CSAT.

Control the widget from your pageCopy Anchor Link

JavaScript snippetCopy Anchor Link

The JavaScript snippet sets window.__buni and loads the widget script:

<script>
  window.__buni = window.__buni || {};
  window.__buni.embedToken = 'YOUR_EMBED_TOKEN';
  window.__buni.theme = 'light';
  window.__buni.position = 'bottom-right';

  (function (d, s, id) {
    var js, bjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id; js.async = true;
    js.src = 'https://<your Buni.ai domain>/api/embed/widget?token=' + encodeURIComponent(window.__buni.embedToken);
    bjs.parentNode.insertBefore(js, bjs);
  }(document, 'script', 'buni-widget-js'));
</script>

Once loaded, the script exposes window.BuniAIWidget with open(), close() and toggle(), so a button on your page can open the chat:

<button onclick="window.BuniAIWidget && window.BuniAIWidget.open()">Chat with us</button>

iframe embedCopy Anchor Link

The iframe code loads the chat from:

https://<your Buni.ai domain>/embed/chat?token=YOUR_EMBED_TOKEN&embedded=true

The app writes your saved settings into the URL as query parameters. The most useful ones to change by hand:

Messages between your page and the iframeCopy Anchor Link

An embedded chat accepts commands from the page that contains it through postMessage. For security, it ignores everything until your page sends a handshake, and then accepts messages only from that page's origin.

const chat = document.getElementById('buni-chat').contentWindow;
const origin = 'https://<your Buni.ai domain>';

// 1. Handshake first
chat.postMessage({ type: 'buni:parent_handshake' }, origin);

// 2. Then send commands
chat.postMessage({ type: 'sendMessage', data: { message: 'I need help with my order' } }, origin);
chat.postMessage({ type: 'theme-change', data: { theme: 'dark' } }, origin);

The chat posts events back to your page, including ready, visibility_changed, minimized, maximized, new_message and chat_cleared. Listen with window.addEventListener('message', ...) and check event.origin.

Framework packagesCopy Anchor Link

The React, Next.js, Vue and Angular tabs generate code for the @buni.ai/chatbot-react, @buni.ai/chatbot-vue and @buni.ai/chatbot-angular packages. Install the package for your framework and paste the generated component. The WordPress tab generates a snippet for your theme.

TroubleshootingCopy Anchor Link

RelatedCopy Anchor Link