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://pro.mazing-ar.com/L797Flig5_"
    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.