Embed into Website or App

You can easily embed the AR.js experience generated and hosted through the console to any web page.
The web page can be part of a website or integrated in a mobile app.
Using iframe
In order to embed the AR.js experience you must declare an iframe tag and set its source to the address of the hosted experience:
<iframe src="https://api.echo3D.co/arjs?key=<YOUR_API_KEY>" allow="camera *"/>
Note that you must allow for camera access to avoid camera permission errors.
Code Example
Here is a full styled HTML page with an embedded AR.js experience:
index.html
<!DOCTYPE html>
<html>
    <head>
        <title>Ebmedded AR.js Experience through echo3D</title>
        <style>
            #background {
                top: 0;
                left: 0;
                position: fixed;
                width: 100%;
                height: 100%;
                background-color: rgb(0, 45, 100);
                z-index: -1;
            }
            h1 {
                position: relative;
                color: white;
                text-align: center;
                font-size: 5vh;
		            font-family: Arial, Helvetica, sans-serif;
            }
            iframe {
                position: relative;
                width: 100%;
                height: 75vh;
            }
        </style>
    </head>
    <body>
	    <div id="background"></div>
        <h1>Ebmedded AR.js Experience through echo3D</h1>
        <iframe src="https://api.echo3D.co/arjs?key=<YOUR_API_KEY>"
                allow="camera *">
        </iframe>
    </body>
</html>

AR.js - Previous

Transforming Content

Next - AR.js

Troubleshooting

Last modified 11mo ago

Copy link

On this page

Using iframe

Code Example