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

NameTypeDescription
has-mute-control-buttonsBooleanOptional, hides the mute buttons if set to false, defaults to true
has-action-control-buttonsBooleanOptional, hides the volume control and raise hand buttons if set to false, defaults to true
container-layout"standard" or "fill"Optional, switches the video display layout between "standard" and "fill". In most cases you would like to set this to "fill". Defaults for historical reasons to "standard"

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

NameTypeDescription
CameraBooleanOptional, hides the camera selection dropdown if set to false. This is useful for audio only meetings for instance. Defaults to true.
auto-apply-new-devicesBooleanAutomatically apply the newly selected devices. You need to restart the connection manually if this is set to false. Defaults to false.

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");
});
NameCallback typeDescription
selectionBooleanTriggered when the user clicks on "Save" or "Cancel". The callback parameter will be true if the users saved the selection, otherwise false.

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

NameTypeDescription
show-toolbarBooleanOptional, shows the toolbar to manage polls, defaults to true

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

NameTypeDescription
show-reduced-widthBooleanOptional, displays a smaller toolbar in the documents viewer, defaults to false
show-external-whiteboard-linkBooleanOptional, adds a QR-code button to the toolbar to share the whiteboard with an external device, defaults to false
show-toolbarBooleanOptional, shows the toolbar to manage polls, defaults to true

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

NameTypeDescription
show-reduced-widthBooleanOptional, displays a smaller toolbar in the documents viewer, defaults to false
show-toolbarBooleanOptional, decides if the toolbar of the agenda should be visible or not, defaults to true

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

NameTypeDescription
show-on-small-screenBooleanOptional, displays a smaller toolbar, defaults to false
show-toolbarBooleanOptional, decides if the toolbar of the agenda should be visible or not, defaults to true

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

NameTypeDescription
withStringOptional, a meeting participant ID of an active participant. If a meeting participant ID is provided the chat will be a private chat with that person. If no meeting participant ID is provided then this is the global group chat available to all users. It defaults to the global group chat.
show-toolbarBooleanOptional, decides if the toolbar of the agenda should be visible or not, defaults to true

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

NameTypeDescription
show-toolbarBooleanOptional, shows the toolbar to manage polls, defaults to true

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

NameTypeDescription
show-on-small-screenBooleanOptional, displays a smaller toolbar, defaults to false
show-toolbarBooleanOptional, decides if the toolbar of the minutes should be visible or not, defaults to true

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

NameTypeDescription
show-on-small-screenBooleanOptional, displays a smaller toolbar, defaults to false
show-toolbarBooleanOptional, decides if the toolbar of the notes should be visible or not, defaults to true

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

NameTypeDescription

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

NameTypeDescription
hide-toolbarBooleanOptional, hides the toolbar to invite additional participants, defaults to false
show-filterBooleanOptional, shows the participants list filter, defaults to false

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

NameTypeDescription
meeting-idStringRequired, the meeting ID of the meeting to join
meeting-passwordStringOptional, the meeting password which should be pre-filled in the form input

Events

The following events are available to subscribe to. Example:

document.querySelector("vrb-join").on("success", () => {
    console.log("Meeting joined successfully");
});
NameCallback typeDescription
meeting-loadedIMeetingRoomConfigTriggered when the meeting is loaded. Useful to receive the meeting room configuration, for instance to check if the meeting is currently open.
successvoidTriggered when the user successfully joined the meeting.
cancelvoidTriggered when the user clicks on the logo of the screen. Useful if you want to send the user to a different screen.
authenticate{meetingId: string, meetingAuthType: MeetingRoomAuthType}Triggered if the meeting is protected with additional security mechanisms.

Not sure how to best implement your project?

Contact our team to discuss the details.

+41 43 500 11 82
+1 646 583 2652