Inline Embed

Embed the Alhena chat widget inline on your page using the same JavaScript SDK as the floating widget.

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 or custom data

• 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

If you don't need SDK features and just want the simplest possible embed, use the Iframe Embed instead. If you want the standard floating launcher in the corner of your page, use the JavaScript snippet installation.

Quick Start

Step 1 — Add the standard SDK snippet to your page (same as the floating widget):

<script>
document.gleenConfig = {
    company: 'YOUR_COMPANY_KEY',
    apiBaseUrl: 'https://app.alhena.ai'
};
</script>
<script src="https://app.alhena.ai/sdk/gleenWidget.js"></script>

Step 2 — Add a sized container with the id alhena-inline-chat anywhere in your page body:

<div id="alhena-inline-chat" style="width: 600px; height: 800px;"></div>

The SDK detects this element automatically and mounts the chat widget into it.

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.

Complete Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Support Chat</title>
    <script>
      document.gleenConfig = {
          company: 'YOUR_COMPANY_KEY',
          apiBaseUrl: 'https://app.alhena.ai'
      };
    </script>
    <script src="https://app.alhena.ai/sdk/gleenWidget.js"></script>
  </head>
  <body>
    <div
      id="alhena-inline-chat"
      style="width: 600px; height: 800px; margin: 0 auto;"
    ></div>
  </body>
</html>

Sizing the Container

The inline widget fills 100% of its parent container's width and height. You are responsible for sizing the container:

<!-- Fixed size -->
<div id="alhena-inline-chat" style="width: 600px; height: 800px;"></div>

<!-- Full-width, viewport-height -->
<div id="alhena-inline-chat" style="width: 100%; height: 100vh;"></div>

<!-- Responsive with a max-width -->
<div id="alhena-inline-chat" style="width: 100%; max-width: 600px; height: 80vh;"></div>

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 — listen for ticket:message_submitted, ticket:agent_handoff, etc.

• Custom Data — pass user identity and metadata

• JavaScript API — 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:

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