​
Your Token

To be able to use the chat widget, you’ll need a token. you can find it in Dashboard / Widget.

​
Embedded in HTML

Add these two script tags to your HTML file inside the head tag.
index.html
<script defer src="https://unpkg.com/@opencx/widget-react@latest/dist-embed/script.js"></script>
<script>
  const options = {
    token: "<TOKEN>",
  };
  window.addEventListener("DOMContentLoaded", () => {
    initOpenScript(options);
  });
</script>

​
Default React Widget

Install the package: 
pnpm add @opencx/widget-react
Render the widget:
WidgetWrapper.tsx
import { Widget } from '@opencx/widget-react';

function WidgetWrapper() {
  return (
    <div>
      <Widget
        options={{
          token: '<TOKEN>',
        }}
      />
    </div>
  );
}

​
Framework-Agnostic Headless Widget

The core package (@opencx/widget-core) exports the vanilla JS widget engine, which can be used in any JavaScript framework. You’ll have to build your own UI and screen routers from scratch, as we do not export any UI primitives. If you’re building in React, you can make use of the React adapter package (@opencx/widget-react-headless) which exports a context provider and some helper hooks. Committing to a custom widget implementation is serious business, and should only be attempted if there is adequate engineering capacity for implementation and continuous maintenance.