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 can customise the appearance using the configuration options provided by the package.

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.15/dist/index.global.js"></script>

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

💡

You need to generate roomId using our Create Room API and projectId from Developer Dashboard (opens in a new tab)

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

Methods

Initialize

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:

Method	Description	Parameter
logoUrl	Change the default logo in the meeting room	string
background	Change the background of the meeting room	string
redirectUrlOnLeave	Redirect to a given URL after the meeting ends	string
virtualBgs	Links to additional virtual backgrounds for the meeting.	string[]

Example:

const HIframe = document.getElementById("huddle01-iframe");
HIframe.iframeApi.initialize({
  background: "YOUR_BACKGROUND_URL",
  logoUrl: "YOUR_LOGO_URL",
});

Enable/Disable Features

You can enable or disable the following features by calling HIframe.iframeApi.updateFeatures() method.

Method	Description	Parameter	Default
isChatEnabled	Enable chat feature	boolean	true
isReactionsEnabled	Enable reactions feature	boolean	true
isVirtualBgEnabled	Enable virtual background feature	boolean	true
isCopyInviteLinkEnabled	Enable copy invite link feature	boolean	false
isRecordingEnabled	Enable recording functionality	boolean	true
isScreenShareEnabled	Enable screen share feature	boolean	true
isRoomLocked	Enable lock screen option	boolean	true

Example Usage

const HIframe = document.getElementById("huddle01-iframe");
HIframe.iframeApi.updateFeatures({
  isChatEnabled: false,
  isReactionsEnabled: false,
  isVirtualBgEnabled: false,
  isCopyInviteLinkEnabled: false,
  isRecordingEnabled: false,
  isScreenShareEnabled: false,
  isRoomLocked: false,
});

Other Methods

You can also handle media devices, send reactions and other actions using the following methods:

Method	Description	Parameter
muteMic	Mute the user's microphone	void
unmuteMic	Unmute the user's microphone	void
enableShare	Enable screen sharing	void
disableShare	Disable screen sharing	void
startRecording	Start recording the meeting	void
stopRecording	Stop recording the meeting	void
sendReaction	Send a reaction during the meeting	string
changeAvatarUrl	Change the avatarUrl for your peer once joined room	string

Example Usage

const HIframe = document.getElementById("huddle01-iframe");
HIframe.iframeApi.muteMic();
HIframe.iframeApi.unmuteMic();
HIframe.iframeApi.enableShare();
HIframe.iframeApi.disableShare();
HIframe.iframeApi.startRecording();
HIframe.iframeApi.stopRecording();
HIframe.iframeApi.sendReaction("😂");
HIframe.iframeApi.changeAvatarUrl("YOUR_AVATAR_URL");

Introduction React iFrame