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 agent and click Channels in the rail on the left of the canvas. Click Add channel and pick Widget. The form for a new widget opens:

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.

Below the settings, Put it on your website walks you through three steps: ① Copy the code, ② Preview and ③ Check it’s live. The code and the live check wait until the channel is added. Click Add channel. Nothing is saved until you do. The widget then stays open on its install steps, with its code ready. To change the settings later, click the widget in the channel list, edit, and click Save. Step ② Preview shows the widget the way your visitors will see it, close enough to judge the text and colors (your site’s own styles can change it slightly). Click Customize Widget under the preview 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. On a widget you’ve already added, that saves the look right away (Widget look saved). On a new one, the look is kept and saved when you add the channel. The preview updates to match. On a live agent, visitors see the look from your last deploy until you deploy again, and the preview says so.

3. Put it on your website

① Copy the code

Click Get the code to open the Install Widget on Your Site dialog with the embed snippet for your website.

Install Widget dialog with the embed script and the test link — The install dialog — 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, on every page that should show the widget. It looks like this (the data-flow-id and data-channel-id are pre-filled for your agent):

<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 how the conversation runs 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.

Pass details about the visitor

If your page already knows who the visitor is — a candidate’s name and job, an order number, a plan — the agent can start the conversation with it. Define Initial Parameters on the agent and add one line to the snippet. See Pass details to the widget.

Values in the embed code or the page URL can be read and changed by anyone who opens the page. Don’t put secrets in them, and don’t use them to decide what a visitor is allowed to do.

② Preview

The preview draws the widget with your greeting, question, subtext, suggestion chips and colors. While the agent isn’t deployed, it shows the banner visitors see too: Agent is offline. See Customize the widget.

③ Check it’s live

Once the code is on your site, this step tells you whether visitors are reaching the widget:

What it says	What it means
The widget is offline	The agent isn’t deployed, so visitors see that it’s offline. Click Deploy here to deploy it.
Waiting for the first conversation…	The agent is live, but nobody has talked to this widget yet. Open your site and send a message; the step checks again every 10 seconds.
No conversation on this widget yet	It stopped checking after 5 minutes. Send a message from your site, then click Check again.
Live: last conversation 2 minutes ago	Visitors are talking to this widget. Read their conversations in Conversations.

The check looks for a real conversation on this widget (tests don’t count), because opening a page with the widget isn’t recorded and a conversation is. While it waits on a live agent with undeployed changes, it also offers Deploy changes: a widget added after the last deploy can’t be reached until you deploy again. The Deploy button here works like the one in the rail: with issues that block a deploy, it opens Issues instead.

An Outbound agent’s widget opens only from widget links, so its widget channel shows only the Preview, without the code or the live check.

4. Deploy

The widget only accepts traffic when the agent is deployed. Click Deploy in the rail (or in step ③) after the channel is added. The status changes from Draft to Live, and the embed script starts working on every page where it loads. Later changes to the widget channel are part of the agent’s draft too: they reach visitors when you deploy again. Open the ⋮ menu on the widget’s row in the channel list and click Remove. The menu warns that sites that embed it will show it offline. A toast offers Undo. On a live agent, the widget goes offline with your next deploy.

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.

Inviting someone to a conversation

An anonymous visitor has to open the widget first — you can’t message them. To invite a specific person, create a widget link: a personal link to a conversation that already knows who they are, where the agent can speak first. Send the link yourself, or let a workflow email it.

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 an agent

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 an agent

Channels

Test, deploy & operate

Guides

When to use it

1. Add the Widget channel

2. Customize the widget