Embedding AR into Apps and Webpages
You can easily embed the augmented reality experiences you create with MyWebAR into existing websites (blogs, marketplace pages, campaign landings and more) or native iOS and Android apps.
The embed code utilizes an <iframe> tag, which you'll need to insert into your website's HTML.
Log into your MyWebAR account and click on the three dots next to the experience you're looking to embed.
The embed code utilizes an <iframe> tag, which you'll need to insert into your website's HTML.
Log into your MyWebAR account and click on the three dots next to the experience you're looking to embed.
The platform will generate a ready-to-use code that you can paste without editing:
Locate the section of your webpage where you want the AR experience to appear. Paste the embed code provided by MyWebAR within the <iframe> tags into your website's HTML, ensuring proper opening and closing tags. See the sample code below:
<iframe src="https://mywebar.com/p/link-of-your-ar-experience"
frameborder="0"
scrolling="yes"
seamless="seamless"
style="display:block; width:100%; height:100vh;"
allow="camera;gyroscope;accelerometer;magnetometer;xr-spatial-tracking;microphone;">
</iframe>
Explanation of Attributes:
- frameborder="0" - removes the border around the iframe.
- scrolling="yes" - allows scrolling within the AR experience if needed.
- seamless="seamless" - creates a smoother transition between the webpage and the AR experience.
- style="display:block; width:100%; height:100vh;" - sets the display, width, and height of the iframe to occupy the entire viewport.
- allow="camera;gyroscope;accelerometer;magnetometer;xr-spatial-tracking;microphone" - grants the AR experience permission to access necessary device features.
Embedding in Native Apps
To embed a MyWebAR experience in a native iOS or Android app, you'll need to open the AR experience webpage within the app's built-in browser.
Some cross-platform app builders might require specific code flags to ensure the embedded experience can access the camera properly. Refer to the documentation of your app builder for details on enabling camera access for embedded web content.
Related articles
Connecting a Custom Domain
Use a custom domain to personalize the link of your webAR experience
Setting Up Custom Branding
Learn how to use custom branding to create white-label AR experiences
Using External Storage
Import files from an external storage to get unlimited views for your experiences