Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.cogniagent.ai/llms.txt

Use this file to discover all available pages before exploring further.

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.

​
1. Add the Widget channel

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
Click the channel row to open its configuration drawer.
Widget channel configuration drawer
SettingWhat it controls
Channel NameInternal label (e.g. “Acme website widget”). Visitors never see it.
TTS ModelThe text-to-speech model used for voice replies. Mini is ~120ms; Max is highest quality.
VoiceWhich voice the widget uses when speaking. Click to preview.
Enable Magic WindowWhen 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.

​
2. Customize the widget

Click Customize Widget to open the appearance dialog.
Customize Widget dialog
FieldWhat it does
Greeting headlineThe first thing a visitor sees when the widget opens. Short (max 80 chars).
Main questionThe big prompt under the greeting, e.g. “How can I help you today?” (max 120).
SubtextOne line of supporting copy under the main question (max 300).
InspirationsUp to 6 suggestion chips that pre-fill common prompts. Lowers the bar for visitors to start chatting.
Primary colorYour brand color — used on the launcher button, send button, and accents.
Secondary colorUsed 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
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
Send a message and watch the routing in real time:
Widget conversation showing routing 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

  1. A circular launcher button appears in the corner of every page where the script is loaded.
  2. Clicking it opens a panel showing the greeting, main question, subtext, and inspiration chips you authored.
  3. The visitor types — or taps a chip — and the conversation runs. Routing picks the right actor, replies come back in the same panel.
  4. 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:
  1. Add a “Human Escalation” actor to the flow.
  2. Give it a capability that posts to Slack or Teams (e.g. Slack send-message).
  3. When routing picks it, the actor posts the transcript and a link to the live session to your support channel.
  4. Your team picks up the conversation from the Conversations history view.

​
Next

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.