LogoLogo
WherebyStatusCommunity
  • 📹Whereby 101
    • Create Your Video Experience
      • Get started in 3 steps
      • Embedding Whereby in a web app
        • Using Whereby's Web Component & Pre-built UI
          • Script Tags
          • With Low Code
            • Embedding in Squarespace or Wordpress
            • No code video conferencing in Bubble
        • Using Whereby's Browser SDK with React Hooks for a fully custom UI
      • Embedding Whereby in a mobile app
        • Embedding Whereby in iOS
          • Using Whereby's Native iOS SDK
        • Embedding Whereby in Android
          • Using Whereby's Native SDK
        • Using Flutter
        • Using React Native
      • Github SDK Examples
      • Meeting scheduling with Cronofy
    • Generating Room URLs
      • Name prefixes
      • Using “Create a room”
      • Using Postman
    • Customize Your Video Experience
      • During room creation
      • Using Attributes/URL Params
      • Global preferences
      • Branding elements
      • Dial-In
      • File sharing
      • Breakout Groups with Embedded
      • Waiting Rooms
    • User roles & Meeting Permissions
    • FAQ
      • Accessibility
      • Whereby Words
      • Firewall & Security
      • HIPAA compliant setup
      • Allowed Domains & Localhost
      • Whereby Embedded Feature Comparison
  • 🔍Meeting Content & Quality
    • Recording
      • Cloud Recording
      • Local Recording
    • Transcribing
      • Session Transcription
      • Recording Transcription
    • Live Captions
    • Session summaries
    • Live streaming RTMP
    • Quality Insights
      • Real-time troubleshooting
      • Using the Insights dashboard
      • Improving call quality
      • Tracking room events with Webhooks
  • 🤷End User
    • End User Support Guides
      • Supported Browsers & Devices
      • Screen Sharing Setup & Usage
      • Using Breakout Groups
      • Troubleshooting & Basics
  • 🚚Developer Guides
    • Quickly deploy Whereby to your domain
    • Tracking Customer Usage
    • Migrating from Twilio
      • Twilio JS SDK Quick Migration
      • Twilio JS SDK Direct Migration
  • 🖥️Reference
    • REST API Reference
      • /meetings
      • /insights
      • /recordings
      • /transcriptions
      • /summaries
      • /rooms
    • Web Component Reference
    • React Hooks Reference
      • Quick Start
        • Getting started with the Browser SDK
      • Guides & Tutorials
        • Migrate from version 2.x to 3
        • Grid logic
        • Custom Video Tiles with React
        • Usage with Next.js
        • How to customize the toolbar
      • API Reference
        • WherebyProvider
        • VideoView
        • VideoGrid
        • useLocalMedia
        • useRoomConnection
      • Types
    • React Native Reference
      • Quick Start
      • WherebyEmbed
    • Webhooks Reference
Powered by GitBook
On this page
  • Creating a custom toolbar using the Whereby Browser SDK
  • What we’re creating
  • Adding Whereby to your application
  • Connect to the meeting room
  • Create your toolbar buttons
  • Connecting actions to buttons
  • Allowing participants to leave
  • Styling the toolbar
  • Styling SVG

Was this helpful?

Edit on GitHub
  1. Reference
  2. React Hooks Reference
  3. Guides & Tutorials

How to customize the toolbar

Last updated 5 months ago

Was this helpful?

Creating a custom toolbar using the Whereby Browser SDK

Whereby's browser SDK makes it easy to add video calling to your web or mobile application. You can also use our and components to create a fully-customized UI.

In this tutorial, we'll create a custom toolbar using our video call SDK, React, CSS, and SVG. Before we begin, you'll need a account.

You can get started on Whereby for free with 2,000 participant minutes each month — perfect for trying our features.

This tutorial assumes:

  • You're familiar with JavaScript, React, Node, and either or .

  • You've already set up a React project. If not, or can get you up-and-running quickly.

Before you begin, create a meeting room from your account dashboard or using Whereby's . Since this is a tutorial, it’s fine to create an unlocked room.

What we’re creating

This tutorial will walk you through creating a custom toolbar similar to the one shown below. Icons are SVG images from the collection.

Once you've set up your React project, add the Whereby Browser SDK and Lucide. If you're using npm, type the following.

npm i @whereby.com/browser-sdk lucide-react

Yarn users: use yarn add to install both packages.

yarn add @whereby.com/browser-sdk lucide-react

Lucide icons are available as JSX components. It saves the step of making SVG icons compatible with JSX.

Adding Whereby to your application

To add video calling to your application, you'll first need to add theWherebyProvider component. WherebyProvider ensures that all of your components have access to Whereby's internal state.

Update your index.js file and wrap your main component — App in this case — in WherebyProvider. Your code should resemble the example below.

import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';
import { WherebyProvider } from '@whereby.com/browser-sdk/react'

const root = document.getElementById('app');
const container = createRoot(root);
container.render(
  <WherebyProvider>
    <App />
  </WherebyProvider>
);

Add the URL of your meeting room as well. Pass it to App as a roomUrl prop.

const ROOM_URL = 'https://<example>.whereby.com/9c72b1a0-5871-47fd-0000-xxxxxx';

const root = document.getElementById('app');
const container = createRoot(root);
container.render(
  <WherebyProvider>
    <App roomUrl={ROOM_URL} />
  </WherebyProvider>
);

Connect to the meeting room

  • state, an object that reflects the status and settings of the current room, including the call's participants;

  • events, an event emitter object that fires in-room events as they're happening; and

  • actions, an object representing the available actions in the room.

useRoomConnection.actions contains the methods you'll need to join the meeting, and create the toolbar controls.

import React from 'react';
import {useRoomConnection, VideoView } from "@whereby.com/browser-sdk/react";
// Import the `VideoView` component as well, so that you can see yourself.
const App = ({roomUrl}) => {
  // Connect to the room
  const roomConnection = useRoomConnection(roomUrl, {
    localMediaOptions: {
      audio: true,
      video: true,
    }
  });

  const {state, actions} = roomConnection;
  const { joinRoom } = actions;

  React.useEffect(() => {
    joinRoom();
  }, []);

  return (
    <>
      {state.localParticipant &&
        <VideoView stream={state.localParticipant.stream} />
      }
      <div className="toolbar">
      </div>
    </>
  );
}

Your App.jsx file should look a bit like the code above. Now to create each button.

Create your toolbar buttons

This toolbar needs three controls: one to toggle the user's camera, one to toggle the user's microphone, and one that allows the user to leave the meeting. Start with the CameraToggle component.

CameraToggle should include two buttons: one to turn the camera on, and one to turn the camera off. When clicked, it'll show or hide the appropriate button and turn the video stream on or off.

Import the Video and VideoOff components from lucide-react. Use the button element to create the controls.

import React from 'react';
import { Video, VideoOff } from 'lucide-react';

const CameraToggle = ({action}) => {
  return (
    <>
      <button
        className="toolbar__button"
        type="button"
        title="Turn video off"
      >
        <Video />
      </button>

      <button
        className="toolbar__button"
        type="button"
        title="Turn video on"
      >
        <VideoOff />
      </button>
    </>
  );
}

export default CameraToggle;

To keep track of which button should be visible, you'll also need to manage state. Use the React.useState() hook to define a hidden property and set its initial value.

const Camera = ({action}) => {
  const [hidden, setHidden] = React.useState(true);
  // ... return component body here.
}

Connecting actions to buttons

CameraToggle expects an action prop, in this case, toggleCamera. Import CameraToggle into App.jsx, then set toggleCamera as the value of its action prop.

/* App.jsx */
import React from 'react';
import CameraToggle from './CameraToggle';

//...

const {
  joinRoom,
  toggleCamera
} = actions;

//...

return (
  <>
    {localParticipant &&
      <VideoView stream={localParticipant.stream} />
    }
    <div className="toolbar">
      <CameraToggle action={toggleCamera} />
    </div>
  </>
);
//...

Now add an onClick handler to both buttons. Set the value of hidden and call the toggleCamera action. A true argument turns the camera on and false turns it off.

/* CameraToggle.jsx */

//...
return (
  <>
    <button
      className="toolbar__button"
      type="button"
      aria-label="Turn camera off"
      onClick={() => {
        setHidden(false);
        action(false);
      }}
      hidden={!hidden}
    >
      <Video />
    </button>

    <button
      className="toolbar__button"
      type="button"
      aria-label="Turn camera on"
      onClick={() => {
        setHidden(true);
        action(true)
      }}
      hidden={hidden}
    >
      <VideoOff />
    </button>
  </>
);

Each time the participant clicks CameraToggle, they'll start or stop their video stream, and show or hide the appropriate button. Use the same technique to create a MicrophoneToggle component with the toggleMicrophone action.

Allowing participants to leave

Creating a Leave component is much simpler. There's no need to manage state.

import React from 'react';
import { DoorOpen } from 'lucide-react';

const Leave = ({action}) => {
  return (
    <button
      className="toolbar__button"
      type="button"
      title="Leave the meeting"
    >
      <DoorOpen />
    </button>
  );
}

export default Leave;

Don’t forget to add MicrophoneToggle and Leave to App. Your video and toolbar should resemble the image in Figure 2.

Styling the toolbar

Add a style.css file to your project and import it into App.jsx.

import React from 'react';
import { useRoomConnection, VideoView } from "@whereby.com/browser-sdk/react";

import CameraToggle from './CameraToggle';
import MicrophoneToggle from './MicrophoneToggle';
import Leave from './Leave';

import './style.css';
.toolbar {
  display: flex;
  justify-content: center;
  gap: 4rem;
	background: hsla(0, 50%, 100%, 0.5);
  backdrop-filter: blur(10px);
  border-radius: .5rem;
}

The toolbar should now look a bit like Figure 3.

Now let’s style the buttons themselves. Add a .toolbar__button ruleset to style.css. Combine it with :not([hidden]) so that hidden buttons remain hidden. Using display: flex centers the icon within each button.

.toolbar__button:not([hidden]) {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 4rem;
  block-size: 4rem;
  background: linear-gradient(45deg, #434D6F, #292F44);
  border-radius: 100rem;
  border: 0px;
  cursor: pointer;
}

Figure 4 shows the result.

Styling SVG

You're almost there! According to the toolbar's design, each icon should be a bit larger, with a thinner stroke, and off-white color. You can modify some SVG properties including stroke and stroke-width with CSS. Add another rule set to style.css.

.toolbar__button {
  background: transparent;
  border: 0px;
  cursor: pointer;
  padding: 0;
  /* About 48 pixels when the root font size is 16px */
  inline-size: 3rem;
  block-size: 3rem;

  /* Equivalent to .toolbar__button svg */
  svg {
    inline-size: 100%;
    block-size: 100%;
    stroke: hsl(60, 55%, 95%);
    stroke-width: 1px;
  }
}

Now your toolbar is complete. In real-world applications, remember to add :hover and :focus styles to your buttons.

Whereby added WherebyProvider in version 3.0 of the SDK. This is a significant change from earlier versions. See our for more.

Use the SDK’s hook to connect to your room. This hook returns a object containing three properties:

Invoke the joinRoom action from React's hook.

As designed, each toolbar button is circle-shaped. Buttons are centered within the toolbar and have an equal amount of space between them. works well for this. Add a .toolbar rule set for style.css.

This tutorial walked you through a simple toolbar with a few features. You can, however, add additional controls. For example, the startScreenshare() allows participants to share their screen with other attendees. You can also add buttons for meeting hosts that allow a host to mute or remove participants. Since all of Whereby’s meeting room controls are available as actions, you can make your toolbar as robust as you’d like.

Written by

🖥️
migration guide
useRoomConnection
RoomConnectionOptions
useEffect
CSS Flexbox
action
Tiffany Brown
React hooks
Whereby Embedded
npm
Yarn
Vite
Parcel
REST API
Lucide
Figure 1: The toolbar’s design.
Figure 2: The VideoView component and the toolbar before adding CSS.
Figure 3
Figure 4: Toolbar buttons before SVG-specific styles.
Figure 5