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>

Last updated