> For the complete documentation index, see [llms.txt](https://docs.meganova.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.meganova.ai/character-studio/embed-widgets.md).

# Embed Widgets

> **Note:** Embed widgets let you deploy your AI characters on external websites. Create chatbot experiences anywhere with customizable widgets.

## Overview

Embed features:

| Feature                                                               | Purpose                           |
| --------------------------------------------------------------------- | --------------------------------- |
| [Creating Embeds](/character-studio/embed-widgets/creating-embeds.md) | Set up embed widgets              |
| [Customization](/character-studio/embed-widgets/customization.md)     | Configure appearance and behavior |

## What Are Embed Widgets?

Embed widgets are:

* **Chatbot interfaces** for external sites
* **Customizable** appearance and behavior
* **Easy to integrate** with simple code
* **Trackable** with analytics

## Use Cases

### Website Chatbots

Add AI characters to:

* Landing pages
* Support pages
* Interactive content
* Entertainment sites

### Interactive Experiences

Create:

* Story companions
* Game NPCs
* Educational assistants
* Marketing bots

## Quick Start

### Step 1: Create Embed

1. Open character in Character Studio
2. Go to **Embed** section
3. Click **Create Embed**

### Step 2: Configure

Set up your widget:

* Appearance (theme, size)
* Behavior (voice, memory)
* Access (domains, rate limits)

### Step 3: Get Code

1. Click **Generate Code**
2. Choose format (iframe, JS, React)
3. Copy code

### Step 4: Deploy

1. Paste code into your website
2. Test the widget
3. Monitor analytics

## Embed Options

### Display

| Option | Description      |
| ------ | ---------------- |
| Theme  | Light or dark    |
| Size   | Dimensions       |
| Avatar | Show/hide        |
| Border | Radius and style |

### Behavior

| Option    | Description         |
| --------- | ------------------- |
| Voice     | Enable TTS          |
| Typing    | Animation           |
| Memory    | Session persistence |
| Safe Mode | Content filtering   |

### Access

| Option     | Description     |
| ---------- | --------------- |
| Domains    | Allowed origins |
| Public     | Open access     |
| Rate Limit | Message limits  |

## Integration Formats

### iframe

Simple drop-in:

```html
<iframe src="https://studio.meganova.ai/embed/xxx"
        width="400" height="600"></iframe>
```

### JavaScript

More control:

```html
<div id="chatbot"></div>
<script src="https://studio.meganova.ai/embed.js"></script>
<script>
  MegaNova.embed('chatbot', { characterId: 'xxx' });
</script>
```

### React

For React apps:

```jsx
import { MegaNovaChat } from '@meganova/embed-react';

<MegaNovaChat characterId="xxx" />
```

## Analytics

Track embed performance:

* Impressions
* Unique users
* Messages per session
* Voice usage

## See Also

* [Creating Embeds](/character-studio/embed-widgets/creating-embeds.md) — Detailed setup
* [Customization](/character-studio/embed-widgets/customization.md) — All options
* [API Integration](/character-studio/advanced/api-integration.md) — Advanced usage