@neuphlo/widget-react 0.1.0 → 0.3.1

package/README.md

@@ -1,6 +1,6 @@
 # @neuphlo/widget-react
 
-React bindings for the [Neuphlo](https://neuphlo.com) support chat widget. Renders a floating launcher; conversations land in your Neuphlo inbox with the same draft-and-approve flow as email.
+React bindings for the [Neuphlo](https://neuphlo.com) Messenger. Renders a floating launcher; conversations land in your Neuphlo inbox with the same draft-and-approve flow as email.
 
 ## Install
 
@@ -45,10 +45,36 @@ import { openNeuphloWidget } from "@neuphlo/widget-react"
 
 | Option | Default | Description |
 | --- | --- | --- |
-| `widgetKey` | — | Workspace widget key from Inbox settings → Chat widget |
+| `widgetKey` | — | Workspace widget key from Inbox settings → Messenger |
+| `user` | — | Signed-in user: `{ id, name, email, hash }` |
 | `position` | `"right"` | Launcher corner, `"left"` or `"right"` |
 | `color` | `"#171717"` | Launcher accent color |
 | `appUrl` | Neuphlo cloud | Your app origin for self-hosted installs |
 | `scriptUrl` | `https://get.neuphlo.com/widget.js` | Loader script URL |
 
 The widget unmounts cleanly — the launcher and panel are removed when the component unmounts.
+
+## Identifying users
+
+Pass the signed-in user so conversations are recognized in your inbox:
+
+```tsx
+<NeuphloWidget
+  widgetKey="your-widget-key"
+  user={{ id: user.id, name: user.name, email: user.email, hash: user.neuphloHash }}
+/>
+```
+
+`hash` enables identity verification — compute it **server-side** with the
+widget identity secret from Inbox settings → Messenger:
+
+```ts
+import { createHmac } from "node:crypto"
+
+const neuphloHash = createHmac("sha256", process.env.NEUPHLO_IDENTITY_SECRET)
+  .update(user.id)
+  .digest("hex")
+```
+
+Workspaces with "Require verified identities" enabled reject identified
+conversations without a valid hash; anonymous visitors are unaffected.

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. */
+    /** Workspace widget key from Inbox settings → Messenger. */
     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,7 +1,7 @@
 {
   "name": "@neuphlo/widget-react",
-  "version": "0.1.0",
-  "description": "React component for the Neuphlo support chat widget",
+  "version": "0.3.1",
+  "description": "React bindings for the Neuphlo Messenger",
   "license": "MIT",
   "repository": {
     "type": "git",