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

# iframe Embedding

> Embed agents in websites or apps using iframe

Embed your agents into any webpage using a simple iframe element.
The agent appears as an interactive video call interface within your existing UI.

## Use Cases

iframe embedding is ideal for:

* **Seamless experience**: Keep users on your platform without redirecting to external pages
* **Custom branding**: Maintain your own branding instead of Beyond Presence's default interface
* **Conversion optimization**: Reduce friction by embedding agents directly in your sales funnel
* **Unified interface**: Integrate AI assistance alongside your existing features and content

## Configuration

Embed your agent using this HTML snippet:

```html theme={null}
<iframe 
    src="https://bey.chat/{agent-id}" 
    width="100%" 
    height="600px" 
    frameborder="0" 
    allowfullscreen
    allow="camera; microphone; fullscreen"
    style="border: none; max-width: 100%;"
></iframe>
```

Replace `{agent-id}` with your agent's ID and adjust the iframe dimensions as needed.

<Tip>Extract the agent ID from the direct conversation link—it's the string after `bey.chat/`.</Tip>

<Tip>Get the iframe code directly from [the dashboard](https://app.bey.chat/myAgents) by clicking **Embed** in the agent card's options menu.</Tip>

## Custom Branding

<Info>
  Available on Growth plans and higher. Upgrade in [Your Settings](https://app.bey.chat/settings) → **Billing Tab**.
</Info>

Custom Branding lets you style the iframe to match your brand and removes the Google sign-in requirement for users.

Optionally, you can add a contact form to collect user information before they join the conversation.

Both are managed in [Your Settings](https://app.bey.chat/settings) → **Custom Branding**.

### Branding Options

Customize the iframe's appearance:

| Field                 | Description                                  | Example                                        |
| --------------------- | -------------------------------------------- | ---------------------------------------------- |
| **Custom Title**      | Title shown in the iframe                    | `Talk to our assistant`                        |
| **Logo URL**          | Logo on the welcome screen                   | `https://example.com/logo.png`                 |
| **Favicon URL**       | Favicon for the iframe page                  | `https://example.com/favicon.ico`              |
| **Brand Color**       | Primary color for buttons and key UI accents | `#007bff`                                      |
| **Accent Color**      | Secondary color for highlights               | `#6c757d`                                      |
| **Font Color**        | Default text color                           | `#000000`                                      |
| **Font Family**       | CSS font stack                               | `Arial, sans-serif`                            |
| **Google Font URL**   | Stylesheet URL to load a custom font         | `https://fonts.googleapis.com/css2?family=...` |
| **Brand Website**     | Link to your homepage                        | `https://example.com`                          |
| **Brand Email**       | Contact email shown to users                 | `contact@example.com`                          |
| **Brand Button Text** | Call-to-action button label                  | `Learn More`                                   |
| **Brand Button URL**  | Call-to-action button destination            | `https://example.com/about`                    |

## Next Steps

<CardGroup cols={2}>
  <Card title="Back to Managed Agents" icon="arrow-left" href="/integrations/managed-agents">
    Return to managed agents overview
  </Card>
</CardGroup>