How to Embed a Component

To embed an Array web component in an HTML page, you need to...

  • Include two scripts: The script for the "base" component, and the script for the specific component that you want to use (the "target" component). Target components inherit the attributes and functionality of the base component.

  • Add the HTML element that's defined by the target component to the body of your page. If you're testing the component in the Array sandbox, you must add sandbox="true" to the element.

🚧

If you include the sandbox attribute, you must set its value. The mere presence of sandbox without a value doesn't direct the component to the Array sandbox.

In this example, we embed the array-credit-report component in our page:

<html>
  <head>
    <!-- Include the base component and the target component. You must pass your appKey as a query parameter to both scripts -->
    <script src="https://embed.array.io/cms/array-web-component.js?appKey=1234-5678"></script>
    <script src="https://embed.array.io/cms/array-credit-report.js?appKey=1234-5678"></script>
  </head>
  <body>
    <!-- Embed the target component by using the "component tag" as the element name. The element takes a conglomeration of base and target attributes. Since we're testing the component, we add `sandbox` to the element. -->
    <array-credit-report appKey="1234-5678" userToken="ABCD-EFGH" sandbox="true">
    </array-credit-report>
  </body>
</html>

The following sections examine these maneuvers.

Include the Component Scripts

As shown in the example, the URL of a component script is constructed as...

https://embed.array.io/cms/component-tag.js

  • The component tag of the base component is array-web-component.

  • For the tags of the other components, see Component List.

You must pass your appKey as a query parameter to all of the scripts that you include:

<script src="https://embed.array.io/cms/array-web-component.js?appKey=1234-5678"></script>
<script src="https://embed.array.io/cms/array-credit-report.js?appKey=1234-5678"></script>

Add the Target Component

You add the target component to your page by including the HTML element that it defines. The element name is the component's tag:

<array-credit-report appKey="1234-5678" userToken="ABCD-EFGH" sandbox="true">
</array-credit-report>

The element's attributes are a conglomeration of the attributes for the base component and the target component:

  • You must always include the appKey attribute; see the individual component documentation for other requirements.

  • The sandbox="true" attribute means your app is running in the sandbox. You must remove the attribute before you go to production.