Huddle01 provides web3 video infrastructure that enables users to build efficient and accessible tools to power the next generation of real-time communication. We believe web3 communication should be a public good and our decentralised, product-first approach makes sure we provide better support to every builder/organisation/community looking for a quick and powerful a/v communication plug-in for their website.
What are iFrames? 🤔
iFrames or Inline Frames are used to embed an external HTML document within the current document. It's like having a subpage inside the main one. Advertisements, embedded videos, web analytics, and dynamic content - all make use of them. The best example for this would be how YouTube videos are embedded on websites. That's an iFrame 🏗
Why do you need Huddle01 iFrames?
With web apps getting more innovative and collaborative by the day, applications need quick and efficient a/v support to facilitate seamless real-time communication. Creating your own infra requires a lot of time and research. Those resources can be spent building and optimising your core features.
To enable a/v communication on your website just plug n’ play Huddle01 iFrames with a few lines of code and you’re good to go.
How to use the Huddle01 iFrames? 👩💻
Some pre-requisites for playing around with Huddle01 iFrames:
npm/npx (Installed automatically with node)
Once you have these installed on your local system, there are 2 ways of spinning up a Huddle01 iFrame-powered dApp:
1. Using CLI (Creating a project from scratch)
Just run the single-line command either using yarn or npm
NPM
# Javascript
npx create-huddle01 --tool iframe --name my-iframe-app
# Typescript
npx create-huddle01 --tool iframe --name my-iframe-app -ts
YARN
# Javascript
yarn create huddle01 --tool iframe --name my-iframe-app
# Typescript
yarn create huddle01 --tool iframe --name my-iframe-app -ts
This command will spin up an iFrame sample app in no time. After this you can just navigate into the generated directory and install the dependencies as shown below:
cd my-iframe-app
npm i # using npm
#or
yarn # using yarn
Once the dependencies are installed just run yarn dev or npm run dev to spin up the local server, and you’ll be greeted with the following web page:
Enter the meeting, and all the buttons outside the frame can be used to control the bits inside the Huddle01 App iFrame. That’s It!
Build all you want on top of this ⚒️
2. Using huddle01-iframe npm pkg (Adding iFrame to a pre-existing application)
To power your pre-existing application with Huddle01 iFrames all you need to do is, navigate into your project directory and run the following command:
# Using NPM
npm i @huddle01/huddle01-iframe
#or
# Using YARN
yarn add @huddle01/huddle01-iframe
Once this is installed, you need to create a config object similar to the one below:
const iframeConfig = {
roomUrl: 'https://iframe.huddle01.com/iframe-test',
// URL may differ according to subdomain assigned
height: '600px',
width: '80%',
noBorder: false,
// false by default
};
The setup is done! Now you can just import the component and render it in your jsx as shown below:
import { HuddleIframe } from '@huddle01/huddle01-iframe';
const MyApp = () => {
return <HuddleIframe config={iframeConfig}/>
}
And you’re good to go 🚀
If you want to control the room programmatically, you can do that using the instance methods. For more details check out the docs: https://huddle01.com/docs
All set, time to build 🏗
Now that you know easy it is to embed Huddle01 iFrames, we leave it to your imagination and creativity to play with those. They are super easy to use and integrate.
Looking for some inspiration? Checkout hq.orbits.live to see what successful iframe integration looks like.
Want to get in touch?
Have some doubts or facing an issue with the integration?
Or want us to customise Huddle01 iFrames as per your needs?
Feel free to reach out to us on our Discord or Twitter, and keep up with everything at Huddle01 🎥