Embedding Components

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.

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 by element name. The element takes a conglomeration of base and target attributes. -->
    <array-credit-report appKey="1234-5678" userToken="ABCD-EFGH" sandbox>
    </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-name.js

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

  • For the names 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 same as the component name:

<array-credit-report appKey="1234-5678" userToken="ABCD-EFGH" sandbox>
</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 attribute means your app is running in the sandbox. You must remove the attribute before you go to production.