Product · Widget

Small enough to forget it is there.

One script tag, four layouts, twenty-four designs, and a hard size budget that our own CI enforces. It loads on your site, so it behaves like a guest.

100 free messages · No card required

3.9kbgzipped
15kbbudget, CI-enforced
4structural layouts
0cookies by default

How it works

  1. 01

    Drop in one line

    Before your closing body tag. The defer attribute means it never blocks your render.

    <script
      src="https://chatbrace.com/widget.js"
      data-key="cb_live_YOUR_WIDGET_KEY"
      defer
    ></script>
  2. 02

    Lock it to your domains

    The widget key is public by design — it is a scope, not a secret. Add your domains and requests from anywhere else are refused.

    https://yourdomain.com
    https://*.yourdomain.com
    http://localhost:3000
  3. 03

    Make it yours

    Pick any of the twenty-four designs, then layer your brand colour, radius and position over it. You are changing tokens, not forking a design.

    {
      "accent": "#0f7b6c",
      "radius": 16,
      "position": "left"
    }

Details that matter

Isolation

Shadow DOM, properly

Host CSS cannot reach in and ours cannot leak out. Every inherited property is reset, because a shadow root does not block inheritance on its own.

Motion

CSS only, no library

Transitions and five keyframes. Under reduced motion the animation is removed rather than shortened, because overshoot is what causes trouble.

Disclosure

Says it is an AI

Every design states it at the start of the conversation and it is not configurable. Article 50 of the EU AI Act has been in force since August 2026.

Install guide