# Inline Embed
The inline embed mode renders the chat widget directly inside a container element you place on your page. It uses the same JavaScript SDK as the standard floating widget, so you get full SDK access — events, custom data, user identity, and more — while displaying the widget inline rather than as a floating launcher.
## When to Use Inline Embed
The inline embed is ideal for:
* **Dedicated support pages** where you want chat as the primary content but still need SDK features like [events](/docs/developer-reference/website-sdk/events.md) or [custom data](/docs/developer-reference/website-sdk/custom-data.md)
* **Side-by-side layouts** where chat appears alongside product content or documentation
* **SPAs and dynamic pages** where you control when the container appears and can call the SDK to mount the widget programmatically
{% hint style="info" %}
If you don't need SDK features and just want the simplest possible embed, use the [Iframe Embed](/docs/features/chat-widget/iframe-embed.md) instead. If you want the standard floating launcher in the corner of your page, use the [JavaScript snippet installation](/docs/features/chat-widget/installation.md).
{% endhint %}
## Quick Start
**Step 1** — Add the standard SDK snippet to your page (same as the floating widget):
```html
```
**Step 2** — Add a sized container with the id `alhena-inline-chat` anywhere in your page body:
```html
```
The SDK detects this element automatically and mounts the chat widget into it.
{% 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
```html
Support Chat
```
## Sizing the Container
The inline widget fills 100% of its parent container's width and height. You are responsible for sizing the container:
```html
```
## Relationship to the Floating Widget
When the inline widget is present on the page, the floating widget continues to load but suppresses its notification sound and unread badge — the user can already see the conversation inline, so the floating launcher stays quiet.
Both widgets share the same conversation session (fingerprint and ticket), so messages appear in both views in real time.
## SDK Features
Because the inline widget uses the same SDK as the floating widget, all SDK features work normally:
* [Events](/docs/developer-reference/website-sdk/events.md) — listen for `ticket:message_submitted`, `ticket:agent_handoff`, etc.
* [Custom Data](/docs/developer-reference/website-sdk/custom-data.md) — pass user identity and metadata
* [JavaScript API](/docs/developer-reference/website-sdk/javascript-api.md) — call `window.gleenWidget` methods
## SPAs and Dynamic Pages
The SDK mounts the inline widget automatically on `DOMContentLoaded`. If your container is added to the DOM after the initial page load (for example, on a route change in a single-page app), call the mount function manually:
```javascript
window.gleenWidget.initializeInlineChatWidget();
```
## Regional URLs
Use the correct API base URL and SDK URL for your region:
| Region | `apiBaseUrl` | SDK URL |
| ------ | ----------------------- | ------------------------------------------ |
| US | `https://app.alhena.ai` | `https://app.alhena.ai/sdk/gleenWidget.js` |
| EU | `https://eu.alhena.ai` | `https://eu.alhena.ai/sdk/gleenWidget.js` |
## Comparison: Inline Embed vs Iframe vs Floating Widget
| Feature | Inline Embed (SDK) | Iframe Embed | Floating Widget |
| --------------------------- | -------------------------- | ------------ | --------------- |
| Inline page placement | Yes | Yes | No |
| Floating launcher button | No | No | Yes |
| Close / minimize button | No | No | Yes |
| SDK API access | Yes | No | Yes |
| Events | Yes | No | Yes |
| Custom data / user identity | Yes | No | Yes |
| Nudges | No | No | Yes |
| Shared conversation session | Yes (with floating widget) | No | — |
| Setup complexity | Minimal | Minimal | Minimal |
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://alhena.gitbook.io/docs/features/chat-widget/inline-embed.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.