---
schema_version: "1"
id: 76994d6078b5bcd4ddc9e342030c8049c276c4ef40dcf63228a58baa1bf69ac6
title: Install the Agentforce Commerce Client
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/commerce-cloud/b2c-commerce/guides/agentforce-commerce-client/install-the-commerce-client.md
canonical_url: https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/install-the-commerce-client.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: cc18e0a8936741f24a3b7f8b72574ab7b472f80a7fca688460c4c5297d476de0
products:
  - Composable Storefront
  - Salesforce APIs
---
# Install the Agentforce Commerce Client

Install the Agentforce Commerce Client one of two ways: as a `<script>` tag that loads a UMD bundle from the CDN, or as the `@cimulate/copilot-widget` npm package in a React application.

**note:** On an SFRA storefront, don't embed the client with a `<script>` tag. Install the `plugin_commerce_client` cartridge and configure the widget from Business Manager instead. See [Install the Agentforce Commerce Client on SFRA](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/install-on-sfra.md).

On a PWA Kit storefront, don't embed the client with a `<script>` tag either. You enable it through the `COMMERCE_AGENT_SETTINGS` Managed Runtime environment variable. See [Install the Agentforce Commerce Client on PWA Kit](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/install-on-pwa-kit.md).

## CDN install

The CDN approach is a drop-in integration for any storefront. Load the bundle, add a container element, and call the injection function.

The bundle URL follows this pattern:

```
https://cdn.search.cimulate.ai/copilot-widget/<version>/messaging.umd.js
```

Pin `<version>` to a specific release (for example, `1.30.0`) so a future release can't change your storefront's behavior without an explicit upgrade. The bundle also ships a matching CSS file at the same path with a `.css` extension. The `messaging.umd.js` bundle exposes the global `window.CimulateMessaging`.

```html
<div id="messaging-widget"></div>
<script src="https://cdn.search.cimulate.ai/copilot-widget/1.30.0/messaging.umd.js"></script>
<script>
  CimulateMessaging.injectMessagingWidget({
    elementId: "messaging-widget",
    messagingConfig: {
      scrt2Url: "https://your-org.my.salesforce-scrt.com",
      orgId: "00Dxx0000000000",
      esDeveloperName: "Your_Messaging_Channel",
    },
  });
</script>
```

`injectMessagingWidget` requires `messagingConfig` with `scrt2Url`, `orgId`, and `esDeveloperName`. If `messagingConfig` is missing, or any of those three fields is missing, the widget logs an error and does not render.

**Container timing**

Both injection functions take an `elementId` that names the container element to render into. If the element already exists when you call the function, the widget renders immediately. If it doesn't exist yet, the widget starts a `MutationObserver` and renders as soon as the element appears, or logs an error after a timeout (5000 ms by default; override with the `timeout` option). This design supports injecting the widget on storefronts where the container is added asynchronously, such as single-page apps and dynamic page builders.

## npm install

For a React application, install the package and import the component and injection helpers for your mode.

```sh
npm install @cimulate/copilot-widget
```

The package requires React 18 (`react` and `react-dom` at `~18.3.1`) as peer dependencies.

import { AgentForceWidget } from "@cimulate/copilot-widget/messaging";

<AgentForceWidget
  messagingConfig={{
    scrt2Url: "https://your-org.my.salesforce-scrt.com",
    orgId: "00Dxx0000000000",
    esDeveloperName: "Your_Messaging_Channel",
  }}
/>;
```

**Import the styles**

Import the widget stylesheet:

```ts
import "@cimulate/copilot-widget/css/messaging";
```

## Pin and track versions

`@cimulate/copilot-widget` follows semantic versioning. Each released version is published on merge and recorded in the package's changelog, newest first. Before you upgrade a pinned version, review the changelog for the releases between your current version and the target so you can account for fixes and additive changes. Both the CDN URL and the npm version range are places to pin a known-good version.

The changelog is public, so you can check what's supported in a release before you upgrade:

1. Open the [`@cimulate/copilot-widget` package page](https://www.npmjs.com/package/@cimulate/copilot-widget) on npm.
2. Select the **Code** tab.
3. Open `changelog.md` in the file list to see what changed, was added, or was fixed in each version.

## Related resources

- [Agentforce Commerce Client Overview](agentforce-commerce-client-overview.md)
- [Install the Agentforce Commerce Client on SFRA](install-on-sfra.md)
- [Install the Agentforce Commerce Client on PWA Kit](install-on-pwa-kit.md)
- [Configure the Agentforce Commerce Client](configure-the-commerce-client.md)
- [Component Override SDK](component-override-sdk.md)