---
title: useCustomerPrivacy
description: |-
  A hook that loads the [Customer Privacy API](/docs/api/customer-privacy).

  You can get the customer privacy instance with `getCustomerPrivacy()`.
api_version: 2024-04
api_name: hydrogen
source_url:
  html: 'https://shopify.dev/docs/api/hydrogen/2024-04/hooks/usecustomerprivacy'
  md: 'https://shopify.dev/docs/api/hydrogen/2024-04/hooks/usecustomerprivacy.md'
---

# use​Customer​Privacy

A hook that loads the [Customer Privacy API](https://shopify.dev/docs/api/customer-privacy).

You can get the customer privacy instance with `getCustomerPrivacy()`.

## use​Customer​Privacy([props](#-propertydetail-props)​)

### Parameters

* props

  CustomerPrivacyApiProps

  required

### CustomerPrivacyApiProps

* checkoutDomain

  The production shop checkout domain url.

  ```ts
  string
  ```

* storefrontAccessToken

  The storefront access token for the shop.

  ```ts
  string
  ```

* withPrivacyBanner

  Whether to load the Shopify privacy banner as configured in Shopify admin. Defaults to true.

  ```ts
  boolean
  ```

* onVisitorConsentCollected

  Callback to be called when visitor consent is collected.

  ```ts
  (consent: VisitorConsentCollected) => void
  ```

* onReady

  Callback to be call when customer privacy api is ready.

  ```ts
  () => void
  ```

```ts
{
  /** The production shop checkout domain url.  */
  checkoutDomain: string;
  /** The storefront access token for the shop. */
  storefrontAccessToken: string;
  /** Whether to load the Shopify privacy banner as configured in Shopify admin. Defaults to true. */
  withPrivacyBanner?: boolean;
  /** Callback to be called when visitor consent is collected. */
  onVisitorConsentCollected?: (consent: VisitorConsentCollected) => void;
  /** Callback to be call when customer privacy api is ready. */
  onReady?: () => void;
}
```

### VisitorConsentCollected

* analyticsAllowed

  ```ts
  boolean
  ```

* firstPartyMarketingAllowed

  ```ts
  boolean
  ```

* marketingAllowed

  ```ts
  boolean
  ```

* preferencesAllowed

  ```ts
  boolean
  ```

* saleOfDataAllowed

  ```ts
  boolean
  ```

* thirdPartyMarketingAllowed

  ```ts
  boolean
  ```

```ts
{
  analyticsAllowed: boolean;
  firstPartyMarketingAllowed: boolean;
  marketingAllowed: boolean;
  preferencesAllowed: boolean;
  saleOfDataAllowed: boolean;
  thirdPartyMarketingAllowed: boolean;
}
```

Examples

### Examples

* #### example

  ##### Description

  This is the default example

  ##### JavaScript

  ```js
  import {useCustomerPrivacy} from '@shopify/hydrogen';

  export function MyComponent() {
    useCustomerPrivacy({
      storefrontAccessToken: '12345',
      checkoutDomain: 'checkout.example.com',
      onVisitorConsentCollected: (consent) => {
        console.log('Visitor consent collected:', consent);
      },
    });
  }
  ```

  ##### TypeScript

  ```ts
  import {
    type VisitorConsentCollected,
    useCustomerPrivacy,
  } from '@shopify/hydrogen';

  export function MyComponent() {
    useCustomerPrivacy({
      storefrontAccessToken: '12345',
      checkoutDomain: 'checkout.example.com',
      onVisitorConsentCollected: (consent: VisitorConsentCollected) => {
        console.log('Visitor consent collected:', consent);
      },
    });
  }
  ```

* ####

  ##### Description

  Returns the value of \`window\.Shopify.customerPrivacy\` if it exists.

  ##### JavaScript

  ```js
  import {getCustomerPrivacy} from '@shopify/hydrogen';
  import {useEffect} from 'react';

  export function MyComponent() {
    useEffect(() => {
      const customerPrivacy = getCustomerPrivacy();
      if (customerPrivacy) {
        console.log('Customer privacy:', customerPrivacy);
      }
    }, []);
  }
  ```