Install Chat Widget via iframe

As an alternative to our JavaScript SDK, you can embed the Alhena chat widget inline in your webpage with an iframe. The look and feel, along with all functionality is available with the iframe.

Insert this code into your page to display the iframe widget. You can adjust the width and height to your liking through the width and height properties, or use CSS to adjust the size.

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

IMPORTANT: You must replace "gleen" with your own bot profile key. Your bot profile key is present in the URL you use to view the Alhena dashboard, eg https://app.alhena.ai/dashboard/gleen/.

If your organization is hosted in the EU region, you should replace "app.alhena.ai" with "eu.alhena.ai".

Below is the code for a complete example page as seen above:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Alhena iframe example</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/gleen/"
        width="600px"
        height="800px"
        style="border: none; border-radius: 12px"
        frameborder="0"
      ></iframe>
    </div>
  </body>
</html>

URL parameters supported by iframe

You can configure the iframe widget with URL query parameters added to the src attribute

Supported parameters

locale: Sets the widget language (for example, en, de, fr).
hide_header: Hides the widget header when set to true.

<iframe
  src="https://app.alhena.ai/iframe-widget/gleen/?locale=de&hide_header=true"
  width="600px"
  height="800px"
  style="border: none; border-radius: 12px"
  frameborder="0"
></iframe>

PreviousWebsite SDK NextWebsite SDK JavaScript APIs

Last updated 25 days ago

hashtagURL parameters supported by iframe

URL parameters supported by iframe