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 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.

Last updated