@rehers/rehers-roleplay-sdk 2.3.0 → 2.4.1

package/README.md

@@ -1,177 +1,269 @@
-# @rehers/rehers-roleplay-sdk
+# Roleplay SDK for the Seamless.AI Dashboard
 
-Lightweight vanilla JS SDK for embedding roleplay call sessions and bulk contact import. Opens a modal (dialog mode), mounts into a container (mount mode), or launches a scenario picker (add-to-scenario mode) — no framework dependencies.
+This SDK is only for embedding Roleplay inside the Seamless.AI dashboard.
 
-## Install
+Use it in these two places:
+
+- The dedicated Roleplay page or tab inside the Seamless dashboard
+- The Contact Search screen, where clicking `Roleplay` opens a dialog for a single contact
+
+The SDK must be initialized with the currently logged-in Seamless user before either embed flow is used.
+
+## Load the SDK
+
+If Seamless is using the downloaded SDK file directly:
+
+```html
+<script src="/path/to/roleplay-sdk.js"></script>
+```
+
+If Seamless is using the npm package:
 
 ```bash
 npm install @rehers/rehers-roleplay-sdk
 ```
 
-Or load via CDN:
+## Get the logged-in Seamless user
 
-```html
-<script src="https://unpkg.com/@rehers/rehers-roleplay-sdk"></script>
+Use the existing Seamless dashboard session and call:
+
+```js
+const meResponse = await fetch("https://api.seamless.ai/api/users/me", {
+  method: "GET",
+  credentials: "include",
+  headers: {
+    accept: "application/json, text/plain, */*",
+  },
+}).then((res) => res.json());
 ```
 
-## Usage
+Normalize the response before reading fields:
+
+```js
+const me = meResponse.data ?? meResponse;
+```
+
+## Required mapping for `init()`
+
+These are the values Seamless must pass into `SeamlessRoleplay.init(...)`:
+
+| SDK field | Seamless `/api/users/me` field |
+|---|---|
+| `userId` | `String(me.id)` |
+| `userEmail` | `me.username` |
+| `userRole` | Optional. Suggested mapping from `me.orgRole` / `me.isOrgAdmin` |
+
+Example:
+
+```js
+const seamlessUserId = String(me.id);
+const seamlessUserEmail = me.username;
+const seamlessUserRole =
+  me.orgRole === "owner" ? "owner" :
+  me.isOrgAdmin ? "admin" :
+  "member";
+```
+
+For the response shape currently returned by Seamless, this means:
+
+```js
+const seamlessUserId = String(me.id);
+const seamlessUserEmail = me.username;
+```
+
+## Initialize the SDK once
+
+Initialize the SDK once per page load using the logged-in Seamless user. Reuse that same initialized SDK for both the full-page embed and the Contact Search dialog.
+
+```js
+let roleplayReadyPromise;
+
+function ensureRoleplaySdkReady() {
+  if (roleplayReadyPromise) return roleplayReadyPromise;
+
+  roleplayReadyPromise = (async () => {
+    const meResponse = await fetch("https://api.seamless.ai/api/users/me", {
+      method: "GET",
+      credentials: "include",
+      headers: {
+        accept: "application/json, text/plain, */*",
+      },
+    }).then((res) => res.json());
+
+    const me = meResponse.data ?? meResponse;
+
+    const seamlessUserId = String(me.id);
+    const seamlessUserEmail = me.username;
+    const seamlessUserRole =
+      me.orgRole === "owner" ? "owner" :
+      me.isOrgAdmin ? "admin" :
+      "member";
+
+    await new Promise((resolve, reject) => {
+      SeamlessRoleplay.init({
+        publishableKey: ROLEPLAY_PUBLISHABLE_KEY,
+        userId: seamlessUserId,
+        userEmail: seamlessUserEmail,
+        userRole: seamlessUserRole,
+        onReady: resolve,
+        onError: reject,
+      });
+    });
+  })();
+
+  return roleplayReadyPromise;
+}
+```
+
+## Embed in the full Roleplay page
+
+Use `mount(container)` when Seamless has a dedicated Roleplay page or tab and the full content area should be the Roleplay app.
 
 ```html
-<script src="https://unpkg.com/@rehers/rehers-roleplay-sdk"></script>
-<script>
-  // 1. Initialize with a publishable key
-  SeamlessRoleplay.init({
-    publishableKey: 'pk_live_abc123',
-    userId: 'user_789',
-    userEmail: 'john@example.com',
-    userRole: 'member',                        // optional — "owner", "admin", or "member"
-    onReady: function() {
-      console.log('SDK ready');
+<div id="roleplay-root" style="width: 100%; height: 100%;"></div>
+```
+
+```js
+async function mountRoleplayPage() {
+  await ensureRoleplaySdkReady();
+
+  const container = document.getElementById("roleplay-root");
+  SeamlessRoleplay.mount(container);
+}
+```
+
+If the Seamless page or tab is torn down, unmount the SDK:
+
+```js
+SeamlessRoleplay.unmount();
+```
+
+## Embed in Contact Search
+
+Use `open(contactData)` when the user clicks a `Roleplay` button from a single contact row on the Contact Search screen.
+
+```js
+async function openRoleplayForContact(contact) {
+  await ensureRoleplaySdkReady();
+
+  SeamlessRoleplay.open({
+    name: contact.name,
+    domain: contact.domain,
+    company: contact.company,
+    title: contact.title,
+    liUrl: contact.linkedinUrl,
+    companyDescription: contact.companyDescription,
+    onCallStarted(data) {
+      console.log("Roleplay call started", data.callId);
+    },
+    onCallEnded(data) {
+      console.log("Roleplay call ended", data.callId, data.duration);
     },
-    onError: function(err) {
-      console.error('SDK error:', err.code, err.message);
+    onClose() {
+      console.log("Roleplay dialog closed");
+    },
+    onError(err) {
+      console.error("Roleplay dialog error", err);
     },
   });
+}
+```
 
-  // 2. Open the roleplay modal for a contact (dialog mode)
-  SeamlessRoleplay.open({
-    name: 'Jane Smith',
-    domain: 'acme.com',
-    company: 'Acme Corp',
-    title: 'VP of Sales',
-    companyDescription: 'Enterprise software company', // optional
-    liUrl: 'https://linkedin.com/in/jane-smith',       // optional
-    onCallStarted: function(data) { console.log('Call started:', data.callId); },
-    onCallEnded: function(data) { console.log('Call ended:', data.callId, data.duration); },
-    onClose: function() { console.log('Dialog closed'); },
-    onError: function(data) { console.error('Error:', data.code, data.message); },
-  });
+The contact object passed to `open(...)` should map to:
 
-  // 2b. Or mount the full app into a container (full-page embed)
-  SeamlessRoleplay.mount(document.getElementById('roleplay-container'));
+| SDK field | Contact Search value |
+|---|---|
+| `name` | Contact full name |
+| `domain` | Company domain |
+| `company` | Company name |
+| `title` | Contact title |
+| `liUrl` | LinkedIn profile URL, if available |
+| `companyDescription` | Company description, if available |
 
-  // 2c. Or mount a call for a specific contact into a container
-  SeamlessRoleplay.mount(document.getElementById('roleplay-container'), {
-    name: 'Jane Smith',
-    domain: 'acme.com',
-    company: 'Acme Corp',
-    title: 'VP of Sales',
-  });
+## Optional: add contacts to a scenario
+
+If Seamless wants to send multiple contacts into a scenario picker dialog, use `addToScenario(...)`.
+
+```js
+async function addContactsToScenario(contacts) {
+  await ensureRoleplaySdkReady();
 
-  // 3. Add contacts to a scenario in bulk
   SeamlessRoleplay.addToScenario({
-    contacts: [
-      { name: 'Sarah Chen', company: 'Stripe', title: 'VP of Sales', domain: 'stripe.com', liUrl: 'https://linkedin.com/in/sarachen' },
-      { name: 'Mike Ross', company: 'Acme', title: 'CRO', domain: 'acme.com', liUrl: 'https://linkedin.com/in/mikeross' },
-    ],
-    onComplete: function(data) {
-      console.log('Added', data.addedCount, 'contacts to', data.scenarioName);
+    contacts: contacts.map((contact) => ({
+      name: contact.name,
+      company: contact.company,
+      title: contact.title,
+      domain: contact.domain,
+      liUrl: contact.linkedinUrl,
+      companyDescription: contact.companyDescription,
+    })),
+    onComplete(data) {
+      console.log("Scenario import complete", data);
+    },
+    onClose() {
+      console.log("Add to scenario dialog closed");
+    },
+    onError(err) {
+      console.error("Add to scenario error", err);
     },
-    onClose: function() { console.log('Dialog closed'); },
-    onError: function(err) { console.error('Error:', err.code, err.message); },
   });
-
-  // Close and destroy
-  SeamlessRoleplay.close();
-  SeamlessRoleplay.destroy();
-</script>
+}
 ```
 
-## Trial Mode
+## Minimal API surface
+
+### `SeamlessRoleplay.init(options)`
+
+Initializes the SDK with the logged-in Seamless user.
+
+```js
+SeamlessRoleplay.init({
+  publishableKey,
+  userId,
+  userEmail,
+  userRole,
+  onReady,
+  onError,
+});
+```
 
-When the backend returns `USER_NOT_FOUND`, it includes a `paymentLink` in the response. The SDK automatically captures it and renders a trial screen directing the user to sign up — no client-side configuration needed.
+### `SeamlessRoleplay.mount(container)`
 
-## API
+Mounts the full Roleplay app into a dashboard container.
 
-### `SeamlessRoleplay.init(options)`
+### `SeamlessRoleplay.open(contactData)`
 
-| Option | Type | Required | Description |
-|---|---|---|---|
-| `publishableKey` | `string` | Yes | Publishable API key |
-| `userId` | `string` | Yes | Your user's unique identifier |
-| `userEmail` | `string` | Yes | User email for secure account matching |
-| `userRole` | `string` | No | User role — `"owner"`, `"admin"`, or `"member"` |
-| `userToken` | `string` | No | Signed JWT for identity verification |
-| `origin` | `string` | No | Override app origin (dev only) |
-| `onReady` | `function` | No | Called when session is ready |
-| `onError` | `function` | No | Called on init error `({ code, message })` |
-
-### `SeamlessRoleplay.open(data)`
-
-Opens the roleplay in a modal dialog overlay.
-
-| Field | Type | Required | Description |
-|---|---|---|---|
-| `name` | `string` | Yes | Full name of the contact |
-| `domain` | `string` | Yes | Company domain (e.g. "stripe.com") |
-| `company` | `string` | Yes | Company name |
-| `title` | `string` | Yes | Job title |
-| `companyDescription` | `string` | No | Brief company description |
-| `liUrl` | `string` | No | LinkedIn profile URL |
-| `onCallStarted` | `function` | No | `({ callId })` |
-| `onCallEnded` | `function` | No | `({ callId, duration? })` |
-| `onClose` | `function` | No | Called when dialog closes |
-| `onError` | `function` | No | `({ code, message })` |
-
-### `SeamlessRoleplay.mount(container, data?)`
-
-Mounts into a DOM element. Two modes:
-
-- **`mount(container)`** — embeds the full Roleplay app (dashboard, scenarios, call logs)
-- **`mount(container, data)`** — embeds a roleplay call for a specific contact (same `data` options as `open()`)
+Opens the Roleplay dialog for a single contact.
 
 ### `SeamlessRoleplay.addToScenario(options)`
 
-Opens a compact dialog for selecting a scenario and importing contacts in bulk.
-
-| Field | Type | Required | Description |
-|---|---|---|---|
-| `contacts` | `array` | Yes | 1–25 contacts to import |
-| `contacts[].name` | `string` | Yes | Full name |
-| `contacts[].company` | `string` | Yes | Company name |
-| `contacts[].title` | `string` | Yes | Job title |
-| `contacts[].domain` | `string` | Yes | Company domain |
-| `contacts[].liUrl` | `string` | No | LinkedIn profile URL |
-| `contacts[].companyDescription` | `string` | No | Brief company description |
-| `onComplete` | `function` | No | `({ scenarioId, scenarioName, addedCount, skippedCount })` |
-| `onClose` | `function` | No | Called when dialog closes |
-| `onError` | `function` | No | `({ code, message })` |
+Opens the bulk add-to-scenario dialog for 1 to 25 contacts.
 
 ### `SeamlessRoleplay.close()`
 
-Closes the active dialog or unmounts.
+Closes the active dialog.
 
-### `SeamlessRoleplay.destroy()`
+### `SeamlessRoleplay.unmount()`
 
-Tears down everything — clears tokens, timers, and DOM elements.
+Unmounts the full-page Roleplay embed.
 
-## Auth Flow
+### `SeamlessRoleplay.destroy()`
 
-```
-SDK                                      Backend
-─────────────────                        ─────────────────
-POST /api/sdk/session
-  X-Publishable-Key: pk_live_abc123
-  Body: { userId, userEmail, userRole? }
-                                         1. Validate key + origin
-                                         2. Validate userId + userEmail combo
-                                         3. Find/create user
-                                         4. Mint JWT (1hr TTL)
-                                ←────    { sessionToken, expiresIn }
-                                         OR { error: "USER_NOT_FOUND" }
-
-Token stored in memory (not localStorage)
-Auto-refreshes at 80% of TTL
-```
+Destroys the SDK state, timers, mount, and dialogs.
 
-## Error Handling
+## Trial and upgrade handling
 
-All public methods are wrapped in try/catch — the SDK will never throw an uncaught exception that could crash the host page. Errors are logged to `console.error` with a `[SeamlessRoleplay]` prefix and routed to the relevant `onError` callback when provided.
+If the backend responds with `USER_NOT_FOUND` during SDK session creation, the SDK handles the upgrade or trial UI automatically. Seamless does not need separate client-side logic for that case.
 
 ## TypeScript
 
-Full type declarations are included:
+Type declarations are included with the SDK package.
 
 ```ts
-import type { SeamlessRoleplaySDK, SeamlessRoleplayOpenData, AddToScenarioOptions } from '@rehers/rehers-roleplay-sdk';
+import type {
+  SeamlessRoleplaySDK,
+  SeamlessRoleplayInitOptions,
+  SeamlessRoleplayOpenData,
+  AddToScenarioOptions,
+} from "@rehers/rehers-roleplay-sdk";
 ```

package/index.d.ts

@@ -1,9 +1,9 @@
 export interface SeamlessRoleplayInitOptions {
   /** Publishable API key (starts with pk_live_ or pk_test_) */
   publishableKey: string;
-  /** Your user's unique identifier */
+  /** Logged-in Seamless user ID. Pass String(me.id) from GET /api/users/me */
   userId: string;
-  /** User email — required for secure account matching */
+  /** Logged-in Seamless user email. Pass me.username from GET /api/users/me */
   userEmail: string;
   /** Optional user role for syncing permissions ("owner" | "admin" | "member") */
   userRole?: "owner" | "admin" | "member";
@@ -78,13 +78,15 @@ export interface SeamlessRoleplaySDK {
   init(options: SeamlessRoleplayInitOptions): void;
   /** Open the roleplay modal for a contact (dialog mode). */
   open(data: SeamlessRoleplayOpenData): void;
-  /** Mount the full Roleplay app into a container (no data), or a call embed for a specific contact (with data). */
-  mount(container: HTMLElement, data?: SeamlessRoleplayOpenData): void;
+  /** Mount the full Roleplay app into a container. */
+  mount(container: HTMLElement): void;
   /** Open the add-to-scenario dialog for bulk contact import. */
   addToScenario(options: AddToScenarioOptions): void;
-  /** Close the roleplay dialog or unmount. */
+  /** Close the active dialog. Does not affect mount. */
   close(): void;
-  /** Destroy the SDK — clears state, timers, and DOM. */
+  /** Unmount the mounted embed. Does not affect dialogs. */
+  unmount(): void;
+  /** Destroy the SDK — clears state, timers, and DOM (both mount and dialogs). */
   destroy(): void;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rehers/rehers-roleplay-sdk",
-  "version": "2.3.0",
+  "version": "2.4.1",
   "description": "Seamless Roleplay SDK — embed roleplay call sessions via a modal + iframe",
   "main": "roleplay-sdk.js",
   "types": "index.d.ts",

package/roleplay-sdk.js

@@ -15,7 +15,7 @@
   var SESSION_TIMEOUT_MS = 15000;
   var SDK_LOG_PREFIX = "[SeamlessRoleplay]";
 
-  // ── State ───────────────────────────────────────────────────────────
+  // ── Auth state ────────────────────────────────────────────────────
   var publishableKey = null;
   var userId = null;
   var userEmail = null;
@@ -30,18 +30,24 @@
   var fetchingSession = null; // single-flight Promise
 
   var initCallbacks = { onReady: null, onError: null };
-  var callbacks = { onCallStarted: null, onCallEnded: null, onClose: null, onError: null };
-  var addToScenarioCallbacks = { onComplete: null, onClose: null, onError: null };
-  var addToScenarioPendingContacts = null;
+  var initCalled = false;
 
-  var overlay = null;
-  var iframe = null;
+  // ── Mount state (persistent embed — survives dialog open/close) ───
+  var mountIframe = null;
   var mountContainer = null;
-  var pendingContactData = null;
-  var mode = null; // "dialog" | "mount" | "add-to-scenario"
-  var listener = null;
-  var initCalled = false;
-  var closeTeardownTimer = null;
+  var mountCallbacks = { onCallStarted: null, onCallEnded: null, onClose: null, onError: null };
+  var mountListener = null;
+
+  // ── Dialog state (overlay — dialog or add-to-scenario) ────────────
+  var dialogOverlay = null;
+  var dialogIframe = null;
+  var dialogMode = null; // "dialog" | "add-to-scenario"
+  var dialogContactData = null;
+  var dialogCallbacks = { onCallStarted: null, onCallEnded: null, onClose: null, onError: null };
+  var dialogAddToScenarioCallbacks = { onComplete: null, onClose: null, onError: null };
+  var dialogAddToScenarioPendingContacts = null;
+  var dialogListener = null;
+  var dialogCloseTeardownTimer = null;
 
   // ── Safe logging ──────────────────────────────────────────────────
 
@@ -65,17 +71,17 @@
     return DEFAULT_API_ORIGIN;
   }
 
-  function sendToIframe(msg) {
+  function sendMsg(iframeEl, msg) {
     try {
-      if (iframe && iframe.contentWindow) {
-        iframe.contentWindow.postMessage(msg, getOrigin());
+      if (iframeEl && iframeEl.contentWindow) {
+        iframeEl.contentWindow.postMessage(msg, getOrigin());
       }
     } catch (e) {
-      logError("sendToIframe", e);
+      logError("sendMsg", e);
     }
   }
 
-  // ── Session management ──────────────────────────────────────────────
+  // ── Session management ────────────────────────────────────────────
 
   function fetchSession() {
     if (fetchingSession) return fetchingSession;
@@ -167,80 +173,89 @@
     }, delay);
   }
 
-  // ── Teardown ────────────────────────────────────────────────────────
+  // ── Teardown (dialog only — mount is independent) ─────────────────
 
-  function teardown() {
+  function teardownDialog() {
     try {
-      // Cancel any pending close→teardown timer so it can't destroy a new dialog
-      if (closeTeardownTimer) {
-        clearTimeout(closeTeardownTimer);
-        closeTeardownTimer = null;
+      if (dialogCloseTeardownTimer) {
+        clearTimeout(dialogCloseTeardownTimer);
+        dialogCloseTeardownTimer = null;
       }
 
-      if (mode === "dialog" || mode === "add-to-scenario") {
-        if (overlay && overlay.parentNode) {
-          overlay.parentNode.removeChild(overlay);
-        }
-        overlay = null;
-      } else if (mode === "mount") {
-        if (iframe && iframe.parentNode) {
-          iframe.parentNode.removeChild(iframe);
-        }
-        mountContainer = null;
+      if (dialogOverlay && dialogOverlay.parentNode) {
+        dialogOverlay.parentNode.removeChild(dialogOverlay);
       }
+      dialogOverlay = null;
+
+      if (dialogListener) {
+        window.removeEventListener("message", dialogListener);
+        dialogListener = null;
+      }
+    } catch (e) {
+      logError("teardownDialog", e);
+    }
 
-      if (listener) {
-        window.removeEventListener("message", listener);
-        listener = null;
+    dialogIframe = null;
+    dialogContactData = null;
+    dialogAddToScenarioPendingContacts = null;
+    dialogMode = null;
+    dialogCallbacks = { onCallStarted: null, onCallEnded: null, onClose: null, onError: null };
+    dialogAddToScenarioCallbacks = { onComplete: null, onClose: null, onError: null };
+  }
+
+  function teardownMount() {
+    try {
+      if (mountIframe && mountIframe.parentNode) {
+        mountIframe.parentNode.removeChild(mountIframe);
+      }
+      if (mountListener) {
+        window.removeEventListener("message", mountListener);
+        mountListener = null;
       }
     } catch (e) {
-      logError("teardown", e);
+      logError("teardownMount", e);
     }
 
-    // Always reset state even if DOM cleanup failed
-    iframe = null;
-    pendingContactData = null;
-    addToScenarioPendingContacts = null;
-    mode = null;
-    callbacks = { onCallStarted: null, onCallEnded: null, onClose: null, onError: null };
-    addToScenarioCallbacks = { onComplete: null, onClose: null, onError: null };
+    mountIframe = null;
+    mountContainer = null;
+    mountCallbacks = { onCallStarted: null, onCallEnded: null, onClose: null, onError: null };
   }
 
-  // ── Message handler ─────────────────────────────────────────────────
+  // ── Message dispatch ──────────────────────────────────────────────
 
-  function dispatchInitToIframe(token) {
-    if (addToScenarioPendingContacts) {
+  function dispatchInitToTarget(targetIframe, contactData, atsContacts) {
+    if (atsContacts) {
       var msg = {
         type: "seamless-add-to-scenario-init",
-        sessionToken: token,
+        sessionToken: sessionToken,
         publishableKey: publishableKey,
         userId: userId,
-        contacts: addToScenarioPendingContacts,
+        contacts: atsContacts,
       };
       if (paymentLink) msg.paymentLink = paymentLink;
-      sendToIframe(msg);
-    } else if (token) {
+      sendMsg(targetIframe, msg);
+    } else if (sessionToken) {
       var msg = {
         type: "seamless-session-init",
-        sessionToken: token,
-        contact: pendingContactData ? {
-          name: pendingContactData.name,
-          domain: pendingContactData.domain,
-          company: pendingContactData.company,
-          title: pendingContactData.title,
-          companyDescription: pendingContactData.companyDescription || undefined,
-          liUrl: pendingContactData.liUrl || undefined,
+        sessionToken: sessionToken,
+        contact: contactData ? {
+          name: contactData.name,
+          domain: contactData.domain,
+          company: contactData.company,
+          title: contactData.title,
+          companyDescription: contactData.companyDescription || undefined,
+          liUrl: contactData.liUrl || undefined,
         } : null,
       };
-      sendToIframe(msg);
+      sendMsg(targetIframe, msg);
     } else if (paymentLink) {
-      sendToIframe({
+      sendMsg(targetIframe, {
         type: "seamless-session-init",
         paymentLink: paymentLink,
         contact: null,
       });
     } else {
-      sendToIframe({
+      sendMsg(targetIframe, {
         type: "seamless-session-init",
         paymentLink: null,
         contact: null,
@@ -248,53 +263,104 @@
     }
   }
 
-  function handleMessage(event) {
+  // ── Mount message handler ─────────────────────────────────────────
+
+  function handleMountMessage(event) {
     try {
       if (event.origin !== getOrigin()) return;
+      if (!mountIframe || !event.source || event.source !== mountIframe.contentWindow) return;
 
       var data = event.data;
       if (!data || typeof data.type !== "string") return;
 
       switch (data.type) {
         case "ROLEPLAY_READY":
-          // Ensure we have a fresh token before sending init to iframe
           getSessionToken()
             .then(function (token) {
-              dispatchInitToIframe(token);
+              dispatchInitToTarget(mountIframe, null, null);
             })
             .catch(function () {
-              // Token refresh failed — send whatever we have (iframe will handle auth errors)
-              dispatchInitToIframe(sessionToken);
+              dispatchInitToTarget(mountIframe, null, null);
             });
           break;
 
         case "ROLEPLAY_CALL_STARTED":
-          if (callbacks.onCallStarted) {
-            callbacks.onCallStarted({ callId: data.callId });
+          if (mountCallbacks.onCallStarted) {
+            mountCallbacks.onCallStarted({ callId: data.callId });
           }
           break;
 
         case "ROLEPLAY_CALL_ENDED":
-          if (callbacks.onCallEnded) {
-            callbacks.onCallEnded({ callId: data.callId, duration: data.duration });
+          if (mountCallbacks.onCallEnded) {
+            mountCallbacks.onCallEnded({ callId: data.callId, duration: data.duration });
           }
           break;
 
         case "ROLEPLAY_ERROR":
-          if (callbacks.onError) {
-            callbacks.onError({ code: data.code, message: data.message });
+          if (mountCallbacks.onError) {
+            mountCallbacks.onError({ code: data.code, message: data.message });
           }
           break;
 
         case "ROLEPLAY_CLOSED":
-          var onClose = callbacks.onClose;
-          teardown();
+          var onClose = mountCallbacks.onClose;
+          teardownMount();
+          if (onClose) onClose();
+          break;
+      }
+    } catch (e) {
+      logError("handleMountMessage", e);
+    }
+  }
+
+  // ── Dialog message handler ────────────────────────────────────────
+
+  function handleDialogMessage(event) {
+    try {
+      if (event.origin !== getOrigin()) return;
+      if (!dialogIframe || !event.source || event.source !== dialogIframe.contentWindow) return;
+
+      var data = event.data;
+      if (!data || typeof data.type !== "string") return;
+
+      switch (data.type) {
+        case "ROLEPLAY_READY":
+          getSessionToken()
+            .then(function (token) {
+              dispatchInitToTarget(dialogIframe, dialogContactData, dialogAddToScenarioPendingContacts);
+            })
+            .catch(function () {
+              dispatchInitToTarget(dialogIframe, dialogContactData, dialogAddToScenarioPendingContacts);
+            });
+          break;
+
+        case "ROLEPLAY_CALL_STARTED":
+          if (dialogCallbacks.onCallStarted) {
+            dialogCallbacks.onCallStarted({ callId: data.callId });
+          }
+          break;
+
+        case "ROLEPLAY_CALL_ENDED":
+          if (dialogCallbacks.onCallEnded) {
+            dialogCallbacks.onCallEnded({ callId: data.callId, duration: data.duration });
+          }
+          break;
+
+        case "ROLEPLAY_ERROR":
+          if (dialogCallbacks.onError) {
+            dialogCallbacks.onError({ code: data.code, message: data.message });
+          }
+          break;
+
+        case "ROLEPLAY_CLOSED":
+          var onClose = dialogCallbacks.onClose;
+          teardownDialog();
           if (onClose) onClose();
           break;
 
         case "ADD_TO_SCENARIO_COMPLETE":
-          var atsOnComplete = addToScenarioCallbacks.onComplete;
-          teardown();
+          var atsOnComplete = dialogAddToScenarioCallbacks.onComplete;
+          teardownDialog();
           if (atsOnComplete) {
             atsOnComplete({
               scenarioId: data.scenarioId,
@@ -306,36 +372,36 @@
           break;
 
         case "ADD_TO_SCENARIO_ERROR":
-          if (addToScenarioCallbacks.onError) {
-            addToScenarioCallbacks.onError({ code: data.code, message: data.message });
+          if (dialogAddToScenarioCallbacks.onError) {
+            dialogAddToScenarioCallbacks.onError({ code: data.code, message: data.message });
           }
           break;
 
         case "ADD_TO_SCENARIO_CLOSED":
-          var atsOnClose = addToScenarioCallbacks.onClose;
-          teardown();
+          var atsOnClose = dialogAddToScenarioCallbacks.onClose;
+          teardownDialog();
           if (atsOnClose) atsOnClose();
           break;
       }
     } catch (e) {
-      logError("handleMessage", e);
+      logError("handleDialogMessage", e);
     }
   }
 
-  // ── Close ───────────────────────────────────────────────────────────
+  // ── Close (dialog only) ───────────────────────────────────────────
 
-  function close() {
+  function closeDialog() {
     try {
-      sendToIframe({ type: "roleplay-close" });
-      if (closeTeardownTimer) clearTimeout(closeTeardownTimer);
-      closeTeardownTimer = setTimeout(teardown, 300);
+      sendMsg(dialogIframe, { type: "roleplay-close" });
+      if (dialogCloseTeardownTimer) clearTimeout(dialogCloseTeardownTimer);
+      dialogCloseTeardownTimer = setTimeout(teardownDialog, 300);
     } catch (e) {
       logError("close", e);
-      teardown();
+      teardownDialog();
     }
   }
 
-  // ── Create iframe ───────────────────────────────────────────────────
+  // ── Create iframe ─────────────────────────────────────────────────
 
   function createIframe(path) {
     var iframeEl = document.createElement("iframe");
@@ -348,7 +414,7 @@
     return iframeEl;
   }
 
-  // ── SDK API ─────────────────────────────────────────────────────────
+  // ── SDK API ───────────────────────────────────────────────────────
 
   var SeamlessRoleplay = {
     /**
@@ -416,19 +482,19 @@
           return;
         }
 
-        // If already open, tear down first (also cancels any pending close timer)
-        if (overlay || (iframe && mode)) teardown();
+        // Tear down any existing dialog (NOT the mount)
+        if (dialogOverlay || dialogIframe) teardownDialog();
 
-        pendingContactData = data;
-        callbacks.onCallStarted = data.onCallStarted || null;
-        callbacks.onCallEnded = data.onCallEnded || null;
-        callbacks.onClose = data.onClose || null;
-        callbacks.onError = data.onError || null;
-        mode = "dialog";
+        dialogContactData = data;
+        dialogCallbacks.onCallStarted = data.onCallStarted || null;
+        dialogCallbacks.onCallEnded = data.onCallEnded || null;
+        dialogCallbacks.onClose = data.onClose || null;
+        dialogCallbacks.onError = data.onError || null;
+        dialogMode = "dialog";
 
         // Listen for messages
-        listener = handleMessage;
-        window.addEventListener("message", listener);
+        dialogListener = handleDialogMessage;
+        window.addEventListener("message", dialogListener);
 
         // Build overlay
         var el = document.createElement("div");
@@ -478,7 +544,7 @@
         cbs.alignItems = "center";
         cbs.justifyContent = "center";
         cbs.lineHeight = "1";
-        closeBtn.addEventListener("click", close);
+        closeBtn.addEventListener("click", closeDialog);
 
         var iframeEl = createIframe();
 
@@ -487,15 +553,15 @@
         el.appendChild(container);
 
         el.addEventListener("click", function (e) {
-          if (e.target === el) close();
+          if (e.target === el) closeDialog();
         });
 
-        overlay = el;
-        iframe = iframeEl;
-        document.body.appendChild(overlay);
+        dialogOverlay = el;
+        dialogIframe = iframeEl;
+        document.body.appendChild(dialogOverlay);
       } catch (e) {
         logError("open", e);
-        teardown();
+        teardownDialog();
         if (data && typeof data.onError === "function") {
           try { data.onError({ code: "SDK_ERROR", message: e.message || "Unexpected error during open" }); } catch (_) {}
         }
@@ -503,13 +569,9 @@
     },
 
     /**
-     * Mount the roleplay into a container element.
-     *
-     * Two modes:
-     *   mount(container)             — full app embed (dashboard, scenarios, call logs, etc.)
-     *   mount(container, contactData) — roleplay call embed for a specific contact
+     * Mount the full Roleplay app into a container element.
      */
-    mount: function (container, data) {
+    mount: function (container) {
       try {
         if (!initCalled) {
           logError("mount", "init() must be called first");
@@ -520,38 +582,22 @@
           return;
         }
 
-        // If contact data is provided, validate required fields
-        var hasContactData = data && data.name && data.domain && data.company && data.title;
-        if (data && !hasContactData && (data.name || data.domain || data.company || data.title)) {
-          logError("mount", "contact data requires { name, domain, company, title }");
-          return;
-        }
-
-        // If already open, tear down first (also cancels any pending close timer)
-        if (overlay || (iframe && mode)) teardown();
+        // Tear down any existing mount (re-mount)
+        if (mountIframe) teardownMount();
 
-        pendingContactData = hasContactData ? data : null;
-        callbacks.onCallStarted = (data && data.onCallStarted) || null;
-        callbacks.onCallEnded = (data && data.onCallEnded) || null;
-        callbacks.onClose = (data && data.onClose) || null;
-        callbacks.onError = (data && data.onError) || null;
-        mode = "mount";
+        mountCallbacks = { onCallStarted: null, onCallEnded: null, onClose: null, onError: null };
         mountContainer = container;
 
         // Listen for messages
-        listener = handleMessage;
-        window.addEventListener("message", listener);
+        mountListener = handleMountMessage;
+        window.addEventListener("message", mountListener);
 
-        // No contact data → full app embed at root; with contact → /embed/roleplay-call
-        var iframeEl = createIframe(hasContactData ? "/embed/roleplay-call" : "/");
-        iframe = iframeEl;
+        var iframeEl = createIframe("/");
+        mountIframe = iframeEl;
         container.appendChild(iframeEl);
       } catch (e) {
         logError("mount", e);
-        teardown();
-        if (data && typeof data.onError === "function") {
-          try { data.onError({ code: "SDK_ERROR", message: e.message || "Unexpected error during mount" }); } catch (_) {}
-        }
+        teardownMount();
       }
     },
 
@@ -588,18 +634,18 @@
           }
         }
 
-        // Tear down any existing dialog (also cancels any pending close timer)
-        if (overlay || (iframe && mode)) teardown();
+        // Tear down any existing dialog (NOT the mount)
+        if (dialogOverlay || dialogIframe) teardownDialog();
 
-        addToScenarioPendingContacts = opts.contacts;
-        addToScenarioCallbacks.onComplete = opts.onComplete || null;
-        addToScenarioCallbacks.onClose = opts.onClose || null;
-        addToScenarioCallbacks.onError = opts.onError || null;
-        mode = "add-to-scenario";
+        dialogAddToScenarioPendingContacts = opts.contacts;
+        dialogAddToScenarioCallbacks.onComplete = opts.onComplete || null;
+        dialogAddToScenarioCallbacks.onClose = opts.onClose || null;
+        dialogAddToScenarioCallbacks.onError = opts.onError || null;
+        dialogMode = "add-to-scenario";
 
         // Listen for messages
-        listener = handleMessage;
-        window.addEventListener("message", listener);
+        dialogListener = handleDialogMessage;
+        window.addEventListener("message", dialogListener);
 
         // Build overlay — wide, compact dialog
         var el = document.createElement("div");
@@ -663,22 +709,22 @@
         cbs.transition = "background 0.15s";
         closeBtn.addEventListener("mouseenter", function () { cbs.background = "rgba(0,0,0,0.15)"; });
         closeBtn.addEventListener("mouseleave", function () { cbs.background = "rgba(0,0,0,0.08)"; });
-        closeBtn.addEventListener("click", close);
+        closeBtn.addEventListener("click", closeDialog);
 
         container.appendChild(iframeEl);
         container.appendChild(closeBtn);
         el.appendChild(container);
 
         el.addEventListener("click", function (e) {
-          if (e.target === el) close();
+          if (e.target === el) closeDialog();
         });
 
-        overlay = el;
-        iframe = iframeEl;
-        document.body.appendChild(overlay);
+        dialogOverlay = el;
+        dialogIframe = iframeEl;
+        document.body.appendChild(dialogOverlay);
       } catch (e) {
         logError("addToScenario", e);
-        teardown();
+        teardownDialog();
         if (opts && typeof opts.onError === "function") {
           try { opts.onError({ code: "SDK_ERROR", message: e.message || "Unexpected error during addToScenario" }); } catch (_) {}
         }
@@ -686,19 +732,30 @@
     },
 
     /**
-     * Close the roleplay.
+     * Close the active dialog. Does not affect mount.
      */
     close: function () {
       try {
-        close();
+        closeDialog();
       } catch (e) {
         logError("close", e);
-        teardown();
+        teardownDialog();
+      }
+    },
+
+    /**
+     * Unmount the mounted embed. Does not affect dialogs.
+     */
+    unmount: function () {
+      try {
+        teardownMount();
+      } catch (e) {
+        logError("unmount", e);
       }
     },
 
     /**
-     * Destroy the SDK — clears state, timers, and DOM.
+     * Destroy the SDK — clears state, timers, and DOM (both mount and dialogs).
      */
     destroy: function () {
       try {
@@ -706,7 +763,8 @@
           clearTimeout(refreshTimer);
           refreshTimer = null;
         }
-        teardown();
+        teardownDialog();
+        teardownMount();
         publishableKey = null;
         userId = null;
         userEmail = null;