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

# Embed a scene

> Put a live, interactive Pascal 3D scene on your own website with a single iframe — including the URL parameters that control the viewer chrome.

Any public Pascal project can be embedded on another site with a plain `<iframe>`
pointing at its viewer page. Visitors get the full interactive viewer — orbiting the
camera, toggling levels and wall cutaways, and walking through the scene in first
person — with no accounts, SDKs, or scripts required on your side.

<Frame caption="A Pascal scene embedded on an external site">
  <img src="https://mintcdn.com/pascal-editor/apGCucPATyHJueQ6/images/placeholder.svg?fit=max&auto=format&n=apGCucPATyHJueQ6&q=85&s=3aedeb58d2fb184990f323c39df4bb28" alt="Pascal viewer embedded in another website via iframe" width="1600" height="1000" data-path="images/placeholder.svg" />
</Frame>

## Requirements

* The project must be **public**. Flip the visibility control in the editor's top
  bar from **Private** to **Public**. Private projects render an access screen
  instead of the scene.
* Grab the URL with the **Copy viewer link** button next to the visibility control,
  or copy it from the address bar on the project's viewer page. It has the form:

```text theme={null}
https://editor.pascal.app/viewer/<project-id>
```

## Basic embed

```html theme={null}
<iframe
  src="https://editor.pascal.app/viewer/PROJECT_ID"
  width="800"
  height="500"
  style="border: 0; border-radius: 12px;"
  loading="lazy"
  title="Pascal 3D scene"
></iframe>
```

Replace `PROJECT_ID` with your project's id (the last path segment of your viewer
link). For a responsive embed, wrap the iframe in a container with a fixed aspect
ratio:

```html theme={null}
<div style="aspect-ratio: 16 / 9;">
  <iframe
    src="https://editor.pascal.app/viewer/PROJECT_ID"
    style="border: 0; border-radius: 12px; width: 100%; height: 100%;"
    loading="lazy"
    title="Pascal 3D scene"
  ></iframe>
</div>
```

## URL parameters

The viewer accepts two flags to reduce its chrome inside embeds. A value of `1`,
`true`, or `yes` enables a flag.

| Parameter       | Effect                                                                             |
| --------------- | ---------------------------------------------------------------------------------- |
| `hideHeader`    | Hides the top-left card (back arrow, project name, owner, and its actions)         |
| `hideBottomBar` | Hides the bottom-center controls bar (levels, walls, walkthrough, orbit, top view) |

```html theme={null}
<iframe
  src="https://editor.pascal.app/viewer/PROJECT_ID?hideHeader=1&hideBottomBar=1"
  width="800"
  height="500"
  style="border: 0; border-radius: 12px;"
  loading="lazy"
  title="Pascal 3D scene"
></iframe>
```

Even with both bars hidden, visitors can still orbit, pan, and zoom the camera with
the mouse or touch.

<Note>
  Signed-out visitors see a small "Get Started" card in the top-right corner of the
  viewer. It is part of the hosted viewer and can't be turned off by a URL flag.
</Note>

## What the embed serves

Embeds load the same thing your shared viewer link does: once a published project
has finished [baking](/export/bake-and-export), the viewer serves the optimized
baked copy for fast loading, with doors and windows still interactive. Until a
fresh bake is ready, it falls back to rendering the live scene. Republishing your
project updates every embed automatically — the iframe URL never changes.

## Current limits

* An iframe is the only supported embed today. There is no oEmbed endpoint,
  JavaScript API, or postMessage interface.
* The starting camera can't be set from the URL — the viewer frames the scene with
  its default camera.
* Only the read-only viewer can be embedded, not the editor.