---
title: Integrate a Coveo ClientIdAccessor Lightning component
slug: n6jh0013
canonical_url: https://docs.coveo.com/en/n6jh0013/
collection: coveo-for-salesforce
source_format: adoc
---
# Integrate a Coveo ClientIdAccessor Lightning component
> **Available since**
>
> This feature was introduced in the August 2023 release of Coveo for Salesforce version [5.2](https://docs.coveo.com/en/n5bj0150#august-2023-release-v5-2-initial-release).

The Coveo `ClientIdAccessor` Lightning component reads and writes the [client ID](https://docs.coveo.com/en/lbjf0131/) in the `CoveoV2` namespace [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage).
Due to [Lightning Locker](https://developer.salesforce.com/docs/atlas.en-us.lightning.meta.%20%20/lightning/security_code.htm) restrictions, a Lightning component that belongs to a different namespace can't directly access the client ID in the `CoveoV2` namespace localStorage.
The Coveo `ClientIdAccessor` Lightning component offers methods to access and manipulate the client ID in the `CoveoV2` namespace so it can be retrieved and reused across sites during a
[visit](https://docs.coveo.com/en/271/).

## Overview

All components that send [Coveo Analytics events](https://docs.coveo.com/en/260/) require a client ID.
To ensure proper reporting, both custom components and `CoveoV2` packaged components must send the same client ID value.
The Coveo `ClientIdAccessor` Lightning component lets you manipulate the client ID in the `CoveoV2` components to ensure the same client ID value is shared by all components that send UA events.

> **Note**
>
> The [Coveo UA library](https://docs.coveo.com/en/1818/) that's used to log [Coveo Case Assist](https://docs.coveo.com/en/l2bg0226/) events checks the localStorage for the client ID.
> If there's no client ID in the localStorage, it creates one.
> This can cause issues if you have other components that log UA events by accessing the client ID in the `CoveoV2` namespace localStorage.
> Since the library can't detect those client IDs, it generates new ones.
> This makes it impossible to report on a visit in which the user interacted with components from different namespaces, such as a Full Search page and a case creation page powered by Coveo Case Assist.
> To fix this issue, create a custom component that wraps the Coveo `ClientIdAccessor` Lightning component and stores the client ID in the localStorage (see [Procedure](#procedure)).

## Procedure

. [Create a new Aura component](https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/components_create_devconsole.htm) using a descriptive name such as `ClientIdHandler.cmp`.

. Use the Coveo `ClientIdAccessor` component from the `CoveoV2` namespace and associate an `aura:id` to it.

```xml
<!-- ClientIdHandler.cmp -->
<aura:component implements="forceCommunity:availableForAllPageTypes">
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <CoveoV2:ClientIdAccessor aura:id="clientIdAccessor"/>
</aura:component>
```

> **Note**
>
> The `implements="forceCommunity:availableForAllPageTypes"` attribute tells the Lightning framework that your component can be used in the drag-and-drop interface in the Experience Builder.

. Access the client ID in the `CoveoV2` namespace localStorage and save the value in the localStorage of the `c` namespace.

```javascript
// ClientIdHandler.js
({
    doInit: function(component) {
        const clientIdCmp = component.find("clientIdAccessor");
        // Access the ClientID value from the CoveoV2 namespace.
        const clientId = clientIdCmp.getClientId();
        // Access the ClientID value from the c namespace.
        const cClientId = localStorage.getItem('visitorId');

        const key = 'coveo_visitorId';
        if(clientId) {
            // If there's a value in the CoveoV2 namespace, use it.
            // Save the value in the c namespace localStorage so it
            // can be used by other components.
            localStorage.setItem('visitorId', clientId);
            const host = window.location.hostname;
            if (host.indexOf('.') === -1) {
                document.cookie =
                    `${key}=${encodeURIComponent(clientId)}` +
                    ';path=/;SameSite=Lax';
            } else {
                const domainParts = host.split('.');
                const domain = domainParts[domainParts.length - 2] + '.' + domainParts[domainParts.length - 1];
                document.cookie =
                    `${key}=${encodeURIComponent(clientId)}` +
                    (domain ? `;domain=$[domain](https://docs.coveo.com/en/2819/)` : '') +
                    ';path=/;SameSite=Lax';
            }
        } else if(cClientId) {
            // If there is no value in the CoveoV2 namespace,
            // but there is one in the c namespace, set it to the CoveoV2 namespace.
           clientIdCmp.setClientId(cClientId);
        }
    }
})
```

> **Note**
>
> Any page where you want to use the client ID will now be able to access it in the localStorage.

. Include your newly created custom Aura component in the pages where you want to make the client ID available in the localStorage (for example, in a Case Assist page).

## See also

* For developer reference documentation, see [ClientIdAccessor Lightning component](https://docs.coveo.com/en/n6jg0305/).

* For information on how to log UA events in the Case Assist workflow, see [Log Case Assist events](https://docs.coveo.com/en/3437/).

* For information on how to generate a Case Assist [dashboard](https://docs.coveo.com/en/256/) based on the standard Case Assist events, see [Generate Case Assist reports](https://docs.coveo.com/en/l45l0380/).