React iFrame

Our iFrame package allows you to embed ready to use Huddle01 app in your React application. You can customize the appearance using the configuration options provided by the package.

Prerequisites

Ensure that you have the most recent version of Node.js installed on your device. The latest version of Node.js can be downloaded from here (opens in a new tab).

Installation

To install the @huddle01/iframe package, use either npm, pnpm or yarn.

pnpm add @huddle01/iframe

Usage

⚠️

@huddle01/huddle01-iframe has been deprecated, use @huddle01/iframe instead.

💡

You need to generate roomId using our Create Room API and projectId from Developer Dashboard (opens in a new tab)

Import the HuddleIframe component from the @huddle01/iframe package.

import { HuddleIframe } from "@huddle01/iframe";
 
function App() {
  return (
    <div>
      <HuddleIframe
        roomUrl='https://iframe.huddle01.com/YOUR_ROOM_ID'
        className='w-full aspect-video'
        projectId={"YOUR_PROJECT_ID"}
      />
    </div>
  );
}

Methods

You can also use the instance methods to interact with the iFrame. To use the methods listed below, you first need to get the iFrame element and its content window. It's better to call these methods after app:initialized event is triggered.

⚠️

@huddle01/huddle01-iframe has been deprecated, use @huddle01/iframe instead.

import { HuddleIframe, iframeApi, useEventListener } from "@huddle01/iframe";
 
useEventListener("app:initialized", () => {
  iframeApi.initialize({
    background: "YOUR_BACKGROUND_URL",
    logoUrl: "YOUR_LOGO_URL",
  });
 
  iframeApi.changeAvatarUrl("YOUR_AVATAR_URL");
});

Available Methods

Initialize

Pass a config to customize meeting room appearance. You need to pass following options to the iframeApi.initialize() method.

💡

Don't use the useEffect hook to call iframeApi.initialize() for the first time, use the useEventListener hook instead

Method	Description	Parameter
logoUrl	Change the default logo in the meeting room	string
background	Change the background of the meeting room	string
redirectUrlOnLeave	Redirect to a given URL after the meeting ends	string
virtualBgs	Links to additional virtual backgrounds for the meeting.	string[]

Example Usage

iframeApi.initialize({
  background: "YOUR_BACKGROUND_URL",
  logoUrl: "YOUR_LOGO_URL",
  redirectUrlOnLeave: "YOUR_REDIRECT_URL",
  virtualBgs: ["BG_URL_1", "BG_URL_2"],
});

Enable/Disable Features

You can enable or disable the following features by calling iframeApi.updateFeatures() method.

Method	Description	Parameter	Default
isChatEnabled	Enable chat feature	boolean	true
isReactionsEnabled	Enable reactions feature	boolean	true
isVirtualBgEnabled	Enable virtual background feature	boolean	true
isCopyInviteLinkEnabled	Enable copy invite link feature	boolean	false
isRecordingEnabled	Enable recording functionality	boolean	true
isScreenShareEnabled	Enable screen share feature	boolean	true
isRoomLocked	Enable lock screen option	boolean	true

Example Usage

iframeApi.updateFeatures({
  isChatEnabled: true,
  isReactionsEnabled: true,
  isVirtualBgEnabled: true,
  isCopyInviteLinkEnabled: true,
  isRecordingEnabled: true,
  isScreenShareEnabled: true,
  isRoomLocked: true,
});

Other Methods

You can also handle media devices, send reactions and other actions using the following methods:

Method	Description	Parameter
muteMic	Mute the user's microphone	void
unmuteMic	Unmute the user's microphone	void
enableShare	Enable screen sharing	void
disableShare	Disable screen sharing	void
startRecording	Start recording the meeting	void
stopRecording	Stop recording the meeting	void
sendReaction	Send a reaction during the meeting	string
changeAvatarUrl	Change the avatarUrl for your peer once joined room	string

Example Usage

iframeApi.muteMic();
iframeApi.unmuteMic();
iframeApi.enableShare();
iframeApi.disableShare();
iframeApi.startRecording();
iframeApi.stopRecording();
iframeApi.sendReaction("😂");
iframeApi.changeAvatarUrl("YOUR_AVATAR_URL");

Events

You can listen to the following events using the useEventListener hook:

Event	Description	Data
app:initialized	Triggered when the app is initialized
lobby:metadata	Triggered when the lobby metadata is updated	TPreviewPeers
room:joined	Triggered when a user joins the room
room:failed	Triggered when a user fails to join the room	reason: TRejectReasons
room:new-peer	Triggered when a new peer joins the room	TPeerData
room:me-left	Triggered when the user leaves the room
room:peer-left	Triggered when a peer leaves the room	peerId: string
room:recording-started	Triggered when the recording starts
room:recording-stopped	Triggered when the recording stops	TRecData
room:livestream-started	Triggered when the livestream starts
room:livestream-stopped	Triggered when the livestream stops

Example Usage

import { useEventListener } from "@huddle01/iframe";
 
useEventListener("lobby:metadata", (data) => console.log({ data }));
useEventListener("room:joined", () => console.log("User joined the room"));
useEventListener("room:failed", (reason) => console.log({ reason }));

Vanilla iFrame Typescript Support