> For the complete documentation index, see [llms.txt](https://alhena.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://alhena.gitbook.io/docs/features/chat-widget/iframe-embed.md).
# Iframe Embed
Embed the Alhena chat widget as an iframe for use in custom layouts, internal tools, or standalone pages.
You can embed the Alhena chat widget directly into any page using an iframe. This is useful when you want the widget displayed inline as part of your page layout, rather than as a floating button.
## When to Use Iframe Embed
The iframe embed is ideal for:
* **Dedicated support pages** where the widget is the main content
* **Internal tools or dashboards** that need an embedded chat experience
* **Kiosk or single-purpose displays** where the widget should fill a specific area
* **Custom layouts** where you want full control over widget placement and sizing
{% hint style="info" %}
For the standard floating widget that appears in the bottom corner of your site, use the [JavaScript snippet installation](/docs/features/chat-widget/installation.md) instead.
{% endhint %}
## Quick Start
Add an iframe pointing to your widget URL:
```html
```
{% hint style="info" %}
Replace `YOUR_COMPANY_KEY` with your company key. Find it in your dashboard URL: if your dashboard is `https://app.alhena.ai/dashboard/acme/` then your company key is `acme`.
{% endhint %}
## Complete Example
Here is a full HTML page with the widget centered on screen:
```html
Support Chat
```
## Regional URLs
Use the correct base URL for your region:
| Region | Iframe URL |
| ------ | ------------------------------------------------------- |
| US | `https://app.alhena.ai/iframe-widget/YOUR_COMPANY_KEY/` |
| EU | `https://eu.alhena.ai/iframe-widget/YOUR_COMPANY_KEY/` |
## Query Parameters
The iframe URL supports the following query parameters:
| Parameter | Type | Default | Description |
| ------------ | ------- | ------- | --------------------------------- |
| `locale` | string | `en` | Language/locale for the widget UI |
| `hideHeader` | boolean | `false` | Hide the chat header bar |
### Examples
Set the widget language to French:
```html
```
Hide the header for a cleaner embedded look:
```html
```
Combine multiple parameters:
```html
```
## Customization
You can adjust the iframe to fit your layout:
* **Width and height** - Set the `width` and `height` attributes to control the widget size
* **Border radius** - Use `border-radius` in the `style` attribute for rounded corners
* **Responsive sizing** - Use percentage-based or viewport-based dimensions (e.g., `width="100%" height="100vh"`)
### Responsive Example
```html
```
## Comparison: Iframe vs Inline Embed vs JavaScript Snippet
| Feature | Iframe Embed | Inline Embed (SDK) | JavaScript Snippet |
| --------------------------- | ------------ | ------------------ | ------------------ |
| Floating widget button | No | No | Yes |
| Inline page placement | Yes | Yes | No |
| Close / minimize button | No | No | Yes |
| Nudges | No | No | Yes |
| SDK API access | No | Yes | Yes |
| Event listeners | No | Yes | Yes |
| Custom data / user identity | No | Yes | Yes |
| Locale via query parameter | Yes | Via SDK config | Via SDK config |
| Setup complexity | Minimal | Minimal | Minimal |
{% hint style="info" %}
The iframe embed does not support the [JavaScript API](/docs/developer-reference/website-sdk/javascript-api.md), [Events](/docs/developer-reference/website-sdk/events.md), or [Custom Data](/docs/developer-reference/website-sdk/custom-data.md). If you need inline placement with full SDK support, use the [Inline Embed](/docs/features/chat-widget/inline-embed.md) instead.
{% endhint %}