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

# Partner demo

> Try embedding with Acme Analytics—a session-only mock customer app that mounts @vizkraft/embed without putting the API key in the browser.

export const DocsDemoVideo = ({category = 'cookbooks', slug, caption}) => {
  const base = `/public/recordings/${category}/${slug}`;
  return <figure className="not-prose my-8 overflow-hidden rounded-xl border border-gray-200 dark:border-gray-800">
      {caption ? <figcaption className="border-b border-gray-200 bg-gray-50 px-4 py-2 text-center text-sm text-gray-600 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-400">
          {caption}
        </figcaption> : null}
      <video autoPlay muted loop playsInline className="w-full dark:hidden">
        <source src={`${base}/mist.webm`} type="video/webm" />
        <source src={`${base}/mist.mp4`} type="video/mp4" />
      </video>
      <video autoPlay muted loop playsInline className="hidden w-full dark:block">
        <source src={`${base}/carbon.webm`} type="video/webm" />
        <source src={`${base}/carbon.mp4`} type="video/mp4" />
      </video>
    </figure>;
};

The partner demo is a sandbox third-party app (**Acme Analytics**) that ships with Vizkraft. Use it to validate origins, liquid tags, and the SDK before you integrate in production.

<DocsDemoVideo category="embed" slug="partner-demo" caption="Partner demo Settings to Analytics" />

## URL

Open the demo at [https://app.vizkraft.com/partner-demo](https://app.vizkraft.com/partner-demo).

Credentials stay in the **browser session** for this sandbox only—they are not written to Vizkraft as a permanent partner config.

<img src="https://mintcdn.com/na-13f69f9a/d8x3eivmu3ABy64I/public/screenshots/embed/partner-demo-analytics.png?fit=max&auto=format&n=d8x3eivmu3ABy64I&q=85&s=2dfacb579f756108aea1c4fce434df93" alt="Partner demo analytics" width="2222" height="1646" data-path="public/screenshots/embed/partner-demo-analytics.png" />

## Steps

<Steps>
  <Step title="Enable embed in Vizkraft">
    Open your dashboard in [app.vizkraft.com](https://app.vizkraft.com), enable embedding, add liquid tags, confirm coverage, and create an API key. See [Admin setup](/embed/admin-setup).
  </Step>

  <Step title="Allow the demo origin">
    Add `https://app.vizkraft.com` under Allowed origins so the demo can iframe the embed.
  </Step>

  <Step title="Configure Acme Settings">
    Open **Partner demo → Settings**. Paste base URL, embed id, API key, and liquid tag values (for example `department_id=1`).
  </Step>

  <Step title="Open Analytics">
    Acme calls `/api/partner-demo/session` (stand-in for your backend), then mounts `@vizkraft/embed` with `getSessionToken`. The API key never reaches the SDK.
  </Step>
</Steps>

<img src="https://mintcdn.com/na-13f69f9a/d8x3eivmu3ABy64I/public/screenshots/embed/partner-demo-home.png?fit=max&auto=format&n=d8x3eivmu3ABy64I&q=85&s=03068a2d7f9bd13b5589029ace2ef151" alt="Partner demo home" width="3024" height="1646" data-path="public/screenshots/embed/partner-demo-home.png" />

## What to verify

* Charts load for liquid value A
* Changing liquid to value B changes KPIs (tenant isolation)
* Title / filters / download match [Viewer options](/embed/viewer-options)
* Scroll works when the host uses `height: '100%'`

## Related

* [Developer guide](/embed/developer-guide) — production integration
* [Security](/embed/security) — why the mint proxy exists
* npm [@vizkraft/embed](https://www.npmjs.com/package/@vizkraft/embed)