⏱ Estimated Time To Completion: 2 minutes
1

Get your new API host by creating a project in Decipher

Log in to Decipher with your work email. On the Settings page, choose a project name and click “Create New Project”.
We auto-create a Decipher-only project called “FirstFrontendProject” when your organization registers with Decipher, but that is separate from the PostHog project you’re about to add.
On the following screen, choose “Decipher and PostHog” as your data source.
After creating your project, you’ll see the API host (as Decipher DSN) that you’ll need to use in your code:
2

Update your PostHog initialization to use the Decipher host and configuration

Find your PostHog init and update the api_host to the Decipher DSNprovided above.
Ensure capture_dead_clicks = true and rageclick = true.
 posthog.init(process.env.NEXT_PUBLIC_POSTHOG_API_KEY as string, {
      api_host: process.env.NEXT_PUBLIC_DECIPHER_API_HOST as string, // Update this to the Decipher DSN
      rageclick: true, // [Required] ensure to enable rage clicks
      capture_dead_clicks: true, //[Required] ensure to enable rage clicks
      ip: true, // optional
      ...
    })
  }
3

Identify Users

Make sure to identify users where user information is available in your application frontend, typically after authentication or login.
// Set user information in Decipher via the Posthog TypeScript SDK

import { usePostHog } from 'posthog-js/react'

// ... then in your component
const { posthog } = usePostHog()
posthog.identify(
  "your_internal_unique_identifier",
  {
    "email": "jane.doe@example.com",  // Recommended identifier to set
    "username": "unique_username", // Optional: use if email not available
    "account": "AcmeCo",  // Recommended: Which account/organization is this user a member of?
    "created_at": "2025-04-01T15:30:00Z", // Recommended: date this user signed up.
    "role": "admin"
  }
);
Once you’re done, simply use your website to validate that Decipher is collecting session replay data (and that PostHog is too).