How to Embed a Web Component
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.
array-web-component.jsdefines common attributes and functionality for the Array Web Components. All applications must include this file.
<target-component>.jsis 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
<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>
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
<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.
https://embed.sandbox.array.io/ but not include
sandbox="true" in the Component's HTML element.
If you include the
sandboxattribute, you must set its value, as shown in the example (i.e.
sandbox="true"). The mere presence of
sandboxwithout a value won't direct the Component to the Array sandbox identities.
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.
Updated 2 days ago