Embed an ArcGIS Online web application in a website

Summary

When sharing a web map publicly in ArcGIS Online, an option becomes available to 'Embed in Website'. This option automatically generates a block of HTML code that can be copied and pasted to a website, allowing the map to be viewed directly on the web page. This block of code can be altered to allow a web application (instead of a web map) to be embedded. This option can be useful for embedding ArcGIS Online hosted web applications, Web AppBuilder applications, and the Map Viewer.

Procedure

Embedding a web application in a website can be useful in various situations.

• To show a map on a web page that includes a legend which is open by default, the Map Tools web application template can be used with a web map and embedded in the web page.
• To provide a map which includes a premium service with embedded credentials, such as the World Routing Service. For example, routes can be found through the Directions web application template or using the Directions widget in the Web AppBuilder.
• To show a map that includes Related Records functionality, the Map Viewer can be embedded in a website.

Steps for embedding an ArcGIS Online hosted web application, Web AppBuilder application, or the Map Viewer in a web page

1. Create your web map and web application in ArcGIS Online, and copy the URL of the web application. This can be copied from the Item Details page of the web application under the URL section, or by copying the URL while the application is opened.

Note: 
If embedding the Map Viewer, copy the URL of the web map when opened in the Map Viewer.

2. Open the web map used to create the application and go to the Share option. Enable the option to share with Everyone (public), and click Embed in Website. Select the desired size for embedding the map.
    
3. In the code block generated by the Embed in Website option, remove the URL portion of the code block in the src attribute of the <iframe> tag (between src= and ></iframe>), and paste the URL from the web application between double quotes, as shown below.

<iframe width="500" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"
src="http://arcgis.com/apps/Viewer/index.html?appid=1fa6b89a300c4e9ebf84613dd5c44b9f"></iframe>

4. Copy and paste the HTML code block to the website configuration.