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: SwParticipantControls, sw-participant-controls
  • Fields
  • participantId
  • showVolume
  • showPin
  • call
  • Attributes
  • CSS Properties
  • Events
Web Components

sw-participant-controls

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

sw-participants

Next
Built with

Per-participant action panel — mute / unmute audio & video, adjust volume, pin / unpin, and remove a single participant from the call.

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

Identifies the target participant from the participant-id attribute by looking it up in callState.participants (or in the live Call when .call is set). Available actions are gated by the call’s capabilities list — for instance, “Remove” only renders when the server has granted the end_member (or equivalent) capability to the local user, and audio/video mute toggles require member_mute / etc.

Designed to be slotted into <sw-participants>’s controls-${memberId} named slot, but it works standalone anywhere you have a participant-id.

Input precedence (most specific wins): .call > context.

Class: SwParticipantControls · Module: packages/web-components/src/components/sw-participant-controls.ts

class: SwParticipantControls, sw-participant-controls

Fields

participantId
stringDefaults to ''

participantId field.

showVolume
booleanDefaults to false

showVolume field.

showPin
booleanDefaults to false

showPin field.

call
Call | undefined

Explicit Call — when set, subscribes directly and bypasses context.

Attributes

NameFieldInherited From
participant-idparticipantId
show-volumeshowVolume
show-pinshowPin
callcall

CSS Properties

NameDefaultDescription
--bg-pagePanel background.
--bg-surfaceHover background for action buttons.
--bg-surface-raisedActive/pressed button background.
--fg-defaultForeground text & icon color.
--border-defaultBorder between sections.
--radius-mdPanel border radius.
--shadow-mdPanel drop shadow.
--type-family-bodyBody font family.
--type-size-smallBody font size.
--interactive-button-destructive-bgBackground for the “Remove” button.
--interactive-button-destructive-hoverHover background for “Remove”.
--transition-fastTransition duration for hover/active states.

Events

NameDetailDescription
sw-participant-mute-audio—Audio mute toggled.
sw-participant-mute-video—Video mute toggled.
sw-participant-pin-toggle—Pin / unpin clicked.
sw-participant-remove—Remove-from-call clicked.
sw-participant-volume-change—Volume slider released.