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
  • class: SwCallControls, sw-call-controls
  • Fields
  • call
  • showScreenShare
  • showHandRaise
  • showTranscript
  • transcriptActive
  • showSettings
  • showFullscreen
  • Attributes
  • Events
Web Components

sw-call-controls

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

sw-call-dialpad

Next
Built with

Reactive call-control bar that bridges device + call-state context to the presentational <sw-ui-control-bar> primitive.

1<sw-call-provider token="YOUR_GUEST_TOKEN">
2  <sw-call-controls></sw-call-controls>
3</sw-call-provider>

sw-call-controls is the SDK-aware sibling of <sw-ui-control-bar>: it subscribes to devicesContext for mic / camera / speaker state and to callStateContext for self-participant capabilities (screenshare, handraise, end, …) and then forwards the user’s intent to the underlying Call and DeviceController.

Input precedence (most specific wins): .call > context. When .call is set, screen-share / hand-raise / hang-up are driven directly off the call. Mic / camera / speaker toggles always require devicesContext; without it, those buttons render in their default (unbound) state.

Buttons are auto-hidden when the corresponding capability is absent from callState.capabilities (e.g. screenshare, handraise, end). Every event from <sw-ui-control-bar> bubbles through, so parents can still listen to sw-mic-toggle, sw-camera-toggle, sw-device-change, etc., without re-handling them here.

Class: SwCallControls · Module: packages/web-components/src/components/sw-call-controls.ts

class: SwCallControls, sw-call-controls

Fields

call
Call | undefined

Explicit Call — when set, drives call-state actions directly.

showScreenShare
booleanDefaults to true

showScreenShare field.

showHandRaise
booleanDefaults to true

showHandRaise field.

showTranscript
booleanDefaults to false

showTranscript field.

transcriptActive
booleanDefaults to false

transcriptActive field.

showSettings
booleanDefaults to true

showSettings field.

showFullscreen
booleanDefaults to true

showFullscreen field.

Attributes

NameFieldInherited From
show-screen-shareshowScreenShare
show-hand-raiseshowHandRaise
show-transcriptshowTranscript
transcript-activetranscriptActive
show-settingsshowSettings
show-fullscreenshowFullscreen
callcall

Events

NameDetailDescription
sw-call-hangup—Re-dispatched after the user clicks hang-up so
sw-camera-toggle{ muted: boolean }Bubbled from <sw-ui-control-bar>
sw-device-change{ kind: 'mic' | 'camera' | 'speaker', deviceId: string, label: string }Bubbled
sw-fullscreen-toggle{ fullscreen: boolean }Bubbled
sw-hand-raise-toggle{ raised: boolean }Bubbled
sw-mic-toggle{ muted: boolean }Bubbled from <sw-ui-control-bar>
sw-screen-share-toggle{ active: boolean }Bubbled
sw-settings-change{ settingId: string }Bubbled
sw-speaker-toggle{ muted: boolean }Bubbled from <sw-ui-control-bar>
sw-transcript-toggle—Bubbled when the transcript button is clicked. No detail.