Vanilla iFrame

Vanilla iFrame

The Huddle01 Vanilla iFrame provides a simple way to embed real-time audio and video communication into your application.

After embedding the iFrame, you will have access to the provided methods to easily control audio and video settings, recording, reactions, and the hand raise feature during your meeting. Additionally, you can customize the source attribute of the iFrame to specify the room you wish to join, as well as adjust the height and width attributes to fit your unique needs.

Step by step guide:

To begin, you can copy and paste the iFrame markup provided below into your HTML document.

Include the below CDN

<script src="https://unpkg.com/@huddle01/iframe@0.0.5/dist/huddle01-iframe.umd.min.js"></script>

Markup Paste the below code into your web app's markup

  allow="camera; microphone; clipboard-read; clipboard-write; display-capture"

NOTE: src can be a subdomain of your own instead of iframe.huddle01.com


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:

HIframe.iframeApi.initialize({background: ""})

Available Methods

  • initialize(): Pass a config to customize iframe room.

    • background: You can pass any url of an image here to set the background of the meeting room
    • wallets: You can choose multiple wallets to be used in the lobby. (i.e. '*', 'metamask', 'walletconnect', 'keplr', 'templewallet', 'lens', 'ud', 'cyberconnect', 'phantom',)

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


The connectWallet() method is only available when using the iframe on a subdomain of huddle01.com

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.