React iFrame

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.


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).


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

pnpm add @huddle01/iframe



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

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

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

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:


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

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


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.

      streamUrl: "rtmp://xyz",
      streamKey: "sldheolfhdsf",
  • stopLiveStream(): Start Livestreaming the meeting.


Initializing for the first time


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

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


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
// Dark Theme
// Custom Colors
			iconColor: '#94A3B8',
		  textColor: 'red',
		  borderColor: '#1C1E24',
		  brandColor: 'blue',
			interfaceColor: '#181A20',
			onBrandColor: '#ffffff',
Audio/Video Infrastructure designed for the developers to empower them ship simple yet powerful Audio/Video Apps.
Copyright © 2024 Graphene 01, Inc. All Rights Reserved.