DEMOLOOP SDK

Build live product demos into your app

Use Demoloop inside enterprise software, customer portals, and SDK showcases. Pass the current user and product context so every demo starts with the evaluator's real question—not a generic tour.

Install the SDK

HOW IT WORKS

A product demo that understands where it was opened

The SDK gives the product demo structured knowledge about the host app and lets the host approve exactly which actions can run. Demoloop remains the demo layer; your application remains in control.

Context

Tell the agent who is using the app, where they are, and which customer or tenant they are in.

Software map

Pass screens, workflows, account-specific capabilities, and the purpose of the custom software.

Safe actions

Expose approved host actions like opening a report, modal, or guided setup path.

Experience modules

Launch the product demo first, then offer an expert video call when the visitor needs a person.

QUICKSTART

Install once, then launch the right product story

Use the framework-neutral package in any browser app. Identity, context, events, actions, and modules stay synchronized with the hosted demo experience.

npm install demoloop-widget

Enterprise portal for each strategic account SDK/API quickstart with architecture walkthroughs Customer success workspace embedded in a product Partner demo environment with tenant-specific workflows

import {
  init, identify, setContext, track, open
} from "demoloop-widget";

await init({
  key: "dl_xxx",
  actions: {
    visitors: "/app?tab=visitors",
    analytics: "/app?tab=analytics"
  },
  modules: [
    { id: "product-demo", experience: "demo", presentation: "modal" },
    { id: "video-call", experience: "video-call", presentation: "modal" }
  ]
});

identify({ id: user.id, email: user.email, company: account.name });
setContext({ section: "Analytics", software: { tenant: account.name } });
track("viewed_feature", { feature: "conversion-report" });
open({ module: "product-demo" });

REACT

Use the same product demo contract in React

The React entry point provides a provider, a hook, and lifecycle subscriptions while keeping the underlying SDK available for advanced integrations.

View demoloop-widget on npm

import {
  DemoloopProvider, useDemoloop
} from "demoloop-widget/react";

function App() {
  return (
    <DemoloopProvider options={{ key: "dl_xxx" }}>
      <ProductDemoButton />
    </DemoloopProvider>
  );
}

function ProductDemoButton() {
  const demoloop = useDemoloop();
  return (
    <button onClick={() => demoloop.open({ module: "product-demo" })}>
      Show me how it works
    </button>
  );
}

PRODUCT DEMO SURFACES

One organization, focused experiences

Keep a website demo, an in-product SDK assistant, and an optional expert video call on separate surface keys. Teams manage them together without mixing visitor context or configuration.

Read the SDK reference

The product demo stays central

Answer from approved knowledge, understand runtime software context, open registered host actions, and guide the relevant product workflow.

Bring in a person when needed

A video-call module can hand the visitor to an expert without changing the SDK contract. Browser permissions remain explicit and media is peer-to-peer.