Introduction

​

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.

<script defer src="https://unpkg.com/@opencx/widget@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

Render the widget:

import { Widget } from '@opencx/widget/designs';

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

​

Framework-Agnostic Headless Widget

The core package 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.

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.

• Check the React adapter on how to create a framework-specific data layer from the vanilla JS engine.
• Check the default React widget on how to go about the interaction logic; collecting user data, navigating between screens, sending messages, handling loading states, etc.