UMD build (legacy)

Use Browser ESM for new integrations

For new non-React integrations, prefer the Browser ESM build. It is self-contained (no peer-dependency scripts), supports static class methods, and is the path used in production. UMD is retained here for legacy environments where dynamic ES module import() is unavailable.

If you are not using React, or need to load the SDK dynamically without a build step, use the UMD (Universal Module Definition) build. The UMD build works in vanilla JavaScript, jQuery projects, and any HTML environment.

How it works

The UMD build bundles all dependencies (React, React DOM, TanStack Query) as a self-contained JavaScript file. You do not need to manage React in your application - the SDK brings its own.

Setup

Step	Description
1	Load peer dependencies (React, React DOM, TanStack Query) from CDN.
2	Load the SDK from CDN.
3	Initialize and mount the Copilot component into your container.

Example

<!-- Step 1: Load peer dependencies -->
<script src="https://docs.gocommotion.com/react-18-prod.min.js"></script>
<script src="https://docs.gocommotion.com/reactdom-18-prod.min.js"></script>
<script src="https://docs.gocommotion.com/react-query-4-prod.js"></script>

<!-- Step 2: Load the SDK -->
<script src="https://ai-copilot.gocommotion.com/fallback/index.umd.js"></script>

<!-- Step 3: Initialize and mount -->
<div id="copilot-container"></div>
<script>
  const sdk = window.initializeCommotionSDK('YOUR_APP_KEY');

  const copilot = sdk.Copilot.init({
    containerId: 'copilot-container',
    mode: 'embed',
    userId: 'user-123',
  });
</script>

Initialization reference

Function / option	Type	Required	Description
window.initializeCommotionSDK	function	Yes	Initializes the SDK and returns the Copilot component factory.
appKey	string	Yes	Your organization’s app key.
sdk.Copilot.init	function	Yes	Mounts the chat interface into a DOM container.
containerId	string	Yes	The HTML element ID where the chat will render.
userId	string	No	Unique identifier for the current user. Auto-generated if omitted.
mode	string	Yes	Application mode: embed, preview, link_preview, or widget.

UMD-specific props

Prop	Type	Required	Description
containerId	string	Yes	DOM element ID where Copilot will mount.

Note

• Shadow DOM is always enabled in the UMD build (no configuration option).
• The default className is cmtn-copilot-main.
• All common props (workerId, agentId, showConversations, etc.) behave the same as in the React build. See the props reference.

Instance methods

The UMD build returns an instance object with cleanup methods:

const instance = sdk.Copilot.init({
  containerId: 'copilot-root',
  mode: 'embed',
  userId: 'user-123',
});

// Cleanup when done
instance.destroy();

Method	Description
destroy()	Unmounts the Copilot component and cleans up event listeners.

When to use UMD

Scenario	Use UMD?
No React or build system	Yes
Legacy or static site	Yes
Dynamic SDK loading	Yes
Integrating into WordPress, Shopify	Yes
Modern React 18+ application	No - use the React build