---
title: "Plaid Component"
slug: "plaid-component"
updated: 2025-12-04T19:35:42Z
published: 2025-12-04T19:35:42Z
canonical: "docs.unqork.io/plaid-component"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.unqork.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Plaid Component

UDesignerClassic Designer

The **Plaid component** is a Centauri (v1.0) component that connects to the [Plaid service](/v1/docs/authentication-types), lettings Creators securely connect applications to financial accounts. In Express View, the Plaid component displays as a button end-users click to securely log into their financial account. Once clicked, Unqork [applications](/v1/docs/introduction-to-unqork-applications) access relevant and verified financial information. Because financial services have strict login requirements, the Plaid component can also verify an end-user's identity.

It's important to note that [Plaid](https://plaid.com/) is just a data provider, and it does not perform financial transactions. To perform actual banking transactions, integration with [Stripe](https://stripe.com/) is required.

The **Account Linked** button below displays a configured Plaid component in Express View:

[![A static image displaying a Plaid component button and a ViewGrid of the linked Plaid account.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Plaid_Component_ExpressView_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-10-27T02%3A40%3A45Z&se=2026-10-27T03%3A40%3A45Z&sr=c&sp=r&sig=6hBePJxJnud5tA4OqsuTbBohe2DlikntfEIux8j1V74%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Plaid%20Component%20ExpressView.jpg?sv=2026-02-06&spr=https&st=2026-10-27T02%3A40%3A45Z&se=2026-10-27T03%3A40%3A45Z&sr=c&sp=r&sig=6hBePJxJnud5tA4OqsuTbBohe2DlikntfEIux8j1V74%3D)

Your Plaid service can include any of the following Plaid products:

- Authentication
- Assets
- Identity
- Income
- Investments
- Liabilities
- Transactions

You'll find the Plaid component in the [Data & Event Processing](/v1/docs/data-event-processing) group to the left of the [Module Builder](/v1/docs/introduction-to-the-module-builder).

## About the Configuration Window

> To learn more about general component settings, view our [General Component Settings](/v1/docs/general-component-settings) article.

## Display Settings

### Field Text

| Setting | Description |
| --- | --- |
| **Label Text** | Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. User-friendly labels make your module more accessible. Keep labels short and descriptive (a word or two) using title case. For longer entries, use sentence case. |

### Contextual Help

| Setting | Description |
| --- | --- |
| **Helper Text** | A quick tip describing the expected value of an input field. Unlike a Tooltip, Helper Text stays visible under the input field and displays on a single line. |

### Default State Options

| Setting | Description |
| --- | --- |
| **Hide Label** | Setting Hide Label to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-10-27T02%3A40%3A45Z&se=2026-10-27T03%3A40%3A45Z&sr=c&sp=r&sig=6hBePJxJnud5tA4OqsuTbBohe2DlikntfEIux8j1V74%3D) **(ON)** hides Label Text from displaying in Express View. Your Label Text still displays in the Module Builder. By default, this setting is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-10-27T02%3A40%3A45Z&se=2026-10-27T03%3A40%3A45Z&sr=c&sp=r&sig=6hBePJxJnud5tA4OqsuTbBohe2DlikntfEIux8j1V74%3D) **(OFF)**. |

### Input Behavior

| Setting | Description |
| --- | --- |
| **Input Behavior** | Controls how end-users interact with the component. Choose from the following options: - **Enable User Input**: Allow end-users to view and enter data in this field. - **Disable User Input**: Prevents end-users from entering data in the field, but lets them view it. In the Module Builder, the field’s background displays as gray. In Express View, when end-users hover over the field, their cursor displays with a **prohibited** symbol. - **Read Only - Legacy**: Prevents end-users from entering data and replaces the field with the component’s data value. If no value is provided, the component displays None. |

## [![A static image displaying the Plaid Component's Display settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/display_thumb_0_0(17).jpg?sv=2026-02-06&spr=https&st=2026-10-27T02%3A40%3A45Z&se=2026-10-27T03%3A40%3A45Z&sr=c&sp=r&sig=6hBePJxJnud5tA4OqsuTbBohe2DlikntfEIux8j1V74%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/display(19).jpg?sv=2026-02-06&spr=https&st=2026-10-27T02%3A40%3A45Z&se=2026-10-27T03%3A40%3A45Z&sr=c&sp=r&sig=6hBePJxJnud5tA4OqsuTbBohe2DlikntfEIux8j1V74%3D) Data Settings

### Data

| Setting | Description |
| --- | --- |
| **Plaid Service to Use** | Displays Plaid services configured in the [Services Administration](/v1/docs/services-administration) tab. Use the drop-down to select which service you want to call. |
| **Client Name** | Enter the name of the company accessing the end-user's account. |
| **Select Plaid Products to Initialize** | Depending on the specifications of the Plaid service, various Plaid products are available. You can check any combination of products. If you select a product not included in your service, you cannot access that product's data. Available Plaid products include: - **Auth**: Instantly authenticate bank accounts for payments. - **Assets**: Verify the borrower's assets from the source. - **Identity**: Verify the user's identities and reduce fraud. - **Investments**: Build a holistic view of the user's investments. - **Liabilities**: Access liabilities data for student loans and credit cards. - **Payroll Providers**: Access employee payroll information. - **Transactions**: Access detailed transaction history. |

## [![A static image displaying the Plain component's Data settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/data_thumb_0_0(12).jpg?sv=2026-02-06&spr=https&st=2026-10-27T02%3A40%3A45Z&se=2026-10-27T03%3A40%3A45Z&sr=c&sp=r&sig=6hBePJxJnud5tA4OqsuTbBohe2DlikntfEIux8j1V74%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/data(15).jpg?sv=2026-02-06&spr=https&st=2026-10-27T02%3A40%3A45Z&se=2026-10-27T03%3A40%3A45Z&sr=c&sp=r&sig=6hBePJxJnud5tA4OqsuTbBohe2DlikntfEIux8j1V74%3D) Actions Settings

### Triggers

| Setting | Description |
| --- | --- |
| **Success** | Enter the Property ID of the component you'll trigger after your end-user successfully connects their account. |
| **Error Trigger** | Enter the Property ID of the component you'd like to trigger if the account connection fails. |

## [![A static image displaying the Plaid Component's Actions settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/actions_thumb_0_0(8).jpg?sv=2026-02-06&spr=https&st=2026-10-27T02%3A40%3A45Z&se=2026-10-27T03%3A40%3A45Z&sr=c&sp=r&sig=6hBePJxJnud5tA4OqsuTbBohe2DlikntfEIux8j1V74%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/actions(9).jpg?sv=2026-02-06&spr=https&st=2026-10-27T02%3A40%3A45Z&se=2026-10-27T03%3A40%3A45Z&sr=c&sp=r&sig=6hBePJxJnud5tA4OqsuTbBohe2DlikntfEIux8j1V74%3D) Validation Settings

### Account Linking Error Message

| Setting | Description |
| --- | --- |
| **Account Linking Error Message** | Enter a custom error message to display when Plaid cannot link to an end-user's account. |

## [![A static image displaying the Plaid component's validation settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/validation_thumb_0_0(10).jpg?sv=2026-02-06&spr=https&st=2026-10-27T02%3A40%3A45Z&se=2026-10-27T03%3A40%3A45Z&sr=c&sp=r&sig=6hBePJxJnud5tA4OqsuTbBohe2DlikntfEIux8j1V74%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/validation(12).jpg?sv=2026-02-06&spr=https&st=2026-10-27T02%3A40%3A45Z&se=2026-10-27T03%3A40%3A45Z&sr=c&sp=r&sig=6hBePJxJnud5tA4OqsuTbBohe2DlikntfEIux8j1V74%3D) Advanced Settings

### Additional Styling

| Setting | Description |
| --- | --- |
| **Custom CSS Class** | Enter a Custom CSS Class to apply to your component. Custom CSS lets you maintain a consistent look and feel when the field or element is part of a template or multiple modules. Updated CSS styling applies to all components that reference this custom class name. |

## [![A static image displaying the Plaid component's Advanced settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/advanced_thumb_0_0(16).jpg?sv=2026-02-06&spr=https&st=2026-10-27T02%3A40%3A45Z&se=2026-10-27T03%3A40%3A45Z&sr=c&sp=r&sig=6hBePJxJnud5tA4OqsuTbBohe2DlikntfEIux8j1V74%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/advanced(18).jpg?sv=2026-02-06&spr=https&st=2026-10-27T02%3A40%3A45Z&se=2026-10-27T03%3A40%3A45Z&sr=c&sp=r&sig=6hBePJxJnud5tA4OqsuTbBohe2DlikntfEIux8j1V74%3D) Adding the Plaid Component

In this example, you'll build a module that uses a Plaid component to link an end-user's bank account. Once linked, a simple dashboard displays some basic account information.

> [!NOTE]
> If you configure a Plaid component in a Production application, ensure all Plug-In components execute server-side. For more information on server-side execution, view our [Server-Side Module Execution](/v1/docs/server-side-module-execution) article.

## Preconfiguration

Before configuring the Plaid component, you need to set up the Plaid service in your environment. If a Plaid service is already set up in your environment, you can skip this section.

Setting up a Plaid service creates a back-end endpoint for your Plaid component and adds a layer of security. The API call occurs in an Unqork server and not your browser.

> To connect to Plaid, you'll need a developer account and a set of Plaid API keys. To learn more, see Plaid's **Quickstart** article: [https://plaid.com/docs/quickstart/](https://plaid.com/docs/quickstart/).

Before setting up Plaid, ensure you have a Plaid administrator and that you've set up an API account with Plaid. As a best practice, every client should have one Plaid account and each module should have a minimum of one Plaid component.

To set up Plaid in your environment:

1. At the top right of the Unqork Designer Platform, click **Administration**.
2. Under **I****ntegration**, select **Services Administration**.
3. Click **+ Add a Service**. The Create New Service modal displays.
4. In the **Service Title*** field, enter a title for your service.
5. In the **Service Name*** field, enter a name for your service.
6. Click **Next**.
7. Under **Share To**, select the environment or workspace where you want to share the service.
8. Click **Create**. The service info page for the new service displays.
9. Click **![Edit icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/draft__light_icon.png?sv=2026-02-06&spr=https&st=2026-10-27T02%3A40%3A45Z&se=2026-10-27T03%3A40%3A45Z&sr=c&sp=r&sig=6hBePJxJnud5tA4OqsuTbBohe2DlikntfEIux8j1V74%3D) Edit**.
10. In the **Service protocol + host** field, enter your **Plaid API Host** address. For example, `https://sandbox.plaid.com`.

> To learn more about Plaid's environments, visit their documentation: [https://plaid.com/docs/api/#api-access](https://plaid.com/docs/api/#api-access).
11. From the **Authentication Method*** drop-down, select Plaid.
12. In the **Client ID** field, enter your API's client ID.
13. In the **Public Key** field, enter your API's public key.
14. In the **Client Secret**, enter your client secret key.

> [!WARNING]
> The secret key is a confidential value. Do not share this key with unauthorized users.
15. From the **Environment** drop-down, select the environment that matches the **Service protocol + host*** field.

[![A static image displaying a Plaid Service in the Service Administration page. The required fields are highlighted in gold.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Plaid_Component_PlaidService_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-10-27T02%3A40%3A45Z&se=2026-10-27T03%3A40%3A45Z&sr=c&sp=r&sig=6hBePJxJnud5tA4OqsuTbBohe2DlikntfEIux8j1V74%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Plaid%20Component%20PlaidService.jpg?sv=2026-02-06&spr=https&st=2026-10-27T02%3A40%3A45Z&se=2026-10-27T03%3A40%3A45Z&sr=c&sp=r&sig=6hBePJxJnud5tA4OqsuTbBohe2DlikntfEIux8j1V74%3D)
16. Click **Save Changes**.

## Configuration

### Configuring the Plaid Component

Let's return to the Module Builder and learn how the Plaid component works. Remember, this use case only shows you how the component works. If you configure a Plaid component in a Production application, ensure all Plug-In components execute server-side.

These instructions assume that you have an open module saved with a title.

1. In the Module Builder, drag and drop a **P****laid** component onto your canvas.
2. In the Property ID field, enter **plaidAccounts**.
3. In the Label Text, enter `Link Your Account`.
4. Navigate to the component's **Data** settings.
5. From the **Plaid Service to Use** drop-down, select the service created in the Setting up the Plaid Service section.
6. From the **Select Plaid Products to Use** list, select **T****ransactions**.

[![A static image displaying the Plaid component's data settings. The Plaid Service to Use and Select Plaid Products to Initialize settings are highlighted.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/plaidAccounts_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-10-27T02%3A40%3A45Z&se=2026-10-27T03%3A40%3A45Z&sr=c&sp=r&sig=6hBePJxJnud5tA4OqsuTbBohe2DlikntfEIux8j1V74%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/plaidAccounts.jpg?sv=2026-02-06&spr=https&st=2026-10-27T02%3A40%3A45Z&se=2026-10-27T03%3A40%3A45Z&sr=c&sp=r&sig=6hBePJxJnud5tA4OqsuTbBohe2DlikntfEIux8j1V74%3D)
7. Click **Save Component**.

### Configuring the Field Group Component

Configure a Field Group component to store all components related to extracting the Plaid data.

1. Drag and drop a **F****ield Group** component onto your canvas, placing it below the **plaidAccounts** **P****laid** component.
2. In the Property ID, enter **fgPlaid**.
3. Click **Save Component**.

### Configuring the First Data Workflow Component

This Data Workflow component retrieves the Plaid token and sends it to a Hidden component. At the same time, it triggers a Plug-In component.

> [!NOTE]
> You'll configure the Hidden and Plug-In components in a later step.

1. Drag and drop a **D****ata Workflow** component onto your canvas, placing it inside the **fgPlaid** **F****ield Group** component.
2. In the Property ID field, enter **dwfPlaid**.
3. In the Canvas Label Text field, enter dwfPlaid.

#### Configure the Input Operator

This Input operator connects your Data Workflow to your data source. Your data source in this example is your Plaid component.

1. Drag and drop an **Input** operator onto your **D****ata Workflow** canvas.
2. Configure the **Input** operator's **Info** window as follows:

| Info |
| --- |
| category | Input |
| Component | plaid |
| required | Yes |
| source | Default |

#### Configure the Get Operator

This Get operator retrieves the data from your Plaid component.

1. Drag and drop a **Get** operator onto your **D****ata Workflow** canvas.
2. Configure the **Get** operator's **Info** window as follows:

| Info |
| --- |
| category | Get |
| label | getToken |
| Preserve Argument Type | ☐ (**unchecked**) |
| Path | accessToken |

> [!NOTE]
> The Path value of accessToken represents the Plaid token data acquired from the Plaid component.
3. Connect the output port (right) of the plaid **Input** operator to the input port (left) of the getToken **Get** operator.

#### Configure the First Output Operator

Your first Output operator outputs the Plaid token to the **token** **H****idden** component.

1. Drag and drop an **Output** operator onto your **D****ata Workflow** canvas.
2. Configure the **Output** operator's **Info** window as follows:

| Info |
| --- |
| category | Output |
| Component | token |
| action | value |
3. Connect the output port (right) of the getToken **Get** operator to the input port (left) of the token **Output** operator.

#### Configure the Second Output Operator

Your second Output operator triggers a Plug-In component.

1. Drag and drop an **Output** operator onto your **D****ata Workflow** canvas.
2. Configure the **Output** operator's **Info** window as follows:

| Info |
| --- |
| category | Output |
| Component | pluginPlaid |
| action | Trigger |
3. Connect the output port (right) of the **Get** operator to the input port (left) of the pluginPlaid **Output** operator.

[![A static image dispalying the dwfPlaid data workflow layout.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/dwfPlaid_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-10-27T02%3A40%3A45Z&se=2026-10-27T03%3A40%3A45Z&sr=c&sp=r&sig=6hBePJxJnud5tA4OqsuTbBohe2DlikntfEIux8j1V74%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/dwfPlaid.jpg?sv=2026-02-06&spr=https&st=2026-10-27T02%3A40%3A45Z&se=2026-10-27T03%3A40%3A45Z&sr=c&sp=r&sig=6hBePJxJnud5tA4OqsuTbBohe2DlikntfEIux8j1V74%3D)
4. Click **Save Component**.

### Configuring the Hidden Components

In the first Hidden component, you'll store the access token data. In the second, you'll store the end-user's account information.

1. Drag and drop a **H****idden** component inside the **fgPlaid** **F****ield Group** component, placing it below the **dwfPlaid** **D****ata Workflow** component.
2. In the Property ID field, enter **token**.
3. In the Label Text field, enter `token`.
4. Click **Save Component**.
5. Drag and drop another **H****idden** component inside the **fgPlaid** **F****ield Group** component, placing it below the **token****H****idden** component.
6. In the Property ID field, enter **authHolder**.
7. In the Label Text field, enter `authHolder`.
8. Click **Save Component**.

### Configuring the Plug-In Component

Next, you'll configure a Plug-In component that is triggered by the Data Workflow, and makes an external API call to your Plaid service.

1. Drag and drop a Plug-In component inside the **fgPlaid** **F****ield Group** component, placing it below the **authHolder****H****idden** component.
2. In the Property ID field, enter **pluginPlaid**.
3. In the Canvas Label Text field, enter pluginPlaid.
4. From the **Service Type** drop-down, select External.
5. From the **External Services** drop-down, enter or select your Plaid service.
6. In the **Data Source URL**, enter `/fbu/uapi/plaid/getData`.
7. From the **Request Type** drop-down, enter or select Post.

[![A static image displaying the pluginPlaid Data Workflow component. The Data Source URL and Request type are modified.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/pluginPlaid_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-10-27T02%3A40%3A45Z&se=2026-10-27T03%3A40%3A45Z&sr=c&sp=r&sig=6hBePJxJnud5tA4OqsuTbBohe2DlikntfEIux8j1V74%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/pluginPlaid.jpg?sv=2026-02-06&spr=https&st=2026-10-27T02%3A40%3A45Z&se=2026-10-27T03%3A40%3A45Z&sr=c&sp=r&sig=6hBePJxJnud5tA4OqsuTbBohe2DlikntfEIux8j1V74%3D)
8. In the **Inputs** table, enter the following:

|  | Property ID | Mapping |
| --- | --- | --- |
| 1 | token | access_token |
| 2 | 'auth' | products.[0] |
| 3 | 'enter the name of your Plaid service here' | serviceName |

[![A static image displaying the pluginPlaid Plugin component's Inputs table.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/pluginPlaid_inputs_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-10-27T02%3A40%3A45Z&se=2026-10-27T03%3A40%3A45Z&sr=c&sp=r&sig=6hBePJxJnud5tA4OqsuTbBohe2DlikntfEIux8j1V74%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/pluginPlaid%20inputs.jpg?sv=2026-02-06&spr=https&st=2026-10-27T02%3A40%3A45Z&se=2026-10-27T03%3A40%3A45Z&sr=c&sp=r&sig=6hBePJxJnud5tA4OqsuTbBohe2DlikntfEIux8j1V74%3D)
9. Click **Save Component**.

### Configuring the Data Table Component

The Data Workflow uses this Data Table component to simplify the names of some of Plaid's native values.

1. Drag and drop a **D****ata Table** component inside the **fgPlaid** **F****ield Group** component, placing ti below the **pluginPlaid** Plug-In component.
2. In the Property ID field, enter **dtPlaidAuthMapping**.
3. In the data table, enter the following:

|  | A | B |
| --- | --- | --- |
| 1 | original | target |
| 2 | balances.available | available |
| 3 | balances.current | current |

[![A static image displaying the Data Table component's settings, the Data Table table is highlighted and filled out.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/dtPlaidAuthMapping_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-10-27T02%3A40%3A45Z&se=2026-10-27T03%3A40%3A45Z&sr=c&sp=r&sig=6hBePJxJnud5tA4OqsuTbBohe2DlikntfEIux8j1V74%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/dtPlaidAuthMapping.jpg?sv=2026-02-06&spr=https&st=2026-10-27T02%3A40%3A45Z&se=2026-10-27T03%3A40%3A45Z&sr=c&sp=r&sig=6hBePJxJnud5tA4OqsuTbBohe2DlikntfEIux8j1V74%3D)
4. Click **Save Component**.

### Configure the Second Data Workflow Component

This Data Workflow component retrieves the Plaid token while triggering the **pluginPlaid**Plug-In component.

1. Drag and drop a **D****ata Workflow** component inside the **fgPlaid** **F****ield Group** component, placing it below the **dtPlaidAuthMapping** **![Dropdown Component Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/data_table_teal_component(7).png?sv=2026-02-06&spr=https&st=2026-10-27T02%3A40%3A45Z&se=2026-10-27T03%3A40%3A45Z&sr=c&sp=r&sig=6hBePJxJnud5tA4OqsuTbBohe2DlikntfEIux8j1V74%3D)Data Table** component.
2. In the Property ID field, enter **dwfGetPlaid**.
3. In the Canvas Label Text field, enter dwfGetPlaid.

#### Configure the First Input Operator

This Input operator connects your Data Workflow to your Plaid component.

1. Drag and drop an **Input** operator onto your Data Workflow canvas.
2. Configure the **Input** operator's **Info** window as follows:

| Info |
| --- |
| **category** | Input |
| **Component** | pluginPlaid |
| **required** | Yes |
| **source** | Default |

#### Configure the First Get Operator

This Get operator retrieves specific data from your Plaid component.

1. Drag and drop a **Get** operator onto your Data Workflow canvas.
2. Configure the **Get** operator's **Info** window as follows:

| Info |
| --- |
| **category** | Get |
| **label** | numbers |
| **Preserve Argument Type** | ☐ (**unchecked**) |
| **Path** | [0].auth.numbers.ach |
3. Connect the output port (right) of the pluginPlaid **Input** operator to the input port (left) of the numbers **Get** operator.

#### Configure the Second Get Operator

This Get operator retrieves another set of data from your Plaid component.

1. Drag and drop a **Get** operator onto your Data Workflow canvas.
2. Configure the **Get** operator's **Info** window as follows:

| Info |
| --- |
| **category** | Get |
| **label** | accounts |
| **Preserve Argument Type** | ☐ (**unchecked**) |
| **Path** | [0].auth.accounts |
3. Connect the output port (right) of the pluginPlaid **Input** operator to the input (left) of the accounts **Get** operator.

#### Configure the Merge Operator

The Merge operator merges data from the Get operators.

1. Drag and drop a **Merge** operator onto your Data Workflow canvas.
2. Configure the **Merge** operator's **Info** window as follows:

| Info |
| --- |
| **category** | Merge |
| **label** | mergeGet |
| **Preserve Argument Type** | ☐ (**unchecked**) |
| **Merge Type** | Inner |
| **Keep Flag** | False |
| **Renaming** | Rename |
| **Rows to Keep** | First |
| **Merge Key** | account_id |
3. Connect the output port (right) of the numbers **Get** operator to the top input port (left) of the mergeGet **Merge** operator.
4. Connect the output port (right) of the accounts **Get** operator to the bottom input port (left) of the mergeGet **Merge** operator.

#### Configure the Second Input Operator

Configure another Input operator to retrieve data from your Data Table component.

1. Drag and drop another **Input** operator onto your Data Workflow canvas.
2. Configure the **Input** operator's **Info** window as follows:

| Info |
| --- |
| **category** | Input |
| **Component** | dtPlaidAuthMapping |
| **required** | No |
| **source** | Default |

#### Configure the Map Keys Operator

The Map Keys operator references values from the Data Table component, making the data easier to read.

1. Drag and drop a **Map Keys** operator onto your Data Workflow canvas.
2. Configure the **Map Keys** operator's **Info** window as follows:

| Info |
| --- |
| **category** | Map Keys |
| **Component** | mapKeys |
| **Preserve Argument Type** | ☐ (**unchecked**) |
| **Source Column** | original |
| **Target Column** | target |
3. Connect the output port (right) of the mergeGet **Merge** operator to the top input port (left) of the mapKeys **Map Keys** operator
4. Connect the output port (right) of the dtPlaidAuthMapping **Input** operator to the bottom input port (left) of the mapKeys **Map Keys** operator.

[![A static image displaying the Data Workflow component's canvas. The Merge and Input operators are connected to the Map Keys operator.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/dwfGetPlaid_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-10-27T02%3A40%3A45Z&se=2026-10-27T03%3A40%3A45Z&sr=c&sp=r&sig=6hBePJxJnud5tA4OqsuTbBohe2DlikntfEIux8j1V74%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/dwfGetPlaid.jpg?sv=2026-02-06&spr=https&st=2026-10-27T02%3A40%3A45Z&se=2026-10-27T03%3A40%3A45Z&sr=c&sp=r&sig=6hBePJxJnud5tA4OqsuTbBohe2DlikntfEIux8j1V74%3D)

#### Configure the Clean Keys Operator

Configure a Clean Keys operator to omit data with empty or missing values.

1. Drag and drop a **Clean Keys** operator onto your Data Workflow canvas.
2. Configure the **Clean Keys** operator's **Info** window as follows:

| Info |
| --- |
| **category** | Clean Keys |
| **label** | cleanKey |
| **Preserve Argument Type** | ☐ (**unchecked**) |
| **Fill if** | Missing or Empty |
| **Keys** | available |
| **Fill with** | unavailable |
3. Connect the output port (right) of the mapKeys **Map Keys** operator to the input port (left) of the cleanKey **Clean Keys** operator.

#### Configure the Formula Operator

This Formula operator manipulates the data so all text has the correct capitalization.

1. Drag and drop a **Formula** operator onto your Data Workflow canvas.
2. Configure the **Formula** operator's **Info** window as follows:

| Info |
| --- |
| **category** | Formula Value |
| **label** | formula |
| **Preserve Argument Type** | ☐ (**unchecked**) |
| **Formula/Expression** | subtype = PROPER(subtype) |
3. Connect the output port (right) of the cleanKey **Clean Keys** operator to the input port (left) of the formula **Formula** operator.

#### Configure the Output Operator

Your Output operator outputs the cleaned Plaid data to the **authHolder** Hidden component.

1. Drag and drop an **Output** operator onto your Data Workflow canvas.
2. Configure the **Output** operator's **Info** window as follows:

| Info |
| --- |
| category | Output |
| Component | authHolder |
| action | value |
3. Connect the output port (right) of the formula **Formula** operator to the input port (left) of the authHolder **Output** operator.

[![A static image displaying the dwfGetPlaid DataWorkflow Component with its operators added and connected.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/dwfGetPlaid2_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-10-27T02%3A40%3A45Z&se=2026-10-27T03%3A40%3A45Z&sr=c&sp=r&sig=6hBePJxJnud5tA4OqsuTbBohe2DlikntfEIux8j1V74%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/dwfGetPlaid2.jpg?sv=2026-02-06&spr=https&st=2026-10-27T02%3A40%3A45Z&se=2026-10-27T03%3A40%3A45Z&sr=c&sp=r&sig=6hBePJxJnud5tA4OqsuTbBohe2DlikntfEIux8j1V74%3D)
4. Click **Save Component**.

### Configure the ViewGrid Component

This [ViewGrid](/v1/docs/viewgrid-component) component creates a dashboard to display account information. Once your end-user connects their account, the ViewGrid component displays their account information.

1. Drag and drop a **![Dropdown Component Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/data_table_teal_component(7).png?sv=2026-02-06&spr=https&st=2026-10-27T02%3A40%3A45Z&se=2026-10-27T03%3A40%3A45Z&sr=c&sp=r&sig=6hBePJxJnud5tA4OqsuTbBohe2DlikntfEIux8j1V74%3D) ViewGrid** component onto the canvas, placing it below the **fgPlaid** **F****ield Group** component.
2. In the Property ID field, enter **gridPlaid**.
3. In the Canvas Label Text field, enter grid.
4. Navigate to the component's **Data** settings.
5. In the **Inputs** table, enter the following:

|  | Source | Required |
| --- | --- | --- |
| 1 | authHolder | ☐ (**unchecked**) |
6. In the **Display** table, enter the following:

|  | id | formula | heading |
| --- | --- | --- | --- |
| 1 | name |  | Account Name |
| 2 | subtype |  | Type |
| 3 | available |  | Available Balance |
| 4 | current |  | Current Balance |

[![A static image displaying the gridPlaid Viewgrid settings. The Action, Event, Inputs, and Display fields are highlighted and filled out.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/gridPlaid_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-10-27T02%3A40%3A45Z&se=2026-10-27T03%3A40%3A45Z&sr=c&sp=r&sig=6hBePJxJnud5tA4OqsuTbBohe2DlikntfEIux8j1V74%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/gridPlaid.jpg?sv=2026-02-06&spr=https&st=2026-10-27T02%3A40%3A45Z&se=2026-10-27T03%3A40%3A45Z&sr=c&sp=r&sig=6hBePJxJnud5tA4OqsuTbBohe2DlikntfEIux8j1V74%3D)
7. Navigate to the component's **Actions** settings.
8. In the **Action** field, enter `null`.
9. In the **Event** field, enter `View`.
10. Navigate to the component's **Advanced** settings.
11. In the **Select Row ID Property**, enter `account_id`.

[![A static image displaying the gridPlaid ViewGrid settings. The Label, Property Name, and Select Row ID Property fields are highlighted.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/gridPlaid2_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-10-27T02%3A40%3A45Z&se=2026-10-27T03%3A40%3A45Z&sr=c&sp=r&sig=6hBePJxJnud5tA4OqsuTbBohe2DlikntfEIux8j1V74%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/gridPlaid2.jpg?sv=2026-02-06&spr=https&st=2026-10-27T02%3A40%3A45Z&se=2026-10-27T03%3A40%3A45Z&sr=c&sp=r&sig=6hBePJxJnud5tA4OqsuTbBohe2DlikntfEIux8j1V74%3D)
12. Click **Save Component**.
13. **Save** your module.

The Module Builder canvas looks like the following when complete:

[![A static image displaying the Module Editor canvas, the Plaid component is set up to link an account, then display it in a ViewGrid.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/exampleComplete_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-10-27T02%3A40%3A45Z&se=2026-10-27T03%3A40%3A45Z&sr=c&sp=r&sig=6hBePJxJnud5tA4OqsuTbBohe2DlikntfEIux8j1V74%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/exampleComplete(1).jpg?sv=2026-02-06&spr=https&st=2026-10-27T02%3A40%3A45Z&se=2026-10-27T03%3A40%3A45Z&sr=c&sp=r&sig=6hBePJxJnud5tA4OqsuTbBohe2DlikntfEIux8j1V74%3D)

On completion, you can log into your bank account and view your balances as shown below:

[![A static image displaying a Plaid component button and a ViewGrid of the linked Plaid account.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Plaid_Component_ExpressView_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-10-27T02%3A40%3A45Z&se=2026-10-27T03%3A40%3A45Z&sr=c&sp=r&sig=6hBePJxJnud5tA4OqsuTbBohe2DlikntfEIux8j1V74%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Plaid%20Component%20ExpressView.jpg?sv=2026-02-06&spr=https&st=2026-10-27T02%3A40%3A45Z&se=2026-10-27T03%3A40%3A45Z&sr=c&sp=r&sig=6hBePJxJnud5tA4OqsuTbBohe2DlikntfEIux8j1V74%3D)

The **Plaid component** is a Centauri (v1.0) component that connects to the [Plaid service](/v1/docs/authentication-types), lettings Creators securely connect applications to financial accounts. In Express View, the Plaid component displays as a button end-users click to securely log into their financial account. Once clicked, Unqork [applications](/v1/docs/introduction-to-unqork-applications) access relevant and verified financial information. Because financial services have strict login requirements, the Plaid component can also verify an end-user's identity.

It's important to note that [Plaid](https://plaid.com/) is just a data provider, and it doesn't perform financial transactions. To perform actual banking transactions, integration with [Stripe](https://stripe.com/) is required.

The **Account Linked** button below displays a configured Plaid component in Express View:

[![A static image displaying a Plaid component button and a ViewGrid of the linked Plaid account.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Plaid_Component_ExpressView_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-10-27T02%3A40%3A45Z&se=2026-10-27T03%3A40%3A45Z&sr=c&sp=r&sig=6hBePJxJnud5tA4OqsuTbBohe2DlikntfEIux8j1V74%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Plaid%20Component%20ExpressView.jpg?sv=2026-02-06&spr=https&st=2026-10-27T02%3A40%3A45Z&se=2026-10-27T03%3A40%3A45Z&sr=c&sp=r&sig=6hBePJxJnud5tA4OqsuTbBohe2DlikntfEIux8j1V74%3D)

Your Plaid service can include any of the following Plaid products:

- Authentication
- Assets
- Identity
- Income
- Investments
- Liabilities
- Transactions

You'll find the Plaid component in the [Data & Event Processing](/v1/docs/data-event-processing) group to the left of the [Module Builder](/v1/docs/introduction-to-the-module-builder).

## About the Configuration Window

> To learn more about general component settings, view our [General Component Settings](/v1/docs/general-component-settings) article.

## Display Panel

[![A static image displaying the Plaid Component's Display settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Plaid_Component_Display_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-10-27T02%3A40%3A45Z&se=2026-10-27T03%3A40%3A45Z&sr=c&sp=r&sig=6hBePJxJnud5tA4OqsuTbBohe2DlikntfEIux8j1V74%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Plaid%20Component%20Display.jpg?sv=2026-02-06&spr=https&st=2026-10-27T02%3A40%3A45Z&se=2026-10-27T03%3A40%3A45Z&sr=c&sp=r&sig=6hBePJxJnud5tA4OqsuTbBohe2DlikntfEIux8j1V74%3D)

#### Field Text

| Setting | Description |
| --- | --- |
| **Label Text** | Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. User-friendly labels make your module more accessible. Keep labels short and descriptive (a word or two) using title case. For longer entries, use sentence case. |

| Setting | Description |
| --- | --- |
| **Helper Text** | A quick tip describing the expected value of an input field. Unlike a Tooltip, Helper Text stays visible under the input field and displays on a single line. |

#### Default State Options

| Setting | Description |
| --- | --- |
| **Hide Label** | Setting Hide Label to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-10-27T02%3A40%3A45Z&se=2026-10-27T03%3A40%3A45Z&sr=c&sp=r&sig=6hBePJxJnud5tA4OqsuTbBohe2DlikntfEIux8j1V74%3D) **(ON)** hides Label Text from displaying in Express View. Your Label Text still displays in the Module Builder. By default, this setting is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-10-27T02%3A40%3A45Z&se=2026-10-27T03%3A40%3A45Z&sr=c&sp=r&sig=6hBePJxJnud5tA4OqsuTbBohe2DlikntfEIux8j1V74%3D) **(OFF)**. |
| **Disable User Input** | When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-10-27T02%3A40%3A45Z&se=2026-10-27T03%3A40%3A45Z&sr=c&sp=r&sig=6hBePJxJnud5tA4OqsuTbBohe2DlikntfEIux8j1V74%3D) **(ON)**, end-users cannot interact with or edit the Express View's input field or element. When end-users hover over the field, their cursor changes to alert them to the status change. By default, Disable User Input is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-10-27T02%3A40%3A45Z&se=2026-10-27T03%3A40%3A45Z&sr=c&sp=r&sig=6hBePJxJnud5tA4OqsuTbBohe2DlikntfEIux8j1V74%3D) **(OFF)****.** |

## Actions Panel

[![A static image displaying the Plaid Component's Actions settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Plaid_Component_Actions_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-10-27T02%3A40%3A45Z&se=2026-10-27T03%3A40%3A45Z&sr=c&sp=r&sig=6hBePJxJnud5tA4OqsuTbBohe2DlikntfEIux8j1V74%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Plaid%20Component%20Actions.jpg?sv=2026-02-06&spr=https&st=2026-10-27T02%3A40%3A45Z&se=2026-10-27T03%3A40%3A45Z&sr=c&sp=r&sig=6hBePJxJnud5tA4OqsuTbBohe2DlikntfEIux8j1V74%3D)

#### Triggers

| Setting | Description |
| --- | --- |
| **Success** | Enter the Property ID of the component you'll trigger after your end-user successfully connects their account. |
| **Error Trigger** | Enter the Property ID of the component you'd like to trigger if the account connection fails. |

## Data Panel

[![A static image displaying the Plain component's Actions settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Plaid_Component_Data_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-10-27T02%3A40%3A45Z&se=2026-10-27T03%3A40%3A45Z&sr=c&sp=r&sig=6hBePJxJnud5tA4OqsuTbBohe2DlikntfEIux8j1V74%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Plaid%20Component%20Data.jpg?sv=2026-02-06&spr=https&st=2026-10-27T02%3A40%3A45Z&se=2026-10-27T03%3A40%3A45Z&sr=c&sp=r&sig=6hBePJxJnud5tA4OqsuTbBohe2DlikntfEIux8j1V74%3D)

#### Data

| Setting | Description |
| --- | --- |
| **Plaid Service to Use** | Displays Plaid services configured in the [Services Administration](/v1/docs/services-administration) tab. Use the drop-down to select which service you want to call. |
| **Client Name** | Enter the name of the company accessing the end-user's account. |
| **Select Plaid Products to Initialize** | Depending on the specifications of the Plaid service, various Plaid products are available. You can check any combination of products. If you select a product not included in your service, you cannot access that product's data. Available Plaid products include: - **Auth**: Instantly authenticate bank accounts for payments. - **Assets**: Verify the borrower's assets from the source. - **Identity**: Verify the user's identities and reduce fraud. - **Investments**: Build a holistic view of the user's investments. - **Liabilities**: Access liabilities data for student loans and credit cards. - **Payroll Providers**: Access employee payroll information. - **Transactions**: Access detailed transaction history. |

## Validation Panel

[![A static image displaying the Plaid component's validation settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Plaid_Component_Validation_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-10-27T02%3A40%3A45Z&se=2026-10-27T03%3A40%3A45Z&sr=c&sp=r&sig=6hBePJxJnud5tA4OqsuTbBohe2DlikntfEIux8j1V74%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Plaid%20Component%20Validation.jpg?sv=2026-02-06&spr=https&st=2026-10-27T02%3A40%3A45Z&se=2026-10-27T03%3A40%3A45Z&sr=c&sp=r&sig=6hBePJxJnud5tA4OqsuTbBohe2DlikntfEIux8j1V74%3D)

#### User Input

| Setting | Description |
| --- | --- |
| **Account Linking Error Message** | Enter a custom error message to display when Plaid cannot link to an end-user's account. |

## Advanced Panel

[![A static image displaying the Plaid component's Advanced settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Plaid_Component_Advanced_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-10-27T02%3A40%3A45Z&se=2026-10-27T03%3A40%3A45Z&sr=c&sp=r&sig=6hBePJxJnud5tA4OqsuTbBohe2DlikntfEIux8j1V74%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Plaid%20Component%20Advanced.jpg?sv=2026-02-06&spr=https&st=2026-10-27T02%3A40%3A45Z&se=2026-10-27T03%3A40%3A45Z&sr=c&sp=r&sig=6hBePJxJnud5tA4OqsuTbBohe2DlikntfEIux8j1V74%3D)

#### Additional Styling

| Setting | Description |
| --- | --- |
| **Custom CSS Class** | Enter a Custom CSS Class to apply to your component. Custom CSS lets you maintain a consistent look and feel when the field or element is part of a template or multiple modules. Updated CSS styling applies to all components that reference this custom class name. |

## Adding the Plaid Component

In this example, you'll build a module that uses a Plaid component to link an end-user's bank account. Once linked, a simple dashboard displays some basic account information.

> [!NOTE]
> If you configure a Plaid component in a live application, ensure all Plug-In components execute server-side. For more information on server-side execution, view our [Server-Side Module Execution](/v1/docs/server-side-module-execution) article.

## Preconfiguration

Before configuring the Plaid component, you need to set up the Plaid service in your environment. If a Plaid service is already set up in your environment, you can skip this section.

Setting up a Plaid service creates a back-end endpoint for your Plaid component and adds a layer of security. The API call occurs in an Unqork server and not your browser.

> [!NOTE]
> To connect to Plaid, you'll need a developer account and a set of Plaid API keys. To learn more, see Plaid's **Quickstart** article: [https://plaid.com/docs/quickstart/](https://plaid.com/docs/quickstart/)

Before setting up Plaid, ensure you have a Plaid administrator and that you've set up an API account with Plaid. As a best practice, every client should have one Plaid account and each module should have a minimum of one Plaid component. To set up Plaid in your environment, do the following:

1. From the top-right of the Unqork Designer Platform, click **Settings ▾**.
2. Click **Administration**.
3. Under Integration, select **Services Administration**.
4. Click **+ Add a Service**. The Create New Service modal displays.
5. Enter your service name in the **Services Title** and **Service Name**.
6. Click **Create**. The service info page for the new service displays.
7. Click **![Edit icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/draft__light_icon.png?sv=2026-02-06&spr=https&st=2026-10-27T02%3A40%3A45Z&se=2026-10-27T03%3A40%3A45Z&sr=c&sp=r&sig=6hBePJxJnud5tA4OqsuTbBohe2DlikntfEIux8j1V74%3D) Edit**.
8. In the **Service protocol + host*** field, enter your **Plaid API Host** address. For example, `https://sandbox.plaid.com`.

> [!NOTE]
> To learn more about Plaid's environments, visit their help documentation: [https://plaid.com/docs/api/#api-access](https://plaid.com/docs/api/#api-access).
9. From the **Authentication Method*** drop-down, select Plaid.
10. In the **Client ID** field, enter your API's client ID.
11. In the **Public Key** field, enter your API's public key.
12. In the **Client Secret**, enter your client secret key.

> [!NOTE]
> The secret key is a confidential value. Do not share this key with unauthorized users.
13. From the **Environment** drop-down, select the environment that matches the **Service protocol + host*** field.

[![A static image displaying a Plaid Service in the Service Administration page. The required fields are highlighted in gold.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Plaid_Component_PlaidService_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-10-27T02%3A40%3A45Z&se=2026-10-27T03%3A40%3A45Z&sr=c&sp=r&sig=6hBePJxJnud5tA4OqsuTbBohe2DlikntfEIux8j1V74%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Plaid%20Component%20PlaidService.jpg?sv=2026-02-06&spr=https&st=2026-10-27T02%3A40%3A45Z&se=2026-10-27T03%3A40%3A45Z&sr=c&sp=r&sig=6hBePJxJnud5tA4OqsuTbBohe2DlikntfEIux8j1V74%3D)
14. Click **Save Changes**.

## Configuration

### Configuring the Plaid Component

Now let's head back to the Module Builder so you can see how the Plaid component works. Remember, this use case only shows you how the component works. If you configure a Plaid component in a live application, ensure all Plug-In components execute server-side.

These instructions assume that you have an open module saved with a title.

1. In the Module Builder, drag and drop a **P****laid** component onto your canvas.
2. In the Property ID field, enter **plaidAccounts**.
3. In the Label Text, enter `Link Your Account`.
4. From the Plaid component configuration panel, select **D****ata**.
5. From the **Plaid Service to Use** drop-down, select the service created in the [Setting up the Plaid Service](/v1/docs/plaid-component#Setting) section.
6. From the **Select Plaid Products to Use** list, select **Transactions**.

[![A static image displaying the Plaid component's data settings. The Plaid Service to Use and Select Plaid Products to Initialize settings are highlighted.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Plaid_Component_ConfigPlaid_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-10-27T02%3A40%3A45Z&se=2026-10-27T03%3A40%3A45Z&sr=c&sp=r&sig=6hBePJxJnud5tA4OqsuTbBohe2DlikntfEIux8j1V74%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Plaid%20Component%20ConfigPlaid.jpg?sv=2026-02-06&spr=https&st=2026-10-27T02%3A40%3A45Z&se=2026-10-27T03%3A40%3A45Z&sr=c&sp=r&sig=6hBePJxJnud5tA4OqsuTbBohe2DlikntfEIux8j1V74%3D)
7. Click **Save & Close**.

### Configuring the Field Group Component

In this Field Group, you'll store all components related to extracting the Plaid data.

1. Drag and drop a **F****ield Group** component onto your canvas, placing it below the **plaidAccounts** **P****laid** component.
2. In the Property ID, enter **fgPlaid**.
3. Click **Save & Close**.

### Configuring the First Data Workflow Component

This Data Workflow will get the Plaid token and push it to a Hidden component. At the same time, it triggers a Plug-In component.

1. Drag and drop a **Data Workflow** component onto your canvas, placing it inside the **fgPlaid** **F****ield Group**.
2. In the **Canvas Label Text** and **Property Name** fields, enter `dwfPlaid`.

#### Configure the Input Operator

This Input operator connects your Data Workflow to your data source. Your data source in this use case is your Plaid component.

1. Drag and drop an **Input** operator onto your Data Workflow canvas.
2. Configure the **Input** operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Component | plaid |
| Required | Yes |
| Source | Default |

#### Configure the Get Operator

This Get operator retrieves the data from your data source. Remember, your data source is your Plaid component.

1. Drag and drop a **Get** operator onto your Data Workflow canvas.
2. Configure the **Get** operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Label | getToken |
| Path | accessToken |

> [!NOTE]
> The Path value of accessToken represents the Plaid token data acquired from the Plaid component.
3. Connect the output port (right) of the plaid **Input** operator to the input port (left) of the getToken **Get** operator.

#### Configure the First Output Operator

Your first Output operator outputs the Plaid token to the **token** **H****idden** component.

1. Drag and drop an **Output** operator onto your Data Workflow canvas.
2. Configure the **Output** operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Component | token |
| Action | Value |
3. Connect the output port (right) of the getToken **Get** operator to the input port (left) of the token **Output** operator.

#### Configure the Second Output Operator

Your second Output operator triggers a Plug-In component.

1. Drag and drop an **Output** operator onto your Data Workflow canvas.
2. Configure the **Output** operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Component | pluginPlaid |
| Action | Trigger |
3. Connect the output port (right) of the **Get** operator to the input port (left) of the pluginPlaid **Output** operator.

The dwfPlaid**Data Workflow** looks like the following:

[![A static image dispalying the dwfPlaid data workflow layout.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Plaid_Component_dwf1_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-10-27T02%3A40%3A45Z&se=2026-10-27T03%3A40%3A45Z&sr=c&sp=r&sig=6hBePJxJnud5tA4OqsuTbBohe2DlikntfEIux8j1V74%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Plaid%20Component%20dwf1.jpg?sv=2026-02-06&spr=https&st=2026-10-27T02%3A40%3A45Z&se=2026-10-27T03%3A40%3A45Z&sr=c&sp=r&sig=6hBePJxJnud5tA4OqsuTbBohe2DlikntfEIux8j1V74%3D)
4. Click Save.

### Configuring the Hidden Components

In the first Hidden component, you'll store the access token data. In the second, you'll store the end-user's account information.

1. Drag and drop a **H****idden** component onto your canvas, placing it inside the **fgPlaid** **F****ield Group** component.
2. In the Property ID field, enter **token**.
3. In the Canvas Label Text field, enter `token`.
4. Click **Save & Close**.
5. Drag and drop a **H****idden** component onto your canvas, placing it inside the **fgPlaid** **F****ield Group** component, below the **token****H****idden** component.
6. In the Property ID field, enter **authHolder**.
7. In the Canvas Label Text field, enter `authHolder`.
8. Click **Save & Close**.

### Configuring the Plug-In Component

1. Drag and drop a **Plug-In** component onto your canvas, placing it inside the **fgPlaid** **F****ield Group** component.
2. In the **Property ID** and **Canvas Label Text** fields, enter `pluginPlaid`.
3. In the **Data Source URL**, enter `/fbu/uapi/plaid/getData`.
4. From the **Request Type**, select **Post**.

[![A static image displaying the pluginPlaid Data Workflow component. The Data Source URL and Request type are modified.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Plaid_Component_PluigInPlaid1_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-10-27T02%3A40%3A45Z&se=2026-10-27T03%3A40%3A45Z&sr=c&sp=r&sig=6hBePJxJnud5tA4OqsuTbBohe2DlikntfEIux8j1V74%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Plaid%20Component%20PluigInPlaid1.jpg?sv=2026-02-06&spr=https&st=2026-10-27T02%3A40%3A45Z&se=2026-10-27T03%3A40%3A45Z&sr=c&sp=r&sig=6hBePJxJnud5tA4OqsuTbBohe2DlikntfEIux8j1V74%3D)
5. In the **Inputs** table, enter the following:

| Property ID | Mapping |
| --- | --- |
| token | access_token |
| 'auth' | products.[0] |
| 'enter the name of your Plaid service here' | serviceName |

[![A static image displaying the pluginPlaid Plugin component's Inputs table.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Plaid_Component_PluigInPlaid2_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-10-27T02%3A40%3A45Z&se=2026-10-27T03%3A40%3A45Z&sr=c&sp=r&sig=6hBePJxJnud5tA4OqsuTbBohe2DlikntfEIux8j1V74%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Plaid%20Component%20PluigInPlaid2.jpg?sv=2026-02-06&spr=https&st=2026-10-27T02%3A40%3A45Z&se=2026-10-27T03%3A40%3A45Z&sr=c&sp=r&sig=6hBePJxJnud5tA4OqsuTbBohe2DlikntfEIux8j1V74%3D)
6. Click Save.

### Configuring the Data Table Component

The Data Workflow uses this Data Table to simplify the names of some of Plaid's native values.

1. Drag and drop a **Data Table** component onto your canvas, placing it below the **pluginPlaid** Plug-In component.
2. In the **Label** and **Property Name** fields, enter `dtPlaidAuthMapping`.
3. In the data table, enter the following:

|  | A | B |
| --- | --- | --- |
| 1 | original | target |
| 2 | balances.available | available |
| 3 | balances.current | current |

[![A static image displaying the Data Table component's settings, the Data Table table is highlighted and filled out.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Plaid_Component_Dtable_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-10-27T02%3A40%3A45Z&se=2026-10-27T03%3A40%3A45Z&sr=c&sp=r&sig=6hBePJxJnud5tA4OqsuTbBohe2DlikntfEIux8j1V74%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Plaid%20Component%20Dtable.jpg?sv=2026-02-06&spr=https&st=2026-10-27T02%3A40%3A45Z&se=2026-10-27T03%3A40%3A45Z&sr=c&sp=r&sig=6hBePJxJnud5tA4OqsuTbBohe2DlikntfEIux8j1V74%3D)
4. Click Save.

### Configure the Second Data Workflow Component

This Data Workflow will get the Plaid token while triggering the **pluginPlaid** Plug-In component.

1. Drag and drop a **Data Workflow** component onto your canvas, placing it below the **dtPlaidAuthMapping** **![Dropdown Component Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/data_table_teal_component(7).png?sv=2026-02-06&spr=https&st=2026-10-27T02%3A40%3A45Z&se=2026-10-27T03%3A40%3A45Z&sr=c&sp=r&sig=6hBePJxJnud5tA4OqsuTbBohe2DlikntfEIux8j1V74%3D)Data Table** component.
2. In the **Canvas Label Text** and **Property Name** fields, enter `dwfGetPlaid`.

#### Configure the First Input Operator

This Input operator connects your Data Workflow to your data source. Your data source in this use case is your Plaid component.

1. Drag and drop an **Input** operator onto your Data Workflow canvas.
2. Configure the **Input** operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Component | pluginPlaid |
| Required | Yes |
| Source | Default |

#### Configure the First Get Operator

This Get operator retrieves the data from your data source. Again, remember, this is your Plaid component.

1. Drag and drop a **Get** operator onto your Data Workflow canvas.
2. Configure the **Get** operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Label | numbers |
| Path | [0].auth.numbers.ach |
3. Connect the output port (right) of the pluginPlaid **Input** operator to the input port (left) of the numbers **Get** operator.

#### Configure the Second Get Operator

This Get operator retrieves the data from your data source.

1. Drag and drop a **Get** operator onto your Data Workflow canvas.
2. Configure the **Get** operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Label | accounts |
| Path | [0].auth.accounts |
3. Connect the output port (right) of the pluginPlaid **Input** operator to the input (left) of the accounts **Get** operator.

#### Configure the Merge Operator

The Merge operator merges data from the Get operators.

1. Drag and drop a **Merge** operator onto your Data Workflow canvas.
2. Configure the **Merge** operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Label | mergeGet |
| Merge Type | Inner |
| Keep Flag | False |
| Renaming | Rename |
| Rows to Keep | First |
| Merge Key | account_id |
3. Connect the output port (right) of the numbers **Get** operator to the top input port (left) of the mergeGet **Merge** operator.
4. Connect the output port (right) of the accounts **Get** operator to the bottom input port (left) of the mergeGet **Merge** operator.

#### Configure the Second Input Operator

1. Drag and drop another **Input** operator onto your Data Workflow canvas.
2. Configure the **Input** operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Component | dtPlaidAuthMapping |
| Required | No |
| Source | Default |

#### Configure the Map Keys Operator

The Map Keys operator references values from the Data Table, making the data easier to read.

1. Drag and drop a **Map Keys** operator onto your Data Workflow canvas.
2. Configure the **Map Keys** operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Label | mapKeys |
| Source Column | original |
| Target Column | target |
3. Connect the output port (right) of the mergeGet **Merge** operator to the top input port (left) of themapKeys **Map Keys** operator
4. Connect the output port (right) of thedtPlaidAuthMapping **Input** operator to the bottom input port (left) of themapKeys **Map Keys** operator.

[![A static image displaying the Data Workflow component's canvas. The Merge and Input operators are connected to the Map Keys operator.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Plaid_Component_DWF2_MapKeyOperator_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-10-27T02%3A40%3A45Z&se=2026-10-27T03%3A40%3A45Z&sr=c&sp=r&sig=6hBePJxJnud5tA4OqsuTbBohe2DlikntfEIux8j1V74%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Plaid%20Component%20DWF2%20MapKeyOperator.jpg?sv=2026-02-06&spr=https&st=2026-10-27T02%3A40%3A45Z&se=2026-10-27T03%3A40%3A45Z&sr=c&sp=r&sig=6hBePJxJnud5tA4OqsuTbBohe2DlikntfEIux8j1V74%3D)

#### Configure the Clean Keys Operator

1. Drag and drop a **Clean Keys** operator onto your Data Workflow canvas.
2. Configure the **Clean Keys** operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Label | cleanKey |
| Fill if | Missing or Empty |
| Keys | available |
| Fill with | unavailable |
3. Connect the output port (right) of the mapKeys **Map Keys** operator to the input port (left) of the cleanKey **Clean Keys** operator.

#### Configure the Formula Operator

1. Drag and drop a **Formula** operator onto your Data Workflow canvas.
2. Configure the **Formula** operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Label | formula |
| Formula/Expression | subtype = PROPER(subtype) |
3. Connect the output port (right) of the cleanKey **Clean Keys** operator to the input port (left) of the formula **Formula** operator.

#### Configure the Output Operator

Your Output operator outputs the cleaned-up Plaid data to the **authHolder** [Hidden component](/v1/docs/hidden-component).

1. Drag and drop an **Output** operator onto your Data Workflow canvas.
2. Configure the **Output** operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Component | authHolder |
| Action | value |
3. Connect the output port (right) of the formula **Formula** operator to the input port (left) of the authHolder **Output** operator. Your dwfGetPlaid **D****ata Workflow** component looks like the following:

[![A static image displaying the dwfGetPlaid DataWorkflow Component with its operators added and connected.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Plaid_Component_DWF2_Complete_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-10-27T02%3A40%3A45Z&se=2026-10-27T03%3A40%3A45Z&sr=c&sp=r&sig=6hBePJxJnud5tA4OqsuTbBohe2DlikntfEIux8j1V74%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Plaid%20Component%20DWF2%20Complete.jpg?sv=2026-02-06&spr=https&st=2026-10-27T02%3A40%3A45Z&se=2026-10-27T03%3A40%3A45Z&sr=c&sp=r&sig=6hBePJxJnud5tA4OqsuTbBohe2DlikntfEIux8j1V74%3D)
4. Click Save.

### Configure the ViewGrid Component

This [ViewGrid component](/v1/docs/viewgrid-component) uses a table to display account information. Once your end-user connects their account, the ViewGrid displays their account information.

1. Drag and drop a **ViewGrid** component onto the canvas, placing it below the **fgPlaid** **F****ield Group**.
2. In the **Label** field, enter `grid`.
3. In the **Property Name**, enter **gridPlaid**.
4. In the **Select Row ID Property**, enter `account_id`.

[![A static image displaying the gridPlaid ViewGrid settings. The Label, Property Name, and Select Row ID Property fields are highlighted.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Plaid_Component_viewGrid1_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-10-27T02%3A40%3A45Z&se=2026-10-27T03%3A40%3A45Z&sr=c&sp=r&sig=6hBePJxJnud5tA4OqsuTbBohe2DlikntfEIux8j1V74%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Plaid%20Component%20viewGrid1.jpg?sv=2026-02-06&spr=https&st=2026-10-27T02%3A40%3A45Z&se=2026-10-27T03%3A40%3A45Z&sr=c&sp=r&sig=6hBePJxJnud5tA4OqsuTbBohe2DlikntfEIux8j1V74%3D)
5. In the **Action** field, enter `null`.
6. In the **Event** field, enter `View`.
7. In the **Inputs** table, enter the following:

| id | required |
| --- | --- |
| authHolder |  |
8. In the **Display** table, enter the following:

| id | formula | heading |
| --- | --- | --- |
| name |  | Account Name |
| subtype |  | Type |
| available |  | Available Balance |
| current |  | Current Balance |

[![A static image displaying the gridPlaid Viewgrid settings. The Action, Event, Inputs, and Display fields are highlighted and filled out.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Plaid_Component_viewGrid2_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-10-27T02%3A40%3A45Z&se=2026-10-27T03%3A40%3A45Z&sr=c&sp=r&sig=6hBePJxJnud5tA4OqsuTbBohe2DlikntfEIux8j1V74%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Plaid%20Component%20viewGrid2.jpg?sv=2026-02-06&spr=https&st=2026-10-27T02%3A40%3A45Z&se=2026-10-27T03%3A40%3A45Z&sr=c&sp=r&sig=6hBePJxJnud5tA4OqsuTbBohe2DlikntfEIux8j1V74%3D)
9. Click Save.
10. **Save** your module.

The Module Builder canvas looks like the following when complete:

[![A static image displaying the Module Editor canvas, the Plaid component is set up to link an account, then display it in a ViewGrid.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Plaid_Component_complete_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-10-27T02%3A40%3A45Z&se=2026-10-27T03%3A40%3A45Z&sr=c&sp=r&sig=6hBePJxJnud5tA4OqsuTbBohe2DlikntfEIux8j1V74%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Plaid%20Component%20complete.jpg?sv=2026-02-06&spr=https&st=2026-10-27T02%3A40%3A45Z&se=2026-10-27T03%3A40%3A45Z&sr=c&sp=r&sig=6hBePJxJnud5tA4OqsuTbBohe2DlikntfEIux8j1V74%3D)

On completion, you can log in to your bank account and see your balances as shown below:

[![A static image displaying a Plaid component button and a ViewGrid of the linked Plaid account.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Plaid_Component_ExpressView_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-10-27T02%3A40%3A45Z&se=2026-10-27T03%3A40%3A45Z&sr=c&sp=r&sig=6hBePJxJnud5tA4OqsuTbBohe2DlikntfEIux8j1V74%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Plaid%20Component%20ExpressView.jpg?sv=2026-02-06&spr=https&st=2026-10-27T02%3A40%3A45Z&se=2026-10-27T03%3A40%3A45Z&sr=c&sp=r&sig=6hBePJxJnud5tA4OqsuTbBohe2DlikntfEIux8j1V74%3D)

## Resources

- [Modify the Plaid component using the toolbar settings.](/v1/docs/component-toolbar-settings)
- [Plaid API authentication Settings on the Services Administration page.](/v1/docs/authentication-types)
- [Discover more about Plaid in the Community Hub](https://community.unqork.com/search?q=Plaid).

The Centauri (v 1.0.0) runtime is the first-generation foundation of the Unqork Designer Platform. Centauri provides Creators a codeless experience for developing applications.

Also known as Unqork Users, or Designer Users; is anyone who is inside the Unqork platform.

Express View is how your end-user views your application. Express View also lets you preview your applications to test your configuration and view the styling. This is also the view your end-users will see when interacting with your application. After configuring a module, click Preview in the Module Builder to interact with the module in Express View.

End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product.

A Property ID is the unique field ID used by Unqork to track and link components in your module.

Cascading Style Sheets (CSS) is a style sheet language used for presenting how a HTML or XML document looks to end-users.

APIs (application programming interfaces) are a set of protocols and definitions developers use to build and integrate application software. APIs act as the connective tissue between products and services.

A modal is a window that appears on top of the content you are currently viewing.

Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field.

Canvas Label Text indicates the purpose of the corresponding field or component. For non-input components, the Canvas Label Text isn't end-user facing, and only appears in the .