Go Back

Engineering

Reading progress

Minimum code, maximum control - Introducing Customizable iFrame by Huddle01

Build branded live video experiences, minimum code needed and let users connect and collaborate in real time for better engagement.

Huddle01

Jun 17, 2023

Share on

User journeys have become increasingly digital with online audio/video interactions being a staple of our day-to-day experiences - impacting everything from social media to healthcare to gaming, work and education. Enabling real-time audio/video communication on your app or platform can help drive engagement and guarantee a better user experience.

Now creating in-house infrastructure for audio/video capabilities can be hectic for your developers, and will deviate them from the core features of your application.

Luckily, now you don’t have to start from scratch or settle for a cookie-cutter option.

Introducing Huddle01 Customizable iFrame

Now embed branded live experiences on your app or platform with complete control over UI-based customizations like wallets, background, redirect link, avatars and in-meeting permissions using Huddle01's Customizable iFrame. Integrate and customize in under 5 minutes and enjoy features like token-gated rooms, token-gated live streaming, recording storing on IPFS, and much more.

Customizable Features of iFrame

Wallet Logins: You can customize which wallet login options you want with iFrame
Background: Use the background of your choice in iFrame
Redirect URL: You can redirect users to your choice of URL once user leaves the Huddle01 room
Handle Events: You can handle multiple events such as lobby:initialized, lobby:joined, lobby:failed, room:joined , room:failed, room:new-peer, room:peer-left, room:recording-started, room:recording-stopped, room:livestream-started, room:livestream-stopped.
Methods: You can invoke methods such as muteMic(), unMuteMic(), enableShare(), disableShare() , startRecording(), stopRecording(), sendReaction(emoji) and changeAvatarUrl().

iFrame Quickstart

To quickly setup iFrame follow the below instructions:

Install @huddle01/iframe package using any package manager such as npm, pnpm or yarn.

Now import the required methods and hooks from @huddle01/iframe

 import { HuddleIframe, iframeApi, useEventListner } from "@huddle01/iframe";

We have to initialize our iFrame and for that we will use useEventListner and listen to lobby: initialized event.

 useEventListner("lobby:initialized", () => {
     iframeApi.initialize({
       // redirect to this URL when the user leaves the room
       redirectUrlOnLeave: "<https://huddle01.com>",
       // wallet logins to show in the lobby
       wallets: ["metamask", "walletconnect"],
       // Show the gradient and mesh background
       gradientAndMesh: false,
       // Show the background image
       background:
         "<https://cdn.pixabay.com/photo/2018/08/14/13/23/ocean-3605547_1280.jpg>",
     });
   });

Now, we can directly use HuddleIframe hook to load iFrame in the UI.

 <HuddleIframe
    roomUrl="<https://iframe.huddle01.com>"
    className="w-full aspect-video"
 />

We can also methods such as changeAvatarUrl() which will change the avatar when new peer joined.

 useEventListner("room:new-peer", () => {
     iframeApi.changeAvatarUrl(
       "<https://avatars.githubusercontent.com/u/1024025?v=4>"
     );
   });

Similarly, you can use any other methods as mentioned above.

Potential Use Cases

Huddle01 iFrame can be used anywhere where we want to add an a/v communication layer. Following are the potential industries where our iFrame is useful.

🤝🏻 Social Apps: Every social app's success depends on user engagement. With in-app live audio/video capabilities like video & audio calls, live streaming, and token-gated events, drive conversations and build a loyal community that boosts user retention on your app.

🛍 Video commerce: Bring your marketplace to life with real-time interactions within your app. Leverage the Huddle01 iFrame to enable communication between shoppers and sellers for credibility, expert advice, live auctions and customer support.

🎙 Creators: Set up your personalized Huddle01 subdomains, embed video calls to your website, meet your followers in real-time, host token-gated events, create, record, stream and monetize content, and build deeper connections with your fans.

Jul 26, 2024

Krupali Trivedi

Minimum code, maximum control - Introducing Customizable iFrame by Huddle01

Huddle01

Introducing Huddle01 Customizable iFrame

Customizable Features of iFrame

iFrame Quickstart

Potential Use Cases

other Posts you may like

other Posts you may like

Create a Personalized Hub and Hangout with your Community on Huddle01 Meet

Create a Personalized Hub and Hangout with your Community on Huddle01 Meet

Huddle01 and Xai: Unleashing Unparalleled Gaming Experience

Huddle01 and Xai: Unleashing Unparalleled Gaming Experience

Immersive Next-gen Gaming with Huddle01 dRTC

Immersive Next-gen Gaming with Huddle01 dRTC

Media Nodes: The Atomic Unit of Huddle01's dRTC Network

Media Nodes: The Atomic Unit of Huddle01's dRTC Network

Huddle01 and Aethir: Revolutionizing Cloud Gaming with Decentralized Real-Time Communication

Huddle01 and Aethir: Revolutionizing Cloud Gaming with Decentralized Real-Time Communication

Arbitrum x Huddle01 x Caldera AMA Round Up 🎙️

Arbitrum x Huddle01 x Caldera AMA Round Up 🎙️