๐Ÿ”ฌ
MAZING World
  • ๐Ÿ‘‹Welcome to MAZING World
  • Overview
    • โœจOur Products
  • Product Guides
    • ๐ŸงŠCreate 3D Model with AI
    • ๐Ÿ“ชUpload Your Own 3D Model
    • ๐Ÿ“ŽUsing a Template
      • ๐Ÿ–ผ๏ธAugmented Reality Art
      • ๐ŸชกVirtual Carpet
      • ๐Ÿ—ƒ๏ธBulk Uploader
    • ๐Ÿ˜ปGlass Try-On
    • ๐ŸงฎCreate 3D Configurator
    • ๐Ÿ“ฆAI Product Visuals
      • ๐Ÿ“ฝ๏ธCreate Silo Renderings
      • ๐Ÿ‘”Create Lifestyle Renderings
      • ๐ŸŽž๏ธCreate AI 3D Videos
    • ๐ŸคฏPremium Features
      • ๐Ÿ–ฅ๏ธTexture Change
      • ๐Ÿ”ญUsing Hotspots
      • ๐ŸŽฅViewer Settings
      • ๐Ÿ‘ฅUsing Shadows
      • ๐Ÿ’ŽDiamond Material
      • ๐Ÿ”ฅFire Particles
      • ๐Ÿ—ฃ๏ธCall To Action
      • ๐ŸŽฌVideo Texture
      • ๐ŸŽบUsing Sound
      • ๐ŸŽž๏ธGif Texture
      • ๐Ÿ’ฑAdvanced Editor
  • INTEGRATION
    • ๐Ÿ˜ŽIFrame On-site
    • ๐Ÿ’ปScript Integration
    • Shopware Plugin
    • ๐ŸŒWordpress
      • ๐ŸคฉWP Script Integration
      • ๐Ÿ”—WP Shortcode Integration
    • ๐ŸงฉShopify
      • Script Integration
    • ๐Ÿ’ซVariant Integration
    • Additional Notes
      • Content-Security Policy
      • iFrame Flags & Setup
  • Project Management
    • ๐Ÿ“Model Feedback
  • ๐Ÿ“คSharepoint
  • ๐Ÿ’ธBilling and Invoices
  • Use Cases
    • ๐ŸงFor Designers
    • ๐ŸŽจFor Artists
    • ๐Ÿ“กFor Agencies
    • ๐Ÿ›๏ธFor eCommerce
  • APIs
    • ๐Ÿ‘จโ€๐Ÿ’ปAugmented Reality API
Powered by GitBook
On this page
  • ๐ŸŽฏ Why this matters
  • โœ… Correct iFrame Setup
  • ๐Ÿ” Required iFrame Attributes
  • โš’๏ธ Need help generating the iFrame?
  1. INTEGRATION
  2. Additional Notes

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:

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

PreviousContent-Security PolicyNextModel Feedback

Last updated 8 days ago

๐Ÿ‘‰

https://easyiframe.com/