> ## Documentation Index
> Fetch the complete documentation index at: https://docs.callkaro.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Create A Chat Widget

> Agent, flow, publish, widget — the whole path in one page

Two objects, in this order. The **agent** is the conversation; the **widget** is
how people reach it. One agent can sit behind several widgets.

***

## 1. Create The Agent

<Steps>
  <Step title="Open Chat agents">
    [callkaro.ai/dashboard/agents](https://callkaro.ai/dashboard/agents) →
    **Chat agents** → **Create**.
  </Step>

  <Step title="Choose channel Widget">
    The channel picker offers WhatsApp, Instagram and **Widget**. Pick Widget.
  </Step>

  <Step title="Choose Guided flow">
    Widget then asks *how should it answer?* — **Guided flow** or **AI
    assistant**.

    <Warning>
      Pick **Guided flow**. The chat widget runtime only runs flow agents: a
      widget pointed at an agent saved as **AI assistant** refuses every
      conversation with *"This agent is not a flow agent."*

      You still get an AI assistant — as an
      [AI card](/widget/chat/ai-card) inside the flow, which is the supported
      way to have one and lets you put your own functions behind it.
    </Warning>
  </Step>

  <Step title="Name it and save">
    You land on the agent page with an empty canvas and a Start card.
  </Step>
</Steps>

<Tip>
  If you already have the conversation written down — a support script, an FAQ
  tree, a competitor export — do not draw it by hand. See
  [Build a flow with Claude](/widget/chat/build-with-claude).
</Tip>

***

## 2. Draw The Flow

Drag cards from the palette, wire each exit to the next card. Every card type is
listed in [Card types](/widget/chat/card-types).

A first flow that is worth building:

<Steps>
  <Step title="A Buttons card as the main menu">
    Five to eight topics. More than that and nobody reads to the bottom.
  </Step>

  <Step title="An Ask card where you need something">
    Order id, email, phone. Ask **before** a handoff, never after — an advisor
    picking up a chat with nothing collected starts from zero.
  </Step>

  <Step title="An AI assistant card for &#x22;something else&#x22;">
    The topics you cannot enumerate. Give it a narrow job and, if it needs to
    look anything up, [a function](/widget/chat/ai-card#functions).
  </Step>

  <Step title="A Handoff card for what only a person can close">
    And configure what happens when nobody is available —
    [raise a ticket](/widget/chat/ticket-fallback).
  </Step>

  <Step title="An End card on every other path">
    Every path must finish somewhere: an End card, a Handoff, or a loop back to
    the menu. A path that just stops is the most common bug in a first flow.
  </Step>
</Steps>

### Try It

**Try it** on the canvas walks the flow exactly as a visitor would, without
publishing. Use it after every few cards rather than at the end — a wrong exit
found early is one card to fix, not thirty.

***

## 3. Publish

**Publish** makes the version live. The builder refuses while anything is
unwired or incomplete, and tells you which card — the full list of what blocks a
publish is in
[Card types](/widget/chat/card-types#what-blocks-a-publish).

<Warning>
  Editing a published flow does **not** change what visitors see. You must publish
  again. A conversation already in progress on a card you deleted is restarted
  rather than left stranded.
</Warning>

***

## 4. Create The Widget

<Steps>
  <Step title="Open Widgets">
    [callkaro.ai/dashboard/widgets](https://callkaro.ai/dashboard/widgets) →
    **Create widget**.
  </Step>

  <Step title="Type: Chat">
    Then pick the agent you just published.
  </Step>

  <Step title="Fill in the form">
    | Field                | Notes                                                                 |
    | -------------------- | --------------------------------------------------------------------- |
    | **Type**             | Chat                                                                  |
    | **Agent**            | The one you just published                                            |
    | **Bot name**         | Shown in the header. Defaults to the agent name.                      |
    | **Greeting**         | Shown before the visitor starts talking                               |
    | **Icon**             | Your logo. Also drawn beside every bot message.                       |
    | **Primary colour**   | The launcher and the visitor's own messages                           |
    | **Secondary colour** | The agent's messages                                                  |
    | **Position**         | `bottom-right` or `bottom-left`                                       |
    | **Languages**        | What the widget offers                                                |
    | **Status**           | Active or paused. A paused widget says so and takes no conversations. |

    All of it is editable later, and none of it needs the agent republished —
    [Appearance](/widget/chat/appearance).
  </Step>

  <Step title="Copy the widget id">
    You get a `wgt_…` id and, on the widget's **Integration** tab, the snippets
    already filled in with it.
  </Step>
</Steps>

***

## 5. Put It In Front Of People

The shortest possible test — paste this in a browser with your own id:

```
https://widget.callkaro.ai/chat.html?w=YOUR_WIDGET_ID
```

Then pick your platform in [Install in your app](/widget/chat/install).

***

## Before You Call It Done

<AccordionGroup>
  <Accordion title="Walk every path in Try it">
    Including the ones you think nobody takes. An unwired exit on a rare branch
    is still a dead end for whoever finds it.
  </Accordion>

  <Accordion title="Check what happens when nobody is available">
    Mark yourself unavailable and ask for a person. You should get your away
    message and a real ticket — not silence.
    [Raise a ticket →](/widget/chat/ticket-fallback)
  </Accordion>

  <Accordion title="Add your FAQs before launch, not after">
    The knowledge base is read without starting a chat, so it deflects the
    questions your flow would otherwise have to answer. It lives on the agent
    and ships with a publish.
    [Knowledge base →](/widget/chat/knowledge-base)
  </Accordion>

  <Accordion title="Confirm the Widgets subscription is active">
    Without it a visitor can open the panel and read your knowledge base, but
    starting a conversation is refused.
    [Billing →](https://callkaro.ai/dashboard/billing)
  </Accordion>

  <Accordion title="Open a conversation in Contacts">
    Check that the variables you expect are listed beside the transcript. If an
    order id is missing there, it is missing from your tickets too.
    [Contacts →](https://callkaro.ai/dashboard/contacts)
  </Accordion>
</AccordionGroup>

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Card types" icon="diagram-project" href="/widget/chat/card-types">
    All fourteen cards
  </Card>

  <Card title="Install in your app" icon="code" href="/widget/chat/install">
    Web, iOS, Android, React Native, Flutter
  </Card>
</CardGroup>