Myronkaifung sessionreplay reorg (#1830)

* new pages and index

* top-level SR page (how to use)

* add FAQ to top-level page

* SR developer guide Web

* SR developer guide iOS

* SR developer guide android

* SR declutter JS SDK page

* add getReplayId methods for mobile

* add meta for nested SDK pages

* SR iOS SDK reference

* add SR android SDK

* update URLs and privacy tabbing

* heatmaps

* update privacy page name

* heatmap images

* fix conflict

* heatmaps in JS SDK page

* remove tabs from privacy page

* reference to SR in SDK page

* redirects

* edit Android banner

* small typo

---------

Co-authored-by: Myron Fung <myronfung@MyronFung---MP-MBP.local>

Author: myronkaifung

pages/docs/session-replay.mdx

@@ -1,6 +1,5 @@
 export default {
-    "session-replay-web": "Web",
-    "session-replay-ios": "iOS (Beta)",
-    "session-replay-android": "Android (Alpha)",
-    "session-replay-privacy-controls": "Privacy Controls"
+    "implement-session-replay": "Implement Session Replay",
+    "session-replay-privacy-controls": "Session Replay Privacy Controls",
+    "heatmaps": "Heatmaps (beta)"
 }

pages/docs/session-replay/_meta.ts

@@ -0,0 +1,67 @@
+import { Callout } from 'nextra/components'
+
+# Heatmaps (Beta)
+
+<Callout type="info">
+  Heatmaps are currently in private, closed beta. For early access, please contact your Account Manager.
+</Callout>
+
+## Overview
+
+Heatmaps help you visualize user interactions on your web application, showing where users click the most. This feature enables teams to quickly identify areas of high engagement and friction, helping to optimize user experiences and improve conversion rates.
+
+Our initial version of Heatmaps is a click map, which means it specifically tracks clicks on individual site elements rather than just overlaying general activity on a page. This provides more precise insights into which modals, dropdowns, or features that users engage with the most. Future versions may also include hovers, scroll depth, and other interaction types.
+
+Enabling Heatmaps does not affect billing. They are included with the Session Replay add-on and do not generate additional billable events.
+
+###  How It Works
+Heatmaps are powered by Session Replay data and automatically capture click interactions when enabled. Users can generate a Heatmap for specific pages to gain deeper insights into user engagement.
+
+To function, Heatmaps require Session Replay to be enabled, as they rely on session replay data to track and visualize user clicks.
+
+Heatmaps only capture data during sessions with recorded replays. If a page has limited replay coverage, the Heatmap may not offer meaningful insights.
+
+### Implementation
+
+Ensure you have Session Replay set up(see [developer guide on implementing Session Replay](/docs/session-replay/implement-session-replay/session-replay-web)), with the `record_heatmap_data` set to `true`. 
+
+**Example Usage**
+
+```javascript Javascript
+mixpanel.init('YOUR_PROJECT_TOKEN', {
+  record_sessions_percent: 1, // Session Replay enabled, recording 1% of all sessions
+  record_heatmap_data: true   // Enable Heatmap data collection
+});
+```
+
+If you currently use [Autocapture](/docs/tracking-methods/autocapture) to track clicks, you can leverage these clicks to populate the Heatmaps without the `record_heatmap_data` init option.
+
+**Example Usage**
+
+```javascript Javascript
+mixpanel.init('YOUR_PROJECT_TOKEN', {
+  autocapture: {
+    pageview: "full-url",
+    click: true, // click tracking enabled
+    input: true,
+    scroll: true,
+    submit: true,
+    capture_text_content: false,
+  },
+  record_sessions_percent: 1 // Session Replay enabled, recording 1% of all sessions
+});
+```
+
+### Using Heatmaps
+
+1. From the Home page, find the Heatmaps section
+
+![heatmap_home.png](/heatmap_home.png)
+
+2. Choose a URL where you want to analyze user interactions and generate a Heatmap.
+
+![heatmap_sample.png](/heatmap_sample.png)
+
+3. To easily navigate back to a created Heatmap, you can click the title to rename the Heatmap.
+
+![heatmap_rename.png](/heatmap_rename.png)

pages/docs/session-replay/heatmaps.mdx

@@ -0,0 +1,22 @@
+import { Cards } from 'nextra/components'
+
+# Implement Session Replay
+
+Session Replay is supported on three platforms: Web, iOS, and Android. Additionally, can use Session Replay with CDPs (e.g., Segment and mParticle) through the Web platform. 
+
+See our developer guides on implementing Session Replay below to start recording replays.
+
+## Web
+
+<Cards>
+  <Cards.Card icon title="Web" href="/docs/session-replay/implement-session-replay/session-replay-web" />
+</Cards>
+
+## Mobile
+
+<Cards>
+  <Cards.Card icon title="iOS (Beta)" href="/docs/session-replay/implement-session-replay/session-replay-ios" />
+  <Cards.Card icon title="Android (Alpha)" href="/docs/session-replay/implement-session-replay/session-replay-android" />
+</Cards>
+
+Learn more about [viewing captured Replays in your project here](/docs/session-replay).

pages/docs/session-replay/implement-session-replay.mdx

@@ -0,0 +1,5 @@
+export default {
+    "session-replay-web": "Web",
+    "session-replay-ios": "iOS (beta)",
+    "session-replay-android": "Android (alpha)"
+}