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.

  • logoUrl: Set logoUrl to change the logo in the lobby
  • background: You can pass any url of an image here to set the background of the meeting room
  • redirectUrlOnLeave: You can pass any url a webpage you want to redirect to after the meeting ends
  • wallets: You can choose multiple wallets to be used in the lobby. (i.e. '*', 'metamask', 'walletconnect', 'keplr', 'templewallet', 'lens', 'ud', 'cyberconnect', 'okxwallet', 'phantom',)
  • lobbyLoginMessage: You can pass a string to change the login message in the lobby
  • lobbyTitle: You can pass a string to change the title in the lobby
  • lobbyDescription: You can pass a string to change the description in the lobby
  • isCopyMeetingVisible: You can pass a boolean to hide/show the "Copy Meeting Link" button
  ⚠️

  Use "*" for showing 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.

• connectWallet(accessToken): Accepts an accessToken that can be generated via the Auth Simulator (opens in a new tab) or the Huddle01 Auth Package (opens in a new tab).

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 }));