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.

If you don't have an account yet and just want to try out the blocks, generate a demo meeting ID here:

If you have an existing meeting ID, copy it into the text field below and click Join meeting:

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 blocks displays a form for the users to select the audio and video devices

<vrb-device-selection
    camera="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").on("selection", (saved) => {
    console.log("Have the devices changed?", saved ? "Yes" : "No");
});

Note

Changing the media devices will store the selected IDs in the local storage. If the user is currently in a meeting and you want to immediately apply the newly selected devices, you must do so explicitly by restarting the media connections:

document.querySelector("vrb-device-selection").on("selection", (saved) => {
    if (saved) {
        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-on-small-screen="false"
    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-on-small-screen="false"
    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-on-small-screen="false"
    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

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 displays the full list of all meeting participants which are 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 screen to join the meeting. You can use ths Block instead of using the Veeting Blocks APIs to join the meeting.

<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").on("success", () => {
    console.log("Meeting joined successfully");
});