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: SwUiCallLayout, sw-ui-call-layout
  • Fields
  • transcript
  • loading
  • shadow
  • fullscreen
  • Methods
  • Attributes
  • CSS Properties
  • Slots
Web Components

sw-ui-call-layout

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

sw-ui-content-drawer

Next
Built with

Fluid call layout that adapts to any container shape.

1<sw-ui-call-layout>
2  <!-- call surface goes here -->
3</sw-ui-call-layout>

Uses the container’s aspect ratio (not just width) to decide whether the transcript pane sits beside the video (landscape) or below it (portrait / narrow). The video area is always maximised.

Wide (landscape):                Narrow (portrait):
┌────────────────┬─────────┐    ┌─────────────────┐
│     VIDEO      │ TRANSCR │    │      VIDEO       │
│  (maximised)   │ (side)  │    │   (maximised)    │
├────────────────┴─────────┤    ├──────────────────┤
│        CONTROLS           │    │    CONTROLS      │
└──────────────────────────┘    ├──────────────────┤
                                 │    TRANSCRIPT    │
                                 └──────────────────┘

Class: SwUiCallLayout · Module: packages/web-components/src/components/UI/layout/sw-ui-call-layout.ts

class: SwUiCallLayout, sw-ui-call-layout

Fields

transcript
booleanDefaults to false

show / hide the transcript pane

loading
booleanDefaults to false

show a spinner overlay on the video area

shadow
booleanDefaults to false

apply a drop shadow to the host

fullscreen
boolean

(read-only) reflects the current fullscreen state

Methods

NamePrivacyDescriptionParametersReturnInherited From
toggleTranscriptvoid
toggleFullscreenvoid

Attributes

NameFieldInherited From
transcripttranscript
loadingloading
shadowshadow

CSS Properties

NameDefaultDescription
--sw-call-layout-radius[0] - border-radius on external corners
--sw-call-layout-shadowbox-shadow when `shadow` is set
--sw-call-layout-loading-bg[rgba(0,0,0,0.6)] - loading overlay background
--loading-spinner-size[48] - spinner icon size (px, number)
--sw-call-layout-transcript-transition[350ms ease-in-out] - open/close transition
--sw-call-layout-pip-width[clamp(100px, 20%, 200px)] - PiP container width
--sw-call-layout-pip-radius[8px] - PiP border-radius
--sw-call-layout-pip-shadow[0 2px 8px rgba(0,0,0,0.5)] - PiP box-shadow
--sw-call-layout-pip-bottom[12px] - PiP offset from bottom
--sw-call-layout-pip-right[12px] - PiP offset from right

Slots

NameDescription
videomain video content
backgroundelement behind the video (e.g. `<sw-ui-background>`)
floating-videopicture-in-picture overlay (absolute, bottom-right)
controlscontrol bar beneath the video
transcripttranscript panel (side or bottom)