One script tag, one function call. All patterns below are live — click the buttons to see each mode in action.
Paste this before </body>. Everything else is configured in JavaScript.
<!-- Add once, anywhere on the page --> <script src="https://embedded.showdini.ai/showdini-embed.js"></script>
The simplest integration. Pass a trigger selector and the widget opens a centered overlay when that element is clicked.
<button id="demo-btn">Watch Demo</button> <script> Showdini.init({ demoId: "YOUR_DEMO_ID", trigger: "#demo-btn", }); </script>
Pass an array of selectors or elements. All of them open the same single overlay — great for nav CTA, hero button, and mid-page banner sharing one instance.
Showdini.init({ demoId: "YOUR_DEMO_ID", trigger: [ "#nav-cta", "#hero-btn", "#learn-more", ], });
Provide a container and the widget renders inside it. Without a trigger, it loads automatically when the container scrolls into view. Starting the call expands it to fullscreen; ending collapses it back.
<div id="demo-inline-basic" style="width:100%; height:420px"></div> <script> Showdini.init({ demoId: "YOUR_DEMO_ID", container: "#demo-inline-basic", }); </script>
Combine container and trigger. The iframe won't load until the button is clicked — useful for below-the-fold sections where you don't want to prefetch the demo on every page load.
<button id="load-btn">Load Demo</button> <div id="demo-inline-trigger"></div> <script> Showdini.init({ demoId: "YOUR_DEMO_ID", container: "#demo-inline-trigger", trigger: "#inline-trigger-btn", }); </script>
Add browserFrame: { urlTitle: "…" } to show a macOS-style browser bar (traffic lights + address bar) above the inline embed. Makes the widget look like a live browser window showing your product. The chrome hides automatically when the call expands to fullscreen.
Showdini.init({ demoId: "YOUR_DEMO_ID", container: "#demo-chrome", browserFrame: { urlTitle: "your-site.com" }, });
Override the default width and height (both default to 95%). These apply to the fullscreen modal — useful if you want a fixed pixel size or a narrower viewport.
Showdini.init({ demoId: "YOUR_DEMO_ID", trigger: "#demo-btn", width: "700px", height: "560px", });
Showdini.init() returns an instance with open() and close() methods, so you can control the widget from your own event handlers, timers, or UI framework.
// No trigger — controlled entirely via API const demo = Showdini.init({ demoId: "YOUR_DEMO_ID", }); document.getElementById("open-btn") .addEventListener("click", () => demo.open()); document.getElementById("close-btn") .addEventListener("click", () => demo.close());
launcher renders a text bar on your page — focusing it opens the demo. The bar collects no text itself; it hands the visitor straight to the agent. Give placeholder several questions and they type themselves out in turn. Pass mount to sit the bar in the page flow, as below, or omit it to float the bar over the page — a floating bar steps aside on its own while the demo has the screen.
Showdini.init({ demoId: "YOUR_DEMO_ID", launcher: { mount: "#ask-bar", ctaLabel: "Instant chat", placeholder: [ "What does it cost?", "Show me how it works", ], }, }); // Omit `mount` and the bar floats — `position` // puts it bottom-center, -left or -right.
Full list of Showdini.init(options) parameters.
Showdini.init() returns ShowdiniInstance | undefined.