@flowengage/react-chatbot 6.0.26 → 6.0.30

package/README.md

@@ -265,6 +265,35 @@ function RouteTracker() {
 
 ---
 
+## Voice Mode
+
+The widget includes an ElevenLabs-powered voice agent that visitors can interact with hands-free.
+
+### Session lifecycle
+
+1. Visitor clicks "Start Voice" (or auto-starts on voice-enabled sites)
+2. Widget fetches a signed URL from the backend (`GET /api/voice/signed-url`)
+3. ElevenLabs WebSocket session starts with page-context greeting override
+4. Agent can call client tools: `flowengage_navigate`, `flowengage_highlight`, `flowengage_list_forms`, `flowengage_fill_form`, `flowengage_click_button`, `end_voice_session`
+5. On SPA navigation the session persists — a URL-change tracker sends contextual updates so the agent knows the current page
+6. On hard navigation (page reload), the transcript is saved to `sessionStorage` and the session auto-resumes on the next page
+
+### Voice resume across page reloads
+
+When the agent navigates the visitor to a new page (`flowengage_navigate`), the widget:
+- Saves the current transcript and a resume flag to `sessionStorage`
+- Triggers a hard reload or SPA route change
+- On the new page, `useLayoutEffect` detects the pending resume and re-enters `voice_mode`
+- The new session loads with a "continue the tour" preamble so the agent picks up where it left off
+
+### Requirements
+
+- ElevenLabs agent must have `first_message` override enabled in platform settings
+- Backend must have `ELEVENLABS_API_KEY` configured
+- Visitor must grant microphone permission
+
+---
+
 ## How It Works
 
 ```
@@ -274,6 +303,7 @@ Your App
           ├── Boot:  GET /api/widget/bootstrap  → validates siteId, returns config
           ├── Start: POST /api/ai/chat           → loads chat history
           ├── Chat:  Socket.IO                   → real-time messages & agent handoff
+          ├── Voice: GET /api/voice/signed-url   → ElevenLabs WebSocket voice session
           └── Track: Socket.IO events            → visitor session, page views
 ```
 
@@ -289,6 +319,20 @@ Backend URLs are resolved by FlowEngage; you normally do not set them unless usi
 
 ---
 
+## Building the embed
+
+The CDN embed is an IIFE bundle that includes React, all widget code, and inlined CSS. Build it with:
+
+```bash
+FLOWENGAGE_API_URL=https://your-api-url npx vite build --config vite.embed.config.js
+```
+
+Output lands in `dist/flowengage-embed.js`. Copy this file to the CDN or the backend `public/` folder for serving.
+
+The `FLOWENGAGE_API_URL` env var is baked into the bundle at build time — the widget uses it as the default API base URL when no `data-api-url` attribute is present on the script tag.
+
+---
+
 ## License
 
 MIT © FlowEngage