# Veeting Blocks - Components

Source: https://www.veeting.com/en/veeting-blocks/components

- [Veeting Blocks Introduction](/en/veeting-blocks/introduction)
- [Veeting Blocks Components](#)
	- [How to run the Block Examples](#how-to-run-the-block-examples)
	- [Using this page with an AI assistant](#using-this-page-with-an-ai-assistant)
	- [Video Block](#video-block)
	- [Device Selection Block](#device-selection-block)
	- [Screensharing Block](#screensharing-block)
	- [Whiteboard Block](#whiteboard-block)
	- [Documents Block](#documents-block)
	- [Agenda Block](#agenda-block)
	- [Chat Block](#chat-block)
	- [Polls Block](#polls-block)
	- [Minutes Block](#minutes-block)
	- [Notes Block](#notes-block)
	- [Assistant Block](#assistant-block)
	- [Participants Block](#participants-block)
	- [Join Meeting Block](#join-meeting-block)
- [Javascript and Typescript APIs](/en/veeting-blocks/apis)

## How to run the Block Examples
Veeting Blocks always require an active meeting. You can schedule meetings through our web application or through our [REST APIs](/developer-documentation/api-usage).

Every Block on this page is live. Join a meeting with the controls below, and the examples connect to it, so you can see what each component does before you write any code.

The Blocks documented here are the ones you need for a meeting: video, audio, screensharing, whiteboard, documents, agenda, chat, polls, minutes, notes, the AI assistant, the participants list and the join form. The library ships more of them, including breakout rooms, webinar controls, language channels, the lobby and picture-in-picture. This page is not the full list. Ask us if you need one that is not here.

<div class="live-demo">
	<p>If you don't have an account yet and just want to try the Blocks, generate a demo meeting ID here:</p>
	<div class="example pb-24">
		<div class="form-inline">
			<button type="button" class="btn call-to-action color-button" id="generate-demo-meeting">Generate Demo Meeting ID</button>
		</div>
	</div>
	<p>If you have an existing meeting ID, copy it into the text field below and click <code>Join meeting</code>:</p>
	<div class="example">
		<div class="form-inline example-meeting-join">
			<div class="form-group">
				<input class="form-control" type="text" value="" placeholder="0000-0000-0000-0000" id="documentation-meeting-id" />
			</div>
			<button type="button" class="btn call-to-action color-button" id="btn-join-meeting">Join meeting</button>
			<button type="button" class="btn call-to-action color-button" id="btn-leave-meeting">Leave meeting</button>
		</div>
	</div>
</div>

## Using this page with an AI assistant

If you are using an AI coding assistant, copy the text below into it and add a sentence describing what you want to build. AI assistants accessing this page receive a separate, token-optimized version of our full developer documentation, specifically tailored by our engineers for AI coding assistants.

```text
Before writing any code, read this page:
https://www.veeting.com/en/veeting-blocks/components

It documents the Veeting Blocks web components. Keep these five
rules in mind:

1. Ask me for my Veeting white label domain. Do not guess one.
2. Every element is prefixed vrb-, for example <vrb-video>.
   There is no other prefix.
3. A Block fills its parent element and has no size of its own.
   Give every parent an explicit height, or the page renders
   empty and looks broken.
4. Blocks render nothing until Blocks.init() has completed and a
   meeting has been joined. An empty Block before that is normal.
5. Do not invent element names. If a component is not on this
   page, ask me rather than guessing what it might be called.

What I want to build:
```

<script src="/assets/js/blocks.js"></script>
<script>
// Configure the domain name of your Veeting white label instance
const whitelabelDomain = "rooms.veeting.com"

// Each Blocks participant needs a name. You can generate one randomly,
// for instance with a UUID algorithm.
const participantName = "Documentation page";

const joinMeeting = async () => {

	const meetingId = document.getElementById("documentation-meeting-id").value;
	if (!meetingId || meetingId.length !== 19) {
		return;
	}

	// Optional, load the meeting to ensure that 
	// the meeting exists and that the room is open
	const config = await veeting.Blocks.api.loadMeeting(meetingId);
	if (!config || !config.isOpen) {
		alert("Meeting not found or not open");
		return;
	}

	document.querySelectorAll(".example-container .wrapper").forEach(elem => elem.classList.add("loaded"))
	
	// Join the meeting
	await veeting.Blocks.api.joinMeeting({
		meetingId: meetingId,
		participantName: participantName,
		audio: true,
		video: true
	})

	document.getElementById("generate-demo-meeting").setAttribute("disabled", true);
	document.getElementById("documentation-meeting-id").setAttribute("disabled", true);
	document.getElementById("btn-join-meeting").style.display = "none";
	document.getElementById("btn-leave-meeting").style.display = "inline-block";

	window.scrollTo({ top: 0 })
}

if (!veeting.Blocks.isInitialized()) {
	// Blocks.init() must only be called once!
	veeting.Blocks.init({
		version: "latest",
		whitelabelDomain: whitelabelDomain,
		initialized: async () => {

		}
	});
}

const leaveMeeting = async () => {
	await veeting.Blocks.api.leaveMeeting();

	document.getElementById("generate-demo-meeting").removeAttribute("disabled");
	document.getElementById("documentation-meeting-id").removeAttribute("disabled");
	document.getElementById("btn-join-meeting").style.display = "inline-block";
	document.getElementById("btn-leave-meeting").style.display = "none";
}

document.getElementById("btn-leave-meeting").style.display = "none";

document.getElementById("btn-join-meeting").addEventListener("click", () => {
	joinMeeting().then(() => {}).catch((e) => {});
})

document.getElementById("btn-leave-meeting").addEventListener("click", () => {
	leaveMeeting().then(() => {}).catch((e) => {});
})

document.getElementById("generate-demo-meeting").addEventListener("click", () => {
	fetch(`https://${whitelabelDomain}/api/v6/meeting/demo/presentation`).then((response) => {
		return response.json();
	}).then((meetingData) => {
		document.getElementById("documentation-meeting-id").value = meetingData.data.meetingId;
		document.getElementById("btn-join-meeting").click();
	}).catch((err) => {});
})
</script>

## Video Block
### Overview
The video Block displays the videos of the meeting participants.

```html
<vrb-video
	has-mute-control-buttons="true"
	has-action-control-buttons="true"
	container-layout="standard">
</vrb-video>
```

### Parameters

| Name                       | Type                 | Description                                                                                                                                                                  |
| -------------------------- | -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| has-mute-control-buttons   | Boolean              | Optional, hides the mute buttons if set to false, defaults to true                                                                                                           |
| has-action-control-buttons | Boolean              | Optional, hides the volume control and raise hand buttons if set to false, defaults to true                                                                                  |
| video-only                 | Boolean              | Optional, shows a single video and forces the "fill" layout. Setting it to false has no effect, so leave the attribute off instead. Defaults to false. |
| container-layout           | "standard" or "fill" | Optional, switches the video display layout between "standard" and "fill". Defaults to "fill". |

### Example

> **Note:** Check out "[How to run the Block Examples](/veeting-blocks/components#how-to-run-the-block-examples)" to see how you can run this example.

<div class="example-container">
	<div class="wrapper">
		<vrb-video
			has-mute-control-buttons="true"
			has-action-control-buttons="true"
			container-layout="fill">
		</vrb-video>
	</div>
</div>

## Device Selection Block
### Overview
This Block displays a form where users select their audio and video devices.

```html
<vrb-device-selection
	show-audio-settings="true"
	show-video-settings="true"
	auto-apply-new-devices="true">
</vrb-device-selection>
```

### Parameters

| Name                   | Type    | Description                                                                                                                             |
| ---------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------- |
| show-audio-settings    | Boolean | Optional, hides the microphone and speaker selection if set to false. Defaults to true.                                                 |
| show-video-settings    | Boolean | Optional, hides the camera selection if set to false, which is useful for audio-only meetings. Defaults to true.            |
| auto-apply-new-devices | Boolean | Optional, applies the newly selected devices immediately. If set to false, you must restart the media connections yourself. Defaults to false. |

### Events

The following events are available to subscribe to. Example:

```javascript
document.querySelector("vrb-device-selection")
	.addEventListener("selection", (event) => {
		const saved = event.detail;
		console.log("Have the devices changed?", saved ? "Yes" : "No");
	});
```

Blocks are custom elements, so an event arrives as a `CustomEvent` and its value is on `event.detail`. This is not the same `on()` you use on `Blocks.api`, which is our own API object rather than a DOM element.

| Name      | Callback type | Description                                                                                                                                  |
| --------- | ------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
| selection | Boolean       | Triggered when the user clicks "Save" or "Cancel". The callback parameter is true if the user saved the selection, false if the user canceled. |

### Note

Changing the media devices stores the selected IDs in local storage. If the user is already in a meeting and you want the new devices to take effect right away, restart the media connections yourself:

```javascript
document.querySelector("vrb-device-selection")
	.addEventListener("selection", (event) => {
		if (event.detail) {
			veeting.Blocks.api.restartMediaConnections();
		}
	});
```

### Example

> **Note:** Check out "[How to run the Block Examples](/veeting-blocks/components#how-to-run-the-block-examples)" to see how you can run this example.

<div class="example-container">
	<div class="wrapper">
		<vrb-device-selection
			show-audio-settings="true"
			show-video-settings="true"
			auto-apply-new-devices="true">
		</vrb-device-selection>
	</div>
</div>

## Screensharing Block
### Overview
The screensharing Block displays the Meeting Screensharing tool. 

```html
<vrb-screensharing
	show-toolbar="true">
</vrb-screensharing>
```

### Parameters

| Name         | Type    | Description                                                   |
| ------------ | ------- | ------------------------------------------------------------- |
| show-toolbar | Boolean | Optional, shows the screensharing toolbar, defaults to true |

### Example

> **Note:** Check out "[How to run the Block Examples](/veeting-blocks/components#how-to-run-the-block-examples)" to see how you can run this example.

<div class="example-container">
	<div class="wrapper">
		<vrb-screensharing
			show-toolbar="true">
		</vrb-screensharing>
	</div>
</div>

## Whiteboard Block
### Overview
The whiteboard Block displays the Meeting Whiteboard tool. 

```html
<vrb-whiteboard
  show-reduced-width="false"
  show-external-whiteboard-link="false"
  show-toolbar="true">
</vrb-whiteboard>
```

### Parameters

| Name                          | Type    | Description                                                                                                       |
| ----------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------- |
| show-reduced-width            | Boolean | Optional, displays a smaller toolbar in the whiteboard, defaults to false                                   |
| show-external-whiteboard-link | Boolean | Optional, adds a QR code button to the toolbar for sharing the whiteboard with an external device, defaults to false |
| show-toolbar                  | Boolean | Optional, shows the whiteboard toolbar, defaults to true                                                     |

### Example

> **Note:** Check out "[How to run the Block Examples](/veeting-blocks/components#how-to-run-the-block-examples)" to see how you can run this example.

<div class="example-container">
	<div class="wrapper">
		<vrb-whiteboard
			show-reduced-width="false"
			show-toolbar="true">
		</vrb-whiteboard>
	</div>
</div>

## Documents Block
### Overview
The meeting documents Block displays the Documents Sharing tool. 

```html
<vrb-documents
	show-reduced-width="false"
	show-toolbar="true">
</vrb-documents>
```

### Parameters

| Name               | Type    | Description                                                                               |
| ------------------ | ------- | ----------------------------------------------------------------------------------------- |
| show-reduced-width | Boolean | Optional, displays a smaller toolbar in the documents viewer, defaults to false           |
| show-toolbar       | Boolean | Optional, shows the documents toolbar, defaults to true |

### Example

> **Note:** Check out "[How to run the Block Examples](/veeting-blocks/components#how-to-run-the-block-examples)" to see how you can run this example.

<div class="example-container">
	<div class="wrapper">
		<vrb-documents
			show-reduced-width="false"
			show-toolbar="true">
		</vrb-documents>
	</div>
</div>

## Agenda Block
### Overview
The meeting agenda Block displays the meeting agenda. 

```html
<vrb-agenda
	show-toolbar="true">
</vrb-agenda>
```

### Parameters

| Name                 | Type    | Description                                                                               |
| -------------------- | ------- | ----------------------------------------------------------------------------------------- |
| show-toolbar         | Boolean | Optional, shows the agenda toolbar, defaults to true |

### Example

> **Note:** Check out "[How to run the Block Examples](/veeting-blocks/components#how-to-run-the-block-examples)" to see how you can run this example.

<div class="example-container">
	<div class="wrapper">
		<vrb-agenda
			show-toolbar="true">
		</vrb-agenda>
	</div>
</div>

## Chat Block
### Overview
The meeting chat Block displays the Meeting Chat.

```html
<vrb-chat
	show-toolbar="true"
	with="">
</vrb-chat>
```

### Parameters

| Name         | Type    | Description                                                                                                                                                                                                                                                                                      |
| ------------ | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| with         | String  | Optional, the meeting participant ID of an active participant. With an ID, the Block shows a private chat with that participant. Without one, it shows the group chat that every participant sees. Defaults to the group chat. |
| show-toolbar | Boolean | Optional, shows the chat toolbar, defaults to true                                                                                                                                                                                                        |

### Example

> **Note:** Check out "[How to run the Block Examples](/veeting-blocks/components#how-to-run-the-block-examples)" to see how you can run this example.

<div class="example-container">
	<div class="wrapper">
		<vrb-chat
			with=""
			show-toolbar="true">
		</vrb-chat>
	</div>
</div>

## Polls Block
### Overview
The polls Block displays the Meeting Polls. 

```html
<vrb-polls
	show-toolbar="true">
</vrb-polls>
```

### Parameters

| Name         | Type    | Description                                                   |
| ------------ | ------- | ------------------------------------------------------------- |
| show-toolbar | Boolean | Optional, shows the toolbar to manage polls, defaults to true |
| shown-on-small-screen | Boolean | Optional, forces the compact layout that the Block otherwise uses only on narrow screens, defaults to false |

### Example

> **Note:** Check out "[How to run the Block Examples](/veeting-blocks/components#how-to-run-the-block-examples)" to see how you can run this example.

<div class="example-container">
	<div class="wrapper">
		<vrb-polls
			show-toolbar="true">
		</vrb-polls>
	</div>
</div>

## Minutes Block
### Overview
The meeting minutes Block displays the Meeting Minutes. 

```html
<vrb-minutes
	show-toolbar="true">
</vrb-minutes>
```

### Parameters

| Name                 | Type    | Description                                                                                |
| -------------------- | ------- | ------------------------------------------------------------------------------------------ |
| show-toolbar         | Boolean | Optional, shows the minutes toolbar, defaults to true |

### Example

> **Note:** Check out "[How to run the Block Examples](/veeting-blocks/components#how-to-run-the-block-examples)" to see how you can run this example.

<div class="example-container">
	<div class="wrapper">
		<vrb-minutes
			show-toolbar="true">
		</vrb-minutes>
	</div>
</div>

## Notes Block
### Overview
The meeting notes Block displays the Private Notes. 

```html
<vrb-notes
	show-toolbar="true">
</vrb-notes>
```

### Parameters

| Name                 | Type    | Description                                                                              |
| -------------------- | ------- | ---------------------------------------------------------------------------------------- |
| show-toolbar         | Boolean | Optional, shows the notes toolbar, defaults to true |

### Example

> **Note:** Check out "[How to run the Block Examples](/veeting-blocks/components#how-to-run-the-block-examples)" to see how you can run this example.

<div class="example-container">
	<div class="wrapper">
		<vrb-notes
			show-toolbar="true">
		</vrb-notes>
	</div>
</div>

## Assistant Block
### Overview
The meeting assistant Block displays the Meeting Assistant.

```html
<vrb-assistant></vrb-assistant>
```

### Parameters

This Block takes no parameters.

### Example

> **Note:** Check out "[How to run the Block Examples](/veeting-blocks/components#how-to-run-the-block-examples)" to see how you can run this example.

<div class="example-container">
	<div class="wrapper">
		<vrb-assistant></vrb-assistant>
	</div>
</div>

## Participants Block
### Overview
The meeting participants Block lists everyone currently in the room. 

```html
<vrb-participants
	hide-toolbar="false"
	show-filter="false">
</vrb-participants>
```

### Parameters

| Name         | Type    | Description                                                                      |
| ------------ | ------- | -------------------------------------------------------------------------------- |
| hide-toolbar | Boolean | Optional, hides the toolbar for inviting additional participants, defaults to false |
| show-filter  | Boolean | Optional, shows the participants list filter, defaults to false                  |

### Example

> **Note:** Check out "[How to run the Block Examples](/veeting-blocks/components#how-to-run-the-block-examples)" to see how you can run this example.

<div class="example-container">
	<div class="wrapper">
		<vrb-participants
			hide-toolbar="false"
			show-filter="false">
		</vrb-participants>
	</div>
</div>

## Join Meeting Block
### Overview
The join meeting Block displays the standard join screen. Use it instead of joining through the Veeting Blocks APIs.

```html
<vrb-join
	meeting-id="0000-0000-0000-0000"
	meeting-password="">
</vrb-join>
```

### Parameters

| Name             | Type   | Description                                                                 |
| ---------------- | ------ | --------------------------------------------------------------------------- |
| meeting-id       | String | Required, the meeting ID of the meeting to join                             |
| meeting-password | String | Optional, the meeting password which should be pre-filled in the form input |

### Events

The following events are available to subscribe to. Example:

```javascript
document.querySelector("vrb-join")
	.addEventListener("success", () => {
		console.log("Meeting joined successfully");
	});
```

Blocks are custom elements, so an event arrives as a `CustomEvent` and any value is on `event.detail`. Note that event names keep their original spelling: attributes are dash-cased, event names are not.

| Name           | Callback type                                             | Description                                                                                                                                     |
| -------------- | --------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
| meetingLoaded  | IMeetingRoomConfig                                        | Triggered when the meeting has loaded. Gives you the meeting room configuration, for instance to check whether the meeting is currently open. |
| success        | void                                                      | Triggered after the user has joined the meeting.                                                                                        |
| cancel         | void                                                      | Triggered when the user clicks the logo on the join screen. Use it to send the user somewhere else.                            |
| authenticate   | {meetingId: string, meetingAuthType: MeetingRoomAuthType} | Triggered when the meeting requires additional authentication before the user can join.                                                                      |

---

## The rest of this documentation

- [Custom tools](https://www.veeting.com/en/developer-documentation/custom-tools)
- [External meeting authorization service](https://www.veeting.com/en/developer-documentation/external-meeting-authorization-service)
- [iFrame and Web Components](https://www.veeting.com/en/developer-documentation/iframe-and-web-components)
- [JavaScript APIs](https://www.veeting.com/en/developer-documentation/javascript-apis)
- [Query parameters](https://www.veeting.com/en/developer-documentation/query-parameters)
- [Veeting Blocks - Introduction](https://www.veeting.com/en/veeting-blocks/introduction)
- [Veeting Blocks - JavaScript and Typescript APIs](https://www.veeting.com/en/veeting-blocks/apis)
- [Veeting Rooms REST APIs](https://www.veeting.com/en/developer-documentation/api-usage)
- [Video display calculator](https://www.veeting.com/en/developer-documentation/video-display-calculator)
- [Web hooks](https://www.veeting.com/en/developer-documentation/web-hooks)

All of it in one file: https://www.veeting.com/llms-full.txt