Embed widget

The Embed widget allows you to embed website content using a URL or code for additional custom functionality.

Examples

Use this widget to support app design requirements such as the following:

• You have a requirement to provide additional information from a website based on the selection of a feature. The feature layer contains a field with URLs to websites that you want to embed once a user selects a feature on the map or clicks a button to see more information for that feature.
• You want to embed a dashboard in your app and allow users to append a URL parameter to the end of the web experience URL to change the current view of the dashboard (such as to show data for a specific region).
• You want to embed content using HTML code (such as a website) or copy the code from a sample (such as point clustering).

Usage notes

To create a dynamic URL using URL parameters, save and reload your app with the URL parameter you want to use, so you can select a corresponding key in the URL info window. At run time, the Embed widget finds and matches the name of the specified URL info with the URL parameters added to the host app's URL and resolves the URL using the corresponding value to display the embedded app.

Settings

The Embed widget includes the following settings:

• Embed by—Choose to embed by URL or code.

  • URL—Embed a website with a static URL or use the following options to form a dynamic URL:

    • Connect to data—Select a layer as the data source (added from web maps, web scenes, direct layer, or through URL) and click the Data button to select an attribute that contains URLs or to add to an existing URL as parameters. Use the Label field to display a description in the widget when it is not populated by the contents of a URL in the data.

    • URL info—Obtain URL parameters that you add as a suffix to your app URL in the builder. Configure a dynamic URL to pass URL parameters from the Embed widget to the embedded app so users can add URL parameters to the web experience URL at run time to control what appears in the embedded app.

  • Code—Add your own custom HTML code to embed third-party elements in your experience.

    To meet compliance requirements, the widget restricts what content you can embed by code. Currently, the widget supports URL content in an HTML iframe, code shared from a selection of popular social media websites, and a subset of HTML tags and attributes. The following is a list of supported HTML formats:

    Format	Example
    Standard HTML iframe with URL content	js <iframe width="100%" height="600px" frameborder="0" scrolling="yes" marginheight="" marginwidth="" src="https://developers.arcgis.com/"></iframe>
    YouTube	js <iframe width="560" height="315" src="https://www.youtube.com/embed/pNrsd5naN7U" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
    X	js <a class="twitter-timeline" href="https://twitter.com/ArcGISApps?ref_src=twsrc%5Etfw">Tweets by ArcGISApps</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
    Facebook	js <iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2Fesrigis%2Fphotos%2Fa.433181450280%2F10160256145415281%2F&show_text=true&width=500" width="500" height="417" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
    Instagram	js <blockquote class="instagram-media" data-instgrm-permalink="https://www.instagram.com/reel/CmZQDMJtMvc/?utm_source=ig_embed&amp;utm_campaign=loading" data-instgrm-version="14" style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:540px; min-width:326px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);"><div style="padding:16px;"> <a href="https://www.instagram.com/reel/CmZQDMJtMvc/?utm_source=ig_embed&amp;utm_campaign=loading" style=" background:#FFFFFF; line-height:0; padding:0 0; text-align:center; text-decoration:none; width:100%;" target="_blank"> <div style=" display: flex; flex-direction: row; align-items: center;"> <div style="background-color: #F4F4F4; border-radius: 50%; flex-grow: 0; height: 40px; margin-right: 14px; width: 40px;"></div> <div style="display: flex; flex-direction: column; flex-grow: 1; justify-content: center;"> <div style=" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; margin-bottom: 6px; width: 100px;"></div> <div style=" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; width: 60px;"></div></div></div><div style="padding: 19% 0;"></div> <div style="display:block; height:50px; margin:0 auto 12px; width:50px;"><svg width="50px" height="50px" viewBox="0 0 60 60" version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-511.000000, -20.000000)" fill="#000000"><g><path d="M556.869,30.41 C554.814,30.41 553.148,32.076 553.148,34.131 C553.148,36.186 554.814,37.852 556.869,37.852 C558.924,37.852 560.59,36.186 560.59,34.131 C560.59,32.076 558.924,30.41 556.869,30.41 M541,60.657 C535.114,60.657 530.342,55.887 530.342,50 C530.342,44.114 535.114,39.342 541,39.342 C546.887,39.342 551.658,44.114 551.658,50 C551.658,55.887 546.887,60.657 541,60.657 M541,33.886 C532.1,33.886 524.886,41.1 524.886,50 C524.886,58.899 532.1,66.113 541,66.113 C549.9,66.113 557.115,58.899 557.115,50 C557.115,41.1 549.9,33.886 541,33.886 M565.378,62.101 C565.244,65.022 564.756,66.606 564.346,67.663 C563.803,69.06 563.154,70.057 562.106,71.106 C561.058,72.155 560.06,72.803 558.662,73.347 C557.607,73.757 556.021,74.244 553.102,74.378 C549.944,74.521 548.997,74.552 541,74.552 C533.003,74.552 532.056,74.521 528.898,74.378 C525.979,74.244 524.393,73.757 523.338,73.347 C521.94,72.803 520.942,72.155 519.894,71.106 C518.846,70.057 518.197,69.06 517.654,67.663 C517.244,66.606 516.755,65.022 516.623,62.101 C516.479,58.943 516.448,57.996 516.448,50 C516.448,42.003 516.479,41.056 516.623,37.899 C516.755,34.978 517.244,33.391 517.654,32.338 C518.197,30.938 518.846,29.942 519.894,28.894 C520.942,27.846 521.94,27.196 523.338,26.654 C524.393,26.244 525.979,25.756 528.898,25.623 C532.057,25.479 533.004,25.448 541,25.448 C548.997,25.448 549.943,25.479 553.102,25.623 C556.021,25.756 557.607,26.244 558.662,26.654 C560.06,27.196 561.058,27.846 562.106,28.894 C563.154,29.942 563.803,30.938 564.346,32.338 C564.756,33.391 565.244,34.978 565.378,37.899 C565.522,41.056 565.552,42.003 565.552,50 C565.552,57.996 565.522,58.943 565.378,62.101 M570.82,37.631 C570.674,34.438 570.167,32.258 569.425,30.349 C568.659,28.377 567.633,26.702 565.965,25.035 C564.297,23.368 562.623,22.342 560.652,21.575 C558.743,20.834 556.562,20.326 553.369,20.18 C550.169,20.033 549.148,20 541,20 C532.853,20 531.831,20.033 528.631,20.18 C525.438,20.326 523.257,20.834 521.349,21.575 C519.376,22.342 517.703,23.368 516.035,25.035 C514.368,26.702 513.342,28.377 512.574,30.349 C511.834,32.258 511.326,34.438 511.181,37.631 C511.035,40.831 511,41.851 511,50 C511,58.147 511.035,59.17 511.181,62.369 C511.326,65.562 511.834,67.743 512.574,69.651 C513.342,71.625 514.368,73.296 516.035,74.965 C517.703,76.634 519.376,77.658 521.349,78.425 C523.257,79.167 525.438,79.673 528.631,79.82 C531.831,79.965 532.853,80.001 541,80.001 C549.148,80.001 550.169,79.965 553.369,79.82 C556.562,79.673 558.743,79.167 560.652,78.425 C562.623,77.658 564.297,76.634 565.965,74.965 C567.633,73.296 568.659,71.625 569.425,69.651 C570.167,67.743 570.674,65.562 570.82,62.369 C570.966,59.17 571,58.147 571,50 C571,41.851 570.966,40.831 570.82,37.631"></path></g></g></g></svg></div><div style="padding-top: 8px;"> <div style=" color:#3897f0; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:550; line-height:18px;">View this post on Instagram</div></div><div style="padding: 12.5% 0;"></div> <div style="display: flex; flex-direction: row; margin-bottom: 14px; align-items: center;"><div> <div style="background-color: #F4F4F4; border-radius: 50%; height: 12.5px; width: 12.5px; transform: translateX(0px) translateY(7px);"></div> <div style="background-color: #F4F4F4; height: 12.5px; transform: rotate(-45deg) translateX(3px) translateY(1px); width: 12.5px; flex-grow: 0; margin-right: 14px; margin-left: 2px;"></div> <div style="background-color: #F4F4F4; border-radius: 50%; height: 12.5px; width: 12.5px; transform: translateX(9px) translateY(-18px);"></div></div><div style="margin-left: 8px;"> <div style=" background-color: #F4F4F4; border-radius: 50%; flex-grow: 0; height: 20px; width: 20px;"></div> <div style=" width: 0; height: 0; border-top: 2px solid transparent; border-left: 6px solid #f4f4f4; border-bottom: 2px solid transparent; transform: translateX(16px) translateY(-4px) rotate(30deg)"></div></div><div style="margin-left: auto;"> <div style=" width: 0px; border-top: 8px solid #F4F4F4; border-right: 8px solid transparent; transform: translateY(16px);"></div> <div style=" background-color: #F4F4F4; flex-grow: 0; height: 12px; width: 16px; transform: translateY(-4px);"></div> <div style=" width: 0; height: 0; border-top: 8px solid #F4F4F4; border-left: 8px solid transparent; transform: translateY(-4px) translateX(8px);"></div></div></div> <div style="display: flex; flex-direction: column; flex-grow: 1; justify-content: center; margin-bottom: 24px;"> <div style=" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; margin-bottom: 6px; width: 224px;"></div> <div style=" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; width: 144px;"></div></div></a><p style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; line-height:17px; margin-bottom:0; margin-top:8px; overflow:hidden; padding:8px 0 7px; text-align:center; text-overflow:ellipsis; white-space:nowrap;"><a href="https://www.instagram.com/reel/CmZQDMJtMvc/?utm_source=ig_embed&amp;utm_campaign=loading" style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px; text-decoration:none;" target="_blank">A post shared by Esri (@esrigram)</a></p></div></blockquote> <script async src="//www.instagram.com/embed.js"></script>
    Vimeo	js <iframe src="https://player.vimeo.com/video/344310270?h=f8c418505e" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe> <p><a href="https://vimeo.com/344310270">The Science of Where - ESRI</a> from <a href="https://vimeo.com/south422">422 South</a> on <a href="https://vimeo.com">Vimeo</a>.</p>
    Other	Learn more about supported HTML

• Auto refresh—Set a custom time interval (in minutes) to automatically refresh the embedded content in the Embed widget. The minimum value you can set is 0.2 minutes (12 seconds).

• Honor theme font—If you embed by HTML, you can turn on this setting to apply the app theme font to text.

Configure a dynamic URL

Complete the following steps to obtain URL parameters from your web experience that you can pass to an embedded app:

1. Add an Embed widget and save it.

2. In the address bar of the browser window, add the URL parameter to your web experience URL and press Enter to reload the page.

   Once the builder reloads with the URL parameter, the URL info button displays its key to build a dynamic URL.

3. In the Embed by URL input box, paste the URL for the app you want to embed.

4. At the end of the embed URL, type the URL parameter (such as ?state= ).

5. Click the URL info button and select the corresponding key to complete the dynamic URL.

   The following is an example dynamic URL for an embedded dashboard:

   Use dark colors for code blocksCopy

   1
   https://<your portal url>/apps/dashboards/<id>?state={appURL.search.state}

Share authentication

Some web applications prompt users to sign in with an ArcGIS account. An app might require login because of its share settings, because the app includes widgets that use premium content, or for other reasons.

If you want to embed an ArcGIS web app in your Experience Builder app, and both require login, you can add the arcgis-auth-origin and arcgis-auth-portal URL parameters to share authentication between both apps so users only need to sign in once.

To embed a private Experience Builder app in another Experience Builder app, use ?arcgis-auth-origin= to define the host app domain URL for authentication. The following is an example:

1
https://<orgdomain>/experience/<AppID>/?arcgis-auth-origin=<your host app domain, such as https://localhost:3001>

To embed a JavaScript SDK-based app, such as a Web AppBuilder app, use the ?arcgis-auth-origin= for the host app domain authentication and ?arcgis-auth-portal= for the ArcGIS portal from which the JavaScript SDK-based app needs authentication. The following are examples:

1
https://<orgdomain>/apps/webappviewer/index.html?id=<appID>&arcgis-auth-origin=<your host app domain, such as https://localhost:3001>&arcgis-auth-portal=<orgA URL>

1
https://www.arcgis.com/apps/dashboards/<item_ID>?arcgis-auth-origin=https://experience.arcgis.com&arcgis-auth-portal=https://<myorg>.maps.arcgis.com