Widget channel

The Widget is the simplest channel to set up. No integrations to connect, no credentials to manage — just paste a snippet of code on your site and your flow has a fully working chat surface.

When to use it

Visitors should be able to chat without logging in.
You want a branded chat bubble on your marketing site or in-app.
You want voice support (optional) alongside text.

Open the flow, click Flow settings in the bottom toolbar, then the Channels tab. Click Add Channel and pick Widget.

Widget in the Channels list — Flow settings → Channels. The Sales Triage flow has one widget channel configured.

Click the channel row to open its configuration drawer.

Widget channel configuration drawer — Widget channel settings — name, TTS model, voice, Magic Window, and the two customization entry points.

Setting	What it controls
Channel Name	Internal label (e.g. “Acme website widget”). Visitors never see it.
TTS Model	The text-to-speech model used for voice replies. Mini is ~120ms; Max is highest quality.
Voice	Which voice the widget uses when speaking. Click to preview.
Enable Magic Window	When on, the widget shows visual content (cards, images, structured panels) alongside the chat.

Click Save to persist these. The two buttons below — Customize Widget and Install Widget — are covered next. Click Customize Widget to open the appearance dialog.

Customize Widget dialog — Customize Widget — the text visitors see before they type, the suggestion chips, and the brand colors.

Field	What it does
Greeting headline	The first thing a visitor sees when the widget opens. Short (max 80 chars).
Main question	The big prompt under the greeting, e.g. “How can I help you today?” (max 120).
Subtext	One line of supporting copy under the main question (max 300).
Inspirations	Up to 6 suggestion chips that pre-fill common prompts. Lowers the bar for visitors to start chatting.
Primary color	Your brand color — used on the launcher button, send button, and accents.
Secondary color	Used for hover states, chip borders, and secondary UI.

Good inspiration chips read like real questions, not topics. “How much does Acme Pro cost?” converts better than “Pricing”.

Click Save when you’re done.

3. Install on your site

Click Install Widget to get the embed snippet for your website.

Install Widget dialog with the embed script and the test link — Install Widget — the snippet to paste before the closing tag, plus a hosted test URL.

Copy the snippet and paste it into your site’s HTML, right before the closing </body> tag. It looks like this (the data-flow-id and data-channel-id are pre-filled for your flow):

<script type="text/javascript">
(function() {
  try {
    const chatDiv = document.createElement('div');
    chatDiv.id = 'glorium-chat';
    chatDiv.setAttribute('data-flow-id', 'YOUR_FLOW_ID');
    chatDiv.setAttribute('data-channel-id', 'YOUR_CHANNEL_ID');
    document.body.appendChild(chatDiv);

    const script = document.createElement('script');
    script.src = 'https://embed.cogniagent.ai/embed.js';
    script.type = 'text/javascript';
    script.onload = () => console.log('CogniAgent loaded successfully');
    script.onerror = (err) => console.error('Failed to load CogniAgent:', err);
    document.body.appendChild(script);
  } catch (err) {
    console.error('Error initializing CogniAgent:', err);
  }
})();
</script>

Hide under a query parameter

The Hide widget under query parameter checkbox restricts the widget to URLs containing ?chatbot=1. Useful while you’re previewing the widget on a live site without exposing it to everyone yet.

Test before installing

The Install dialog also shows a hosted test URL — https://embed.cogniagent.ai/?flow_id=…&channel_id=…. Click the link to open the widget standalone, exactly as your visitors would see it once embedded.

Live widget on the test page — The hosted test page — the widget opens full-bleed so you can verify branding and conversation flow before going live.

Send a message and watch the routing in real time:

Widget conversation showing routing to the Pricing Specialist — A live conversation in the widget — the Triage actor handed off to the Pricing Specialist.

4. Deploy

The widget only accepts traffic when the flow is deployed. Click Deploy in the bottom toolbar after the channel is configured. The flow card flips from draft to deployed, and the embed script starts working on every page where it loads.

What visitors see

A circular launcher button appears in the corner of every page where the script is loaded.
Clicking it opens a panel showing the greeting, main question, subtext, and inspiration chips you authored.
The visitor types — or taps a chip — and the conversation runs. Routing picks the right actor, replies come back in the same panel.
Closing and reopening the widget within the same session preserves history. After session expiry (a few hours of inactivity) the visitor starts fresh.

Inbound only

The Widget is inbound-only. You can’t proactively start a conversation with an anonymous web visitor — they have to open the widget first. For outbound proactive messages, use the Email or Messaging channels instead.

Hand-off to a human

For escalation, the typical pattern:

Add a “Human Escalation” actor to the flow.
Give it a capability that posts to Slack or Teams (e.g. Slack send-message).
When routing picks it, the actor posts the transcript and a link to the live session to your support channel.
Your team picks up the conversation from the Conversations history view.

Deploy a flow

Take the widget live so real visitors can chat with it.

Email

Add Gmail or Outlook alongside the widget for follow-ups.

Capabilities

Give actors tools so the widget can actually do things — book meetings, look up orders, post to Slack.

Conversations history

Review every widget conversation, routing decisions, and tool calls after the fact.

Get Started

Concepts

Building a flow

Channels

Test, deploy & operate

Guides

When to use it

1. Add the Widget channel

2. Customize the widget

3. Install on your site

Hide under a query parameter

Test before installing

4. Deploy

What visitors see

Inbound only

Hand-off to a human

Next

Deploy a flow

Email

Capabilities

Conversations history

​When to use it

​1. Add the Widget channel

​2. Customize the widget

​3. Install on your site

​Hide under a query parameter

​Test before installing

​4. Deploy

​What visitors see

​Inbound only

​Hand-off to a human

​Next

Deploy a flow

Email

Capabilities

Conversations history

When to use it

1. Add the Widget channel

2. Customize the widget

3. Install on your site

Hide under a query parameter

Test before installing

4. Deploy

What visitors see

Inbound only

Hand-off to a human

Next