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.

Answers that appear as they're writtenCopy Anchor Link

When an AI node answers in the chat, the customer sees the answer grow as the model writes it, in one message that the finished answer then replaces. This happens when:

• the node's answer goes to the customer as written: it's the last node in its branch, and has no tools, exit conditions, UI components, response template or integration triggers, with text output;
• the node uses OpenAI, Anthropic, Google, Groq or Mistral.

Any other answer arrives whole, as before, while the chat shows the typing indicator. An answer that starts like JSON or code also arrives whole, because the bot reshapes it before sending it. Republish the chatbot to turn this on.

Voice notesCopy Anchor Link

When the project answers voice notes, the chat shows a microphone button in place of send while the message box is empty. The customer records a note of up to 5 minutes, and the bot transcribes it and answers it like a typed message. If you embed the chat in your own iframe, add allow="microphone" to it; the snippets here already include it.

Live voiceCopy Anchor Link

When the project offers live voice conversations, the chat shows a Talk button beside the microphone while the message box is empty. The customer talks with the bot out loud, hears each answer, and sees the conversation as text in the chat. Live voice uses your plan's voice minutes. The iframe needs allow="microphone", as for voice notes.

TroubleshootingCopy Anchor Link

RelatedCopy Anchor Link