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
  • Core
    • Overview
  • Entities
    • SignalWire
    • Address
    • Participant
    • ClientPreferences
    • SelfCapabilities
    • SelfParticipant
    • User
    • WebRTCCall
  • Web Components
    • Overview
    • sw-audio-level
    • sw-call-controls
    • sw-call-dialpad
    • sw-call-media
    • sw-call-provider
    • sw-call-status
    • sw-call-widget
    • sw-click-to-call
    • sw-device-selector
    • sw-directory
    • sw-local-camera
    • sw-participant-controls
    • sw-participants
    • sw-self-media
    • sw-ui-alert
    • sw-ui-background
    • sw-ui-call-layout
    • sw-ui-content-drawer
    • sw-ui-control-bar
    • sw-ui-dialpad
    • sw-ui-dropup
    • sw-ui-icon
    • sw-ui-modal
    • sw-ui-responsive-container
    • sw-ui-split-button
    • sw-ui-transcript-view
LogoLogoSignalWire Docs
Log inSign up
Support
On this page
  • Browser SDK Web Components
  • Install
  • Components
  • UI Primitives
Web Components

Overview

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

sw-audio-level

Next
Built with

Browser SDK Web Components

The Browser SDK contains a suite of flexible web components that can be used to create UI.

Install

npm

@signalwire/web-components

$npm install @signalwire/web-components@latest

Or load from a CDN:

1<script type="module" src="https://unpkg.com/@signalwire/web-components"></script>

Components

Ready-to-use call UI elements. Most components consume context from a parent <sw-call-provider> (or <sw-call-media>) automatically.

ComponentDescription
<sw-audio-level>Real-time audio level visualizer — animated bar graph
<sw-call-controls>Mute audio, mute video, screen share, and hangup buttons
<sw-call-dialpad>Context-aware DTMF dialpad — sends tones to the active call or bubbles a sw-dial event
<sw-call-media>Remote video container and root context provider — wrap call components inside it
<sw-call-provider>Top-level context provider that bridges an external Call and DeviceController into Lit context
<sw-call-status>Displays call state label and elapsed duration timer
<sw-call-widget>All-in-one call widget — handles client init, dialing, media, controls, and optional AI transcript
<sw-click-to-call>Single-button widget that dials on click and shows mute/hangup once connected
<sw-device-selector>Drop-up buttons for microphone, camera, and speaker selection with optional live preview
<sw-directory>Searchable contact list with dial actions from the SDK directory
<sw-local-camera>Local camera preview with a muted overlay
<sw-participant-controls>Per-participant moderation controls: mute, video mute, remove, volume, pin
<sw-participants>Renders positioned overlays for each remote participant
<sw-self-media>Local video preview — consumes callContext from a parent <sw-call-media>

UI Primitives

Low-level layout and control components used to build custom interfaces. These are presentational and do not couple to the SDK.

ComponentDescription
<sw-ui-alert>Confirm / alert dialog primitive — use directly or via the showPrompt() helper
<sw-ui-background>Decorative full-bleed background that crossfades from a blurred thumbnail to a hi-res image
<sw-ui-call-layout>Fluid call layout — splits into video + transcript based on container aspect ratio
<sw-ui-content-drawer>Slide-in drawer for agent-pushed content (markdown, HTML, snippets) mid-call
<sw-ui-control-bar>Call controls bar: mic, camera, speaker, screen share, hand raise, transcript, fullscreen, hang-up
<sw-ui-dialpad>Presentational 12-key DTMF keypad — pure UI, no SDK coupling
<sw-ui-dropup>Tiny pop-up menu that opens above its anchor and closes on outside click
<sw-ui-icon>Inline SVG icon component backed by the bundled icon set
<sw-ui-modal>Native <dialog> wrapper with bounce-in/out animations and body scroll lock
<sw-ui-responsive-container>Aspect-ratio-aware sizing wrapper for hosting call surfaces inside a modal
<sw-ui-split-button>Pill-shaped icon button with optional chevron dropdown — atomic block for control bars
<sw-ui-transcript-view>Chat-bubble timeline rendering AI transcript entries with rich meta payloads