Installation

Inline script

The Amelia widget is loaded via an inline script that defines the Drimer global. Add this snippet to your page:

<script>
  (function () {
    var d = document;
    window.Drimer = {
      init: function (o) {
        var f = d.createElement("iframe");
        var config = Object.assign({}, o.config || {});
        if (o.locale && !config.locale) config.locale = o.locale;
        var p = new URLSearchParams({
          publicKey: o.publicKey,
          token: o.token,
          config: JSON.stringify(config),
        });
        f.src = "https://widget.drimer.io?" + p;
        f.style.cssText =
          "width:100%;height:100%;border:none;color-scheme:normal";
        f.allow = "clipboard-write";
        (typeof o.element === "string"
          ? d.querySelector(o.element)
          : o.element
        ).appendChild(f);
        window.Drimer._iframe = f;
        window.Drimer.destroy = function () {
          f.remove();
        };
      },
    };
  })();
</script>

Container element

Create a DOM element where Amelia will render. The widget loads inside an iframe within this container:

<div id="amelia" style="width: 100%; height: 600px;"></div>

You control the widget's dimensions through the container element's CSS.

Initialization

Call Drimer.init() after the inline script has loaded:

Drimer.init({
  publicKey: "pk_live_your_key_here",
  token: "your_session_token",
  element: "#amelia",
  config: {
    locale: "en",
    theme: {
      primaryColor: "#171717",
      primaryColorForeground: "#fafafa",
    },
  },
});

Parameters

Parameter	Type	Required	Description
`publicKey`	`string`	Yes	Your partner public key
`token`	`string`	Yes	Session token from the Partner API
`element`	`string`	Yes	CSS selector for the container element
`config`	`object`	No	Theme, locale, and behavior options

See Configuration Options for the full config reference.

Full HTML example

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Travel Assistant</title>
    <style>
      #amelia {
        width: 420px;
        height: 700px;
        position: fixed;
        bottom: 20px;
        right: 20px;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
      }
    </style>
  </head>
  <body>
    <div id="amelia"></div>

    <script>
      (function () {
        var d = document;
        window.Drimer = {
          init: function (o) {
            var f = d.createElement("iframe");
            var config = Object.assign({}, o.config || {});
            if (o.locale && !config.locale) config.locale = o.locale;
            var p = new URLSearchParams({
              publicKey: o.publicKey,
              token: o.token,
              config: JSON.stringify(config),
            });
            f.src = "https://widget.drimer.io?" + p;
            f.style.cssText =
              "width:100%;height:100%;border:none;color-scheme:normal";
            f.allow = "clipboard-write";
            (typeof o.element === "string"
              ? d.querySelector(o.element)
              : o.element
            ).appendChild(f);
            window.Drimer._iframe = f;
            window.Drimer.destroy = function () {
              f.remove();
            };
          },
        };
      })();
    </script>
    <script>
      Drimer.init({
        publicKey: "pk_live_your_key_here",
        token: "your_session_token",
        element: "#amelia",
        config: {
          locale: "en",
          theme: {
            primaryColor: "#2563eb",
            primaryColorForeground: "#ffffff",
          },
        },
      });
    </script>
  </body>
</html>

Framework integration

React

import { useEffect, useRef } from "react";

// Include the Drimer inline script in your index.html or load it once at app level

function AmeliaWidget({ token }: { token: string }) {
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (ref.current && window.Drimer) {
      window.Drimer.init({
        publicKey: "pk_live_your_key_here",
        token,
        element: ref.current,
      });
    }
  }, [token]);

  return <div ref={ref} style={{ width: "100%", height: "700px" }} />;
}

Next.js

Include the Drimer inline script in a client component:

"use client";

import { useEffect, useRef } from "react";

// Ensure the Drimer inline script is included in your root layout or _document

export function AmeliaWidget({ token }: { token: string }) {
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (ref.current && window.Drimer) {
      window.Drimer.init({
        publicKey: "pk_live_your_key_here",
        token,
        element: ref.current,
      });
    }
  }, [token]);

  return <div ref={ref} style={{ width: "100%", height: "700px" }} />;
}

Installation

On this page