Add Custom Header

Prerequisite

This guide builds on top of the Build Your Own UI. It is recommended to read that guide first. Portions of the code will not be repeated here for brevity.

For a complete list of available UI Kit components, refer to the Component Library.

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

WebMobile

ReactWeb ComponentsAngular

RealtimeKit UI Kit provides the RtkHeader ↗ component for a default header.

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

Import the required components:

import {
  RtkLogo,
  RtkRecordingIndicator,
  RtkLivestreamIndicator,
  RtkMeetingTitle,
  RtkGridPagination,
  RtkParticipantCount,
  RtkViewerCount,
  RtkClock,
} from '@cloudflare/realtimekit-ui';

In your RtkUIProvider from Build Your Own UI, replace:

<RtkHeader />

with:

<div style={{ display: "flex", justifyContent: "space-between", backgroundColor: "black", color: "white" }}>
  <div id="header-left" style={{ display: "flex", alignItems: "center", height: "48px" }}>
    <RtkLogo />
    <RtkRecordingIndicator />
    <RtkLivestreamIndicator />
  </div>
  <div id="header-center" style={{ display: "flex", alignItems: "center", height: "48px" }}>
    <RtkMeetingTitle />
  </div>
  <div id="header-right" style={{ display: "flex", alignItems: "center", height: "48px" }}>
    <RtkGridPagination />
    <RtkParticipantCount />
    <RtkViewerCount />
    <RtkClock />
    <button onClick={handleReportBugClick}>Report Bug</button>
  </div>
</div>

Define the click handler:

const handleReportBugClick = () => {
  console.log("Report Bug Clicked");
};

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

RealtimeKit UI Kit provides the rtk-header component for a default header.

If you need additional controls, replace rtk-header with individual UI Kit components and custom elements. In the renderJoinedScreen function from Build Your Own UI, replace:

<rtk-header style="display: flex; justify-content: space-between;"></rtk-header>

with:

<div style="display: flex; justify-content: space-between; align-items: center; height: 48px; padding: 0 12px; background-color: black; color: white;">
  <div style="display: flex; align-items: center; gap: 8px;">
    <rtk-logo></rtk-logo>
    <rtk-recording-indicator></rtk-recording-indicator>
    <rtk-livestream-indicator></rtk-livestream-indicator>
  </div>

  <div style="display: flex; align-items: center;">
    <rtk-meeting-title></rtk-meeting-title>
  </div>

  <div style="display: flex; align-items: center; gap: 8px;">
    <rtk-grid-pagination></rtk-grid-pagination>
    <rtk-participant-count></rtk-participant-count>
    <rtk-viewer-count></rtk-viewer-count>
    <rtk-clock></rtk-clock>
    <button id="report-bug-button" type="button">Report Bug</button>
  </div>
</div>

Register the click handler after rendering:

JavaScript

document
  .querySelector("#report-bug-button")
  .addEventListener("click", () => {
    console.log("Report Bug Clicked");
  });

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