Embedding a demo

There are two ways to put a Showdini demo on your site:

• A plain iframe — no JavaScript, works anywhere, including site builders that only allow an HTML block.
• The embed widget — a small script that renders the demo inline and expands it to a fullscreen modal when the call starts.

Both need your demo ID, and both accept the same URL parameters. If you have not embedded a demo before, start with the Quickstart — this page covers the options once it works.

To send visitors to the demo instead of hosting it yourself, see Sharing a demo link.

Inline embed

Use this when the demo should always be visible on the page.

Every embed needs allow="microphone; autoplay"

The demo is a voice conversation. Without that attribute the browser blocks microphone access and the visitor cannot talk to the agent. The page also has to be served over HTTPS — localhost counts while you develop.

<section>
  <h2>Interactive Demo</h2>
  <iframe
    src="https://demo.showdini.ai/start/YOUR_DEMO_ID?embedded=true"
    allow="microphone; autoplay"
    allowfullscreen
    style="width: 100%; height: 720px; border: none; border-radius: 12px;"
  ></iframe>
</section>

Embed widget

The widget renders the lobby inline inside your container. When the visitor starts the call it expands to a fullscreen modal, then collapses back to the lobby when the call ends.

<!-- 1. Size the container however you want -->
<div id="demo-container" style="width: 380px; height: 560px"></div>

<!-- 2. Load the widget and init -->
<script src="https://embedded.showdini.ai/showdini-embed.js"></script>
<script>
  Showdini.init({
    demoId: "YOUR_DEMO_ID",
    container: "#demo-container",
  });
</script>

The iframe lazy-loads the first time the container scrolls into view. To defer loading until a button is clicked instead, pass a trigger:

<button id="open-btn">Watch Demo</button>
<div id="demo-container" style="height: 560px"></div>

<script src="https://embedded.showdini.ai/showdini-embed.js"></script>
<script>
  Showdini.init({
    demoId: "YOUR_DEMO_ID",
    container: "#demo-container",
    trigger: "#open-btn", // selector, Element, or an array of either
  });
</script>

Without a container, Showdini.init runs in modal mode: a trigger opens a centered modal.

Showdini.init options

Option	Type	Description
demoId	string	Required. Your Showdini demo ID.
container	string | Element	Mount the demo inline in this element. Omit for modal mode opened by a trigger.
trigger	string | Element | array	Element(s) that open the demo. In inline mode, defers loading until clicked.
closeTrigger	string | Element | array	Element(s) that close or collapse the demo.
width / height	string	Size of the expanded modal. Defaults to 95% / 95%. Inline size comes from the container.
metadata	object	Key/value data attached to the lead. See Metadata.
forwardPageParams	boolean	Also capture utm_* / gclid and similar from the host page's URL. Defaults to false.

Custom modal

Use this when you want to open the demo from your own button but keep the integration iframe-based.

<button id="open-btn">Open Demo</button>

<div id="my-modal" style="display:none; position:fixed; inset:0; z-index:9999;
     background:rgba(0,0,0,.5); align-items:center; justify-content:center;">
  <div style="position:relative; width:90%; height:90%; background:#fff;
       border-radius:12px; overflow:hidden;">
    <button id="my-modal-close" style="position:absolute; top:10px; right:14px;
            z-index:1; font-size:20px; background:none; border:none; cursor:pointer;">
      &#x2715;
    </button>
    <iframe
      id="demo-iframe"
      src=""
      allow="microphone; autoplay"
      allowfullscreen
      style="width:100%; height:100%; border:none;"
    ></iframe>
  </div>
</div>

<script>
  var modal = document.getElementById("my-modal");
  var iframe = document.getElementById("demo-iframe");

  document.getElementById("open-btn").addEventListener("click", function () {
    if (!iframe.src) {
      iframe.src = "https://demo.showdini.ai/start/YOUR_DEMO_ID?embedded=true";
    }
    modal.style.display = "flex";
  });

  document.getElementById("my-modal-close").addEventListener("click", function () {
    modal.style.display = "none";
    iframe.src = "";
  });
</script>

Clearing iframe.src on close ends the call and releases the microphone.