@neuphlo/widget-react 0.1.0 → 0.3.0

package/dist/index.d.ts

@@ -10,9 +10,22 @@ export interface NeuphloWidgetApi {
     toggle: () => void;
     destroy: () => void;
 }
+export interface NeuphloWidgetUser {
+    /** Your product's user id, stored on the conversation. */
+    id?: string;
+    name?: string;
+    email?: string;
+    /**
+     * HMAC-SHA256 of the user id (or email when no id), keyed with your
+     * workspace's widget identity secret. Compute it server-side.
+     */
+    hash?: string;
+}
 export interface NeuphloWidgetOptions {
     /** Workspace widget key from Inbox settings → Chat widget. */
     widgetKey: string;
+    /** Identify the signed-in user so conversations are recognized. */
+    user?: NeuphloWidgetUser;
     /** Loader script origin. Defaults to the Neuphlo cloud. */
     scriptUrl?: string;
     /** Neuphlo app origin, for self-hosted installs. */

package/dist/index.js

@@ -18,6 +18,14 @@ export function loadNeuphloWidget(options) {
         script.dataset.position = options.position;
     if (options.color)
         script.dataset.color = options.color;
+    if (options.user?.id)
+        script.dataset.userId = options.user.id;
+    if (options.user?.name)
+        script.dataset.userName = options.user.name;
+    if (options.user?.email)
+        script.dataset.userEmail = options.user.email;
+    if (options.user?.hash)
+        script.dataset.userHash = options.user.hash;
     document.body.appendChild(script);
     return () => {
         window.NeuphloWidget?.destroy();
@@ -26,8 +34,31 @@ export function loadNeuphloWidget(options) {
     };
 }
 export function useNeuphloWidget(options) {
-    const { widgetKey, scriptUrl, appUrl, position, color } = options;
-    useEffect(() => loadNeuphloWidget({ widgetKey, scriptUrl, appUrl, position, color }), [widgetKey, scriptUrl, appUrl, position, color]);
+    const { widgetKey, scriptUrl, appUrl, position, color, user } = options;
+    const userId = user?.id;
+    const userName = user?.name;
+    const userEmail = user?.email;
+    const userHash = user?.hash;
+    useEffect(() => loadNeuphloWidget({
+        widgetKey,
+        scriptUrl,
+        appUrl,
+        position,
+        color,
+        user: userId || userName || userEmail
+            ? { id: userId, name: userName, email: userEmail, hash: userHash }
+            : undefined,
+    }), [
+        widgetKey,
+        scriptUrl,
+        appUrl,
+        position,
+        color,
+        userId,
+        userName,
+        userEmail,
+        userHash,
+    ]);
 }
 export function NeuphloWidget(props) {
     useNeuphloWidget(props);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neuphlo/widget-react",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "description": "React component for the Neuphlo support chat widget",
   "license": "MIT",
   "repository": {