The <whereby-embed> element

You can try it out like this: <script type=module src="https://cdn.srv.whereby.com/embed/v1.js"></script>
<style>whereby-embed { height: 700px; }</style>
<whereby-embed minimal room="https://subdomain.whereby.com/your_room"></whereby-embed>

You can also use the hostRoomUrl instead of the roomUrl, if you want to give the user host privileges: <whereby-embed room="https://subdomain.whereby.com/your_room?roomKey=3fe345a"></whereby-embed>

This element changed location in October 2021, use the new URL https://cdn.srv.whereby.com/embed/v1.js to make sure you are on the latest version.

Attributes you can use

Attribute Value Description
room A room URL The full URL of the room you want to embed (required)
minimal Nothing (on) or "off" Apply minimal UI for embed scenarios
displayName Any string Set displayname of participant
audio=off "off" Enter meeting with audio off
video=off "off" Enter meeting with video off
background=off "off" Render without background to let embedding app render its own
chat Nothing (on) or "off" Enable/disable chat
people "off" Disable the participant list
leaveButton Nothing (on) or "off" Enable/disable the leave button
screenshare Nothing (on) or "off" Enable/disable screenshare
floatSelf Nothing (on) or "off" Float the self view to the bottom right
The full list of supported attributes can be found in the Developer guide.

Usage examples

Basic room embedding: <whereby-embed room="https://subdomain.whereby.com/your_room" />

Room embedding with minimal UI: <whereby-embed room="https://subdomain.whereby.com/your_room" minimal />

Setting the display name for the current user, starting with audio and video off: <whereby-embed room="https://subdomain.whereby.com/your_room" displayName="John Smith" audio=off video=off />

Removing the background to blend with the embedding app and turning off some buttons: <whereby-embed room="https://subdomain.whereby.com/your_room" background=off chat=off people=off leaveButton=off />

Use a minimal UI but with the leave and screenshare buttons: <whereby-embed room="https://subdomain.whereby.com/your_room" minimal leaveButton screenshare />

Disable the floating self view: <whereby-embed room="https://subdomain.whereby.com/your_room" floatSelf=off />

Listening to events

You can listen for events on the <whereby-embed> element. The following events are supported:

Event type Description Properties (from "detail")
ready Basic dependencies have loaded and the room is ready to be used
knock The local user knocks to get into the room
participantupdate A new participant join/leave { count: Number }
join The local user joins
leave The local user leaves { removed: Boolean }
participant_join A new participant joins the room { participant: { metadata: String } }
participant_leave A participant leaves the room { participant: { metadata: String } }

You can use standard Javascript to listen to the events. Here's a small demo:

  const elm = document.querySelector("whereby-embed");
  const output = document.querySelector("output");

  function logEvent(event) {
    output.innerText += `got event ${JSON.stringify({ type: event.type, detail: event.detail })}\n`;
  }
  elm.addEventListener("ready", logEvent)
  elm.addEventListener("knock", logEvent)
  elm.addEventListener("participantupdate", logEvent)
  elm.addEventListener("join", logEvent)
  elm.addEventListener("leave", logEvent)
  elm.addEventListener("participant_join", logEvent)
  elm.addEventListener("participant_leave", logEvent)

Example Output:

got event {"type":"ready","detail":null} got event {"type":"knock","detail":null} got event {"type":"participantupdate","detail":{"count":1}} got event {"type":"join","detail":null} got event {"type":"leave","detail":{"removed":false}} got event {"type":"participant_join","detail":{"metadata":"userId"}} got event {"type":"participant_leave","detail":{"metadata":"userId"}}