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:

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

Note:

If you choose to display a PDF directly in the Embed widget, some users may not be able to view it in certain browsers for security reasons.

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.

    Note:

    Only HTTPS URLs are supported. For security, the embedded app is constrained by the same origin policy. For domains other than *.arcgis.com and *.esri.com, the sandbox attribute is automatically added.

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

      Note:

      For information about URL parameters supported by the embedded app, refer to the respective documentation, such as for ArcGIS Dashboards and ArcGIS Web AppBuilder.

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

    Note:

    When you embed by code, the sandbox attribute is automatically added without the allow-same-origin directive. This allows the embedded content to run JavaScript and read its own cookie or local storage information, but it can't access the Experience Builder app DOM, cookie, local storage, and so on.

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

   Tip:

   Because the builder already includes the app ID parameter, add the URL parameter using an ampersand (such as &state=) instead of a question mark.

   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:

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