Presence Widget

The Presence Widget is a JavaScript-based chat interface that you embed on any website. It allows visitors to start conversations with your agents, trigger flows, and interact with your platform workspace — without leaving the page.

Quick setup

Add the following script to any HTML page, just before the closing </body> tag:

<script type="text/javascript">
  var bv_channelId = "YOUR_CHANNEL_ID";
  var bv_language = "fr";

  (function () {
    var s = document.createElement("script");
    s.async = true;
    s.src = "https://cdn.bivariant.com/presence.js";
    var parentNode = document.head || document.body;
    parentNode.appendChild(s);
  })();
</script>

Replace YOUR_CHANNEL_ID with the channel ID from your workspace.

Configuration

The widget accepts two configuration variables, set as globals before the script loads:

How it works

1. Visitor loads the page — the script loads asynchronously from the Bivariant CDN and renders a chat button.
2. Visitor opens the widget — clicking the button opens a chat interface.
3. Conversation is created — the platform creates a conversation in the space associated with the channel.
4. Messages are routed — incoming messages are routed to the agent or flow connected to the channel.
5. Responses stream back — agent or flow responses are delivered to the widget in real time.

Getting the channel ID

1. Open your workspace dashboard
2. Navigate to Channels → Presence Widget
3. Create a new channel or select an existing one
4. Copy the Channel ID from the settings panel

Placement

Single-page applications

For React, Vue, Angular, or similar frameworks, add the script to your main index.html or load it dynamically in a component:

useEffect(() => {
  window.bv_channelId = "YOUR_CHANNEL_ID";
  window.bv_language = "en";

  const script = document.createElement("script");
  script.async = true;
  script.src = "https://cdn.bivariant.com/presence.js";
  document.body.appendChild(script);

  return () => {
    document.body.removeChild(script);
  };
}, []);

Static sites

Place the script in your site's HTML template. It works with any static site generator — Hugo, Jekyll, Astro, or plain HTML.

CMS platforms

For WordPress, Webflow, or similar platforms, add the script through the platform's "custom code" or "embed" feature, typically in the site-wide footer section.

Behavior

The widget:

• Loads asynchronously — does not block page rendering
• Persists conversations — returning visitors see their previous conversation history
• Supports real-time messaging — messages appear instantly without page refresh
• Adapts to mobile — the widget is responsive and works on all screen sizes
• Respects the language setting — UI labels and system messages use the configured language

Related concepts

• Channels — overview of all channel types
• Conversations — how widget messages become conversations
• Agents — connect AI agents to handle widget conversations
• Flows — trigger workflows from widget interactions