BigRadarDocs
Dashboard
Installation›Platforms›Web
Installation

Web

One script tag puts the messenger on any page — no build step, no npm package.

This is the install for a public site: marketing pages, a storefront, anywhere a visitor isn't signed in. If you're embedding inside your own logged-in product and want conversations tied to a real user, use In-app Web instead — same script, one extra set of attributes.

  1. Get your Workspace App ID

    In the BigRadar dashboard, go to Settings → Web Messenger → Install setup. Copy the Workspace App ID shown there.

  2. Paste the snippet

    Add this before the closing </body> tag, with your App ID in place of YOUR_APP_ID:
    HTML
    json
    <!-- BigRadar Messenger --> <script async src="https://embed.bigradar.io/web-messenger.js" data-project-id="YOUR_APP_ID"></script>

  3. Confirm it's live

    Reload the page. The messenger launcher appears using your configured color, position and greeting — all set from the same Settings page.

What the script does

The script is async and loads off the critical path. On load it reads data-project-id, fetches your workspace's widget config (appearance, greeting, display and device rules), and mounts the launcher — or mounts nothing if you've turned the widget off for this workspace.

Custom launch button & unread badge

Open the messenger from your own "Help" or "Chat with us" button instead of the floating bubble, and show the unread count wherever you like — the web version of present() in the React Native SDK.

  1. Add the loader stub and hide the bubble

    Put the stub above the embed script, and add data-hide-default-launcher="true"to the script tag. The stub lets your button work even if it's clicked before the async script has loaded — the call is queued and replayed once it arrives.

    HTML
    json
    <!-- 1. Loader stub — must come before the BigRadar script --> <script> window.BigRadar = window.BigRadar || function () { (window.BigRadar.q = window.BigRadar.q || []).push(arguments); }; </script> <!-- 2. The usual snippet, plus data-hide-default-launcher --> <script async src="https://embed.bigradar.io/web-messenger.js" data-project-id="YOUR_APP_ID" data-hide-default-launcher="true"></script>

  2. Open the messenger from your button

    Call BigRadar('show') on click, and subscribe to onUnreadCountChange to keep your badge up to date:

    HTML
    json
    <button onclick="BigRadar('show')"> Help <span id="help-badge" hidden></span> </button> <script> BigRadar('onUnreadCountChange', function (count) { var badge = document.getElementById('help-badge'); badge.textContent = count; badge.hidden = count === 0; }); </script>

  3. Test it

    Reload the page — no bubble, and clicking your button opens the messenger. Reply to the conversation from your BigRadar inbox while the messenger is closed, and the badge counts up; opening the messenger resets it to 0.
CallWhat it does
BigRadar('show')Opens the messenger and resets the unread count to 0. Does nothing on a page where your Display or Device rules hide the messenger.
BigRadar('hide')Closes the messenger, if it's open.
BigRadar('onUnreadCountChange', fn)Calls fn(count) straight away with the current count, then again every time it changes. Returns a function that unsubscribes — except when called before the script has loaded, where the call is only queued and returns nothing.
data-hide-default-launcher="true"Attribute on the embed script tag. Removes the floating chat bubble; the messenger still opens in the same corner (your configured position).

The count is the same number the floating bubble's badge shows: replies from your team or AI agent since the messenger was last opened. It lives in the page, so a full reload starts it back at 0.