PurpleCallio documentation

Add Video Calling to React

PurpleCallio React components let product teams compose a branded calling experience without implementing WebRTC negotiation and signaling UI from scratch.

Compose the meeting UI

Build with the MeetingProvider, participant views, controls, device selection, and waiting-room capabilities exposed by the React package.

Keep product control

React components are a middle path between hosted UI and the headless SDK: integrate reusable UI while still shaping the experience around your application.

React meeting preview

Simulated React meeting UI

Connected

Local participant
Camera on

Remote participant
Participant stream

Compose a React meeting UI

example.ts

import { useEffect } from "react";
import { MeetingProvider, useMeeting, ParticipantTile, CameraButton, MicrophoneButton } from "@purplecallio/react";

function Call({ participantToken, callId, signalUrl }) {
  return (
    <MeetingProvider token={participantToken} callId={callId} signalUrl={signalUrl}>
      <Room />
    </MeetingProvider>
  );
}

function Room() {
  // MeetingProvider builds the engine but does not join automatically —
  // call join() yourself once the component mounts.
  const { join, localStream, remoteStream, participantId } = useMeeting();
  useEffect(() => { join(); }, [join]);

  return (
    <>
      <ParticipantTile participantId={participantId ?? "me"} stream={localStream} muted mirror />
      <ParticipantTile participantId="remote" stream={remoteStream} />
      <CameraButton />
      <MicrophoneButton />
    </>
  );
}

Still having trouble?

If you're having an issue with this integration, our support team can help.

Contact Support

Build with PurpleCallio

Explore the documentation to choose hosted UI, React components, or the headless SDK for your integration.

Read the quickstart Create an account