👋 How can we help?

All practical tips to grow your business with messaging.

All CollectionsConversation GrowthWebsite Chat Widget: Installation & Setup

Website Chat Widget: Installation & Setup

Install the Bugalou live chat widget on your website to start conversations with visitors. Learn how to activate, embed, test, and manage allowed domains.

Overview

The Website Chat widget lets you add a live chat button to your website so visitors can start conversations with your team — or with your AI chatbot — directly from any page. Available on every plan, including the free plan (1 user, up to 50 conversations a month). The AI chatbot is part of Pro and Enterprise.

Watch: live chat on WordPress in 45 seconds

Steps and transcript on the video page →

Getting to the Widget Settings

Navigate to Channels in the sidebar, then click "Manage" (or "Connect") on the Website Chat card. This opens the Website Chat configuration page with six tabs: Installation, Pre-chat Form, Appearance, Autoresponder, FAQ, and Behavior.

Activating the Widget

On the Installation tab, you'll find the Widget Status card with a toggle switch. Turn it on to activate the widget on your website. The status indicator will change to a green "Active" badge.

Using WordPress, WooCommerce or Shopify? Install the plugin (no code)

On these platforms you don't need to copy the installation code:

Your banners appear on the site together with the chat. On any other site, use the installation code below.

Embedding the Code

Below the status toggle you'll find the Installation Code card. It contains a JavaScript snippet like this:

<script src="https://yourdomain.com/widget/loader.js"
  data-widget-key="your-unique-key"></script>

Click the "Copy" button to copy the snippet to your clipboard. Paste it just before the closing </body> tag on every page where you want the chat widget to appear.

Testing Your Installation

Use the Test Installation card to verify the widget is working:

  1. Enter your website domain (e.g. example.com) in the text field
  2. Click "Test Installation"
  3. A success or error message will appear telling you whether the widget was detected

Allowed Domains

In the Allowed Domains card you can restrict which domains are allowed to load the widget:

  • Enter a domain (e.g. *.example.com for all subdomains) and click the + button to add it
  • Each domain appears in a list with a remove button
  • If no domains are specified, the widget works on any domain

Click "Save Changes" to persist your settings.

Widget works, but missing live updates?

If the chat itself works but messages arrive slowly, or statuses like "online"/"typing" never appear, your website's Content Security Policy (CSP) may be blocking our real-time connection (Pusher). This is most common on custom-built storefronts (e.g. Shopify Hydrogen) or sites where a cookie-consent/security app manages the CSP.

Check this by opening your browser console (F12) — if you see an error referring to js.pusher.com being blocked by your CSP, add the following to your website's CSP settings:

  • script-src: https://js.pusher.com
  • connect-src: https://*.pusher.com and wss://*.pusher.com

Contact whoever manages your website's technical setup (developer, agency, or your CSP tool's support) to make this change.

Tip

If you use a CMS like WordPress, you can add the widget code via a plugin like "Insert Headers and Footers" or paste it in your theme's footer template.

Back to Conversation Growth