Lead
Widget

Two scripts, one element. Drop the loader on every page where the widget should be reachable; the chat bubble renders immediately and the full widget streams in behind it.

<script src="https://chat.bubuu.ai/bubuu-loader.js" async></script>
<bubuu-chat partner-id="your-partner-id"></bubuu-chat>

<script src="https://chat.bubuu.ai/bubuu-chat.js" async></script>
<bubuu-chat partner-id="your-partner-id"></bubuu-chat>

Two scripts, in sequence. The loader is tiny enough to be inlined on every page; the widget is large enough that you would not want it on every page. The facade pattern lets both be true.

1. 01

   Loader registers the element

   bubuu-loader.js defines <bubuu-chat> as a 2 KB facade and renders a chat bubble inside a Shadow DOM. The full bundle starts preloading immediately.

2. 02

   Bubble paints on first frame

   No framework boot, no hydration cost. The bubble is a single button with inline styles, so it shows up even on cold cache and slow connections.

3. 03

   Visitor opens the chat

   On hover, the preloaded widget bundle is already cached. On click, the cached bundle is promoted from background to foreground.

4. 04

   Widget takes over in place

   The full widget upgrades the same DOM node, inheriting every attribute you set on it. The conversation opens immediately — visitors never see a second click.

Every option is a plain HTML attribute on <bubuu-chat>. Set them once in the markup or change them at runtime with element.setAttribute(…). Attributes flagged reactive re-render the widget without losing chat state.

Tell the AI what the visitor is looking at. Attach page, visitor, free-form metadata, and the page content itself, and the widget sends it on every message, so the assistant grounds its answers in the exact listing on screen and can pre-fill lead capture. Context rides the existing chat channel — no extra requests, and it survives the facade→full-widget upgrade.

Three ways to set it

Use the context attribute for static, server-rendered markup; the context property to bind an object (it replaces the current context); and setContext(patch) to merge a partial update at runtime. getContext() returns the current value. All three reach the same place. Malformed JSON in the attribute is ignored with a console warning — the widget still loads.

<bubuu-chat
  partner-id="acme-real-estate"
  context='{"metadata":{"listingId":"AT-1234"}}'
></bubuu-chat>

In your framework

Frameworks bind objects to the element's context property. React 19, Vue, Angular, Svelte, and Preact all do this for you. React 18 and below stringify object props, so reach for a ref and call setContext() instead.

// React 19 binds an object prop to the element's "context" property.
<bubuu-chat partner-id="acme-real-estate" context={ctx} />

Timing is automatic: context set before the chat opens lands on the first message, and an update pushed mid-session applies to the next one. setContext merges, so when the page changes (e.g. SPA navigation) send the new pageContent in full — a partial patch keeps the previous page's body. Updating context never clears the thread or drops the connection — it behaves like the reactive lang and theme attributes. The widget only reads window and document; it adds nothing to the host's global scope.

The widget paints inside a Shadow DOM — host styles can't bleed in, widget styles can't bleed out. Click a mode to retheme the live widget; the switch lands in place, no reload.

<bubuu-chat partner-id="your-partner-id" theme="auto"></bubuu-chat>

Restyle the widget with CSS custom properties on <bubuu-chat> — set them in a stylesheet or inline; they inherit through the widget's shadow DOM. A token you don't set keeps the Bubuu default. A token you do set always wins, even over a partner theme.

bubuu-chat {
  --bubuu-primary: #0b5fff; /* accent: launcher, buttons, links, focus */
  --bubuu-on-primary: #ffffff; /* text/icon on the accent */
  --bubuu-surface: #ffffff; /* panel background */
  --bubuu-text: #1a2230; /* body text */
  --bubuu-text-muted: #6b7280; /* secondary text */
  --bubuu-border: #e4e6ed; /* borders / dividers */
  --bubuu-radius: 12px; /* message & control rounding */
  --bubuu-font: 'Inter', sans-serif; /* typeface */
  --bubuu-launcher-bg: #0b5fff; /* launcher bubble (defaults to --bubuu-primary) */
  --bubuu-launcher-color: #ffffff; /* launcher icon/text (defaults to --bubuu-on-primary) */
}

Placement

The widget sits 24px from the bottom-right corner by default. Use the position attribute to flip corners, or these tokens to nudge it. The launcher and the chat panel always move together. <bubuu-chat> is itself the fixed-position anchor in your page, so you can also just style it — your own class names and media queries work, and no !important is needed.

/* Nudge it away from your own floating UI */
bubuu-chat {
  --bubuu-offset-x: 40px;  /* from the anchored side edge (default 24px) */
  --bubuu-offset-y: 120px; /* from the bottom edge        (default 24px) */
  --bubuu-z-index: 10000;  /* above your own overlays     (default 1000) */

  /* Mobile only: clears a sticky bottom bar of your own. */
  --bubuu-panel-inset-bottom: 60px;
}

/* Or style the host element directly — your own class, your own media
   queries. No !important needed: your page's rules always win. */
.chat-above-cookie-bar {
  bottom: 140px;
}

@media (max-width: 768px) {
  bubuu-chat {
    bottom: 88px; /* clear a sticky mobile nav */
  }
}

On phones the chat panel opens full-screen, whatever the position — only the launcher follows the corner. If your page pins something to the bottom on mobile (an ad slot, a nav bar), it will paint over the panel's footer and its main button. Either raise --bubuu-z-index so the chat covers your bar while open, or set --bubuu-panel-inset-bottom to your bar's height so the sheet stops on top of it and your bar stays visible.

Mount <bubuu-chat> as a direct child of <body>: transform, filter, will-change or contain on an ancestor re-bases fixed positioning onto that ancestor and will strand the widget mid-page.

Pick a locale to flip the live widget. UI strings re-render in place — the chat thread, the open WebSocket, and scroll position survive the switch.

const widget = document.querySelector('bubuu-chat-full, bubuu-chat');

widget?.setAttribute('lang', 'de');

The widget reports what the visitor does as native CustomEvents dispatched on the <bubuu-chat> element. They bubble, so listening on document is enough. Every payload carries a timestamp (epoch ms) and nothing else beyond what is listed below — no names, emails, or message text — so you can pipe them straight into your own analytics.

Launcher

The two signals from the closed launcher, before any conversation exists. No opt-in needed, and each fires at most once per page load.

Session

Everything that happens inside the chat is opt-in: add the page-events attribute and these start flowing. Without it the widget never dispatches anything into a page that did not ask for it.

<!-- Presence of "page-events" enables the session events.
     page-events="false" explicitly disables them. -->
<bubuu-chat partner-id="acme-real-estate" page-events></bubuu-chat>

A single document listener catches the session events, even when you nest <bubuu-chat> inside your own shadow root. The two launcher events do not cross a shadow boundary — if the widget lives inside one, listen on the element itself. Listeners are the entire surface: the widget adds nothing to your page's global scope.

A few patterns that cover most production embeds. Each one stands on its own — copy, swap in your IDs, ship.

<script src="https://chat.bubuu.ai/bubuu-loader.js" async></script>

<bubuu-chat partner-id="your-partner-id" theme="auto"></bubuu-chat>

<bubuu-chat
  partner-id="acme-real-estate"
  chat-id="chat_01HXYZ..."
></bubuu-chat>

import { useEffect, useRef } from 'react';

export function ListingChat({ listing }: { listing: Listing }) {
  const ref = useRef<(HTMLElement & { setContext(c: object): void }) | null>(null);

  // Re-ground the AI whenever the visitor opens a different listing.
  useEffect(() => {
    ref.current?.setContext({
      page: { url: location.href, title: document.title },
      metadata: {
        listingId: listing.id,
        price: String(listing.price),
        city: listing.city,
      },
    });
  }, [listing]);

  return <bubuu-chat ref={ref} partner-id="acme-real-estate" />;
}