Dynamic embeds

Dynamic embeds are useful when a docs page, help article, or product page should show a demo that matches its content.

Browser snippet

html
<script  src="https://littledemo.com/sdk.js"  data-littledemo-key="ld_pub_xxx"></script><div  data-littledemo  data-littledemo-prompt="Show the setup flow"  data-littledemo-template="guided-tour"  data-littledemo-section="setup"></div>

The SDK reads the page URL, title, meta description, and headings. It then requests a demo for that context. If a matching demo already exists, the cached demo is reused.

API request

bash
curl -X POST https://littledemo.com/api/v1/embed/generate \  -H "X-API-Key: ld_pub_xxx" \  -H "Content-Type: application/json" \  -d '{    "context": {      "url": "https://docs.example.com/setup",      "title": "Setup guide",      "description": "Create your first workspace",      "headings": ["Create a workspace", "Invite teammates"]    },    "prompt": "Show the setup flow",    "template": "guided-tour",    "section": "setup"  }'

Response

json
{  "demoId": "demo_abc123",  "status": "pending",  "embedUrl": "https://littledemo.com/embed/demo_abc123",  "cached": false}

Key rules

• Use a publishable key for browser snippets.
• Add allowed domains to the key.
• Keep prompts short and page-specific.
• Expect dynamic generations to count toward your plan usage.

Trusted docs integrations

Docs platforms and server-rendered sites can use signed runtime embeds instead of browser publishable keys. Create a project signing secret, sign a /api/v1/embed/runtime URL server-side, then render it in an iframe.

Use this when customers write content such as:

mdx
<LittleDemo  url="https://docs.example.com/setup"  prompt="Show the setup flow"  template="guided-tour"/>

The signed payload can also reference an existing demoId.