Veeting Blocks – Components

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.

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.

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.

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:

Video Block

Overview

The video Block displays the videos of the meeting participants.

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

Parameters

Example

Note: Check out "How to run the Block Examples" to see how you can run this example.

Device Selection Block

Overview

This Block displays a form where users select their audio and video devices.

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

Parameters

Events

The following events are available to subscribe to. Example:

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.

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:

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" to see how you can run this example.

Screensharing Block

Overview

The screensharing Block displays the Meeting Screensharing tool.

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

Parameters

Example

Note: Check out "How to run the Block Examples" to see how you can run this example.

Whiteboard Block

Overview

The whiteboard Block displays the Meeting Whiteboard tool.

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

Parameters

Example

Note: Check out "How to run the Block Examples" to see how you can run this example.

Documents Block

Overview

The meeting documents Block displays the Documents Sharing tool.

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

Parameters

Example

Note: Check out "How to run the Block Examples" to see how you can run this example.

Agenda Block

Overview

The meeting agenda Block displays the meeting agenda.

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

Parameters

Example

Note: Check out "How to run the Block Examples" to see how you can run this example.

Chat Block

Overview

The meeting chat Block displays the Meeting Chat.

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

Parameters

Example

Note: Check out "How to run the Block Examples" to see how you can run this example.

Polls Block

Overview

The polls Block displays the Meeting Polls.

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

Parameters

Example

Note: Check out "How to run the Block Examples" to see how you can run this example.

Minutes Block

Overview

The meeting minutes Block displays the Meeting Minutes.

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

Parameters

Example

Note: Check out "How to run the Block Examples" to see how you can run this example.

Notes Block

Overview

The meeting notes Block displays the Private Notes.

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

Parameters

Example

Note: Check out "How to run the Block Examples" to see how you can run this example.

Assistant Block

Overview

The meeting assistant Block displays the Meeting Assistant.

<vrb-assistant></vrb-assistant>

Parameters

This Block takes no parameters.

Example

Note: Check out "How to run the Block Examples" to see how you can run this example.

Participants Block

Overview

The meeting participants Block lists everyone currently in the room.

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

Parameters

Example

Note: Check out "How to run the Block Examples" to see how you can run this example.

Join Meeting Block

Overview

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

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

Parameters

Events

The following events are available to subscribe to. Example:

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.