# Komponenten

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

- [Veeting Blocks Introduction](/de/veeting-blocks/introduction)
- [Veeting Blocks Components](#)
	- [How to run the Block Examples](#how-to-run-the-block-examples)
	- [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)
	- [Participants Block](#participants-block)
	- [Join Meeting Block](#join-meeting-block)
- [Javascript and Typescript APIs](/de/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>

## 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". |

### Beispiel

> **Hinweis:** Sehen Sie unter "Wie stelle ich die Blocks dar" wie Sie dieses Beispiel ausführen können.

<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();
		}
	});
```

### Beispiel

> **Hinweis:** Sehen Sie unter "Wie stelle ich die Blocks dar" wie Sie dieses Beispiel ausführen können.

<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 |

### Beispiel

> **Hinweis:** Sehen Sie unter "Wie stelle ich die Blocks dar" wie Sie dieses Beispiel ausführen können.

<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                                                     |

### Beispiel

> **Hinweis:** Sehen Sie unter "Wie stelle ich die Blocks dar" wie Sie dieses Beispiel ausführen können.

<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 |

### Beispiel

> **Hinweis:** Sehen Sie unter "Wie stelle ich die Blocks dar" wie Sie dieses Beispiel ausführen können.

<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
	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. |

### Beispiel

> **Hinweis:** Sehen Sie unter "Wie stelle ich die Blocks dar" wie Sie dieses Beispiel ausführen können.

<div class="example-container">
	<div class="wrapper">
		<vrb-chat
			with="">
		</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 |

### Beispiel

> **Hinweis:** Sehen Sie unter "Wie stelle ich die Blocks dar" wie Sie dieses Beispiel ausführen können.

<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 |

### Beispiel

> **Hinweis:** Sehen Sie unter "Wie stelle ich die Blocks dar" wie Sie dieses Beispiel ausführen können.

<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 |

### Beispiel

> **Hinweis:** Sehen Sie unter "Wie stelle ich die Blocks dar" wie Sie dieses Beispiel ausführen können.

<div class="example-container">
	<div class="wrapper">
		<vrb-notes
			show-toolbar="true">
		</vrb-notes>
	</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                  |

### Beispiel

> **Hinweis:** Sehen Sie unter "Wie stelle ich die Blocks dar" wie Sie dieses Beispiel ausführen können.

<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.                                                                      |

---

## Die übrige Dokumentation

- [Custom Tools – eigene Widgets im Meetingraum](https://www.veeting.com/de/developer-documentation/custom-tools)
- [Externer Autorisierungsdienst](https://www.veeting.com/de/developer-documentation/external-meeting-authorization-service)
- [iFrame und Web Komponenten](https://www.veeting.com/de/developer-documentation/iframe-and-web-components)
- [JavaScript APIs](https://www.veeting.com/de/developer-documentation/javascript-apis)
- [JavaScript und Typescript APIs](https://www.veeting.com/de/veeting-blocks/apis)
- [Kontrolle über die Videodarstellung](https://www.veeting.com/de/developer-documentation/video-display-calculator)
- [Parameter in der URL](https://www.veeting.com/de/developer-documentation/query-parameters)
- [Veeting Blocks - Übersicht](https://www.veeting.com/de/veeting-blocks/introduction)
- [Veeting Rooms REST APIs](https://www.veeting.com/de/developer-documentation/api-usage)
- [Webhooks](https://www.veeting.com/de/developer-documentation/web-hooks)

Alles in einer Datei: https://www.veeting.com/llms-full.txt