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

# Embed a Widget

> Embed a Simli Avatar on your website in a few minutes using Simli Auto.

<Frame>
  <video autoPlay muted loop playsInline className="" src="https://mintcdn.com/simli/NELbEX-teJCHwcnx/images/widget1.mp4?fit=max&auto=format&n=NELbEX-teJCHwcnx&q=85&s=5b8e7443ba3384c6bf2347c940e1043c" data-path="images/widget1.mp4" />
</Frame>

## Features

<CardGroup>
  <Card title="Customize widget appearance" icon="palette">
    <Frame>
      <video autoPlay muted loop playsInline className="" src="https://mintcdn.com/simli/NELbEX-teJCHwcnx/images/widget2.mp4?fit=max&auto=format&n=NELbEX-teJCHwcnx&q=85&s=80f06cfafb27edc371fd3dd3b992117a" data-path="images/widget2.mp4" />
    </Frame>
  </Card>

  <Card title="Share Avatar link" icon="link">
    <Frame>
      <video autoPlay muted loop playsInline className="" src="https://mintcdn.com/simli/NELbEX-teJCHwcnx/images/widget3.mp4?fit=max&auto=format&n=NELbEX-teJCHwcnx&q=85&s=57dccb999e5dae48f5af4acd6964961c" data-path="images/widget3.mp4" />
    </Frame>
  </Card>
</CardGroup>

<Card title="Simli Widget" icon="code" href="https://app.simli.com">
  Start using the Simli Widget on your website.
</Card>

### Supported platforms

* WordPress, Shopify, Squarespace, Wix, Weebly and any website that supports HTML

## Customize widget appearance

The Simli Widget can be customized using various parameters in the embed code. Here are the available customization options:

```tsx theme={null}
<simli-widget
  token="your-token"
  agentid="your-agent-id"
  position="relative"
  customtext="Call Agent"
  customimage="https://app.simli.com/images/logo.png"
  overlay="false"
>
</simli-widget>
```

### Parameters

* `token` (required): Your Simli API token for authentication
* `agentid` (required): The unique identifier of your Simli Agent

#### Default Mode

* `position`: Controls the widget's position on the page
  * `"relative"`: Positions the widget in the normal document flow
  * `"left"`: Fixes the widget to the left side of the screen
  * `"right"`: Fixes the widget to the right side of the screen
* `customtext`: Custom text to display on the widget button
* `customimage`: URL to a custom image to replace the default dotted face animation

#### Overlay Mode (Custom Trigger Button)

* `overlay`: Set to "true" to enable overlay mode, which creates a full-screen experience and enables you to customize the trigger button. Create a trigger button with the ID `simliOverlayBtn` in your HTML

```tsx theme={null}
<button id="simliOverlayBtn">Open Widget</button>
<simli-widget
  token="your-token"
  agentid="your-agent-id"
  position="relative"
  overlay="true"
>
</simli-widget>
```

<Card title="Simli Widget" icon="code" href="https://app.simli.com">
  Start using the Simli Widget on your website.
</Card>

<Info>
  Make sure to re-update the embded code on your website if you update your API Keys or Allowlist.
</Info>