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.

    • 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


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 }));
Audio/Video Infrastructure designed for the developers to empower them ship simple yet powerful Audio/Video Apps.
Copyright © 2022 Graphene 01, Inc. All Rights Reserved.