@skippr/live-agent-sdk 0.106.0 → 0.108.0

package/README.md

@@ -232,7 +232,30 @@ function App() {
 
 ### Splash screen
 
-When your workspace selects the `Template` launcher style under Appearance, the SDK shows a pre-session card instead of the launcher bubble: what the agent can do, the microphone and screen-access rows it needs, and a Start / Continue button. Script-tag embeds get it as a centred overlay automatically. In React you place it yourself, anywhere inside `<LiveAgent>`:
+When your workspace selects the `Template` launcher style under Appearance, the SDK shows a pre-session card instead of the launcher bubble: what the agent can do, the microphone and screen-access rows it needs, and a Start / Continue button. Script-tag embeds get it automatically. In React, drop `<SplashOverlay>` anywhere inside `<LiveAgent>`:
+
+```tsx
+import { LiveAgent, SplashOverlay } from '@skippr/live-agent-sdk';
+
+function App() {
+  return (
+    <LiveAgent appKey="pk_live_your_key">
+      <SplashOverlay />
+    </LiveAgent>
+  );
+}
+```
+
+It centres the card over a backdrop and handles its own dismissal, so there is nothing to wire up, and it renders nothing when your workspace has the splash turned off, so it is safe to leave in place either way.
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `width` | `number` | Card width in px, overriding the width configured for your workspace. Clamped to the supported range. |
+| `maxHeight` | `number` | Card height as a percentage of the viewport height, overriding the configured value. Also clamped. |
+
+#### Placing the card yourself
+
+Use `<SplashScreen>` instead when you want the card inline in your own layout — a sidebar, a grid cell, a panel, rather than centred over the page. In exchange for the placement control, you own the surrounding state:
 
 ```tsx
 import { useState } from 'react';
@@ -260,11 +283,14 @@ function App() {
 
 - **You own unmounting.** `<SplashScreen>` renders nothing once it no longer applies — the user dismissed it, a session is running, or your workspace has the splash turned off — but it stays mounted until you remove it.
 - **Conditionally render your own wrapper too.** A styled slot (padding, border, grid cell) survives as an empty box when the card stops rendering, as in the example above.
+
+#### Behaviour of both
+
+- **Render exactly one.** Each instance keeps its own microphone and screen state; the SDK warns in the console when a second one mounts, or when the splash is enabled and neither component is placed.
 - **Session start needs no callback.** `useLiveAgent()` already reports `isStarting` / `isConnected`, so read the session from there rather than mirroring it into your own state.
-- **Render exactly one.** Each instance keeps its own microphone and screen state; the SDK warns in the console when a second one mounts, or when the splash is enabled and none is placed.
 - **Bring it back after a skip.** Dismissal lasts for the page load, so the card returns on the next navigation. On a single-page app, call `reopenSplash()` from `useLiveAgent()` — wire it to a "Start guided tour" link or a help-menu item. Skipping never reveals a launcher bubble; the host owns when the card comes back.
-- **Want the centred treatment instead?** Render `<SplashOverlay>` (also exported) for the same backdrop-and-centred card the script-tag embed gets; use the bare `<SplashScreen>` when you want it inline in your own layout. It takes optional `width` (px) and `maxHeight` (% of viewport height) to override the card size your workspace configured; both are clamped to the supported range.
 - **Check the config before you build around it.** `useLiveAgent()` exposes `isSplashConfigured` so you can pick between the splash and your own launcher; it reflects the workspace setting only, not whether the card is on screen right now.
+- **The card adapts to the agent.** When your workspace's default agent is an always-on expert, both components render a tips layout instead of the guided-tour one: contextual suggestions for the current page, each starting a session on click, plus a catch-all CTA. No prop switches this — it follows the agent configuration.
 
 ## API Reference