diff --git a/fern/fern.config.json b/fern/fern.config.json index 243475e5f6..6f131df38c 100644 --- a/fern/fern.config.json +++ b/fern/fern.config.json @@ -1,4 +1,4 @@ { "organization": "signalwire", - "version": "5.67.1" + "version": "5.68.0" } diff --git a/fern/products/browser-sdk/pages/v4/guides/web-components/address-widget-audio.mdx b/fern/products/browser-sdk/pages/v4/guides/web-components/address-widget-audio.mdx new file mode 100644 index 0000000000..433bb62aaf --- /dev/null +++ b/fern/products/browser-sdk/pages/v4/guides/web-components/address-widget-audio.mdx @@ -0,0 +1,62 @@ +--- +title: "Address widget test — audio only" +slug: /guides/address-widget-test-audio +sidebar-title: "Address widget (audio)" +description: Live test of @signalwire/address-widget in audio-only mode, with and without a poster. +max-toc-depth: 3 +--- + +Scratch page to verify [`@signalwire/address-widget`](https://www.npmjs.com/package/@signalwire/address-widget) +in **audio-only** mode (`video="false"`). No camera is requested and the camera +control is hidden; the video area either collapses or shows a poster image. + + +Test page. Requires a **Subscriber Access Token (SAT)** — see the +[basic test page](/docs/browser-sdk/v4/guides/address-widget-test-basic) for the +token note. Replace `YOUR_SAT_TOKEN` and open over HTTPS. + + + + +## Audio only, with a branded poster + +`video="false"` plus a `poster` image — the poster becomes the only visual +element in place of the video frame. + +
+ +
+ +## Audio only, video area collapsed + +Same but no `poster` — the video area collapses entirely, leaving just controls, +the optional transcript, and the content drawer. + +
+ +
+ +## The embed, as copy-paste HTML + +```html + + + +``` diff --git a/fern/products/browser-sdk/pages/v4/guides/web-components/address-widget-basic.mdx b/fern/products/browser-sdk/pages/v4/guides/web-components/address-widget-basic.mdx new file mode 100644 index 0000000000..c39275d597 --- /dev/null +++ b/fern/products/browser-sdk/pages/v4/guides/web-components/address-widget-basic.mdx @@ -0,0 +1,65 @@ +--- +title: "Address widget test — basic" +slug: /guides/address-widget-test-basic +sidebar-title: "Address widget (basic)" +description: Live test of @signalwire/address-widget — default video call launcher from jsDelivr. +max-toc-depth: 3 +--- + +Scratch page to verify [`@signalwire/address-widget`](https://www.npmjs.com/package/@signalwire/address-widget) +renders and dials inside the Fern docs site. The widget turns its element into a +**launcher button**; clicking it opens a full-viewport video/audio call overlay +to a SignalWire address. Loaded from jsDelivr, no build step. + + +Test page. This widget requires a **Subscriber Access Token (SAT)** — a JWT your +backend mints. It builds a `StaticCredentialProvider` directly, so a `c2c_`/`c2t_` +embed token will **not** work here, and there is no `host` attribute (the SAT +encodes the space). Replace `YOUR_SAT_TOKEN` below and open over HTTPS (the live +docs site qualifies) — mic/camera need a secure origin. + + +The UMD bundle exposes `window.SignalWireAddressWidget` and registers the +`` custom element: + + + +## Live launcher + +Default configuration — outgoing audio + video, `auto` layout, dark theme. + +
+ +
+ +## The embed, as copy-paste HTML + +Declarative custom element: + +```html + + + +``` + +Or mount imperatively onto any element: + +```html +
+ + + +``` diff --git a/fern/products/browser-sdk/pages/v4/guides/web-components/address-widget-layouts.mdx b/fern/products/browser-sdk/pages/v4/guides/web-components/address-widget-layouts.mdx new file mode 100644 index 0000000000..83c964301d --- /dev/null +++ b/fern/products/browser-sdk/pages/v4/guides/web-components/address-widget-layouts.mdx @@ -0,0 +1,80 @@ +--- +title: "Address widget test — layouts & theming" +slug: /guides/address-widget-test-layouts +sidebar-title: "Address widget (layouts)" +description: Live test of @signalwire/address-widget layout, theme, self-view, slotted trigger, and user variables. +max-toc-depth: 3 +--- + +Scratch page exercising the presentational options of +[`@signalwire/address-widget`](https://www.npmjs.com/package/@signalwire/address-widget): +`layout`, `theme`, `show-local-video`, slotted trigger content, and +`user-variables`. + + +Test page. Requires a **Subscriber Access Token (SAT)** — see the +[basic test page](/docs/browser-sdk/v4/guides/address-widget-test-basic) for the +token note. Replace `YOUR_SAT_TOKEN` and open over HTTPS. + + + + +## Stacked layout, light theme + +`layout="stacked"` puts video on top and transcript below at every size; +`theme="light"` switches the overlay palette. + +
+ +
+ +## Self-view hidden + +`show-local-video="false"` removes the local picture-in-picture from the video +frame. + +
+ +
+ +## Slotted trigger + user variables + +Slotted content replaces the `label`, and `user-variables` (a JSON string) +passes hidden fields the destination reads server-side as `result.user_data`. + +
+ + Book a call → + +
+ +## The embed, as copy-paste HTML + +```html + + + + Book a call → + +``` diff --git a/fern/products/browser-sdk/pages/v4/guides/web-components/test-inline.mdx b/fern/products/browser-sdk/pages/v4/guides/web-components/test-inline.mdx new file mode 100644 index 0000000000..b9d22ceb3e --- /dev/null +++ b/fern/products/browser-sdk/pages/v4/guides/web-components/test-inline.mdx @@ -0,0 +1,63 @@ +--- +title: "Embed test — inline call" +slug: /guides/embed-test-inline +sidebar-title: "Embed test (inline)" +description: Live non-modal embed test loaded from jsDelivr. +max-toc-depth: 3 +--- + +Scratch page to verify a **non-modal** (inline) call embed renders and dials +inside the Fern docs site. The widget below is loaded straight from jsDelivr — +no build step — and renders the full call UI inside its container. + + +Test page. Replace `c2c_YOUR_EMBED_TOKEN` below with a real credential before +it will connect, and open the page over HTTPS (the live docs site qualifies) — +browsers only grant mic/camera on a secure origin. + +- **Dial a fixed resource** (simplest): use a `c2c_…` embed token from a + [Click to Call](https://my.signalwire.com/?page=click_to_calls) resource. The + destination is pinned by the resource, so the `destination` attribute is ignored. +- **Dial an arbitrary phone number**: use a Subscriber Access Token allowed to + dial PSTN, set `host` to your space (e.g. `example.signalwire.com`), and set + `destination="+15551234567"`. + + +The single script tag registers every `` element and exposes the SDK on +`window.SignalWireUI`: + + + +## Live widget + +Inline mode renders within the host's bounding box, so the container is given an +explicit height. Click **Call** to dial; the in-call UI takes over the box. + +
+ + + + +
+ +## The embed, as copy-paste HTML + +```html + + +
+ + + + +
+``` diff --git a/fern/products/browser-sdk/pages/v4/guides/web-components/test-modal.mdx b/fern/products/browser-sdk/pages/v4/guides/web-components/test-modal.mdx new file mode 100644 index 0000000000..7f4a236b25 --- /dev/null +++ b/fern/products/browser-sdk/pages/v4/guides/web-components/test-modal.mdx @@ -0,0 +1,79 @@ +--- +title: "Embed test — modal call" +slug: /guides/embed-test-modal +sidebar-title: "Embed test (modal)" +description: Live modal call embed test — and from jsDelivr. +max-toc-depth: 3 +--- + +Scratch page to verify a **modal** call embed renders and dials inside the Fern +docs site. Two triggers below — the drop-in `` button and a +`` with a custom trigger — both open the full call UI in an +overlay. Loaded from jsDelivr, no build step. + + +Test page. Replace `c2c_YOUR_EMBED_TOKEN` below with a real credential before it +will connect, and open the page over HTTPS — browsers only grant mic/camera on a +secure origin. + +- A `c2c_…` embed token pins its own destination (the `destination` attribute is + ignored). Get one from a [Click to Call](https://my.signalwire.com/?page=click_to_calls) + resource. +- To dial an arbitrary phone number, swap in a Subscriber Access Token allowed to + dial PSTN, add `host="example.signalwire.com"`, and set `destination="+15551234567"`. + + +The single script tag registers every `` element: + + + +## `` — drop-in button + +A single element. Clicking it dials the destination and opens the call UI in a +modal. + +
+ +
+ +## `` — custom trigger + +Same call lifecycle, but you supply the trigger in the default slot. The `modal` +attribute makes the call UI open as an overlay instead of rendering inline. + +
+ + + + +
+ +## The embed, as copy-paste HTML + +```html + + + + + + + + + + +``` diff --git a/fern/products/browser-sdk/versions/v4.yml b/fern/products/browser-sdk/versions/v4.yml index 90f6fb27ae..c84ed5605e 100644 --- a/fern/products/browser-sdk/versions/v4.yml +++ b/fern/products/browser-sdk/versions/v4.yml @@ -33,6 +33,16 @@ navigation: path: ../pages/v4/guides/web-components/theming.mdx - page: Customization path: ../pages/v4/guides/web-components/customization.mdx + - page: Embed test (inline) + path: ../pages/v4/guides/web-components/test-inline.mdx + - page: Embed test (modal) + path: ../pages/v4/guides/web-components/test-modal.mdx + - page: Address widget (basic) + path: ../pages/v4/guides/web-components/address-widget-basic.mdx + - page: Address widget (audio) + path: ../pages/v4/guides/web-components/address-widget-audio.mdx + - page: Address widget (layouts) + path: ../pages/v4/guides/web-components/address-widget-layouts.mdx - section: Build Voice & Video Apps contents: - page: Overview diff --git a/package.json b/package.json index aa6d261687..340c4960e6 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,7 @@ }, "devDependencies": { "@types/react": "^19.0.0", - "fern-api": "5.67.1", + "fern-api": "5.68.0", "js-yaml": "^4.1.0", "openapi-to-postmanv2": "6.0.1", "react": "^19.0.0" diff --git a/yarn.lock b/yarn.lock index 67b15b0525..729e80f239 100644 --- a/yarn.lock +++ b/yarn.lock @@ -635,10 +635,10 @@ fastq@^1.6.0: dependencies: reusify "^1.0.4" -fern-api@5.67.1: - version "5.67.1" - resolved "https://registry.yarnpkg.com/fern-api/-/fern-api-5.67.1.tgz#9eafa6894736789e47a8ad76bc22a6c12f1f72d3" - integrity sha512-iMpbfv49nnGwW27MTHhxVdkqEG1OKGAZ0GJGOQSOa/9Hmhfdz/cBPl0G2IosPEJYFRUBAz0nsqzpkWF9S7yYIw== +fern-api@5.68.0: + version "5.68.0" + resolved "https://registry.yarnpkg.com/fern-api/-/fern-api-5.68.0.tgz#7765ec0753f79ea426da97f6306c63c998971af8" + integrity sha512-b+lzop3Q0pe2CDTe1AoI6NnpxhMDYIRAlioQ7EAv2+IHb9zU+jk48RnfD09L2Yhow4zFEJYgKDOs4aLtThWDoA== optionalDependencies: "@boundaryml/baml" "^0.219.0"