# Events

The Didomi SDK triggers various events to notify you that the user has taken some action (changed their consent status, opened the preferences pop-in, etc.) or that an important event has happened.

This section describes what events are available and how to subscribe to them.

## Event listeners

The Didomi SDK supports three methods for registering event listeners:

### didomiEventListeners (Recommended)

You can register events by adding them to the special `window.didomiEventListeners` array:

```markup
<script type="text/javascript">
window.didomiEventListeners = window.didomiEventListeners || [];
window.didomiEventListeners.push({
  event: 'event.type',
  listener: function () {
    // Your event listener
  }
});

window.didomiOnReady = window.didomiOnReady || [];
window.didomiOnReady.push(function () {
  // Your initialization code (if any)
});
</script>

...

// Embed the Didomi SDK on the page
<script type="text/javascript" src="https://sdk.privacy-center.org/loader.js" async="true"></script>
```

When the SDK initializes, it collects event listeners from that array and registers them.\
You must add your event listeners to that array before the SDK gets embedded on the page and before it is ready to guarantee that you do not miss an event.\
You can also add event listeners to that array after the SDK is loaded and the SDK will automatically pick them up but you will miss events that happen during the SDK initialization.

This is the preferred method of registering event listeners as it guarantees that you do not miss events.

{% hint style="warning" %}
Registering your event listeners should be done outside of the `window.didomiOnReady` callback to ensure that you receive all events.

If you register events within the `window.didomiOnReady` callback, you will miss some events like the very first `notice.shown` that is sent before the `window.didomiOnReady` callback gets fired.
{% endhint %}

### Didomi.on

The SDK also allows you to register event listeners with the `Didomi.on` method exposed in its API:

```javascript
window.didomiOnReady = window.didomiOnReady || [];
window.didomiOnReady.push(function () {
  Didomi.on('event.type', function () {
    // Your event listener
  });
});
```

### Didomi.once

Additionally, the SDK provides the `Didomi.once` method to register single-use event listeners:

```javascript
window.didomiOnReady = window.didomiOnReady || [];
window.didomiOnReady.push(function () {
  Didomi.once('event.type', function () {
    // Your event listener, executed only once
  });
});
```

While these methods are perfectly valid, their main drawback is that your event listeners only get registered once the SDK is ready, meaning you will miss events fired during the SDK initialization. We recommend using the `didomiEventListeners` method instead.

### Didomi.off

The SDK provides the `Didomi.off` method to unsubscribe from events that were previously registered either through the `didomiEventListeners` array or using the `Didomi.on` method.

```javascript
const callback = () => {
  console.log('Event triggered');
};

// Register via didomiEventListeners
window.didomiEventListeners = window.didomiEventListeners || [];
window.didomiEventListeners.push({
  event: 'event.type',
  listener: callback
});


// Or register via Didomi.on
window.didomiOnReady = window.didomiOnReady || [];
window.didomiOnReady.push(function () {
  Didomi.on('event.type', callback);
});

// Later, unsubscribe
Didomi.off('event.type', callback);
```

### React

If you are using our React plugin, event listeners can be passed as props to the DidomiSDK component:

```javascript
consentHasChanged() {
    // Do something when the consent from the user has changed
}

preferencesClickPurposeAgree(purposeId) {
    // Do something when user agrees on a purpose
}

...

<DidomiSDK
    ...
    onConsentChanged={this.consentHasChanged.bind(this)}
    onPreferencesClickPurposeAgree={this.preferencesClickPurposeAgree.bind(this)}
/>
```

## Event types

This section presents a comprehensive list of the event types exposed by the Didomi SDK and usage examples.

### api.error

Triggered when an error happens while sending an HTTP request to our API for collecting consents, events, metrics, etc.

**Listener parameters**

`context` object that contains the following properties:

| Key    | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| reason | <p>The reason for the request error.</p><p><br>Possible values:<br>- <code>request.failure</code> when the request fails to be sent for any reason (timeout, no connection, blocked by an extension, etc.)<br>- <code>response.error</code> when we received an error response from the server based on the HTTP response code (>= 400)</p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| id     | <p>An ID identifying the request that failed.<br><br>Possible values:<br>- <code>createEventPageview</code>: HTTP request to collect an event after a page view</p><p>- <code>createEventConsentAsked</code>: HTTP request to collect an event after consent was asked</p><p>- <code>createEventConsentGiven</code>: HTTP request to collect an event after consent was given</p><p>- <code>createEventUIAction</code>: HTTP request to collect an event after a interaction with the UI</p><p>- <code>createEventSyncAcknowledged</code>: HTTP request to collect an event after sync is acknowledged</p><p>- <code>getRemoteConsentUser</code>: HTTP request to get the remote consent</p><p>- <code>requestAuthentication</code>: HTTP request to request authentication</p><p>- <code>sendMessage</code>: HTTP request to send a login message (remote consent flow)</p><p>- <code>verifyOtpCode</code>: HTTP request to send and verify an OTP verification code<br>- <code>createSignature</code>: HTTP request to sign a Didomi Consent String<br>- <code>getSyncData</code>: HTTP request to get user choices from the backend (sync)</p> |

**Example**

{% tabs %}
{% tab title="Plain JavaScript" %}

```javascript
window.didomiEventListeners = window.didomiEventListeners || [];
window.didomiEventListeners.push({
  event: 'api.error',
  listener: function ({ id, reason }) {
    // An API error happened
  }
});
```

{% endtab %}
{% endtabs %}

### consent.changed

Triggered when the user consent status changes either as the result of a user action or an API call.

**Listener parameters**

`context` object that contains the following properties:

| Key    | Description                                                                                                                                                                                                    |
| ------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| action | The user action that triggered the consent change. Possible values: `click` (explicit click on the buttons), `navigate` (click to navigate to another page) or `external` (external call to setUserAgreeToAll) |

**Example**

{% tabs %}
{% tab title="Plain JavaScript" %}

```javascript
window.didomiEventListeners = window.didomiEventListeners || [];
window.didomiEventListeners.push({
  event: 'consent.changed',
  listener: function (context) {
    // The user consent status has changed
  }
});
```

{% endtab %}

{% tab title="React" %}

```javascript
consentHasChanged() {
    // The user consent status has changed
}

...

<DidomiSDK
    ...
    onConsentChanged={this.consentHasChanged.bind(this)}
/>
```

{% endtab %}
{% endtabs %}

### consent.pendingchanged (Currently only used for preference center)

Triggered when a pending content is added or removed from the queue through the method `Didomi.setPendingConsentForEntityById` or cleared through `Didomi.savePendingConsents`.

**Listener parameters**

| Key             | Description                  |
| --------------- | ---------------------------- |
| pendingConsents | The list of pending consents |

**Example**

{% tabs %}
{% tab title="Plain JavaScript" %}

```javascript
window.didomiEventListeners = window.didomiEventListeners || [];
window.didomiEventListeners.push({
  event: 'consent.pendingchanged',
  listener: function ({ pendingConsents }) {
    // The number of pending consent has changed
  }
});
```

{% endtab %}
{% endtabs %}

### integrations.consentpassedtodfp

Triggered when the user consent status has been passed to Google DFP / AdSense / AdExchange. This is only triggered when the [Google DFP / AdSense / AdExchange integration](https://developers.didomi.io/cmp/web-sdk/third-parties/direct-integrations/google-ad-manager-adsense/google-dfp-adsense-adx) is enabled on your website.\
Visit that section for more information.

**Listener parameters**

The listener is provided with a single `data` object that has the following properties:

| Property        | Type    | Description                                                                                                                                                                                                                                                                                 |
| --------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `consentStatus` | boolean | <p>Consent status of the user for the vendor Google.</p><p><code>true</code> if the user has given consent.</p><p><code>false</code> if the user has denied consent.</p><p><code>undefined</code> if the user has not made a choice yet.</p>                                                |
| `index`         | number  | <p>The index is the number of the event on the page.<br>There is always a first event that gets triggered with index 0 on page load. More events can be triggered if the user changes their consent preferences on the page. The index gets incremented by 1 for every event triggered.</p> |

**Example**

{% tabs %}
{% tab title="Plain JavaScript" %}

```javascript
window.didomiEventListeners = window.didomiEventListeners || [];
window.didomiEventListeners.push({
  event: 'integrations.consentpassedtodfp',
  listener: function (data) {
    // Consent has been passed to Google
    // Load or refresh ads as needed with DFP, Prebid, etc.
    // `data.consentStatus` contains the current consent status of the user (true/false/undefined)
    // `data.index` contains the index of the event (integer)
    if (data.index === 0) {
      // This is the very first event on the page that gets triggered on page load
    } else {
      // This is an event that happens later on the page, after a user action (user giving consent or changing their preferences)
    }
  }
});
```

{% endtab %}

{% tab title="React" %}
Not available in React yet.
{% endtab %}
{% endtabs %}

### notice.backdropclick

{% hint style="info" %}
Only triggers when GDPR is active with a pop-in notice
{% endhint %}

Triggered when the user has clicked on the backdrop of a pop-in notice. This event only gets fired when a consent notice of type pop-in is displayed.

**Listener parameters**

None

**Example**

{% tabs %}
{% tab title="Plain JavaScript" %}

```javascript
window.didomiEventListeners = window.didomiEventListeners || [];
window.didomiEventListeners.push({
  event: 'notice.backdropclick',
  listener: function () {
    // Your event listener
  }
});
```

{% endtab %}

{% tab title="React" %}

```javascript
noticeBackdropClicked() {
    // The user has clicked on the backdrop
}

...

<DidomiSDK
    ...
    onNoticeBackdropclick={this.noticeBackdropClicked.bind(this)}
/>
```

{% endtab %}
{% endtabs %}

### notice.clickagree

Triggered when the user has clicked on the `Agree and close` button of a consent notice.

**Listener parameters**

None

**Example**

{% tabs %}
{% tab title="Plain JavaScript" %}

```javascript
window.didomiEventListeners = window.didomiEventListeners || [];
window.didomiEventListeners.push({
  event: 'notice.clickagree',
  listener: function () {
    // The user has clicked on the "Agree and close" button
  }
});
```

{% endtab %}

{% tab title="React" %}

```javascript
noticeAgreeClicked() {
    // The user has clicked on the "Agree and close" button
}

...

<DidomiSDK
    ...
    onNoticeClickAgree={this.noticeAgreeClicked.bind(this)}
/>
```

{% endtab %}
{% endtabs %}

### notice.clickclose

Triggered when the user has clicked on the Close icon of a consent notice with format Popup.

**Listener parameters**

None

**Example**

{% tabs %}
{% tab title="Plain JavaScript" %}

```javascript
window.didomiEventListeners = window.didomiEventListeners || [];
window.didomiEventListeners.push({
  event: 'notice.clickclose',
  listener: function () {
    // The user has clicked on the Close button
  }
});
```

{% endtab %}
{% endtabs %}

### notice.clickdisagree

Triggered when the user has clicked on the `Decline` button of a consent notice.

**Listener parameters**

None

**Example**

{% tabs %}
{% tab title="Plain JavaScript" %}

```javascript
window.didomiEventListeners = window.didomiEventListeners || [];
window.didomiEventListeners.push({
  event: 'notice.clickdisagree',
  listener: function () {
    // The user has clicked on the "Decline" button
  }
});
```

{% endtab %}
{% endtabs %}

### notice.clickmoreinfo

{% hint style="info" %}
Does not trigger for CCPA
{% endhint %}

Triggered when the user has clicked on the `More information` link of a consent notice.

**Listener parameters**

None

**Example**

{% tabs %}
{% tab title="Plain JavaScript" %}

```javascript
window.didomiEventListeners = window.didomiEventListeners || [];
window.didomiEventListeners.push({
  event: 'notice.clickmoreinfo',
  listener: function () {
    // The user has clicked on the "More information" link
  }
});
```

{% endtab %}

{% tab title="React" %}

```javascript
noticeMoreInfoClicked() {
    // The user has clicked on the "More information" link
}

...

<DidomiSDK
    ...
    onNoticeClickMoreInfo={this.noticeMoreInfoClicked.bind(this)}
/>
```

{% endtab %}
{% endtabs %}

### notice.clickviewvendors

{% hint style="info" %}
Does not trigger for CCPA
{% endhint %}

Triggered when the user has clicked on the `View our partners` link of a consent notice.

**Listener parameters**

None

**Example**

{% tabs %}
{% tab title="Plain JavaScript" %}

```javascript
window.didomiEventListeners = window.didomiEventListeners || [];
window.didomiEventListeners.push({
  event: 'notice.clickviewvendors',
  listener: function () {
    // The user has clicked on the "View our partners" link
  }
});
```

{% endtab %}

{% tab title="React" %}

```javascript
noticeViewVendorsClicked() {
    // The user has clicked on the "View our partners" link
}

...

<DidomiSDK
    ...
    onNoticeClickViewVendors={this.noticeViewVendorsClicked.bind(this)}
/>
```

{% endtab %}
{% endtabs %}

### notice.hidden

Triggered when the user closes the consent notice.

**Listener parameters**

None

**Example**

{% tabs %}
{% tab title="Plain JavaScript" %}

```javascript
window.didomiEventListeners = window.didomiEventListeners || [];
window.didomiEventListeners.push({
  event: 'notice.hidden',
  listener: function () {
    // The notice has been hidden
  }
});
```

{% endtab %}

{% tab title="React" %}

```javascript
noticeHidden() {
    // The notice has been hidden
}

...

<DidomiSDK
    ...
    onNoticeHidden={this.noticeHidden.bind(this)}
/>
```

{% endtab %}
{% endtabs %}

### notice.shown

Triggered when the consent notice gets shown to the user.

**Listener parameters**

None

**Example**

{% tabs %}
{% tab title="Plain JavaScript" %}

```javascript
window.didomiEventListeners = window.didomiEventListeners || [];
window.didomiEventListeners.push({
  event: 'notice.shown',
  listener: function () {
    // The notice has been shown
  }
});
```

{% endtab %}

{% tab title="React" %}

```javascript
noticeShown() {
    // The notice has been shown
}

...

<DidomiSDK
    ...
    onNoticeShown={this.noticeShown.bind(this)}
/>
```

{% endtab %}
{% endtabs %}

### preferences.clickagreetoall

{% hint style="info" %}
Does not trigger for CCPA
{% endhint %}

Triggered when the user has clicked on the `Agree to all` button of the Preferences pop-in.

**Listener parameters**

None

**Example**

{% tabs %}
{% tab title="Plain JavaScript" %}

```javascript
window.didomiEventListeners = window.didomiEventListeners || [];
window.didomiEventListeners.push({
  event: 'preferences.clickagreetoall',
  listener: function () {
    // The user has clicked on the "Agree to all" button 
  }
});
```

{% endtab %}

{% tab title="React" %}

```javascript
preferencesAgreeToAllClicked() {
    // The user has clicked on the "Agree to all" button 
}

...

<DidomiSDK
    ...
    onPreferencesClickAgreeToAll={this.preferencesAgreeToAllClicked.bind(this)}
/>
```

{% endtab %}
{% endtabs %}

### preferences.clickclose

Triggered when the user has clicked on the Close icon of the Preferences pop-in.

![](https://1703900661-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LDh8ZWDZrXs8sc4QKEQ%2Fuploads%2Fgit-blob-dfa8f6585169db2273901c2a4dfe142362d23daf%2Fimage.png?alt=media)

**Listener parameters**

None

**Example**

{% tabs %}
{% tab title="Plain JavaScript" %}

```javascript
window.didomiEventListeners = window.didomiEventListeners || [];
window.didomiEventListeners.push({
  event: 'preferences.clickclose',
  listener: function () {
    // The user has clicked on the "Close" icon
  }
});
```

{% endtab %}
{% endtabs %}

### preferences.clickdisagreetoall

{% hint style="info" %}
Does not trigger for CCPA
{% endhint %}

Triggered when the user has clicked on the `Disagree to all` button of the Preferences pop-in.

**Listener parameters**

None

**Example**

{% tabs %}
{% tab title="Plain JavaScript" %}

```javascript
window.didomiEventListeners = window.didomiEventListeners || [];
window.didomiEventListeners.push({
  event: 'preferences.clickdisagreetoall',
  listener: function () {
    // The user has clicked on the "Disagree to all" button
  }
});
```

{% endtab %}

{% tab title="React" %}

```javascript
preferencesDisagreeToAllClicked() {
    // The user has clicked on the "Disagree to all" button
}

...

<DidomiSDK
    ...
    onPreferencesClickDisagreeToAll={this.preferencesDisagreeToAllClicked.bind(this)}
/>
```

{% endtab %}
{% endtabs %}

### preferences.clickpurposeagree

{% hint style="info" %}
Does not trigger for CCPA
{% endhint %}

Triggered when the user has enabled a specific purpose or category on the Preferences pop-in.

**Listener parameters**

The listener is provided with a single `data` object that has the following properties:

| Property    | Type    | Description                                  |
| ----------- | ------- | -------------------------------------------- |
| `purposeId` | string  | Unique ID of the purpose that was enabled    |
| `category`  | boolean | `true` if the purpose clicked was a category |

**Example**

{% tabs %}
{% tab title="Plain JavaScript" %}

```javascript
window.didomiEventListeners = window.didomiEventListeners || [];
window.didomiEventListeners.push({
  event: 'preferences.clickpurposeagree',
  listener: function (data) {
    // The user has enabled a specific purpose
    // `data.purposeId` contains the ID of the purpose
    // `data.category` contains a boolean to identify if the purpose was category
  }
});
```

{% endtab %}

{% tab title="React" %}

```javascript
preferencesPurposeAgreeClicked(data) {
    // The user has enabled a specific purpose
    // `data.purposeId` contains the ID of the purpose
    // `data.category` contains a boolean to identify if the purpose was category
}

...

<DidomiSDK
    ...
    onPreferencesClickPurposeAgree={this.preferencesPurposeAgreeClicked.bind(this)}
/>
```

{% endtab %}
{% endtabs %}

### preferences.clickpurposedisagree

{% hint style="info" %}
Does not trigger for CCPA
{% endhint %}

Triggered when the user has disabled a specific purpose or category on the Preferences pop-in.

**Listener parameters**

The listener is provided with a single `data` object that has the following properties:

| Property    | Type    | Description                                  |
| ----------- | ------- | -------------------------------------------- |
| `purposeId` | string  | Unique ID of the purpose that was disabled   |
| `category`  | boolean | `true` if the purpose clicked was a category |

**Example**

{% tabs %}
{% tab title="Plain JavaScript" %}

```javascript
window.didomiEventListeners = window.didomiEventListeners || [];
window.didomiEventListeners.push({
  event: 'preferences.clickpurposedisagree',
  listener: function (data) {
    // The user has disabled a specific purpose
    // `data.purposeId` contains the ID of the purpose
    // `data.category` contains a boolean to identify if the purpose was category
  }
});
```

{% endtab %}

{% tab title="React" %}

```javascript
preferencesPurposeDisagreeClicked(data) {
    // The user has disabled a specific purpose
    // `data.purposeId` contains the ID of the purpose
    // `data.category` contains a boolean to identify if the purpose was category
}

...

<DidomiSDK
    ...
    onPreferencesClickPurposeDisagree={this.preferencesPurposeDisagreeClicked.bind(this)}
/>
```

{% endtab %}
{% endtabs %}

### preferences.clicksavechoices

{% hint style="info" %}
Does not trigger for CCPA
{% endhint %}

Triggered when the user has clicked on the `Save` button on the Preferences pop-in (Purposes view).

**Listener parameters**

None

**Example**

{% tabs %}
{% tab title="Plain JavaScript" %}

```javascript
window.didomiEventListeners = window.didomiEventListeners || [];
window.didomiEventListeners.push({
  event: 'preferences.clicksavechoices',
  listener: function () {
    // The user has clicked on the "Save" button
  }
});
```

{% endtab %}

{% tab title="React" %}

```javascript
preferencesSaveChoicesClicked() {
    // The user has clicked on the "Save" button
}

...

<DidomiSDK
    ...
    onPreferencesClickSaveChoices={this.preferencesSaveChoicesClicked.bind(this)}
/>
```

{% endtab %}
{% endtabs %}

### preferences.clickvendoragree

{% hint style="info" %}
Does not trigger for CCPA
{% endhint %}

Triggered when the user has enabled a specific vendor on the Preferences pop-in.

**Listener parameters**

The listener is provided with a single `data` object that has the following properties:

| Property   | Type   | Description                              |
| ---------- | ------ | ---------------------------------------- |
| `vendorId` | string | Unique ID of the vendor that was enabled |

**Example**

{% tabs %}
{% tab title="Plain JavaScript" %}

```javascript
window.didomiEventListeners = window.didomiEventListeners || [];
window.didomiEventListeners.push({
  event: 'preferences.clickvendoragree',
  listener: function (data) {
    // The user has enabled a specific vendor
    // `data.vendorId` contains the ID of the vendor
  }
});
```

{% endtab %}

{% tab title="React" %}

```javascript
preferencesVendorAgreeClicked(data) {
    // The user has enabled a specific vendor
    // `data.vendorId` contains the ID of the vendor
}

...

<DidomiSDK
    ...
    onPreferencesClickVendorAgree={this.preferencesVendorAgreeClicked.bind(this)}
/>
```

{% endtab %}
{% endtabs %}

### preferences.clickvendordisagree

{% hint style="info" %}
Does not trigger for CCPA
{% endhint %}

Triggered when the user has disabled a specific vendor on the Preferences pop-in.

**Listener parameters**

The listener is provided with a single `data` object that has the following properties:

| Property   | Type   | Description                               |
| ---------- | ------ | ----------------------------------------- |
| `vendorId` | string | Unique ID of the vendor that was disabled |

**Example**

{% tabs %}
{% tab title="Plain JavaScript" %}

```javascript
window.didomiEventListeners = window.didomiEventListeners || [];
window.didomiEventListeners.push({
  event: 'preferences.clickvendordisagree',
  listener: function (data) {
    // The user has disabled a specific vendor
    // `data.vendorId` contains the ID of the vendor
  }
});
```

{% endtab %}

{% tab title="React" %}

```javascript
preferencesVendorDisagreeClicked(data) {
    // The user has disabled a specific vendor
    // `data.vendorId` contains the ID of the vendor
}

...

<DidomiSDK
    ...
    onPreferencesClickVendorDisagree={this.preferencesVendorDisagreeClicked.bind(this)}
/>
```

{% endtab %}
{% endtabs %}

### preferences.clickvendorsavechoices

{% hint style="info" %}
Does not trigger for CCPA
{% endhint %}

Triggered when the user has clicked on the `Save` button of the Preferences pop-in (Vendors view).

**Listener parameters**

None

**Example**

{% tabs %}
{% tab title="Plain JavaScript" %}

```javascript
window.didomiEventListeners = window.didomiEventListeners || [];
window.didomiEventListeners.push({
  event: 'preferences.clickvendorsavechoices',
  listener: function () {
    // The user has clicked on the "Save" button
  }
});
```

{% endtab %}

{% tab title="React" %}

```javascript
preferencesVendorSaveChoicesClicked() {
    // The user has clicked on the "Save" button
}

...

<DidomiSDK
    ...
    onPreferencesClickVendorSaveChoices={this.preferencesVendorSaveChoicesClicked.bind(this)}
/>
```

{% endtab %}
{% endtabs %}

### preferences.clickviewvendors

{% hint style="info" %}
Does not trigger for CCPA
{% endhint %}

Triggered when the user has clicked on the `View vendors` link of the Preferences pop-in to open the Vendors view.

**Listener parameters**

None

**Example**

{% tabs %}
{% tab title="Plain JavaScript" %}

```javascript
window.didomiEventListeners = window.didomiEventListeners || [];
window.didomiEventListeners.push({
  event: 'preferences.clickviewvendors',
  listener: function () {
    // The user has clicked on the "View vendors" link
  }
});
```

{% endtab %}

{% tab title="React" %}

```javascript
preferencesViewVendorsClicked() {
    // The user has clicked on the "View vendors" link
}

...

<DidomiSDK
    ...
    onPreferencesClickViewVendors={this.preferencesViewVendorsClicked.bind(this)}
/>
```

{% endtab %}
{% endtabs %}

### preferences.hidden

Triggered when the user closes the Preferences pop-in.

**Listener parameters**

None

**Example**

{% tabs %}
{% tab title="Plain JavaScript" %}

```javascript
window.didomiEventListeners = window.didomiEventListeners || [];
window.didomiEventListeners.push({
  event: 'preferences.hidden',
  listener: function () {
    // The Preferences pop-in has been hidden
  }
});
```

{% endtab %}
{% endtabs %}

### preferences.shown

Triggered when the Preferences pop-in gets shown to the user.

**Listener parameters**

None

**Example**

{% tabs %}
{% tab title="Plain JavaScript" %}

```javascript
window.didomiEventListeners = window.didomiEventListeners || [];
window.didomiEventListeners.push({
  event: 'preferences.shown',
  listener: function () {
    // The Preferences pop-in has been shown
  }
});
```

{% endtab %}
{% endtabs %}

### sync.ready

Triggered when the syncing process is done on the page and the SDK is ready.

This event is meant to be a replacement to `window.didomiOnReady` when you need to wait for the sync process to be complete and for the SDK to be ready on the page.

It is fired in every case:

* When syncing is disabled
* When syncing is enabled but not required (ie the user information is recent enough)
* When syncing is enabled and has happened (including in error cases)

**Listener parameters**

`SyncReadyEvent` object

| Property         | Type                  | Description                                                                                                                                                                                          |
| ---------------- | --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| statusApplied    | `boolean`             | Indicates if the user status has been applied locally from the remote Didomi backend. `true` if the user status was applied from the remote, `false` otherwise.                                      |
| syncAcknowledged | `Function`            | Callback that can be used to communicate to the Didomi servers that the synchronization has been communicated to the user. Returns `true` if the API event was successfully sent, `false` otherwise. |
| syncError        | `undefined \| string` | An error message if the sync failed                                                                                                                                                                  |

**Example**

{% tabs %}
{% tab title="Plain JavaScript" %}

```javascript
window.didomiEventListeners = window.didomiEventListeners || [];
window.didomiEventListeners.push({
  event: 'sync.ready',
  listener: function () {
    // The SDK is ready and syncing is done
  }
});
```

{% endtab %}
{% endtabs %}