Array provides a set of Web Components that provide ready-to-use pages and panels that you can embed in your application. For example, your application can display a login page by embedding the Account Login Component, or display a condensed version of the customer's credit report by configuring and embedding the Credit Report Component.

You can find demos of all of the Array Web Components, some in multiple configurations, by visiting either of the links above.

This document explains how to embed an Array Web Component in a web page in your application. The Components that you can include in your application are listed and described in Components and Attributes.

Include the Array JavaScript Files

To embed an Array Web Component in an HTML page, you include two JavaScript files in the page's <head>:

array-web-component.js defines common attributes and functionality for the Array Web Components. All applications must include this file.
<target-component>.js is the script for the specific Component that you want to use. You can include more than one target component. A target component inherits the attributes and functionality defined in the base script.

In this example, we include the script for the array-credit-overview Component.

<head>
  <!-- Include the Array base script and the target Component script in the <head>. 
  You must pass your appKey as a query parameter to the target script.  
  -->
  <script src="https://embed.sandbox.array.io/cms/array-web-component.js"></script>
  <script src="https://embed.sandbox.array.io/cms/array-credit-overview.js?appKey=3F03D20E-5311-43D8-8A76-E4B5D77793BD"></script>
</head>

JavaScript File URL

The JavaScript file URL depends on your development stage, either testing or production:

Stage	URL
Testing	`https://embed.sandbox.array.io/cms/<component-name>.js`
Production	`https://embed.array.io/cms/<component-name>.js`

If you're testing, you probably want to add the sandbox="true" attribute to the Component's HTML element, as explained in the next section.

Add the Component's HTML Element to Your Page

After you've included the JavaScript files in the <head> portion of your page, you then add the HTML element that's defined by the target Component to the <body> The element's name is the same as the <target-component> portion of the Component script.

<html>

  <body>
    <!-- Embed the target Component in the <body>. 
    The element takes a conglomeration of base and target attributes. 
    We're using a sandbox identity with our Component, so we add `sandbox="true"` to the element. -->
    <array-credit-overview
      appKey="3F03D20E-5311-43D8-8A76-E4B5D77793BD"
      userToken="AD45C4BF-5C0A-40B3-8A53-ED29D091FA11"
      sandbox="true"
    />
  </body>
</html>

When the page loads, the customer will see a form that's similar to this demo:

The Components that you can include in your application are listed and described in Components and Attributes.

Using Sandbox Identities

When you're testing your application, you'll probably want to use the Sandbox Identities rather than your actual customers' data. You direct the Component to the sandbox identities by adding the sandbox="true" attribute, as shown in the previous code example.

Note that you don't have to use sandbox identities when you're testing you application. You can direct your application to use the JavaScript files that are hosted by https://embed.sandbox.array.io/ but not include sandbox="true" in the Component's HTML element.

🚧
If you include the sandbox attribute, you must set its value, as shown in the example (i.e. sandbox="true"). The mere presence of sandbox without a value won't direct the Component to the Array sandbox identities.

Components and JavaScript Events

Some of the Array Web Components return information to your application. For example, the Account Login Component returns a customer's user ID and token, information that you need in other Components, such as Credit Report.

A component returns information by posting a JavaScript event. You catch the event by configuring a JavaScript listener, as explained in Component Events