> ## Documentation Index
> Fetch the complete documentation index at: https://docs.littledemo.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Dynamic embeds

Let a page generate or reuse a relevant demo at runtime.

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`.