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:
1
<iframe src="https://api.echo3D.co/arjs?key=<YOUR_API_KEY>" allow="camera *"/>
Copied!
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
1
<!DOCTYPE html>
2
<html>
3
    <head>
4
        <title>Ebmedded AR.js Experience through echo3D</title>
5
        <style>
6
            #background {
7
                top: 0;
8
                left: 0;
9
                position: fixed;
10
                width: 100%;
11
                height: 100%;
12
                background-color: rgb(0, 45, 100);
13
                z-index: -1;
14
            }
15
            h1 {
16
                position: relative;
17
                color: white;
18
                text-align: center;
19
                font-size: 5vh;
20
		            font-family: Arial, Helvetica, sans-serif;
21
            }
22
            iframe {
23
                position: relative;
24
                width: 100%;
25
                height: 75vh;
26
            }
27
        </style>
28
    </head>
29
    <body>
30
	    <div id="background"></div>
31
        <h1>Ebmedded AR.js Experience through echo3D</h1>
32
        <iframe src="https://api.echo3D.co/arjs?key=<YOUR_API_KEY>"
33
                allow="camera *">
34
        </iframe>
35
    </body>
36
</html>
Copied!

AR.js - Previous

Transforming Content

Next - AR.js

Troubleshooting

Last modified 8mo ago

Copy link

Contents

Using iframe

Code Example