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

https://app.alhena.ai/iframe-widget/YOUR_COMPANY_KEY/

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 JavaScript Snippet

Feature

Iframe Embed

JavaScript Snippet

Floating widget button

Yes

Inline page placement

Yes

Close / minimize button

Yes

Nudges

Yes

SDK API access

Yes

Event listeners

Yes

Custom data / user identity

Yes

Locale via query parameter

Yes

Via SDK config

Setup complexity

Minimal

The iframe embed does not support the JavaScript API, Events, or Custom Data. If you need programmatic control over the widget, use the standard installation with the Website SDK.

PreviousInstallation NextCustomization

Last updated 2 days ago

hashtagWhen to Use Iframe Embed

hashtagQuick Start

hashtagComplete Example

hashtagRegional URLs

hashtagQuery Parameters

hashtagExamples

hashtagCustomization

hashtagResponsive Example

hashtagComparison: Iframe vs JavaScript Snippet