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 end 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

The following is an example of how to use custom code to embed an iframe:

  
1
2

<iframe width="100%" height="600px" frameborder="0" scrolling="yes" marginheight="0" marginwidth="0" src="https://developers.arcgis.com/"></iframe></div>

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 runtime, 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.

      • 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 end users can add URL parameters to the web experience URL at runtime to control what appears in the embedded app.

    • Code—Add your own custom code to embed third-party elements in your experience. It supports HTML, CSS in <style> tags, and JavaScript in <script> tags.

  • 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).

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.

  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:

     
    1
    https://<your portal url>/apps/opsdashboard/index.html#/<id>?state={appURL.search.state}

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.