Installation

Script tag (recommended)

The fastest way to get started. Paste this snippet before the closing </body> tag on every page where you want the widget to appear.

<!-- Paste before </body> -->
<script>
  (function(w,d,s,o){
    var j=d.createElement(s);j.async=true;
    j.src='https://widget.bx-livechat.com/bxlivechat.js';
    j.onload=function(){w.BXLivechat.boot({orgId:o})};
    d.head.appendChild(j);
  })(window,document,'script','YOUR_ORG_ID');
</script>

npm package

If you prefer managing dependencies through npm:

npm install @bxlivechat/widget

React / Next.js

Wrap the widget in a React component for proper lifecycle management. The component loads the script on mount and cleans up on unmount.

"use client";

import { useEffect } from "react";

export function LiveChatWidget({ orgId }: { orgId: string }) {
  useEffect(() => {
    const script = document.createElement("script");
    script.src = "https://widget.bx-livechat.com/bxlivechat.js";
    script.async = true;
    script.onload = () => {
      window.BXLivechat.boot({ orgId });
    };
    document.head.appendChild(script);

    return () => {
      window.BXLivechat?.destroy();
      script.remove();
    };
  }, [orgId]);

  return null;
}

WordPress

Two options for WordPress sites:

1. Plugin: Install the BXLivechat plugin from the WordPress plugin directory and enter your Org ID in the settings page.
2. Manual: Go to Appearance → Theme File Editor, open header.php, and paste the script tag snippet before </head>.

Google Tag Manager

1. Open your GTM container and click Add a new tag.
2. Choose Custom HTML as the tag type.
3. Paste the script tag snippet into the HTML field.
4. Set the trigger to All Pages (or specific pages).
5. Save and publish the container.

SPA frameworks

For single-page apps (Vue, Angular, Svelte, etc.), call window.BXLivechat.boot() after each client-side route change to re-initialize the widget if needed.

// After each client-side route change
window.BXLivechat.boot({ orgId: "YOUR_ORG_ID" });

Configuration options

Pass these options to BXLivechat.boot():