> ## 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.

# Creating a Widget

> Set up a website widget from the dashboard and get your embed code

## Overview

A widget is a link between one of your voice agents and one website. Creating a
widget produces a **widget id** — a public identifier that goes in your embed
snippet.

You can create as many widgets as you need: one per website, per brand, or per
landing page, each pointing at a different agent with its own appearance.

<Note>
  The widget id is safe to expose. It is not a secret and cannot be used to read
  your account data or manage your agents.
</Note>

***

## Prerequisites

* **A voice agent.** The widget answers with an existing agent, so build one
  first if you have not already.
* **The Widgets permission.** Account owners have this automatically. Team
  members need it granted — see [Team access](#team-access) below.

***

## Create Your Widget

<Steps>
  <Step title="Open Embed Widgets">
    In the dashboard, go to **Embed Widgets** in the left sidebar.
  </Step>

  <Step title="Click Create Widget">
    The creation dialog opens with a live preview on the right. The preview
    updates as you type, so you can see exactly how the widget will look before
    saving.
  </Step>

  <Step title="Choose the agent">
    Select which of your agents should answer. This is the only required field —
    everything else has a sensible default.
  </Step>

  <Step title="Set the display name and greeting">
    The **bot name** appears in the widget header. Leave it blank to use the
    agent's own name.

    The **greeting** is the line of text a visitor sees before they start
    talking. It is written text, not spoken — use it to tell people what the
    agent can help with.
  </Step>

  <Step title="Add your branding">
    Upload an **icon** and pick your **primary** and **secondary** colours, then
    choose which corner the launcher sits in.

    See [Customization](/widget/customization) for what each colour controls.
  </Step>

  <Step title="Choose languages">
    Select every language the widget should offer. With more than one, visitors
    get a language selector before they start.
  </Step>

  <Step title="Save and copy your snippet">
    Click **Create**. The embed code appears immediately with a **Copy snippet**
    button.
  </Step>
</Steps>

<Tip>
  You can always get the snippet again later — click the code icon on any widget
  in the list.
</Tip>

***

## Fields Reference

| Field                | Required | Notes                                                                        |
| -------------------- | -------- | ---------------------------------------------------------------------------- |
| **Agent**            | Yes      | Which agent answers the conversation                                         |
| **Bot name**         | No       | Shown in the header. Defaults to the agent's name                            |
| **Greeting**         | No       | Text shown before the conversation starts                                    |
| **Icon**             | No       | PNG, JPG, WebP or SVG, up to 2 MB. Falls back to the bot name's first letter |
| **Primary colour**   | No       | Launcher and the visitor's messages                                          |
| **Secondary colour** | No       | The agent's messages                                                         |
| **Position**         | No       | Bottom right or bottom left                                                  |
| **Languages**        | No       | One or more. A selector appears only when there are two or more              |
| **Status**           | No       | Active or paused. Editing only                                               |

***

## Managing Your Widgets

### Editing

Click the edit icon on any widget to change its agent, name, greeting, icon,
colours, position or languages.

<Info>
  Changes take effect on your live website within about a minute — you never need
  to touch your site's code again. This is the main advantage of the widget id
  approach: the snippet stays the same forever while everything behind it stays
  editable.
</Info>

### Pausing

Set a widget's status to **Paused** to switch it off without removing the
snippet from your site. The launcher stops appearing, and any attempt to start a
conversation is declined.

Useful for taking a widget offline outside business hours, during agent
maintenance, or while investigating an issue.

### Deleting

Deleting a widget is permanent and immediate.

<Warning>
  A deleted widget stops working on every site where it is installed. The snippet
  left behind on those pages will simply do nothing. Pause instead if you might
  want it back.
</Warning>

***

## Team Access

Widget management is controlled by the **Widgets** permission, granted per team
member.

<Steps>
  <Step title="Open team settings">
    Go to **Settings → Team**.
  </Step>

  <Step title="Find the team member">
    Select the person whose access you want to change.
  </Step>

  <Step title="Set the Widgets permission">
    Choose the level they need:

    * **View** — can see widgets and copy embed snippets
    * **Create** — can also create, edit and upload icons
    * **Delete** — full control, including deleting widgets
  </Step>
</Steps>

<Note>
  Without at least **View**, the Embed Widgets item does not appear in that team
  member's sidebar at all.
</Note>

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Install on your website" icon="code" href="/widget/install-on-your-website">
    Add your snippet to any site or platform
  </Card>

  <Card title="Customization" icon="palette" href="/widget/customization">
    Fine-tune appearance and behaviour
  </Card>
</CardGroup>