---
url: https://docs.youcan.shop/apps/developer-tools/qantra/overview.md
---
# Qantra

Qantra is the communication bridge between your embedded app (running in an iframe) and the YouCan Seller Area (the parent window). It uses `postMessage` under the hood, but exposes a clean TypeScript API so you never have to deal with that directly.

## Installation

Qantra is included automatically when you use the Nuxt starter template. To install it manually:

```sh
pnpm add @youcan/qantra
```

## Setup

Call `qantra.initialize()` once, as early as possible in your app's lifecycle. This patches `window.fetch` to automatically inject the seller's session token into all same-origin requests.

```ts
import { initialize } from '@youcan/qantra';

initialize();
```

After this, every `fetch` call to your own server will automatically include:

```http
Authorization: Bearer <session token>
X-Requested-With: XMLHttpRequest
```

Your server reads this header and uses it to verify and establish the seller session.

::: tip
Qantra components and APIs don't render UI inside your app. They communicate with the Seller Area, which handles the actual rendering (toasts, resource picker, etc.).
:::

## API Reference

| API | Description |
|---|---|
| [`sessionToken()`](/apps/developer-tools/qantra/reference/session-token) | Get the seller's current session JWT |
| [`bounce()`](/apps/developer-tools/qantra/reference/bounce) | Navigate within your embedded app while keeping auth parameters |
| [`resourcePicker()`](/apps/developer-tools/qantra/reference/resource-picker) | Open a product/collection picker |
| [`toast.show()`](/apps/developer-tools/qantra/reference/toast) | Show a toast notification in the Seller Area |