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:

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

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

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

3. 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>",
        });
      });
   

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

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

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

📎 Workplace: Enhance remote collaboration & productivity of co-workers with personalized meeting rooms that need no sign-ins & come with features like live notes, screen-sharing, low latency video up to 1080p quality, customizable backgrounds, recording & much more.

🩺 Healthcare: Enable remote consultation and coaching with highly secure audio/video communication capabilities for users, and provide quality care from anywhere in the world with Huddle01 iFrame.

📖 E-learning: Make your virtual classrooms more interactive and engaging with live audio/video interactions between students and mentors powered by Huddle01 iFrame. Enhance productivity with host controls, recording and live-streaming features.

⚒️ Try out the new Huddle01 Customizable iFrame and drive engagement on your app: https://customize-iframe-example.vercel.app/

📚 Step-by-step guide on how to embed the Huddle01 Customizable iFrame on your app or platform: https://huddle01.com/docs/tool/iframe/intro

🦺 Get 24/7 Discord support by our dev team: https://discord.gg/M9NnYZDG