Prepare an experience in ArcGIS Experience Builder to be embedded in an external website

Summary

In ArcGIS Experience Builder, an experience can be shared across multiple websites through the embed function. This increases accessibility and enhances the experience's impact. Embedding can be performed using the iframe tag in HTML code, and this article provides the workflow to obtain the iframe code for embedding.

Procedure

1. Log in to ArcGIS Online.
2. Set the sharing level of the web experience to Everyone (public). This is required for the experience to be used on other websites. Refer to ArcGIS Online: Share items with everyone for instructions.
3. Add the Share widget to obtain the iframe code to embed.

1. Open the web experience in ArcGIS Experience Builder.
2. In the Insert widget panel, under Menu and toolbars, drag and drop the Share widget onto the canvas.
3. Click Save > Preview .
4. In the preview page, in the Share widget, click Embed to open the Embed code window.

5. In the Embed code window, click Copy .

Note: 
Optionally, in the Embed code window, under Embed Options, specify the width and height of the embedded experience.

Below is the example of the iframe code used.

<iframe width="800" height="600" frameborder="0" allowfullscreen src="https://arcg.is/mgife"></iframe>

Use the code to embed the experience in external websites. Additionally, the iframe code can also be embedded within an expended HTML code for styling, as shown in the example below.

<div class="container">
<iframe width="800" height="600" frameborder="0" allowfullscreen src="<URL_EXB>"></iframe>
</div>
<style>
.container {
position: relative;
overflow: hidden;
padding-top: 56.25%;
}
.container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
</style>