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.11/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>

💡

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

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 with the following attributes:
- logoUrl: Set logoUrl to change the logo in the lobby
- logoHeight : The height of the logo you want to set to increase or decrease the size.
- logoWidth : The width of the logo you want to set to increase or decrease the size.
- background: You can pass any url of an image here to set the background of the meeting room
- defaultChainId : The chainId of the chain you want as default when the huddle01 app loads. e.g. 137 for polygon mainnet.
- redirectUrlOnLeave: You can pass any url a webpage you want to redirect to after the meeting ends
- virtualBgs : Links to additional virtual backgrounds you’d wanna set in the meeting.
- wallets: You can choose multiple wallets to be used in the lobby. (i.e. '*', 'metamask', 'walletconnect', 'keplr', 'templewallet', 'lens', 'ud', 'cyberconnect', 'okxwallet', 'phantom',)
⚠️
Use "*" to show 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.

Color Customisation

This code snippet illustrates how to dynamically apply themes to the HuddleIframe using the setTheme method of the iframeApi object. It demonstrates the application of predefined light and dark themes for easy and consistent styling, as well as the customization of individual theme properties like icon color, text color, and border color. This allows for a flexible and dynamic approach to theming, enabling real-time theme changes and personalization according to specific branding or user preference.

// Light Theme
HIframe.iframeApi.setTheme(lightTheme)
 
// Dark Theme
HIframe.iframeApi.setTheme(darkTheme)
 
// Custom Colors
HIframe.iframeApi.setTheme({
  iconColor: '#94A3B8',
  textColor: 'red',
  borderColor: '#1C1E24',
  brandColor: 'blue',
  interfaceColor: '#181A20',
  onBrandColor: '#ffffff',
})

Introduction React iFrame