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

<iframe
  id="huddle01-iframe"
  src="https://iframe.huddle01.com/some-room"
  name="myiFrame"
  scrolling="no"
  height="90%"
  width="90%"
  allowFullScreen
  allow="camera; microphone; clipboard-read; clipboard-write; display-capture"
></iframe>

Methods

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