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

# Embed in an iframe or webview

> Use a parameterized URL to embed Sleekplan inside any iframe or mobile webview, with controls for navigation, layout, and SSO token passing

When the JS widget is not an option — for example, inside a native mobile app or a third-party platform — you can embed Sleekplan using a plain `<iframe>` or a webview pointed at a parameterized URL. You control which page loads, how the layout is presented, and which UI chrome appears.

## Find your product ID

Your product ID is the numeric identifier assigned to your Sleekplan product. You can find it in the widget snippet shown in [**Settings → Widget**](https://app.sleekplan.com/settings/widget):

```js theme={"system"}
window.SLEEK_PRODUCT_ID=12345;
```

Use the value of `SLEEK_PRODUCT_ID` in every URL on this page.

## Base URL

All iframe embeds start from the following base URL:

```
https://embed-{PRODUCT_ID}.sleekplan.app/
```

Replace `{PRODUCT_ID}` with your actual product ID in every URL on this page.

## Navigate to a specific page

Append a hash fragment to open a specific page on load:

| Page           | URL suffix      |
| -------------- | --------------- |
| Feedback board | `/#/feedback/`  |
| Roadmap        | `/#/roadmap/`   |
| Changelog      | `/#/changelog/` |

```html theme={"system"}
<!-- Load the changelog directly -->
<iframe src="https://embed-{PRODUCT_ID}.sleekplan.app/#/changelog/"></iframe>
```

## Display settings

Pass query parameters before the `#` fragment to control the embed's appearance:

| Parameter       | Type    | Default | Options                          |
| --------------- | ------- | ------- | -------------------------------- |
| `full`          | boolean | `false` | `true`, `false`                  |
| `roadmap_style` | string  | `list`  | `list`, `kanban`                 |
| `hide_elements` | array   | —       | `filter`, `navigation`, `footer` |

* **`full`** — Switches to a desktop-optimized layout with wider spacing. Enable this when the iframe fills a large container.
* **`roadmap_style`** — Controls how roadmap items are displayed. Use `kanban` for a column-based board view.
* **`hide_elements`** — Removes specific UI chrome. Useful when you render navigation or filters outside the iframe yourself.

### Examples

**Full desktop layout:**

```html theme={"system"}
<iframe src="https://embed-{PRODUCT_ID}.sleekplan.app/?full=true#/"></iframe>
```

**Kanban roadmap:**

```html theme={"system"}
<iframe src="https://embed-{PRODUCT_ID}.sleekplan.app/?roadmap_style=kanban#/roadmap/"></iframe>
```

**Feedback board with filter, navigation, and footer hidden:**

```html theme={"system"}
<iframe src="https://embed-{PRODUCT_ID}.sleekplan.app/?hide_elements[]=filter&hide_elements[]=navigation&hide_elements[]=footer#/feedback/"></iframe>
```

## Single Sign-On with iframe

When using the JavaScript widget, SSO tokens are passed via the `$sleek` SDK. With an iframe embed, pass your SSO token as the `sso` query parameter instead:

```html theme={"system"}
<iframe src="https://embed-{PRODUCT_ID}.sleekplan.app/?sso=YOURTOKEN#/"></iframe>
```

<Note>
  Generate your SSO token server-side using your Sleekplan secret key before inserting it into the URL. Never expose your secret key in client-side code.
</Note>

See [Single Sign-On](/authentication/single-sign-on) for token generation.