Chat Window

The chat window is the interface through which end users interact with Bavard chatbots (and live chat with human agents). The window can be published on any web page with a simple embedding script and works with all major browsers. It comes in two variants: popup and embed.

Popup Window

The popup window is the default. In this mode, the window appears in the lower right and can be opened and closed by the user. When a new message arrives while the window is closed, a popup messages appear. This happens at the start of every new conversation. Popup messages can be disabled from the settings page in the chatbot builder.

Embed Window

The embed window is simply a rectangular container that can be placed anywhere on the page. The chatbot is loaded into an IFrame inside that container div element. The width and height of the container are completely up to you, but we recommend at least 375px in width and 500px in height.

Technical Considerations

  • Browser localStorage and sessionStorage are required for the chat window to work in any mode. Thus, it will not work in "incognito" windows or in certain browsers stricter privacy settings (such as Brave).
  • Because the embedding script is loaded in defer mode, it does not significantly affect the loading speed of the parent page.

The HTML Embedding Script

The embedding script looks like this:

<script defer> window.addEventListener('bavardWidgetLoaded', () => { window.loadBavard({ agentId: '8ff16e93-0381-4583-b008-c4aeefd1a15f', type: 'popup', }); }); </script> <script defer src="https://bavard-widget-prod.web.app/main.bundle.js"></script>

The first script tag registers an event handler to load the chat window once the main bundle finishes loading. The second script tag loads the main JavaScript bundle.

The embedding script for embed mode is identical except the type property is embed and a div container with the id bavard-widget-container must be added to the page:

<script defer> window.addEventListener('bavardWidgetLoaded', () => { window.loadBavard({ agentId: '8ff16e93-0381-4583-b008-c4aeefd1a15f', type: 'embed', }); }); </script> <script defer src="https://bavard-widget-prod.web.app/main.bundle.js"></script> ... <div id="bavard-widget-container" style="height: 600px; width: 400px"></div>

Receiving Events for Chatbot Interactions

The parent window can listen for interaction events happening inside the chat window and react as it wishes.

Here's an example of how that works:

<script> (function () { window.onBavardUserAction = function (userAction) { if (userAction.utterance === 'close') { window.bavard.close(); } else if (userAction.utterance === 'hideWidget') { window.bavard.setVisibility(false); } else if (userAction.utterance === 'unload') { window.unloadBavard(); } }; })(); </script>

React Components

Bavard maintains an open source package of React components for easily including chatbots within any React app. These are available here: https://github.com/bavard-ai/bavard-react

© 2021 Bavard AI, Inc. All rights reserved.