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

circle-info

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>
circle-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.

Complete Example

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

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:

Hide the header for a cleaner embedded look:

Combine multiple parameters:

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

Comparison: Iframe vs JavaScript Snippet

Feature
Iframe Embed
JavaScript Snippet

Floating widget button

No

Yes

Inline page placement

Yes

No

Close / minimize button

No

Yes

Nudges

No

Yes

SDK API access

No

Yes

Event listeners

No

Yes

Custom data / user identity

No

Yes

Locale via query parameter

Yes

Via SDK config

Setup complexity

Minimal

Minimal

circle-info

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.

Last updated