> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://support.consentmo.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Consentmo - Storefront JavaScript API

# Storefront JavaScript API

The **Consentmo Storefront JavaScript API** allows developers to interact with Consentmo directly from a Shopify theme, custom storefront, or Hydrogen implementation.

Using the API, you can read a visitor's current consent choices, react to consent changes, control the Preferences dialog, and build custom integrations around the consent state.

The API is available under:

**Settings → Storefront JavaScript API**

The current public API is exposed through:

`window.Consentmo`

![](https://storage.crisp.chat/users/helpdesk/website/-/b/0/7/f/b07f7406951a4000/storefront-javascript-api_494mpy.png)


## What Can You Do With the Storefront JavaScript API?

### Read the Visitor's Current Consent

The API allows you to check the visitor's current consent permissions directly from the storefront.

For example:

```javascript
window.Consentmo.currentVisitorConsent()
```

This returns the visitor's current permissions:

```javascript
{
  necessary: true,
  analytics: true,
  marketing: true,
  preferences: true
}
```

The available consent categories are:

* **Necessary** – required cookies and technologies
* **Analytics** – analytics and measurement technologies
* **Marketing** – advertising and marketing technologies
* **Preferences** – functionality and preference cookies

You can also check individual categories directly:

```javascript
window.Consentmo.analyticsAllowed()
window.Consentmo.marketingAllowed()
window.Consentmo.preferencesAllowed()
```

These methods return either `true` or `false` depending on the visitor's current consent.

This can be useful when a custom script or storefront feature should only run after the visitor has allowed the corresponding category.

### Check the Visitor's Consent Status

The API can also return the visitor's overall consent status.

Depending on the visitor's choice, the status can include:

* `accept_all`
* `allow`
* `decline`
* `do_not_sell`
* `undefined`

An `undefined` state can be returned when the visitor has not made a consent choice yet.

This gives developers another way to determine how a visitor has interacted with the Cookie Banner.

### React to Consent Changes

Consentmo exposes document events that allow custom integrations to react immediately when the visitor changes their consent preferences.

For example:

```javascript
document.addEventListener(
  window.Consentmo.events.ConsentUpdate,
  (e) => {
    console.log('Consent updated', e.detail);
  }
);
```

This makes it possible to perform an action as soon as consent changes without requiring the visitor to refresh the page.

For example, a custom integration could check the new consent state and load an analytics or marketing service once the corresponding permission has been granted.

### Control the Preferences Dialog

The API can also be used to open Consentmo's Preferences dialog from your own storefront elements.

For example:

```javascript
window.Consentmo.openDialog('preferences');
```

This can be connected to:

* A **Cookie Preferences** link in the footer
* A custom privacy page
* A button inside the theme
* A custom navigation item
* Another storefront element

This gives developers additional flexibility when building their own privacy-related interfaces while still using Consentmo to manage the visitor's choices.

### Update Consent Programmatically

The Storefront JavaScript API also includes methods for updating consent programmatically.

This is intended for more advanced implementations where consent may be collected through a custom interface or another storefront experience and then passed to Consentmo.

When using these methods, developers should make sure that the consent state passed to Consentmo accurately reflects the choice made by the visitor.

### Work With Consent Cookies

The API includes a Cookies helper that developers can use when building more advanced Consentmo integrations.

The complete available method and its usage can be found directly in the **Storefront JavaScript API** reference inside the Consentmo app.

### Listen for Consentmo Events

Consentmo exposes document events that can be used to react to different stages of the visitor's interaction with the consent interface.

These are especially useful for custom integrations that need to respond immediately when something changes.

The available events and their exact implementation can be found under the **Document events** section of the API reference.

## API Properties

The `window.Consentmo` object also exposes several general properties:

* **`version`** – Banner configuration version from the theme embed
* **`sdkVersion`** – Current public Storefront SDK contract version
* **`events`** – Event name constants that can be used with `document.addEventListener`

These can be useful when developing or debugging custom integrations.

## Example

A basic implementation can first check whether Consentmo is available, read the visitor's consent, and then listen for future changes:

```javascript
if (window.Consentmo) {
  const consent = window.Consentmo.currentVisitorConsent();

  console.log('Current consent:', consent);

  document.addEventListener(
    window.Consentmo.events.ConsentUpdate,
    (e) => {
      console.log('Consent updated', e.detail);
    }
  );
}
```

You can also open the Preferences dialog from your own UI:

```javascript
window.Consentmo.openDialog('preferences');
```

## Who Is This For?

The Storefront JavaScript API is primarily intended for:

* Developers working on Shopify themes
* Merchants with custom integrations
* Custom storefront implementations
* Hydrogen storefronts
* Agencies building custom privacy functionality
* Developers who need scripts or storefront features to respond directly to Consentmo's consent state

You **do not need to use the JavaScript API for Consentmo to work normally**. The Cookie Banner and its standard consent functionality operate independently.

The API is intended for cases where deeper integration with the storefront is required.

## Using Consentmo With Hydrogen

For [Hydrogen](https://support.consentmo.com/en/article/hydrogen-integration-1qqnnuo/) and other headless storefront implementations, Consentmo can be connected with Shopify Customer Privacy as part of the storefront setup.

Refer to the **Headless Storefront** documentation available from the Storefront JavaScript API page for the required configuration.

## Getting Started

To access the complete API reference:

1. Open the **Consentmo GDPR** app
2. Go to **Settings**
3. Open **Storefront JavaScript API**
4. Select the relevant section of the API documentation

The reference includes the available:

* Properties
* Consent-reading methods
* Consent update methods
* Dialog controls
* Cookie helpers
* Document events

You can switch between the **Description** and **Code reference** views depending on whether you need an overview or the exact implementation details.

The API documentation also includes a dedicated **Web Accessibility** section for the storefront functionality available for Consentmo's Web Accessibility features.


# Web Accessibility API

The **Storefront JavaScript API** also provides access to Consentmo's Web Accessibility widget.

To view the available accessibility methods, go to:

**Settings → Storefront JavaScript API → Web Accessibility**

The Accessibility API is exposed through:

`window.Consentmo.accessibility`

![](https://storage.crisp.chat/users/helpdesk/website/-/b/0/7/f/b07f7406951a4000/storefront-javascript-api-ada_zbl8jd.png)

It provides a lightweight way to control the Web Accessibility widget from your storefront, check its current state, and detect which accessibility adjustments a visitor has enabled.

### Open or Close the Accessibility Panel

You can control the Accessibility panel directly from your own storefront elements.

For example, to open it:

```javascript
window.Consentmo.accessibility.open();
```

To close it:

```javascript
window.Consentmo.accessibility.close();
```

You can also toggle between the open and closed states:

```javascript
window.Consentmo.accessibility.toggle();
```

This can be useful if you want to connect Consentmo's accessibility functionality to your own button, navigation item, footer link, or another custom storefront element.

### Check the Widget State

The API lets you check whether the floating Accessibility widget is currently rendered:

```javascript
window.Consentmo.accessibility.isWidgetVisible();
```

You can also check whether the Accessibility panel itself is currently open:

```javascript
window.Consentmo.accessibility.isOpen();
```

Both methods return a boolean value (`true` or `false`).

### Check Enabled Accessibility Adjustments

You can retrieve the accessibility adjustments that the visitor currently has enabled:

```javascript
window.Consentmo.accessibility.getEnabledAdjustments();
```

The method returns an array containing the active adjustments.

For example:

```javascript
["contrast", "highlightLinks"]
```

This can be useful when a custom storefront component needs to respond to the accessibility preferences selected by the visitor.

### Show or Hide the Floating Widget

The floating Accessibility widget can also be shown or hidden programmatically:

```javascript
window.Consentmo.accessibility.showWidget();
```

or:

```javascript
window.Consentmo.accessibility.hideWidget();
```

These changes are **transient**, meaning that the show/hide state is not persisted across page reloads.

This makes the methods useful for situations where you temporarily need to control the visibility of the widget without changing its permanent configuration in Consentmo.

### Listen for Accessibility Events

The Accessibility API also provides document events that custom implementations can listen for.

For example:

```javascript
document.addEventListener(
  window.Consentmo.accessibility.events.Opened,
  () => {
    console.log('Accessibility panel opened');
  }
);
```

The available events include:

* **Accessibility Ready** – fired once the Accessibility SDK has initialized and is ready.
* **Accessibility Opened** – fired when the Accessibility panel is opened.
* **Accessibility Closed** – fired when the Accessibility panel is closed.

These events allow custom storefront functionality to react to interactions with Consentmo's Accessibility widget.

### Quick Example

A basic implementation could look like this:

```javascript
if (window.Consentmo && window.Consentmo.accessibility) {
  const a11y = window.Consentmo.accessibility;

  // Open the accessibility panel from your own UI
  a11y.open();

  // Check which adjustments the visitor has enabled
  console.log(a11y.getEnabledAdjustments());

  // Listen for the accessibility panel being opened
  document.addEventListener(a11y.events.Opened, () => {
    console.log('Accessibility panel opened');
  });
}
```

The Accessibility API becomes available once the Accessibility widget has initialized.

### Accessibility API Overview

Through `window.Consentmo.accessibility`, developers can:

* Check whether the floating Accessibility widget is visible
* Check whether the Accessibility panel is open
* Retrieve the visitor's currently enabled accessibility adjustments
* Open, close, or toggle the Accessibility panel
* Temporarily show or hide the floating widget
* Listen for the Accessibility SDK becoming ready
* Listen for the Accessibility panel being opened or closed

As with the Cookie Banner API, **using the Accessibility API is optional**. Consentmo's standard Web Accessibility functionality works without any custom JavaScript.

The API is intended for merchants and developers who want to integrate Consentmo's accessibility functionality more deeply into a custom Shopify theme or storefront.


# Need help?

In case you need any assistance, please make sure to reach out to our support team via live chat or at [support@consentmo.com](mailto:support@consentmo.com)