> For the complete documentation index, see [llms.txt](https://mazingxr.gitbook.io/mazing-world/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://mazingxr.gitbook.io/mazing-world/integration-types/additional-information/iframe-flags-and-setup.md).

# iFrame Flags & Setup

## 🎯 Why this matters

To make sure our **3D & AR viewer** runs smoothly across all devices and browsers, your iFrame **must be embedded with the correct flags and container styles**.

This ensures:

* Augmented Reality (AR) permissions work properly on mobile devices
* The iFrame is responsive and scales correctly
* All interactive features are available and not restricted by browser security settings

## ✅ Correct iFrame Setup

Below is an example of a **fully functional and responsive iFrame setup**, including all necessary flags and styles:

```
<div style="overflow: hidden; position: relative; padding-top: min(600px, 100%); max-width: 600px; margin-left: auto; margin-right: auto;">
  <iframe 
    src="https://mazing.link/iJ3D3mv3YU"
    allowusermedia
    allowfullscreen
    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; camera *; xr-spatial-tracking"
    style="border: 0; height: 100%; left: 0; position: absolute; max-height: 600px; top: 0; width: 100%;">
  </iframe>
</div>

```

## 🔐 Required iFrame Attributes

Here’s what each flag does:

* `allowusermedia`: Enables access to the camera, required for AR features
* `allowfullscreen`: Lets users expand the viewer to full screen
* `style`: Ensures responsive behavior and proper scaling
* `allow="..."`: Enables various browser permissions, including AR, autoplay, and spatial tracking

## ⚒️ Need help generating the iFrame?

You can use this Mazing tool to generate your iFrame with the correct setup:

👉 <https://easyiframe.com/>

Just paste in your `mazing.link` URL, and it will generate the correct embed code for you – **fully responsive and mobile-ready.**