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

# Website Widget

> Put a talking AI voice agent on any website with a single script tag

## Overview

The CallKaro Website Widget places a live voice agent on any web page. A visitor
clicks the launcher, speaks, and gets answers straight away — no phone call, no
app to install, no form to fill in.

Installation is one line of HTML containing a single public widget id. There is
no API key in your page and no server-side code to write.

```html theme={null}
<script src="https://widget.callkaro.ai/w.js" data-ck-id="your-widget-id" defer></script>
```

<video controls playsInline preload="metadata" className="w-full aspect-video rounded-xl" src="https://callcenterthink.blob.core.windows.net/data/widget_onboarding.mp4" />

<Note>
  Everything about the widget — which agent answers, its name, greeting, icon,
  colours and languages — is configured in the dashboard. Once the snippet is on
  your site, you never have to edit your website again to change any of it.
</Note>

***

## How It Works

<Steps>
  <Step title="Create a widget">
    In the dashboard, pick the agent that should answer and give the widget a
    name, greeting and branding. You get a unique widget id.
  </Step>

  <Step title="Paste one line">
    Add the script tag to your site, just before the closing `</body>` tag.
  </Step>

  <Step title="Visitors talk to your agent">
    A launcher button appears in the corner of your site. Clicking it opens the
    conversation panel, and pressing **Talk** starts a live voice session.
  </Step>
</Steps>

<CardGroup cols={2}>
  <Card title="Create a widget" icon="plus" href="/widget/create-a-widget">
    Set up your first widget in the dashboard
  </Card>

  <Card title="Install on your website" icon="code" href="/widget/install-on-your-website">
    Snippets for HTML, React, Next.js, WordPress and more
  </Card>
</CardGroup>

***

## What Visitors Get

### Real-Time Voice

Visitors speak and the agent answers out loud, using the same voice pipeline as
your phone calls.

### Live Transcript

The conversation is written out as it happens. Useful in noisy environments,
for visitors who prefer to read, and for accessibility.

### Their Choice Of Language

If you enable more than one language on a widget, the visitor picks before
starting. With one language, the selector is hidden entirely.

### Your Branding

Custom display name, greeting, icon, colours, and a launcher on whichever side
of the screen you prefer.

***

## Built To Stay Out Of The Way

The widget is engineered so it never becomes your site's performance problem.
Nothing heavy loads until a visitor chooses to use it.

| What loads             | When                            | Size                  |
| ---------------------- | ------------------------------- | --------------------- |
| Launcher script        | On page load                    | \~1.6 KB gzipped      |
| Conversation interface | When a visitor opens the widget | \~9 KB gzipped        |
| Voice engine           | When a visitor presses **Talk** | Deferred until needed |

<Info>
  Most visitors never open the widget, so for them the entire cost is a 1.6 KB
  script. The conversation interface and the voice engine are only fetched when
  somebody actually engages.
</Info>

***

## How It Stays Isolated From Your Site

The widget is deliberately built so it cannot interfere with your website:

* **The launcher renders in a shadow root.** Your site's CSS cannot reach inside
  it, and the widget's styles cannot leak out onto your page.
* **The conversation panel runs in an iframe.** It brings its own JavaScript
  framework, so it can never conflict with the version your site uses.
* **No secrets in your page.** The snippet carries a public widget id and
  nothing else — no API key, and nothing that identifies your account.

***

## Requirements

<AccordionGroup>
  <Accordion title="Your website must be served over HTTPS" icon="lock">
    Browsers only grant microphone access on secure origins. On an
    `http://` page the launcher and panel will appear, but starting a
    conversation will fail.

    `http://localhost` is treated as secure, so local development works without
    a certificate.
  </Accordion>

  <Accordion title="Visitors need a modern browser and a microphone" icon="microphone">
    Chrome, Edge, Safari and Firefox are all supported, on desktop and mobile.

    The browser asks the visitor's permission before any audio is captured, and
    they are free to decline — nothing is recorded until they accept.
  </Accordion>

  <Accordion title="You need a published agent" icon="robot">
    A widget points at one of your existing voice agents. If you have not built
    one yet, start with
    [how to set up an agent](/agents/prompts/how-do-you-set-up-an-agent).
  </Accordion>
</AccordionGroup>

***

## Conversations Are Ordinary Calls

A conversation started from the widget runs through the same calling pipeline as
the rest of your CallKaro calls. That means it behaves exactly like any other
call on your account:

* It appears in [Call History](/calls/call-history) with a full transcript and
  recording.
* It counts towards your usage and is billed like your other calls.
* It flows into your analytics and audit reports.

<Warning>
  Anyone who visits a page where your widget is installed can start a
  conversation with your agent — there is no sign-in step for visitors. Keep an
  eye on your usage after installing it on a high-traffic page.
</Warning>

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Customization" icon="palette" href="/widget/customization">
    Names, greetings, icons, colours, position and languages
  </Card>

  <Card title="Troubleshooting" icon="wrench" href="/widget/troubleshooting">
    Fixes for the most common installation problems
  </Card>

  <Card title="JavaScript API" icon="code" href="/widget/javascript-api">
    Open the widget from your own buttons and track events
  </Card>

  <Card title="Contact Support" icon="headset" href="mailto:support@callkaro.ai">
    Get help with setup or integration
  </Card>
</CardGroup>