Overview

The Bugalou Website Chat widget lets your website visitors start a conversation directly from your site. Messages appear in your team inbox just like WhatsApp and email, so your team handles everything from one place.

Step 1: Open the Website Chat settings

In your Bugalou dashboard, click "Channels" in the left sidebar to open the Channel Catalog. Find the "Website Chat" card (it has the "Popular" badge) and click "Connect" (or "Manage" if already set up).

Step 2: Activate the widget

On the Website Chat page, you'll see 6 tabs. Start on the "Installation" tab:

1. Under "Widget Status", toggle the switch to "Active" — this makes the widget visible on your website
2. Copy the Installation Code shown on the page

Step 3: Install the widget code

Paste the installation code just before the closing </body> tag on your website. The code looks like this:

<!-- Bugalou Website Chat Widget -->
<script>
  (function() {
    var w = window;
    var d = document;
    w.BugalouWidget = w.BugalouWidget || {};
    w.BugalouWidget.key = 'YOUR_WIDGET_KEY';
    var s = d.createElement('script');
    s.type = 'text/javascript';
    s.async = true;
    s.src = 'https://bugalou.com/widget/loader.js';
    var x = d.getElementsByTagName('script')[0];
    x.parentNode.insertBefore(s, x);
  })();
</script>

Platform-specific instructions

• WordPress — paste the code in Appearance → Theme Editor → footer.php, or use a plugin like "Insert Headers and Footers"
• Shopify — go to Online Store → Themes → Edit Code → theme.liquid, paste before </body>
• Wix — go to Settings → Custom Code → Add Custom Code → Body End
• Next.js / React — add the script to your layout component or use a <Script> component

Step 4: Test the installation

On the Installation tab, enter your website domain in the "Test Installation" field and click the button to verify that the widget is properly loaded.

Step 5: Restrict to specific domains (optional)

Under "Allowed Domains", you can restrict the widget to only work on specific domains. Enter a domain (e.g., example.com or *.example.com) and click the "+" button. Leave empty to allow the widget on any domain.

Customize appearance

Click the "Appearance" tab to customize how the widget looks. You can change:

• Colors — primary color (powers the gradient hero, CTA button, and chat button), button text color, message text color, welcome header text color, chat background
• Button settings — position (left or right), horizontal and vertical margins, button style (circle, rounded square, square, pill, or floating), and button icon (chat dots, bubble, message, support, lightning, or wave)
• Welcome message & texts — title, message, home screen title, chat button text, email tab subtitle, input placeholder, and chat greeting message (shown when a visitor opens the chat, before sending a message)
• Language — choose between Dutch and English (controls all widget UI labels)
• Logo — displayed in the home screen hero, agent card, chat header, and email tab hero

A live preview with three tabs (Home, Chat, E-mail) on the right side of the page shows exactly how each screen will look as you make changes. All changes are auto-saved.

Pre-chat form (optional)

Click the "Pre-chat Form" tab to collect visitor information before they start chatting. Toggle "Enable Pre-chat Form" and configure which fields to show:

• First Name — on by default, can be set as required
• Last Name — on by default, can be set as required
• Email Address — on by default, can be set as required
• Phone Number — optional, off by default
• Subject — optional, off by default
• Order Number — optional, off by default

You can also enable a Privacy Checkbox to require visitors to accept your privacy policy before chatting.

Note: visitors first see the Home screen when they open the widget. The pre-chat form appears when they click the CTA button or switch to the Chat tab.

Autoresponder

Click the "Autoresponder" tab to set different automatic messages for:

• Online — when your team is available
• Offline — when no one is available
• Outside Hours — outside your configured opening hours

You can also configure your Opening Hours here for each day of the week (Monday through Sunday), including start and end times.

FAQ (Pro+ plan)

On the "FAQ" tab (requires Pro+ plan), you can add frequently asked questions. FAQ items are displayed as an accordion on the widget's Home screen — visitors can expand questions to read the answer without starting a chat.

Behavior

Click the "Behavior" tab to control advanced widget settings:

• Display triggers — show the widget after a number of seconds or after scrolling a percentage of the page
• Device settings — choose whether to show on mobile and/or desktop
• AI Chatbot — enable AI-powered automatic responses (requires Pro plan and AI Agent enabled)
• Page rules — show the widget only on specific pages, or hide it on certain pages (e.g., hide on /checkout)
• "Powered by Bugalou" branding — toggle on or off

Click "Save Changes" after making any modifications on each tab.

Team Routing

After setting up your widget, you can assign a default team to this channel. All new incoming live chat conversations will automatically be routed to the selected team. Go to the widget settings page and use the "Default Team" dropdown to select a team.

For more advanced routing, you can create routing rules that route conversations based on keywords, time of day, or other conditions. See Teams Management for a complete overview.