Skip to content
Cloudflare Docs
Docs DirectoryAPIsSDKs

Add Custom Controlbar

In this guide, we will learn how to add a custom controlbar for your RealtimeKit meeting experience.

RealtimeKit UI Kit provides the RtkControlbar component for a default controlbar.

If you need additional controls, replace RtkControlbar with individual UI Kit components and custom elements.

Import the required components and React hook:

import { useRef } from "react";
import {
  RtkFullscreenToggle,
  RtkSettingsToggle,
  RtkScreenShareToggle,
  RtkMicToggle,
  RtkCameraToggle,
  RtkStageToggle,
  RtkLeaveButton,
  RtkMoreToggle,
  RtkPipToggle,
  RtkMuteAllButton,
  RtkBreakoutRoomsToggle,
  RtkRecordingToggle,
  RtkChatToggle,
  RtkPollsToggle,
  RtkParticipantsToggle,
  RtkPluginsToggle,
} from "@cloudflare/realtimekit-ui";

In your RtkUIProvider from Build Your Own UI, replace:

<RtkControlbar />

with:

<div
  style={{
    display: "flex",
    width: "100%",
    padding: "8px 12px",
    color: "white",
    justifyContent: "space-between",
  }}
>
  <div
    id="controlbar-left"
    style={{ display: "flex", alignItems: "center", justifyContent: "center" }}
  >
    <RtkFullscreenToggle targetElement={fullScreenRef.current} />
    <RtkSettingsToggle />
    <RtkScreenShareToggle />
  </div>
  <div
    id="controlbar-center"
    style={{ display: "flex", alignItems: "center", justifyContent: "center" }}
  >
    <RtkMicToggle />
    <RtkCameraToggle />
    <RtkStageToggle />
    <RtkLeaveButton />
    <RtkMoreToggle>
      <div slot="more-elements">
        <RtkPipToggle variant="horizontal" />
        <RtkMuteAllButton variant="horizontal" />
        <RtkBreakoutRoomsToggle variant="horizontal" />
        <RtkRecordingToggle variant="horizontal" />
      </div>
    </RtkMoreToggle>
  </div>
  <div
    id="controlbar-right"
    style={{ display: "flex", alignItems: "center", justifyContent: "center" }}
  >
    <RtkChatToggle />
    <RtkPollsToggle />
    <RtkParticipantsToggle />
    <RtkPluginsToggle />
  </div>
</div>

Define a ref for the fullscreen target and attach it to your container element:

const fullScreenRef = useRef<HTMLDivElement>(null);


// In your RtkUIProvider, add the ref to the container
<RtkUIProvider
  ref={fullScreenRef}
  meeting={meeting}
  showSetupScreen={false}
  style={{
    display: "flex",
    flexDirection: "column",
    height: "100vh",
    margin: 0,
  }}
>
  {/* Your controlbar and other components */}
</RtkUIProvider>


// Pass the ref's current element to RtkFullscreenToggle
<RtkFullscreenToggle targetElement={fullScreenRef.current} />

A complete example to build your own UI with custom controlbar can be found here ↗ with the custom controlbar component here ↗.