• Docs
• Getting Started
• Add iframe

Add Huddle01 Iframe

Huddle01 IFrame lets you embed Huddle01's Web App in your website with a few lines of code

NOTE: Request for access to the Iframe package on Huddle01's discord.

Quick Start

You must have the latest version of Nodejs installed on your machine. You can download the latest version of Nodejs from here.

Install the huddle01-iframe pkg from npm or yarn

# npm
npm i @huddle01/huddle01-iframe
 
# yarn
yarn add @huddle01/huddle01-iframe

Huddle App Setup

import <HuddleIframe /> from the npm pkg

// HuddleIframe to be imported
import { HuddleIframe } from "@huddle01/huddle01-iframe";

Create a config object as follows:

// JavaScript
const iframeConfig = {
  roomUrl: "https://iframe.huddle01.com/123",
  height: "600px",
  width: "80%",
  noBorder: false, // false by default
};

// TypeScript
// import *IframeConfig* type from pkg too
import { HuddleIframe, IframeConfig } from "@huddle01/huddle01-iframe";
 
const iframeConfig: IframeConfig = {
  roomUrl: "https://iframe.huddle01.com/123",
  height: "600px",
  width: "80%",
  noBorder: false, // false by default
};

Pass the configObj as a parameter to the <HuddleIframeApp /> component

// JavaScript | TypeScript
<HuddleIframe config={iframeConfig} />

Next Steps

Now that you have successfully integrated the Huddle01 Iframe to your project, you can start using the Iframe to build your own features.

Check out Instance Methods to learn more about how to invoke different huddleIframeApp methods to build your own features.