# Embed into Website or App

You can easily embed the Scene Viewer experience generated and hosted through the platform to any web page.

The web page can be part of a website or integrated into a mobile app.

## Using iframe

In order to embed the Scene Viewer experience, you must declare an `iframe` tag and set its source to the address of the hosted experience. You can use the full URL as the source:

```markup
<iframe src="https://api.echo3D.com/webar?key=<YOUR_API_KEY>&entry=<ENTRY-ID>"/>
```

Or the short shareable link:

```markup
<iframe src="https://go.echo3D.co/<SHORT-CODE>"/>
```

## Code Example

Here is a fully styled HTML page with an embedded Scene Viewer experience:

{% tabs %}
{% tab title="Full URL" %}

```markup
<!DOCTYPE html>
<html>
    <head>
        <title>Ebmedded WebAR 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 WebAR Experience through echo3D</h1>
        <iframe
           src="https://api.echo3D.com/webar?key=<API-KEY>&entry=<ENTRY-ID>"
           title="echo3D WebAR iframe element">
        </iframe>
    </body>
</html>
```

{% endtab %}

{% tab title="Short Link" %}

```markup
<!DOCTYPE html>
<html>
    <head>
        <title>Ebmedded WebAR 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 WebAR Experience through echo3D</h1>
          <iframe
            src="https://go.echo3D.co/<SHORT-CODE>"
            title="echo3D WebAR iframe element">
          </iframe>
    </body>
</html>
```

{% endtab %}
{% endtabs %}
