For AI agents: a documentation index is available at the root level at /llms.txt and /llms-full.txt. Append /llms.txt to any URL for a page-level index, or .md for the markdown version of any page.
Log inSign up
Support
GuidesReferenceClick-to-Call
GuidesReferenceClick-to-Call
  • Getting Started
    • Overview
    • Authentication
    • RxJS Primer
    • Migrate from v3
  • Web Components
    • Overview
    • Click-to-Call
    • Theming
    • Customization
  • Build Voice & Video Apps
    • Overview
    • Outbound Calls
    • Inbound Calls
    • Device Management
    • Screen Sharing
    • Call Controls
    • Layouts
    • Messaging & Chat
  • Manage Resources
    • Overview
    • Users
    • Address Book
    • Client Preferences
    • Capabilities
  • Deploy
    • Overview
    • Framework Integration
    • SSR & Next.js
    • Troubleshooting
LogoLogoSignalWire Docs
Log inSign up
Support
On this page
  • Two ways to load the library
  • Embed pathway
  • npm pathway
  • Anatomy of a widget
  • Next
Web Components

Web Components

|View as Markdown|Open in Claude|
Was this page helpful?
Edit this page
Previous

Click-to-Call Widget

Next
Built with

@signalwire/web-components is a set of custom HTML elements built on Lit that wraps the Browser SDK in declarative markup. They work in vanilla HTML, React, Vue, Angular, or server-rendered templates — no imperative JavaScript required for the common cases.

The headline element is <sw-call-widget>, which owns the full call lifecycle (client init, dialing, media, controls, optional AI transcript) and renders inline or as a modal. Around it sits a family of composable primitives — <sw-call-media>, <sw-local-camera>, <sw-call-controls>, <sw-device-selector>, and the sw-ui-* presentational layer — that can be used à la carte. See the Web Components reference for the full element list.

Two ways to load the library

Embed bundle

A single self-contained <script> tag. Registers every custom element and exposes the SDK on window.SignalWireUI. For static sites, CMS pages, and contexts without a bundler.

npm bundle

npm install @signalwire/web-components@latest. Tree-shakes through your bundler, supports per-element subpath imports, ships TypeScript types. For SPAs and framework apps.

Both register the same custom elements with the same attribute and event APIs. They differ only in how the script is loaded and where SDK classes are imported from.

Embed pathway

The embed bundle is a single IIFE file that registers every custom element as a side effect and re-exports the SDK on window.SignalWireUI. No build step.

1<!doctype html>
2<html>
3  <head>
4    <script src="https://unpkg.com/@signalwire/web-components/dist/embed/signalwire-web-components-embed.iife.js"></script>
5  </head>
6  <body>
7    <sw-call-widget
8      token="c2c_892b29eca7b6d96091faf713f07cdf46"
9      destination="/public/support"
10      transcription
11    >
12      <sw-ui-background slot="background" default></sw-ui-background>
13    </sw-call-widget>
14  </body>
15</html>

SDK classes are available on the global for programmatic use:

1<script>
2  const { SignalWire, StaticCredentialProvider, EmbedTokenCredentialProvider } =
3    SignalWireUI;
4
5  // Embed token (c2c_ / c2t_ prefix) — uses embeds.signalwire.com:
6  const client = new SignalWire(
7    new EmbedTokenCredentialProvider("embeds.signalwire.com", "c2c_…")
8  );
9
10  // SAT token — points at your project:
11  const client2 = new SignalWire(
12    new StaticCredentialProvider({ token: "eyJ…your_SAT…" })
13  );
14</script>

Pick the embed pathway for marketing sites, landing pages, and CMS templates — anywhere a single copy-pasteable URL is the goal.

npm pathway

Install the components alongside @signalwire/js and rxjs (peer dependencies):

$npm install @signalwire/web-components@latest @signalwire/js@latest rxjs

Register every element with a side-effect import:

1import "@signalwire/web-components";

Or import only the elements in use:

1import "@signalwire/web-components/sw-call-widget";
2import "@signalwire/web-components/sw-ui-background";

Use them anywhere in markup or JSX:

1<sw-call-widget
2  token="c2c_892b29eca7b6d96091faf713f07cdf46"
3  destination="/public/support"
4  transcription
5>
6  <sw-ui-background slot="background" default></sw-ui-background>
7</sw-call-widget>

SDK classes import from @signalwire/js:

1import { SignalWire, StaticCredentialProvider } from "@signalwire/js";

For framework-specific wrappers (React, Vue, Svelte), see Framework Integration.

Anatomy of a widget

<sw-call-widget> is the simplest entry point — set token and destination and it handles the rest. Internally it composes the same primitives that are available individually:

1<sw-call-provider .call="${callObject}" .deviceController="${deviceController}">
2  <sw-call-media></sw-call-media>
3  <sw-self-media></sw-self-media>
4  <sw-call-controls></sw-call-controls>
5</sw-call-provider>

<sw-call-provider> sets up reactive contexts (call state, devices, transcript, user events) that descendants subscribe to automatically. Reach for the primitives when the built-in layout doesn’t fit the design.

Next

  • Click-to-Call Widget — single call button.
  • Theming — design tokens and CSS Parts.
  • Customization — slots, events, primitives.
  • Web Components reference — per-element attributes, events, and slots.