React iFrame

Our iFrame package allows you to embed a Huddle video conference 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

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" />
        </div>
    );
}
 

Instance Methods

You can also use the instance methods provided by the package to interact with the Huddle video conference. Here's how to use them:

// JavaScript | TypeScript
import { iframeApi } from "@huddle01/iframe";

Methods

To use the methods listed below, you first need to get the iFrame element and its content window. After adding the CDN to your code you can call the methods in the following way:

iframeApi.initialize({ background: "" });

Available Methods

• initialize(): Pass a config to customize iframe room with the following attributes:

  • logoUrl: Set logoUrl to change the logo in the lobby
  • logoHeight : The height of the logo you want to set to increase or decrease the size.
  • logoWidth : The width of the logo you want to set to increase or decrease the size.
  • background: You can pass any url of an image here to set the background of the meeting room
  • defaultChainId : The chainId of the chain you want as default when the huddle01 app loads. e.g. 137 for polygon mainnet.
  • redirectUrlOnLeave: You can pass any url a webpage you want to redirect to after the meeting ends
  • virtualBgs : Links to additional virtual backgrounds you’d wanna set in the meeting.
  • wallets: You can choose multiple wallets to be used in the lobby. (i.e. '*', 'metamask', 'walletconnect', 'keplr', 'templewallet', 'lens', 'ud', 'cyberconnect', 'okxwallet', 'phantom',)
  ⚠️

  Use "*" to show all wallets

• muteMic(): Mutes the user's microphone.

• unmuteMic(): Unmutes the user's microphone.

• enableShare(): Enables screen sharing.

• disableShare(): Disables screen sharing.

• startRecording(): Starts recording the meeting.

• stopRecording(): Stops recording the meeting.

• sendReaction(emogi): Sends a reaction during the meeting. Allowed emojis are: 😂, 😢, 😦, 😍, 🤔, 👀, 🙌, 👍, 👎, 🔥, 🍻, 🚀, 🎉, ❤️, 💯.

• changeAvatarUrl(): Change the avatarUrl for your peer once joined room.

• startLiveStream(): Start Livestreaming the meeting.

  iframeApi.startLiveStream({
    streamUrl: "rtmp://xyz",
    streamKey: "sldheolfhdsf",
  });

• stopLiveStream(): Start Livestreaming the meeting.

  iframeApi.stopLiveStream();

Initializing for the first time

// the `lobby:initialized`  event can be used to know when the lobby has been loaded
useEventListener("lobby:initialized", () => {
  iframeApi.initialize({
    redirectUrlOnLeave: "https://huddle01.com",
    wallets: ["metamask"],
  });
});

Events

There are some additional meeting events that you can listen to as well:

• app:initialized ✅
• lobby:metadata ✅
• room:joined ✅
• room:failed ✅
• room:new-peer ✅
• room:me-left ✅
• room:peer-left ✅
• room:recording-started ✅
• room:recording-stopped ✅
• room:livestream-started ✅
• room:livestream-stopped ✅

// JavaScript
import { useEventListener } from "@huddle01/iframe";
 
useEventListener("room:new-peer", (data) => console.log({ data }));
 
// TypeScript
import { useEventListener } from "@huddle01/iframe";
 
useEventListener("lobby:joined", (data) => console.log({ data }));

Color Customisation

This code snippet demonstrates how to implement the HuddleIframe component from the @huddle01/iframe package in a React application. It shows three different ways to apply themes: using predefined light and dark themes for a consistent and quick styling, and a custom color theme option where specific color values can be assigned to various interface elements, allowing for a personalized and branded appearance.

import { darkTheme, lightTheme } from "@huddle01/iframe/types";
import { HuddleIframe } from "@huddle01/iframe";
 
// Light Theme
<HuddleIframe
		roomUrl="https://iframe.huddle01.com"
		theme={lightTheme}
/>
 
// Dark Theme
<HuddleIframe
		roomUrl="https://iframe.huddle01.com"
		theme={darkTheme}
/>
 
// Custom Colors
<HuddleIframe
		roomUrl="https://iframe.huddle01.com"
		theme={{
			iconColor: '#94A3B8',
		  textColor: 'red',
		  borderColor: '#1C1E24',
		  brandColor: 'blue',
			interfaceColor: '#181A20',
			onBrandColor: '#ffffff',
		}}
/>