✳ Northwind Studio

The chat widget, on a real page

This page exists to prove the embeddable widget works and to show exactly what a customer has to add to their own site. Nothing on it is part of the product except the button.

Northwind Studio is an invented company. It is the example tenant in functions/bot/config.js, written to exercise every path in the engine. Replace that file and this whole page changes character.

Try it

The button is bottom right. Give it a few seconds on the page and a teaser bubble appears; stay longer, or scroll, and the larger prompt card follows. Both are one-time nudges and remember being dismissed.

Ask it something a design studio would field - a new brand identity, a logo refresh, packaging for a drinks label - and watch it qualify you. Ask for a video advert instead and watch it decline honestly and point you elsewhere. There is a bare-bones version of the same conversation at /bot/try, and the admin is at /bot/admin.

What you add to your own site

Two lines in <head> and one button. That is the whole integration.

<link rel="stylesheet" href="/css/ai-agent.css">
<script src="/js/ai-agent.min.js" defer></script>

<button class="ai-agent" aria-expanded="false"
        aria-label="Open chat"
        data-label="Ask Elena"
        data-icon="↑"
        data-skip-paths="/contact,/checkout">
  <span class="ai-agent-dot"></span>
  <span class="ai-agent-label">AI</span>
</button>

The panel, the guide reader, the teaser and the prompt card are all built by the script on first use. None of them belong in your markup, and nothing loads until a visitor engages.

The four attributes

  1. data-label - the panel's title. Omit it and the widget uses the assistant's live name from the admin, so renaming it in Settings is enough.
  2. data-icon - the glyph on the send button. Any single character.
  3. data-skip-paths - a comma-separated list of pages where the prompt card must never appear. Your contact form and checkout belong here: interrupting someone mid-conversion is the one thing this must not do.
  4. aria-expanded - start it at false. The script keeps it in step after that.

Rebranding

Redefine the custom properties after the stylesheet loads. This page sets two of them, which is why the widget is teal here and slate blue by default.

<style>:root{
  --ai-accent: #2f6f6b;
  --ai-font-body: 'Inter', sans-serif;
}</style>

The full list is at the top of css/ai-agent.css. If your site has a dark theme, redefine the same properties under whatever selector switches it and the widget follows, because it reads nothing else.