Our web component allows you to embed Whereby's pre-built UI on any webpage. It provides a simple readable integration and exposes local client events and commands between our platform and yours.
Last updated
Was this helpful?
Installation
When using React or a bundler like Webpack, Rollup, Parcel, etc
You can use a hostRoomUrl instead of the roomUrl, if you want to give the user
If you aren't using a bundler or a library containing a bundler you can access the component code directly from our CDN using a in your site
Attributes of the component
The web component has a variety of attributes available to customize the meeting experience for your users. Itโs possible for each participant in a meeting to have different attribute combinations.
Attribute
Value
Description
aec
Nothing (on) or "off"
Turn off acoustic echo cancellation on audio
agc
Nothing (on) or "off"
Turn off acoustic echo cancellation on audio
audio
"off"
Enter meeting with audio off
audioDenoiser
Nothing (on) or "off"
Enables/Disables the noise cancelation feature
autoHideSelfView
Nothing (off) or "on"
Automatically hide the self view in the bottom right
autoSpotlight
Nothing (on) or "off"
avatarUrl
Image URL - Must be HTTPS and cannot contain query params
Set the avatar picture of the participant. The image must be a .png or .jpeg, and a square maximum of 64x64.
background
"off"
Render without background to let embedding app render its own
bottomToolbar
"off"
breakout
Nothing (on) or "off"
cameraAccess
Nothing (on) or "off"
Disable camera access for the local participant, allowing for only audio input
Custom identifier for the participant. Can be searched in insights endpoints
floatSelf
Nothing (on) or "off"
Float the self view to the bottom right
groups
"Group Name(s)" - EX:
"orange, banana, coconut"
Predefine up to 20 groups for the breakout groups function.
lang
Nothing (en) or fr | it | de | nb | da | nl | pt | pl | es | hi | cs | zh-hant | jp
Set the meeting UI language to match your product or service. Select from either English en, French fr, Italian it, German de, Norwegian nb, Danish da, Dutch nl, Portuguese pt, Polish pl, Spanish es, Hindi hi, Czech cs, Chinese (Complex) zh-hant or Japanese jp.
leaveButton
Nothing (on) or "off"
Enable/disable the leave button
localization
Nothing (on) or "off"
Show/hide the language picker
locking
Nothing (on) or "off"
Show/hide the room lock button and settings toggle
logo
Nothing (on) or "off"
Show/hide the logo in the room header
lowData
Nothing (on) or "off"
Use a lower resolution by default
metadata
<string>
<string> gets passed on to the corresponding webhooks
minimal
Nothing (on) or "off"
Apply minimal UI for embed scenarios
moreButton
Nothing (on) or "off"
Show/hide the โโฆโ button
participantCount
Nothing (on) or "off"
Show/hide the participant counter
people
Nothing (on) or "off"
Show/hide the participant list
pipButton
Nothing (on) or "off"
Show/hide the Picture in Picture button
precallCeremony
Nothing (on) or "off"
Determines if users see the pre-call device and connectivity test
precallCeremonyCanSkip
Nothing (off) or "on"
Adds functionality for participants to skip the connectivity test
precallPermissionHelpLink
<url>
Specify custom help link in pre-call review step pointing users to additional support pages
room
A room URL
The full URL of the room you want to embed (required)
roomIntegrations
Nothing (off) or "on"
Enables YouTube and Miro integrations in the meeting
screenshare
Nothing (on) or "off"
Enable/disable screenshare
skipMediaPermissionPrompt
Nothing (on) or "off"
subgridLabels
Nothing (off) or "on"
Show/hide name labels in the subgrid
timer
Nothing (on) or "off"
Show/hide the meeting timer
toolbarDarkText
Nothing (on) or "off"
Sets button icon labels color to black.
topToolbar
Nothing (on) or "off"
Used to toggle the entire top toolbar on/off. Top toolbar is hidden by default if using minimal
The <whereby-embed> component exposes a set of methods your application can invoke to perform actions in the room. Currently, the following methods are available:
Method
Description
endMeeting()
End meeting for all on behalf of the local user, who needs to be a host in the room.
knock()
Knock on a locker room, on behalf of the local user.
cancelKnock()
Cancel the knock, on behalf of the local user.
leaveRoom()
Allows local user to leave the room.
startRecording()
Start cloud recording on behalf of the local user, who needs to be a host in the room.
stopRecording()
Stop cloud recording on behalf of the local user, who needs to be a host in the room.
startStreaming()
Start streaming on behalf of the local user, who needs to be a host in the room.
stopStreaming()
Stop streaming on behalf of the local user, who needs to be a host in the room.
startLiveTranscription()
Start live transcription on behalf of the local user, who needs to be a host in the room.
stopLiveTranscription()
Stop live transcription on behalf of the local user, who needs to be a host in the room.
toggleCamera([true | false])
Toggle the local user's camera on or off. Without any arguments, it toggles depending on current state.
toggleMicrophone([true | false])
Toggle the local user's microphone on or off. Without any arguments, it toggles depending on current state.
toggleScreenshare([true | false])
Toggle the local user's screenshare on or off. Without any arguments, it toggles depending on current state.
toggleChat([true | false])
Toggle the local user's chat open or closed. Without any arguments, it toggles depending on current state.
Here is a small example showing uses of these methods:
const room = document.querySelector("whereby-embed");
room.startRecording(); // Start cloud recording
room.stopRecording(); // Stop cloud recording
room.startStreaming(); // Start streaming
room.stopStreaming(); // Stop streaming
room.startLiveTranscription(); // Start live transcription
room.stopLiveTranscription(); // Stop live transcription
room.toggleCamera(); // Camera will be turned on if off, and off if on
room.toggleMicrophone(); // Microphone will be turned on if off, and off if on
room.toggleScreenshare(); // Screenshare will be turned on if off, and off if on
room.toggleChat(); // Chat will be opened if on, and closed if off
room.toggleCamera(true); // Turn camera on
room.toggleMicrophone(true); // Turn microphone on
room.toggleScreenshare(true); // Turn screenshare on
room.toggleCamera(false); // Turn camera off
room.toggleMicrophone(false); // Turn microphone off
room.toggleScreenshare(false); // Turn screenshare off
Automatically spotlight the local "" on room join
Hide the entire bottom tool bar. Useful if creating buttons using
Show/hide the for the meeting host.
Up to 36 alphanumeric characters ()
Skips request permissions UI and asks for devices directly. Required for links used in
There are additional room customizations and options that can be found in the section. These options must be added as parameters on the room source URL, and are not currently supported as attributes directly on the component.
For this feature to work, you must add the origin of your application to the "" section in your Whereby account. If not present, the following methods will not do anything.