Add session replay to your website or app

• You have a Sequential project. Copy the key on Settings › Setup. A website uses the sequential key (sq_sequential_…). An app uses the PostHog key (sq_posthog_…).
• No account yet. Your coding agent creates a trial with one call, with your email address and your platform: web, ios, android or react-native. The answer has the key. You claim the trial from an email within 72 hours.

curl -X POST https://api.usesequential.com/api/agent/provision \
  -H 'content-type: application/json' \
  -d '{"owner_email": "you@example.com", "platform": "web"}'

Until you claim it, a trial keeps up to 100 sessions. A website trial accepts events only from your own computer: localhost, *.localhost, 127.0.0.1 and [::1]. A mobile trial accepts events from any build, but no recordings. A website trial key works only with the Sequential SDK. To keep another analytics SDK on a website, claim the trial first and copy that source key on Settings › Setup.

Paste the snippet one time into the head of your site. In a single-page app, put it in the HTML shell: index.html, app.html or the root layout. Keep both parts. The small inline script makes window.sequential at once and keeps your calls until the SDK loads. So sequential.identify() does not fail on a cold page, or when a blocker stops the SDK.

<!-- Sequential · analytics and session replay -->
<script>
(function(w){if(w.sequential)return;var q=[],s=w.sequential={_q:q},
m=['capture','identify','account','register','unregister','reset','optOut','optIn','captureException'];
for(var i=0;i<m.length;i++)(function(n){s[n]=function(){q.push([n,arguments])}})(m[i]);
s.flush=function(){q.push(['flush',arguments]);return typeof Promise=='function'?Promise.resolve():{then:function(f){if(f)f()}}}})(window);
</script>
<script async src="https://cdn.usesequential.com/sdk/sequential/v1/sequential.js"
        data-key="YOUR_SEQUENTIAL_INGEST_KEY"
        data-api="https://api.usesequential.com"></script>

Page views, clicks, form submits and session replay start with no more code. The SDK records a page view when the page loads, and again after each route change in a single-page app, when the page changes.

Put the snippet in the head of index.html. React Router needs no more code: the SDK sees each route change.

Use the npm package, and start it one time in a client component. The package sends the same data as the snippet. Without a window, init() does nothing, so server rendering is safe.

'use client';
import { useEffect } from 'react';
import { init } from '@usesequential/browser';

export function Sequential() {
  useEffect(() => {
    init({ key: 'YOUR_SEQUENTIAL_INGEST_KEY', api: 'https://api.usesequential.com' });
  }, []);
  return null;
}

Install it with npm install @usesequential/browser. init() also sets window.sequential, so code written for the snippet works.

Sequential has no mobile SDK of its own. It speaks the protocol of the PostHog mobile SDKs. Add the posthog-ios package, then set it up once at launch with your PostHog key and the Sequential host.

import PostHog

let config = PostHogConfig(apiKey: "YOUR_POSTHOG_INGEST_KEY", host: "https://api.usesequential.com")
config.sessionReplay = true
config.sessionReplayConfig.screenshotMode = true // required for SwiftUI screens
PostHogSDK.shared.setup(config)

• Name your SwiftUI screens with .postHogScreenView("Checkout"). Automatic screen capture reports the same class for every SwiftUI screen.
• Masking happens on the device. With screenshot mode, the replay masks every text, text field and button. Mask custom secure views, such as a PIN pad, yourself. The masking settings of the project in Sequential do not apply to mobile.

import { PostHogProvider } from 'posthog-react-native';

<PostHogProvider
  apiKey="YOUR_POSTHOG_INGEST_KEY"
  options={{ host: "https://api.usesequential.com", enableSessionReplay: true }}
>
  {/* your app */}
</PostHogProvider>

Sequential accepts React Native but has not yet verified it with a real app. iOS and Android are verified.

1. 01

   Open it.

   Open a few pages of the website in a normal browser, or move through a few screens of the app. Sequential rejects headless and automated browsers as bots.

2. 02

   See it arrive.

   On Settings › Setup, the source shows as "receiving".

3. 03

   Claim a trial.

   If your agent started a trial, open the email "A Sequential project was set up for this address" and claim it. Then the live site can send events, and the app starts recording.

Tell your agent: "Add session replay to this app with Sequential." Give it your email address. It reads the steps in llms.txt, starts a trial, adds the snippet and tells you how to claim the trial.

/plugin marketplace add usesequential/claude-plugin
/plugin install sequential@usesequential