> For the complete documentation index, see [llms.txt](https://docs.fastn.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.fastn.ai/tutorials/developer/how-embedding-works.md).

# How Embedding Works

Fastn is embedded into your product as an iframe. Your application renders the Fastn widget, and your customers use it to connect their apps and configure integrations without leaving your product.

### How the pieces fit together

There are three parts:

**Your backend** generates a short-lived embed token by calling the Fastn token endpoint with your API key. The token scopes the widget to a specific customer.

**Your frontend** renders the Fastn iframe, passing the token in the URL. The iframe loads the widget your customers interact with.

**The Fastn platform** validates the token, serves the widget, and handles the integration work — authentication with third-party apps, data sync, and workflow execution.

```
Your backend ──(API key)──> Fastn token endpoint ──> short-lived token
     │
     └──> token ──> Your frontend ──> Fastn iframe (with token) ──> Widget
```

### The iframe is the current integration path

The Embed tab in the Widget Builder lists a React SDK, but it is marked "coming soon." Today, the supported method is the iframe. This guide documents the iframe path.

When the React SDK ships, it will wrap this same flow — your backend will still generate the token, and the SDK will render the iframe for you. The token generation pattern you build now will carry over.

### What you'll set up

1. A server-side function that generates an embed token on each request (never hardcode tokens — they expire in 15 minutes).
2. A frontend component that renders the Fastn iframe with the token.
3. A decision about how connections are scoped — shared across the customer's organization, or isolated per individual user (see [Tenancy](https://claude.ai/fastn/tutorials/developer/tenancy)).

### Why generate tokens server-side

The token is minted from your API key. Your API key must never be exposed in client-side code. The token also expires after 15 minutes, so it can't be generated once and reused — each page load needs a fresh token. Both of these require a backend step.

A common failure is hardcoding a token into the frontend during testing. It works for the first 15 minutes, then the iframe renders blank with no obvious error. Generating the token server-side per request avoids this entirely.

### Next

Start with the [Quickstart](https://claude.ai/fastn/tutorials/developer/quickstart) to get a working embed, then read [Generating Embed Tokens](https://claude.ai/fastn/tutorials/developer/generating-embed-tokens) for the full token details.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.fastn.ai/tutorials/developer/how-embedding-works.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.