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

For the standard floating widget that appears in the bottom corner of your site, use the JavaScript snippet installation instead.

Quick Start

Add an iframe pointing to your widget URL:

<iframe
  src="https://app.alhena.ai/iframe-widget/YOUR_COMPANY_KEY/"
  width="600px"
  height="800px"
  style="border: none; border-radius: 12px"
  frameborder="0"
></iframe>

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

Here is a full HTML page with the widget centered on screen:

<!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>
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
      }

      body {
        background-color: #f0f0f0;
      }
    </style>
  </head>
  <body>
    <div
      style="
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      "
    >
      <iframe
        src="https://app.alhena.ai/iframe-widget/YOUR_COMPANY_KEY/"
        width="600px"
        height="800px"
        style="border: none; border-radius: 12px"
        frameborder="0"
      ></iframe>
    </div>
  </body>
</html>

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:

<iframe
  src="https://app.alhena.ai/iframe-widget/YOUR_COMPANY_KEY/?locale=fr"
  ...
></iframe>

Hide the header for a cleaner embedded look:

<iframe
  src="https://app.alhena.ai/iframe-widget/YOUR_COMPANY_KEY/?hideHeader=true"
  ...
></iframe>

Combine multiple parameters:

<iframe
  src="https://app.alhena.ai/iframe-widget/YOUR_COMPANY_KEY/?locale=de&hideHeader=true"
  ...
></iframe>

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

<iframe
  src="https://app.alhena.ai/iframe-widget/YOUR_COMPANY_KEY/"
  style="
    width: 100%;
    max-width: 600px;
    height: 80vh;
    border: none;
    border-radius: 12px;
  "
  frameborder="0"
></iframe>

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

The iframe embed does not support the JavaScript API, Events, or Custom Data. If you need inline placement with full SDK support, use the Inline Embed instead.