Quickstart

Prerequisites

To integrate RealtimeKit in your application, you must have a Cloudflare account ↗.

1. Follow the Create API token guide to create a new token via the Cloudflare dashboard ↗.
2. When configuring permissions, ensure that Realtime / Realtime Admin permissions are selected.
3. Configure any additional access policies and restrictions as needed for your use case.

Optional: Alternatively, create tokens programmatically via the API. Please ensure your access policy includes the Realtime permission.

Installation

Select a framework based on the platform you are building for.

WebMobile

ReactWeb ComponentsAngular

Please install the following dependancies into your project repository:

``` _Optional:_ You can also build on top of our ready-made template: ```bash
git clone https://github.com/cloudflare/realtimekit-web-examples.git cd
realtimekit-web-examples/react-examples/examples/default-meeting-ui ```
</RTKCodeSnippet>

<RTKCodeSnippet id="web-web-components">
Please install the following dependencies into your project repository:

```bash
npm i @cloudflare/realtimekit-web @cloudflare/realtimekit-ui

Optional: You can also build on top of our ready-made template:

git clone https://github.com/cloudflare/realtimekit-web-examples.git
cd realtimekit-web-examples/html-examples/examples/default-meeting-ui

Please install the following dependencies into your project repository:

npm i @cloudflare/realtimekit-angular @cloudflare/realtimekit-angular-ui

Optional: You can also build on top of our ready-made template:

git clone https://github.com/cloudflare/realtimekit-web-examples.git
cd realtimekit-web-examples/angular-examples/examples/default-meeting-ui

Create a RealtimeKit App

You can create an application from the Cloudflare Dashboard ↗, by clicking on Create App.

Optional: You can also use our API reference for creating an application:

curl --location 'https://api.cloudflare.com/client/v4/accounts/<account_id>/realtime/kit/apps' \
--header 'Content-Type: application/json' \
--header 'Authorization: Bearer <api_token>' \
--data '{"name": "My First Cloudflare RealtimeKit app"}'

Note: We recommend creating different apps for staging and production environments.

Create a Meeting

Use our Meetings API to create a meeting. We will use the ID from the response in subsequent steps.

curl --location 'https://api.cloudflare.com/client/v4/accounts/<account_id>/realtime/kit/<app_id>/meetings' \
--header 'Content-Type: application/json' \
--header 'Authorization: Bearer <api_token>' \
--data '{"title": "My First Cloudflare RealtimeKit meeting"}'

Add Participants

Create a Preset

Presets define what permissions a user should have. Learn more in the Concepts guide. You can create new presets using the Presets API or via the RealtimeKit dashboard ↗ ↗.

Note: Skip this step if you created the app in the dashboard—default presets are already set up for you.

Note: Presets can be reused across multiple meetings. Define a role (for example, admin or viewer) once and apply it to participants in any number of meetings.

Create a Participant

A participant is added to a meeting using the Meeting ID created above and selecting a Preset Name from the available options.

The response includes an authToken which the Client SDK uses to add this participant to the meeting room.

curl --location 'https://api.cloudflare.com/client/v4/accounts/<account_id>/realtime/kit/<app_id>/meetings/<meeting_id>/participants' \
--header 'Content-Type: application/json' \
--header 'Authorization: Bearer <api_token>' \
--data '{
  "name": "Mary Sue",
  "preset_name": "<preset_name>",
  "custom_participant_id": "<uuid_of_the_user_in_your_system>"
}'

Learn more about creating participants in the API reference.

Frontend Integration

You can now add the RealtimeKit Client SDK to your application.

Inside your react application, add the following code:

TypeScript

import { useEffect } from "react";
import {
  useRealtimeKitClient,
  useRealtimeKitMeeting,
  RealtimeKitProvider,
} from "@cloudflare/realtimekit-react";
import { RtkMeeting } from "@cloudflare/realtimekit-react-ui";

export default function App() {
  const [meeting, initMeeting] = useRealtimeKitClient();

useEffect(() => {
initMeeting({ authToken: '<auth-token>' });
}, []);

return (
<RealtimeKitProvider value={meeting}>
<MyMeetingUI />
</RealtimeKitProvider>
);
}

export default function MyMeetingUI() {
  const { meeting } = useRealtimeKitMeeting();
  return (
    <RtkMeeting mode="fill" meeting={meeting} showSetupScreen={true} />
  );

}

Replace <auth-token> with the authToken obtained from the previous step.

Run the application and navigate to the meeting page to see the RealtimeKit Client SDK in action.

npm run dev

Optional: If you are using our ready-made template, run the following command to start the application:

npm i -g vite && npm run dev

Open the app in your browser. To join the meeting, append your auth token to the preview URL:

http://localhost:5173?authToken=<auth_token>

Inside your html application, add the following code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Default Meeting UI | RealtimeKit</title>

    <!-- Import helper to load UI Kit components -->
    <script type="module">
      import { defineCustomElements } from 'https://cdn.jsdelivr.net/npm/@cloudflare/realtimekit-ui@latest/loader/index.es2017.js';
      defineCustomElements();
    </script>

    <!-- Import RealtimeKit Core via CDN -->
    <script src="https://cdn.jsdelivr.net/npm/@cloudflare/realtimekit@latest/dist/browser.js"></script>

  </head>
  <body>
    <rtk-meeting id="my-meeting" show-setup-screen="true" />

    <script>
      const searchParams = new URL(window.location.href).searchParams;

      const authToken = searchParams.get('authToken');

      if (!authToken) {
        alert(
          "An authToken wasn't passed, please pass an authToken in the URL query to join a meeting."
        );
      }

      // Initialize a meeting
      RealtimeKitClient.init({
        authToken,
      }).then((meeting) => {
        document.getElementById('my-meeting').meeting = meeting;
      });
    </script>

  </body>
</html>

Replace <auth-token> with the authToken obtained from the previous step.

Run the application and navigate to the meeting page to see the RealtimeKit Client SDK in action.

npm run dev

Optional: If you are using our ready-made template, run the following command to start the application:

npm i -g vite && npm run dev

Open the app in your browser. To join the meeting, append your auth token to the preview URL:

http://localhost:5173?authToken=<auth_token>

Load the RTKComponentsModule into your app module. This is typically the app.module.ts file. This allows you to use the UI components in your component HTML files.

TypeScript

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RTKComponentsModule } from '@cloudflare/realtimekit-angular';
import { AppComponent } from './app.component';

@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, RTKComponentsModule],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {};

Optional: If you are using TypeScript, set allowSyntheticDefaultImports as true in your tsconfig.json.

TypeScript

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true
  }
}

Load the RtkMeeting component to your template file (component.html).

<rtk-meeting #myid></rtk-meeting>

Initialise the Meeting

TypeScript

  class AppComponent {
  title = 'MyProject';
  @ViewChild('myid') meetingComponent: RtkMeeting;
  rtkMeeting: RealtimeKitClient;

  async ngAfterViewInit() {
    const meeting = await RealtimeKitClient.init({
    authToken: '<auth-token>',
    });
    meeting.join();
    this.rtkMeeting = meeting;
    if (this.meetingComponent) this.meetingComponent.meeting = meeting;
  }
  }

Replace <auth-token> with the authToken obtained from the previous step.

Run the application and navigate to the meeting page to see the RealtimeKit Client SDK in action.

npm run dev

Optional: If you are using our ready-made template, run the following command to start the application:

npm i -g vite && npm run dev

Open the app in your browser. To join the meeting, append your auth token to the preview URL:

http://localhost:5173?authToken=<auth_token>