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

# Embed on your website

> Drop the Visit into your own listing page with one iframe.

**Settings → Style & Embed** gives you a ready-made snippet. Click **Copy** and paste it into your page.

<Frame caption="The embed snippet is generated for you — just copy and paste">
  <img src="https://mintcdn.com/planpoint-visit/0E3RRUq_T5nIh8kn/images/share/embed-snippet.png?fit=max&auto=format&n=0E3RRUq_T5nIh8kn&q=85&s=2fe850a6bde8e5f5c2f69a8e8fae3664" alt="Embed snippet code block with a copy button" width="1600" height="699" data-path="images/share/embed-snippet.png" />
</Frame>

## The snippet

```html theme={null}
<iframe
  src="https://visit.planpoint.io/your-slug"
  width="100%"
  height="640"
  style="border:0;display:block;"
  allowfullscreen
></iframe>
```

The snippet you copy also contains a small `onload` handler that listens for a `planpoint:size` message from the viewer and resizes the iframe to fit its content — so the Visit never ends up with an inner scrollbar.

<Note>
  Keep `allowfullscreen`. Without it, the fullscreen photo view and the buyer's floor plan editor cannot expand.
</Note>

## Allowed embed domains

In the same card, **Allowed embed domains** takes a comma-separated list:

```
example.com, my-agency.com
```

Only those domains may frame your Visit. Leave it blank to allow all — which is the default.

<Tip>
  Add your staging domain too, otherwise the embed will look broken while you are testing.
</Tip>

## Sizing

* **Width** — leave at `100%` so it follows your layout.
* **Height** — `640` is a sensible starting point. With the auto-resize handler in place the iframe grows to fit; if your CMS strips inline event handlers, set a fixed height of at least `600px` instead.

For a full-bleed section, wrap the iframe in a container and set the height in CSS:

```css theme={null}
.visit-embed iframe {
  height: 80vh;
  min-height: 600px;
}
```

## Platform notes

<AccordionGroup>
  <Accordion title="WordPress">
    Use a **Custom HTML** block, not the visual editor — the classic editor may strip the `onload` attribute. Some security plugins block iframes; allow `visit.planpoint.io` if the embed appears empty.
  </Accordion>

  <Accordion title="Webflow">
    Add an **Embed** element and paste the snippet. Set the parent div's height in the Designer if you want a fixed size.
  </Accordion>

  <Accordion title="Squarespace / Wix">
    Use the **Embed / HTML** block. Both platforms sandbox custom code, so if the auto-resize does not fire, set a fixed height on the iframe.
  </Accordion>

  <Accordion title="React / Next.js">
    Paste the iframe as JSX, renaming `allowfullscreen` to `allowFullScreen` and `style` to an object. Subscribe to the `planpoint:size` message in a `useEffect` if you want auto-resize.
  </Accordion>
</AccordionGroup>

## Behaviour inside an iframe

Most things work identically, with two exceptions worth knowing:

* **Panorama mode** relies on the parent page for scroll gestures, so it can feel different from the standalone URL.
* Browsers block **install to home screen** prompts inside frames.

If either matters to you, link out to the [public URL](/share/public-url) instead of embedding.