In-app Web

Same script as the public Web install, with one addition: tell it who's logged in.

Use this when you're embedding BigRadar inside your own SaaS product rather than a public marketing page — a support widget for signed-in users of your app. Render the template placeholders below with your own server-side templating engine before serving the page, so each visitor's script tag carries their real identity.

Snippet

HTML

json

<!-- BigRadar Messenger — identify your logged-in user -->
<script async src="https://embed.bigradar.io/web-messenger.js"
  data-project-id="YOUR_APP_ID"
  data-user-id="{{user.id}}"
  data-name="{{user.name}}"
  data-email="{{user.email}}"
  data-user-workspace-id="{{workspace.id}}"
  data-user-plan="{{workspace.plan}}"></script>

Attributes

Field	Type	Required	Description
data-user-id	string	Required	Your own stable user ID. Ties every conversation from this user together across sessions.
data-name	string	optional	Shown to your team in the inbox.
data-email	string	optional	Shown to your team, and usable for order/account lookups where relevant.
data-user-workspace-id	string	optional	Free-form — your own account/org/workspace ID, stored as a custom attribute.
data-user-plan	string	optional	Free-form — e.g. the user's subscription plan, stored as a custom attribute.

Custom launch button & unread badge

Inside your own product you'll usually want the messenger behind your existing "Help" button, with the unread count on it — not a floating bubble over your UI. Same idea as present() in the React Native SDK.

Add the loader stub and hide the bubble
In your app's HTML shell (index.html, or your root layout), put the stub above your BigRadar script tag, and add data-hide-default-launcher="true" to that tag. The stub lets a click that lands before the async script has loaded still open the messenger — the call is queued and replayed once it arrives.
HTML
json
 <script> window.BigRadar = window.BigRadar || function () { (window.BigRadar.q = window.BigRadar.q || []).push(arguments); }; </script>  <script async src="https://embed.bigradar.io/web-messenger.js" data-project-id="YOUR_APP_ID" data-user-id="{{user.id}}" data-name="{{user.name}}" data-email="{{user.email}}" data-hide-default-launcher="true"></script>
Open the messenger from your button
Call BigRadar('show') on click, and subscribe to onUnreadCountChange for the badge:
SupportButton.jsx
jsx
import { useEffect, useState } from 'react'; export function SupportButton() { const [unread, setUnread] = useState(0); // Fires right away with the current count, then on every change. // The return value unsubscribes when the component unmounts. useEffect(() => window.BigRadar('onUnreadCountChange', setUnread), []); return ( <button onClick={() => window.BigRadar('show')}> Help {unread > 0 && <span className="badge">{unread}</span>} </button> ); }
Using TypeScript? Declare it once: interface Window { BigRadar: (command: string, ...args: any[]) => any } inside a declare global block.
Test it
Sign in to your app — no bubble, and your Help button opens the messenger as the identified user. Reply from your BigRadar inbox while the messenger is closed and the badge counts up; opening the messenger resets it to 0.

Call	What 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 it survives client-side route changes in a single-page app, but a full reload starts it back at 0.