Next.js integration
Install the async widget, generate a server-side user hash, and call identify() from your app.
1. Add the snippet to your layout
Use the async loader from the docs home. Paste it before </body> with your rk_pk_ public key.
2. Server-side user hash
// app/layout.tsx or a Server Component
import { createHmac } from "node:crypto";
export function rokochatUserHash(userId: string) {
return createHmac("sha256", process.env.ROKOCHAT_IDENTITY_SECRET!).update(userId).digest("hex");
}
// Pass hash to client component as prop3. Call identify() in the browser
Rokochat.identify({
id: user.id,
user_hash: userHash,
email: user.email,
name: user.name,
});// components/RokochatIdentify.tsx — client component
"use client";
useEffect(() => {
Rokochat.identify({ id: user.id, user_hash: userHash, email: user.email });
}, [user.id, userHash]);