Merge pull request #79 from reclaimprotocol/feat/newJSSDKDocs

Feat/new jssdk docs

Author: Sajjad21990

content/docs/browser-extension/extension-integration/index.mdx

@@ -105,11 +105,26 @@ Use the SDK's API in your popup or panel to trigger verification and handle resu
 Before starting, ensure you have:
 
 - ✅ Completed the [Installation guide](/browser-extension/installation)
-- ✅ Obtained API credentials from the [API Key guide](/api-key)
 - ✅ Basic understanding of Chrome extension development
 - ✅ Familiarity with JavaScript Promises and async/await
 - ✅ A Chrome extension project with Manifest V3
 
+## Get Your API Credentials
+
+<Callout type="warning">
+**🔑 Required: Get Your API Credentials First**
+
+Before you proceed with any integration steps, you **must** obtain your API credentials. These credentials (`APP_ID` and `APP_SECRET`) are essential for initializing the SDK and creating verification requests.
+
+**[Get Your API Credentials Now →](/api-key)**
+
+You'll need:
+- **`APP_ID`**: Your unique application identifier
+- **`APP_SECRET`**: Your application secret key (keep secure!)
+
+Without these credentials, you cannot complete the integration steps below.
+</Callout>
+
 ## Security Considerations
 
 ### Content Security Policy

content/docs/browser-extension/extension-integration/setup.mdx

@@ -3,9 +3,25 @@ title: Setup
 description: Initialize the SDK in your browser extension's background and content scripts
 ---
 
+## Get Your API Credentials First
+
+<Callout type="warning">
+**🔑 Required Before Setup**
+
+Before you can initialize the SDK, you **must** have your API credentials (`APP_ID` and `APP_SECRET`). These are required to create verification requests.
+
+**[Get Your API Credentials →](/api-key)**
+
+You'll need:
+- **`APP_ID`**: Your unique application identifier
+- **`APP_SECRET`**: Your application secret key
+
+Keep these credentials secure and never expose them in client-side code for production applications.
+</Callout>
+
 ## Overview
 
-After configuring your manifest, you need to initialize the SDK in two places:
+After configuring your manifest and obtaining your API credentials, you need to initialize the SDK in two places:
 
 1. **Background Service Worker**: Manages offscreen documents and verification orchestration
 2. **Content Script Loading**: Bridges communication (optional if using static manifest registration)

content/docs/browser-extension/extension-integration/usage.mdx

@@ -7,13 +7,27 @@ description: Implement Reclaim verification flows in your browser extension popu
 
 With the SDK initialized and configured, you can now implement verification flows in your extension's user interface. This guide covers implementing verification in popups, side panels, and handling the complete verification lifecycle.
 
+## Get Your API Credentials
+
+<Callout type="warning">
+**🔑 Required: API Credentials**
+
+Before implementing verification, make sure you have your API credentials (`APP_ID` and `APP_SECRET`). All code examples below require these credentials.
+
+**[Get Your API Credentials →](/api-key)**
+
+You'll need:
+- **`APP_ID`**: Your unique application identifier
+- **`APP_SECRET`**: Your application secret key
+</Callout>
+
 ## Prerequisites
 
 Before implementing verification flows, ensure you have:
 
 - ✅ Completed [Manifest Configuration](/browser-extension/extension-integration/manifest-configuration)
 - ✅ Completed [Background Setup](/browser-extension/extension-integration/setup)
-- ✅ Obtained API credentials from the [API Key guide](/api-key)
+- ✅ **Obtained your API credentials** (`APP_ID` and `APP_SECRET`) from the [API Key guide](/api-key)
 
 ## Basic Popup Implementation
 

content/docs/browser-extension/index.mdx

@@ -1,78 +1,41 @@
 ---
 title: Browser Extension SDK
-description: Lightweight SDK for integrating Reclaim verification flows into browser extensions and websites with Chrome Manifest V3 support
+description: Seamlessly integrate Reclaim Protocol verification into your Chrome browser extension
 ---
 
 ## Overview
 
-Lightweight SDK for integrating Reclaim verification into browser extensions and websites. Handles content-background communication, provider tab management, WebAssembly proof generation, and completion events.
+Build browser extensions with Reclaim Protocol verification capabilities. This SDK handles Chrome extension architecture (MV3, service workers, offscreen documents), WebAssembly proof generation, and provider tab management.
 
 ### Key Features
 
-- 🔌 **Dual Integration**: Build extensions or integrate from web apps
 - 🛡️ **Manifest V3 Compatible**: Full Chrome MV3 support
 - ⚡ **WebAssembly Proofs**: High-performance cryptographic proof generation
 - 🔄 **Event-Driven**: Real-time updates via clean event API
 - 📦 **Pre-built Bundles**: No re-bundling required
-- 🎯 **Auto Provider Management**: Automatic tab orchestration
-- 🔐 **Network Monitoring**: Built-in request interception
 
 ## Two Integration Paths
 
-### 1. Extension Integration (Primary)
+### 1. Extension Integration (Standalone)
 
-**Build a browser extension** with Reclaim verification in popup/sidepanel:
-- Users trigger verification from your extension UI
+**Build a standalone browser extension** with Reclaim verification:
+
+- Complete extension that users install from Chrome Web Store
+- Users trigger verification directly from your extension popup/sidepanel
+- No website required - extension works independently
 - Full control over extension experience
 - SDK handles all Chrome extension complexity
-- Manifest V3, offscreen documents, service workers
 
 [Get Started with Extension Integration →](/browser-extension/extension-integration)
 
-### 2. Web Integration (Optional)
-
-**Trigger verification from your website** through a compatible extension:
-- For websites that want to use an extension built with this SDK
-- Users verify without leaving your site
-- Extension handles verification, you control website UI
-- Requires users to install compatible extension
-
-[Learn About Web Integration →](/browser-extension/web-integration)
-
-## How It Works
-
-Multi-layer architecture for secure verification:
-
-1. **Content Script Bridge** - Communication between pages and extension
-2. **Background Service Worker** - Manages offscreen docs and provider tabs
-3. **Offscreen Document** - WebAssembly proof generation
-4. **Network Interceptor** - Captures network requests during verification
+### 2. Web Integration (Website + Extension)
 
-```mermaid
-graph LR
-    A[Web Page / Extension Popup] --> B[Content Script]
-    B --> C[Background Service Worker]
-    C --> D[Offscreen Document]
-    C --> E[Provider Tab]
-    D --> F[WebAssembly Proof Generation]
-    E --> G[Network Interceptor]
-```
+**Trigger verification from your website** using a compatible extension:
 
-## Compatibility
+- Requires BOTH: your website + a compatible extension installed by users
+- Users verify directly on your website without leaving the page
+- Extension (built with this SDK) handles verification in background
+- Website maintains control over UI/UX
+- Users must install the extension first
 
-**Browsers**: Chrome 93+, Edge 93+, Brave, Opera (Chromium-based)
-
-**Requirements**: Node.js 14.x+, npm 6.x+ or yarn 1.22.x+, Manifest V3
-
-## Next Steps
-
-Choose your integration path:
-
-1. **[Installation](/browser-extension/installation)** - Install the SDK and set up assets
-2. **[Extension Integration](/browser-extension/extension-integration)** - Build a browser extension with Reclaim
-3. **[Web Integration](/browser-extension/web-integration)** - Integrate from your website
-4. **[Troubleshooting](/browser-extension/troubleshooting)** - Common issues and solutions
-
-## Get an API Key
-
-Before integrating, you'll need API credentials. Follow the [Get API Key guide](/api-key) to set up your Reclaim Protocol project.
+[Learn About Web Integration →](/browser-extension/web-integration)

content/docs/browser-extension/installation.mdx

@@ -104,11 +104,28 @@ rm -rf node_modules package-lock.json && npm install
 - Ensure SDK assets are in `public/`, not imported in your code
 - Reference via manifest configuration (see next steps)
 
+## Get Your API Credentials
+
+<Callout type="warning">
+**⚠️ Required Before Proceeding**
+
+Before you can use the SDK, you **must** obtain your API credentials (`APP_ID` and `APP_SECRET`) from the Reclaim Protocol dashboard. These credentials are required for all integrations.
+
+**[Get Your API Credentials Now →](/api-key)**
+</Callout>
+
+Without API credentials, you won't be able to initialize the SDK or create verification requests. This is the most important step after installation.
+
+### What You'll Get
+
+- **`APP_ID`**: Your unique application identifier
+- **`APP_SECRET`**: Your application secret key (keep this secure!)
+
+You'll need both of these credentials in the next steps for any integration path you choose.
+
 ## Next Steps
 
 Choose your integration path:
 
 - **[Extension Integration →](/browser-extension/extension-integration)** - Build a browser extension
 - **[Web Integration →](/browser-extension/web-integration)** - Integrate from a website
-
-Get your [API credentials →](/api-key) before proceeding.

content/docs/browser-extension/web-integration/index.mdx

@@ -43,12 +43,28 @@ graph LR
 5. **Provider Tab**: Handles authentication
 6. **Proofs Returned**: Sent back to your website
 
+## Get Your API Credentials First
+
+<Callout type="warning">
+**🔑 Required: Get Your API Credentials Before Integration**
+
+Before you can integrate Reclaim verification into your website, you **must** obtain your API credentials. These credentials (`APP_ID` and `APP_SECRET`) are essential for creating verification requests.
+
+**[Get Your API Credentials Now →](/api-key)**
+
+You'll need:
+- **`APP_ID`**: Your unique application identifier
+- **`APP_SECRET`**: Your application secret key (keep secure!)
+
+Without these credentials, you cannot initialize the SDK or start verification flows.
+</Callout>
+
 ## Prerequisites
 
 Before integrating, ensure you have:
 
 - ✅ Completed the [Installation guide](/browser-extension/installation)
-- ✅ Obtained API credentials from the [API Key guide](/api-key)
+- ✅ **Obtained your API credentials (`APP_ID` and `APP_SECRET`)** from the [API Key guide](/api-key)
 - ✅ Access to a Reclaim-compatible browser extension (or built one using [Extension Integration](/browser-extension/extension-integration))
 - ✅ A web application (React, Vue, vanilla JavaScript, etc.)
 

content/docs/browser-extension/web-integration/setup.mdx

@@ -5,10 +5,26 @@ description: Configure the Reclaim Browser Extension SDK in your web application
 
 import { Tab, Tabs } from "fumadocs-ui/components/tabs";
 
+## Get Your API Credentials First
+
+<Callout type="warning">
+**🔑 Required: Get Your API Credentials Before Setup**
+
+The first and most important step is obtaining your API credentials. You'll need `APP_ID` and `APP_SECRET` to create verification requests in the steps below.
+
+**[Get Your API Credentials Now →](/api-key)**
+
+What you'll get:
+- **`APP_ID`**: Your unique application identifier
+- **`APP_SECRET`**: Your application secret key (keep secure!)
+
+These credentials are essential for all the code examples in this guide.
+</Callout>
+
 ## Prerequisites
 
 - ✅ [Installation guide](/browser-extension/installation) completed
-- ✅ [API credentials](/api-key) obtained
+- ✅ **[API credentials](/api-key) obtained** (`APP_ID` and `APP_SECRET`)
 - ✅ Extension ID of the Reclaim-compatible extension
 - ✅ Web application (React, Vue, vanilla JS)
 

content/docs/browser-extension/web-integration/usage.mdx

@@ -7,12 +7,26 @@ description: Implement Reclaim verification flows in your web application
 
 This guide demonstrates how to implement complete verification flows in your web application, including initialization, event handling, UI states, and error management.
 
+## Get Your API Credentials
+
+<Callout type="warning">
+**🔑 Required: API Credentials**
+
+Before implementing verification, ensure you have your API credentials (`APP_ID` and `APP_SECRET`). All code examples below require these credentials.
+
+**[Get Your API Credentials →](/api-key)**
+
+You'll need:
+- **`APP_ID`**: Your unique application identifier
+- **`APP_SECRET`**: Your application secret key (keep secure!)
+</Callout>
+
 ## Prerequisites
 
 - ✅ Completed [Installation](/browser-extension/installation)
 - ✅ Completed [Setup](/browser-extension/web-integration/setup)
 - ✅ Extension installed and extension ID configured
-- ✅ API credentials from [API Key guide](/api-key)
+- ✅ **Obtained your API credentials** (`APP_ID` and `APP_SECRET`) from [API Key guide](/api-key)
 
 ## Basic Implementation