<head>
<script src="https://unpkg.com/@opencx/widget@latest/dist-embed/script.js"></script>
<script>
const options = {
token: "your-token-here",
};
window.addEventListener("DOMContentLoaded", () => {
initOpenScript(options);
});
</script>
</head>Install the package:
pnpm add @opencx/widgetRender the widget:
import { Widget } from "@opencx/widget/designs";
function YourComponent() {
return (
<div data-opencx-widget>
<Widget
options={{
token: "your-token-here"
}}
/>
</div>
)
}The core package exports the widget engine that can be used with any framework:
- Check the
Reactadapter on how to attach the widget engine to a framework. - Check the default
Reactwidget on how to use the engine; collecting user data, navigating between screens, sending messages, handling loading states, etc.
The widget supports a variety of ways to authenticate, or not, your users:
- Completely anonymous: Leave
WidgetConfig.collectUserDataandWidgetConfig.userempty or explicitlyundefined - Manually collect user data: Pass
WidgetConfig.collectUserDataastrue- Users will have to input a
nameand anemailto enter the chat. - A contact will be created with the inputted email. But the session will be considered
unverified, since the user can input anyemail. - The user will be saved in
localStorageand they won't have to input anameandemailon future visits.
- Users will have to input a
- Programmatically pass user data: Populate
WidgetConfig.user.datawith anameandemail- The session will still be considered
unverified, because malicious users can still intercept outgoing browser requests and tamper with the user data - If
WidgetConfig.collectUserDataistrueandWidgetConfig.user.data.emailwas also passed, theemailwill take precedence andcollectUserDatawill be ignored.
- The session will still be considered
- Secure authentication: Get a
tokenfor your user by letting your backend hit a request toapi.open.cx/widget/authenticate-user(API reference) and pass the token inWidgetConfig.user.token- The session will be
verified, so your human agents can share private data with the user (in case the session was handed-over to humans) customDatain the authentication request will be saved, since contacts have no way to tamper with them
- The session will be
If you support multiple workspaces per user or contact, you can pass the user's workspace id in WidgetConfig.user.externalId. This way, sessions will be scoped by that external id.