Using commands

Now that you've mastered attributes, let's move onto using custom commands!

The <whereby-embed> web component exposes a set of methods your application can invoke to perform actions in the room. This is ideal for implementing custom controls for your Whereby component-based video call functionality. In this article, we'll show you how to recreate the bottom toolbar, which we hid at the end of the Configuring with attributes guide.

Prerequisites

This guide assumes that you’ve already created a Whereby Embedded account and a meeting room, and have joined it by adding the <whereby-embed> component to a web app.

If you’ve not created a Whereby Embedded account and a meeting room, you can do so by following the Whereby Embedded initial setup guide.
If you've not created a video call web app using <whereby-embed>, you can clone our finished web component quickstart web app with attributes on GitHub.

Getting started

Open your example web app in your browser and your code editor.
If you're using your own example, make sure you've got the bottomToolbar="off" attribute set on your <whereby-embed> attribute.
From your account dashboard, go to "Configure" > "API". Under the Allowed domains panel, add the domain where your web app is running. In general, this must be https, but http://localhost domains are allowed for testing purposes. Your app domain must be present here; otherwise, the Whereby commands will not work.
Press the Save button that appears under the text field.

Adding control buttons

In this article, we are going to re-implement our own custom versions of the Camera, Microphone, Chat, People, and Leave controls. The first thing we need to achieve this is an HTML button bar.

Add the following HTML snippet to your document, above the <whereby-embed> element:

<section id="button-bar">
  <button id="camera">Mute video</button>
  <button id="mic">Mute audio</button>
  <button id="chat">Show chat</button>
  <button id="people">Show people</button>
  <button id="leave">Leave meeting</button>
</section>

Styling the button bar

Let's give our buttons some style.

Add the following CSS to your stylesheet to make sure the <body> element spans the full height of the screen, but the <whereby-embed> element leaves a gap at the bottom to make space for the button bar. If you are starting from our finished web component quickstart web app with attributes example, you'll also want to remove the current CSS rule that targets body and whereby-embed.
```
body {
  height: inherit;
  margin: inherit;
}

whereby-embed {
  height: calc(100% - 30px);
  margin: inherit;
}
```

Next, add the following rule to place the button bar in the gap at the bottom of the screen, center the buttons, and get things looking neat:

#button-bar {
  position: absolute;
  bottom: 0;
  width: 100%;
  background-color: black;
  padding: 10px 0;
  display: flex;
  justify-content: center;
  gap: 20px;
}

Adding button functionality

Now we'll get our buttons working.

Add the following line to the bottom of your HTML <head>:
```
<script defer src="index.js"></script>
```

Create an index.js file in your app directory and add the following statements to grab references to your control buttons and the <whereby-embed> element:

const cameraBtn = document.getElementById("camera");
const micBtn = document.getElementById("mic");
const chatBtn = document.getElementById("chat");
const peopleBtn = document.getElementById("people");
const leaveBtn = document.getElementById("leave");
const whereby = document.querySelector("whereby-embed");

Add the following event handler functions to perform the expected actions when you press those buttons:

cameraBtn.addEventListener("click", () => {
  whereby.toggleCamera();
  cameraBtn.textContent === "Mute video" ? cameraBtn.textContent = "Unmute video" : cameraBtn.textContent = "Mute video";
});

micBtn.addEventListener("click", () => {
  whereby.toggleMicrophone();
  micBtn.textContent === "Mute audio" ? micBtn.textContent = "Unmute audio" : micBtn.textContent = "Mute audio";
});

chatBtn.addEventListener("click", () => {
  whereby.toggleChat();
  chatBtn.textContent === "Show chat" ? chatBtn.textContent = "Hide chat" : chatBtn.textContent = "Show chat";
});

peopleBtn.addEventListener("click", () => {
  whereby.togglePeople();
  peopleBtn.textContent === "Show people" ? peopleBtn.textContent = "Hide people" : peopleBtn.textContent = "Show people";
});

leaveBtn.addEventListener("click", () => {
  whereby.leaveRoom();
  window.location.href = "https://whereby.com";
});

Note: You can find our finished web component quickstart web app with commands example on GitHub.

hashtagPrerequisites

hashtagGetting started

hashtagAdding control buttons

hashtagStyling the button bar

hashtagAdding button functionality

hashtagSee also

Prerequisites

Getting started

Adding control buttons

Styling the button bar

Adding button functionality

See also