iFrame Flags & Setup
iFrame Setup Guide
๐ฏ 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 featuresallowfullscreen
: Lets users expand the viewer to full screenstyle
: Ensures responsive behavior and proper scalingallow="..."
: 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:
Just paste in your mazing.link
URL, and it will generate the correct embed code for you โ fully responsive and mobile-ready.
Last updated