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

# Overview

## What is the LemonSlice Widget?

The LemonSlice widget is a fully-managed conversational AI service and web component. Use it when you want the fastest path to adding an interactive avatar to your website.

## How to use

1. Create a video agent in the LemonSlice [web app](https://lemonslice.com/agents). You can customize your agent's appearance, voice, personality, and knowledge base.
2. Add the embed code below to your webpage, replacing `agent_id` with your own agent's ID. Check out our [installation guides](/widget/embed-guides/squarespace) for common web-hosting platforms.

```html HTML theme={null}
<lemon-slice-widget agent-id="agent_id"></lemon-slice-widget>
<script type="module" src="https://unpkg.com/@lemonsliceai/lemon-slice-widget"></script>
```

<img src="https://mintcdn.com/lemonslice/YI5gLMYeKgsTDR4b/images/agent_id.png?fit=max&auto=format&n=YI5gLMYeKgsTDR4b&q=85&s=68fcc6f7452be32a314c491a1ab5f32f" alt="Copy Agent ID from LemonSlice web app" style={{ display: "block", margin: "0 auto", border: "1px solid #D1D5DB", borderRadius: "8px" }} width="523" height="259" data-path="images/agent_id.png" />

## Interacting with the widget

We designed the LemonSlice agent widget to fluidly switch between being an unintrusive yet captivating state, an immersive calling experience, and a fully hidden state.

By default, users see the widget at the **minimized state**, with your welcome video playing on loop. If the user clicks to start a chat, they'll enter the **active state**, allowing them to chat with the agent. If the user hovers over the widget in the minimized state and clicks the minimize icon <Icon icon="arrow-down-left-and-arrow-up-right-to-center" />, this collapses the widget into the **hidden state**.

The widget is pinned to the corner of your website by default, to allow for a persistent experience across pages.

<img src="https://mintcdn.com/lemonslice/Oby-4mLb85n6LZwx/images/States.png?fit=max&auto=format&n=Oby-4mLb85n6LZwx&q=85&s=93aeffb419c659cb1979052a38662f80" alt="States" width="1600" height="739" data-path="images/States.png" />

## Pricing

Pricing for the widget is the same as pricing for hosted agents. Refer to the LemonSlice [pricing](https://lemonslice.com/pricing?productType=hosted#products) page for more information.