Getting started
Chat Widget
Embedded in HTML
Default React Widget
Install the package:
Render the widget:
Framework-Agnostic Headless Widget
The core package exports the widget engine that can be used with any framework:
- Check the
React
adapter on how to attach the widget engine to a framework. - Check the default
React
widget on how to use the engine; collecting user data, navigating between screens, sending messages, handling loading states, etc.
Widget Options
Authentication
The widget supports a variety of ways to authenticate, or not, your users:
- Completely anonymous: Leave
WidgetConfig.collectUserInfo
andWidgetConfig.user
empty or explicitlyundefined
- Manually collect user info: Pass
WidgetConfig.collectUserInfo
astrue
- Users will have to input a
name
and anemail
to 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
localStorage
and they won’t have to input aname
andemail
on future visits.
- Users will have to input a
- Programmatically pass user data: Populate
WidgetConfig.user.data
with aname
andemail
- The session will still be considered
unverified
, because malicious users can still intercept outgoing browser requests and tamper with the user data
- The session will still be considered
- Secure authentication: Get a
token
for 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) customData
in the authentication request will be saved, since contacts have no way to tamper with them
- The session will be
Was this page helpful?