# Pass front end data

<!-- WARNING: THIS FILE WAS AUTOGENERATED! DO NOT EDIT! -->

To customize the consumer experience based on your website's data, use the Pass Front End Data feature. This feature lets you share contextual information like customer IDs, account details, or shopping cart data with Zoom Contact Center or Zoom Virtual Agent flows.

> **Note**
>
> This feature is for passing contextual data to flows, not for consumer authentication. For authentication, see [Consumer authentication](/docs/zcx/consumer-authentication).

## Supported data sources

The Zoom Customer Experience SDK for web can read data from these sources on your website:

-   Cookies
-   Local Storage
-   Session Storage
-   Query Parameters
-   DOM Element Properties
-   Global JavaScript Variables

## Implementation steps

To pass front end data to Contact Center or Virtual Agent:

1. Create the variables or data on your website using one of the supported data sources.
2. Coordinate with your Contact Center or Virtual Agent admin to share the variable names and locations.
3. The admin configures [Global Variables](https://support.zoom.us/hc/en-us/articles/4414432747277) in the portal to read from your data sources using the **From website data** option.

## Local Storage example

This example shows how to structure data in local storage so the admin can read it with Global Variables.

Store data in local storage with a JSON structure:

```javascript
// Store customer data in local storage
const customerData = {
    customerId: "12345",
    tier: "premium",
    accountDetails: {
        balance: 1500,
        region: "US-West",
    },
};

localStorage.setItem("customerInfo", JSON.stringify(customerData));
```

The admin can then configure a Global Variable to read nested values using dot notation. For example, to read the customer tier, the admin would configure:

-   **Data source**: Local Storage
-   **Key**: `customerInfo`
-   **Path**: `tier`

This would populate the Global Variable with the value `"premium"`.

## DOM Element Property example

To pass data from a DOM element, add properties to elements on your page:

```html

```

The admin can configure Global Variables to extract these properties by specifying the element selector and property name.

## Best practices

When implementing this feature:

-   Structure data consistently across your website.
-   Use clear, descriptive variable names.
-   Validate that data exists before the SDK loads.
-   Coordinate naming conventions with your admin team.
-   Test that values populate correctly in flows.
-   Add Condition widgets in flows to check if values are populated before using them.