npm package: @huddle01/iframe
Description: ![https://huddle01-assets-frontend.s3.amazonaws.com/general/huddle01-logo-blue.svg](https://huddle01-assets-frontend.s3.amazonaws.com/general/huddle01-logo-blue.svg)
Latest version: 0.0.15

# Huddle01-Iframe

![https://huddle01-assets-frontend.s3.amazonaws.com/general/huddle01-logo-blue.svg](https://huddle01-assets-frontend.s3.amazonaws.com/general/huddle01-logo-blue.svg)

<p align="center">
  <strong>Web3-Native Zoom for Builders/DAOs/NFT Communities</strong>
</p>

<h3 align="center">
  <a href="https://discord.gg/EYqfS32jYc">Community</a>
  <span> · </span>
  <a href="https://beneficial-jackrabbit-442.notion.site/Huddle01-Sync-Documentation-d7283ea395f24b788c54bffdfc3cd082">Documentation</a>
</h3>

> **_NOTE:_** Request for access to the Iframe pkg on Huddle01's discord or reach out to the team.

## Quick Start

Install the `@huddle01/iframe` pkg from **_npm_** or **_yarn_**

```bash
# npm
npm i @huddle01/iframe

# yarn
yarn add @huddle01/iframe
```

## **Huddle App Setup**

import `<HuddleIframe />` from the **_npm_** pkg

```jsx
// HuddleIframe to be imported
import { HuddleIframe } from '@huddle01/iframe';
```

Create a config object as follows:

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

```tsx
// TypeScript
// import *IframeConfig* type from pkg too
import { HuddleIframe, IframeConfig } from '@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

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

---

## Instance Methods

**Usage:**

```jsx
// JavaScript | TypeScript
import { huddleIframeApp } from '@huddle01/iframe';

//format
huddleIframeApp.methods.methodName();

//e.g.
huddleIframeApp.methods.muteMic();
```

**Action Methods:**

- **`muteMic()` ✅**
- **`unmuteMic()` ✅**
- **`enableShare()` ✅**
- **`disableShare()` ✅**
- **`startRecording()` ✅**
- **`stopRecording()` ✅**
- **`sendReaction(emogi)` ✅**
  **[allowed emogis: 😂, 😢, 😦, 😍, 🤔, 👀, 🙌, 👍, 👎, 🔥, 🍻, 🚀, 🎉, ❤️, 💯]**
- **`toggleHandRaise()` ✅**
- **`connectWallet(address)` ✅**

---

**Info Methods**

```jsx
// Javascript | Typescript
const participants = huddleIframeApp.infoMethods.getParticipants();
```

```jsx
// example participant
"EEXTeIr5C6": {
	peerId: "EEXTeIr5C6"
	avatarUrl: "https://bit.ly/3O7wUeR",
	displayName: "axit.eth",
	isCamPaused: false
	isHandRaised: false
	isMicPaused: false
	isSharePaused: false
}
```

- **`getParticipants()` ✅**
  - **`peer {type: Peer}`**
    - _`peerId {type: String}`_
    - _`avatarUrl {type: String}`_
    - _`displayName {type: String}`_
    - _`isHandRaised {type: Boolean}`_
    - _`isCamPaused {type: Boolean}`_
    - _`isMicPaused {type: Boolean}`_
    - _`isSharePaused {type: Boolean}`_

---

**Events**

All Action methods have their own events and can be listened to if they are called using the api.
There are some additional meeting events that you can listen to as well:

- `peer-join` **✅**
- `peer-left` **✅**
- `me-left` **✅**
- `avatar-url-changed` **✅**

```jsx
// JavaScript
import { HuddleAppEvent, huddleIframeApp } from '@huddle01/iframe';

huddleIframeApp.on('peer-join', data => console.log({ data }));
```

```tsx
// TypeScript
import { HuddleAppEvent, huddleIframeApp } from '@huddle01/iframe';

huddleIframeApp.on(HuddleAppEvent.PEER_JOIN, data => console.log({ data }));
```

---

💡 For any help reach out to us on
[Discord](https://discord.com/invite/EYqfS32jYc)