Embeddable Widget

Paste before the closing body tag. The launcher starts as a small corner iframe and grows when the chat opens so the rest of the host page stays clickable.

<script>
  (function () {
    var iframe = document.createElement("iframe");
    iframe.src = "https://support-ai-nine-mu.vercel.app/widget/embed?key=wk_test_e2e_demo_widget_key";
    iframe.title = "OpsConcierge chat widget";
    iframe.setAttribute("allow", "clipboard-write");
    function applySize(open) {
      var size = open
        ? { width: 420, height: 720 }
        : { width: 88, height: 88 };
      iframe.style.cssText =
        "border:0;position:fixed;z-index:9999;background:transparent;pointer-events:auto;" +
        "right:16px;bottom:16px;width:" + size.width + "px;height:" + size.height + "px;" +
        "max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);";
    }
    applySize(false);
    window.addEventListener("message", function (event) {
      var data = event && event.data;
      if (!data || data.type !== "opsconcierge-widget") return;
      if (typeof data.open === "boolean") applySize(data.open);
    });
    document.body.appendChild(iframe);
  })();
</script>

Iframe only

Full-viewport iframe with pointer-events enabled. Use the launcher script above for the simplest install.

<iframe
  src="https://support-ai-nine-mu.vercel.app/widget/embed?key=wk_test_e2e_demo_widget_key"
  title="OpsConcierge chat widget"
  allow="clipboard-write"
  style="border:0;position:fixed;right:16px;bottom:16px;width:88px;height:88px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);z-index:9999;background:transparent;pointer-events:auto"
></iframe>
<script>
  (function () {
    var iframe = document.currentScript && document.currentScript.previousElementSibling;
    if (!iframe || iframe.tagName !== "IFRAME") return;
    window.addEventListener("message", function (event) {
      var data = event && event.data;
      if (!data || data.type !== "opsconcierge-widget") return;
      if (typeof data.open !== "boolean") return;
      var size = data.open
        ? { width: 420, height: 720 }
        : { width: 88, height: 88 };
      iframe.style.width = size.width + "px";
      iframe.style.height = size.height + "px";
    });
  })();
</script>