Chat widget

What it is

A small launcher in the bottom-right corner of your site. Customer clicks it, a chat window opens, they type a message, your team replies. The conversation lives in the same inbox as your email and Slack channels.

The widget is built around a single tiny loader script. The launcher renders an iframe pointing at /widget/<your-workspace-slug> on ochrehq.com, so the widget UI is isolated from your site's DOM and CSS.

How it loads

Your site loads https://ochrehq.com/api/widget/embed, which serves a small loader script. The loader inserts a fixed-position iframe that loads the widget UI from /widget/<slug>. The iframe is same-origin to itself — it can use cookies for visitor identity — but it has no access to your site's DOM, and your CSS doesn't leak into it.

The widget controls its own size by posting {type:"ochre:resize", w, h} messages back to the parent. It opens to a full panel when launched and shrinks back to a launcher when closed. On narrow viewports it goes full-screen.

What customers see

By default, a visitor sees:

• A launcher with your accent color and an icon.
• On open, a welcome message you've configured.
• A text input. They type, hit enter, the message goes.
• AI agent replies (if Autopilot is on for the chat channel) or a human reply.

The widget renders rich text in agent replies (bold, links, lists) and inline images. Visitors can send images and files.

Branding

In Settings → Channels → Widget you can set:

• Accent color — used on the launcher and outgoing messages.
• Position — bottom-right (default) or bottom-left.
• Welcome message — shown on first open.
• Greeting headline — defaults to "How can we help?"

Brand customization stops at color and copy. We don't expose CSS overrides — the widget is meant to behave the same across every site.

Identifying the customer

Two modes today:

1. Anonymous. No identity at all. The widget assigns a session and the conversation shows as anonymous in the inbox. The visitor's session is persisted via a cookie scoped to the widget iframe so they keep their conversation across reloads.
2. Pre-chat form. Ask for name and email before the first message (or as soon as the agent needs to email them). See Pre-chat form.

Identified mode (passing a signed token from your authenticated app) is on the roadmap; today the widget identifies via the pre-chat form.

Continuity

The widget remembers conversations across page loads using a cookie scoped to the widget iframe. A returning visitor sees their previous conversation when they reopen the launcher. They can scroll back and pick up where they left off.

If a visitor clears cookies or uses incognito, they start fresh.

Where the widget runs

The widget mounts on the customer subdomain pages (your workspace help center) and on the Ochre dashboard itself for staff testing. To put it on your own marketing site or product, embed it. See Embedding the widget.

AI in the widget

If Autopilot is on for the chat channel, the AI agent will respond directly when its confidence is high enough. Hitting Take Over from the AI Queue (or pressing Pause) hands the conversation back to a human and stamps ai_handoff_at so the AI stops replying. See Autopilot.

Performance

The loader script is small and async. It does not block your page from rendering. The iframe only loads when the visitor clicks the launcher.

What's next

• Embed the widget on your site: Embedding the widget.
• Add a Pre-chat form.