Embed Widgets in Fern

fern/fern.config.json

@@ -1,4 +1,4 @@
 {
   "organization": "signalwire",
-  "version": "5.67.1"
+  "version": "5.68.0"
 }

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.
+
+<Warning>
+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.
+</Warning>
+
+<script src="https://cdn.jsdelivr.net/npm/@signalwire/address-widget@0.1.1/dist/address-widget.umd.js"></script>
+
+## 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.
+
+<div style={{ margin: "1.5rem 0" }}>
+  <signalwire-address
+    token="YOUR_SAT_TOKEN"
+    destination="/public/my-agent"
+    label="Call support (audio)"
+    video="false"
+    poster="https://developer.signalwire.com/img/logo.svg"
+  ></signalwire-address>
+</div>
+
+## Audio only, video area collapsed
+
+Same but no `poster` — the video area collapses entirely, leaving just controls,
+the optional transcript, and the content drawer.
+
+<div style={{ margin: "1.5rem 0" }}>
+  <signalwire-address
+    token="YOUR_SAT_TOKEN"
+    destination="/public/my-agent"
+    label="Call support (no video area)"
+    video="false"
+  ></signalwire-address>
+</div>
+
+## The embed, as copy-paste HTML
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/@signalwire/address-widget@0.1.1/dist/address-widget.umd.js"></script>
+
+<signalwire-address
+  token="YOUR_SAT_TOKEN"
+  destination="/public/my-agent"
+  label="Call support (audio)"
+  video="false"
+  poster="https://example.com/logo.png"
+></signalwire-address>
+```

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.
+
+<Warning>
+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.
+</Warning>
+
+The UMD bundle exposes `window.SignalWireAddressWidget` and registers the
+`<signalwire-address>` custom element:
+
+<script src="https://cdn.jsdelivr.net/npm/@signalwire/address-widget@0.1.1/dist/address-widget.umd.js"></script>
+
+## Live launcher
+
+Default configuration — outgoing audio + video, `auto` layout, dark theme.
+
+<div style={{ margin: "1.5rem 0" }}>
+  <signalwire-address
+    token="YOUR_SAT_TOKEN"
+    destination="/public/my-agent"
+    label="Start call"
+  ></signalwire-address>
+</div>
+
+## The embed, as copy-paste HTML
+
+Declarative custom element:
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/@signalwire/address-widget@0.1.1/dist/address-widget.umd.js"></script>
+
+<signalwire-address
+  token="YOUR_SAT_TOKEN"
+  destination="/public/my-agent"
+  label="Start call"
+></signalwire-address>
+```
+
+Or mount imperatively onto any element:
+
+```html
+<div id="call"></div>
+
+<script src="https://cdn.jsdelivr.net/npm/@signalwire/address-widget@0.1.1/dist/address-widget.umd.js"></script>
+<script>
+  SignalWireAddressWidget.mount("#call", {
+    token: "YOUR_SAT_TOKEN",
+    destination: "/public/my-agent",
+  });
+</script>
+```

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`.
+
+<Warning>
+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.
+</Warning>
+
+<script src="https://cdn.jsdelivr.net/npm/@signalwire/address-widget@0.1.1/dist/address-widget.umd.js"></script>
+
+## Stacked layout, light theme
+
+`layout="stacked"` puts video on top and transcript below at every size;
+`theme="light"` switches the overlay palette.
+
+<div style={{ margin: "1.5rem 0" }}>
+  <signalwire-address
+    token="YOUR_SAT_TOKEN"
+    destination="/public/my-agent"
+    label="Chat surface"
+    layout="stacked"
+    theme="light"
+  ></signalwire-address>
+</div>
+
+## Self-view hidden
+
+`show-local-video="false"` removes the local picture-in-picture from the video
+frame.
+
+<div style={{ margin: "1.5rem 0" }}>
+  <signalwire-address
+    token="YOUR_SAT_TOKEN"
+    destination="/public/my-agent"
+    label="No self-view"
+    show-local-video="false"
+  ></signalwire-address>
+</div>
+
+## 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`.
+
+<div style={{ margin: "1.5rem 0" }}>
+  <signalwire-address
+    token="YOUR_SAT_TOKEN"
+    destination="/public/my-agent"
+    user-variables='{"plan":"pro","ref":"docs-test"}'
+  >
+    <span>Book a call →</span>
+  </signalwire-address>
+</div>
+
+## The embed, as copy-paste HTML
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/@signalwire/address-widget@0.1.1/dist/address-widget.umd.js"></script>
+
+<signalwire-address
+  token="YOUR_SAT_TOKEN"
+  destination="/public/my-agent"
+  layout="stacked"
+  theme="light"
+  user-variables='{"plan":"pro","ref":"docs-test"}'
+>
+  <span>Book a call →</span>
+</signalwire-address>
+```

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 <sw-call-widget> 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.
+
+<Warning>
+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"`.
+</Warning>
+
+The single script tag registers every `<sw-*>` element and exposes the SDK on
+`window.SignalWireUI`:
+
+<script src="https://cdn.jsdelivr.net/npm/@signalwire/web-components@4.0.0-rc.0/dist/embed/signalwire-web-components-embed.iife.js"></script>
+
+## 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.
+
+<div style={{ height: "620px", border: "1px solid #e2e2e2", borderRadius: "12px", overflow: "hidden", margin: "1.5rem 0" }}>
+  <sw-call-widget
+    token="c2t_87e339bcac70f3385362fab0cd62879b"
+    destination="/private/robot_v1"
+    host="nirav1.signalwire.com"
+  >
+    <sw-ui-background slot="background" default=""></sw-ui-background>
+    <button style={{ padding: "0.8rem 1.6rem", fontSize: "15px", fontWeight: 600, borderRadius: "999px", border: 0, background: "#16a34a", color: "#fff", cursor: "pointer" }}>
+      Call
+    </button>
+  </sw-call-widget>
+</div>
+
+## The embed, as copy-paste HTML
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/@signalwire/web-components@4.0.0-rc.0/dist/embed/signalwire-web-components-embed.iife.js"></script>
+
+<div style="height: 620px">
+  <sw-call-widget token="c2t_87e339bcac70f3385362fab0cd62879b" 
+    destination="/private/robot_v1"
+    host="nirav1.signalwire.com"
+  >
+    <sw-ui-background slot="background" default></sw-ui-background>
+    <button>Call</button>
+  </sw-call-widget>
+</div>
+```

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 — <sw-click-to-call> and <sw-call-widget modal> 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 `<sw-click-to-call>` button and a
+`<sw-call-widget modal>` with a custom trigger — both open the full call UI in an
+overlay. Loaded from jsDelivr, no build step.
+
+<Warning>
+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"`.
+</Warning>
+
+The single script tag registers every `<sw-*>` element:
+
+<script src="https://cdn.jsdelivr.net/npm/@signalwire/web-components@4.0.0-rc.0/dist/embed/signalwire-web-components-embed.iife.js"></script>
+
+## `<sw-click-to-call>` — drop-in button
+
+A single element. Clicking it dials the destination and opens the call UI in a
+modal.
+
+<div style={{ margin: "1.5rem 0" }}>
+  <sw-click-to-call
+    token="c2c_YOUR_EMBED_TOKEN"
+    destination="/public/support"
+    label="Talk to support"
+  ></sw-click-to-call>
+</div>
+
+## `<sw-call-widget 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.
+
+<div style={{ margin: "1.5rem 0" }}>
+  <sw-call-widget
+    token="c2t_87e339bcac70f3385362fab0cd62879b"
+    destination="/private/robot_v1"
+    host="nirav1.signalwire.com"
+    modal
+  >
+    <sw-ui-background slot="background" default=""></sw-ui-background>
+    <button style={{ padding: "0.8rem 1.6rem", fontSize: "15px", fontWeight: 600, borderRadius: "999px", border: 0, background: "#044ef4", color: "#fff", cursor: "pointer" }}>
+      Call the number
+    </button>
+  </sw-call-widget>
+</div>
+
+## The embed, as copy-paste HTML
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/@signalwire/web-components@4.0.0-rc.0/dist/embed/signalwire-web-components-embed.iife.js"></script>
+
+<!-- Drop-in button -->
+<sw-click-to-call
+  token="c2c_YOUR_EMBED_TOKEN"
+  destination="/public/support"
+  label="Talk to support"
+></sw-click-to-call>
+
+<!-- Custom trigger, modal call UI -->
+<sw-call-widget token="c2c_YOUR_EMBED_TOKEN" destination="+15551234567" modal>
+  <sw-ui-background slot="background" default></sw-ui-background>
+  <button>Call the number</button>
+</sw-call-widget>
+```

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

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"