# Veeting Blocks - Introduction
Source: https://www.veeting.com/en/veeting-blocks/introduction
- [Veeting Blocks Introduction](#)
- [Introduction to Veeting Blocks](#introduction-to-veeting-blocks)
- [Overview](#overview)
- [Using this page with an AI assistant](#using-this-page-with-an-ai-assistant)
- [Requirements](#requirements)
- [Installation](#installation)
- [Importing and initialization](#importing-and-initialization)
- [Import with Typescript or ES6](#import-with-typescript-or-es6)
- [Importing with plain Javascript](#importing-with-plain-javascript)
- [Initialization](#initialization)
- [Basic use case](#basic-use-case)
- [Create a meeting](#create-a-meeting)
- [Include Blocks to your HTML](#include-blocks-to-your-html)
- [Initialize Blocks and join a meeting](#initialize-blocks-and-join-a-meeting)
- [Examples](#examples)
- [Demo workspaces](#demo-workspaces)
- [Angular Demos](#angular-demos)
- [Ionic Demo](#ionic-demo)
- [Plain Javascript Demo](#plain-javascript-demo)
- [Veeting Blocks Components](/en/veeting-blocks/components)
- [Javascript and Typescript APIs](/en/veeting-blocks/apis)
## Introduction to Veeting Blocks
Veeting Blocks are Web Components for all our Veeting collaboration tools. Use them to build your own video conferencing application or to add collaboration features to an existing one. There are Blocks for audio and video, screen sharing, a whiteboard, and more.
You can use Veeting Blocks with plain __HTML, CSS and Javascript__, or with a framework such as __Angular__, __React__, __VueJS__ or __Ionic__.
## Overview
Veeting Blocks are HTML elements that you add to your web application. The Veeting Blocks APIs let you join meetings and interact with those Blocks. Building an application or an integration is mostly a matter of laying out a user interface. You don't need to handle connectivity or WebRTC edge cases yourself. Blocks does that for you.
This introduction shows you how to install Blocks and how to add them to your project. The demo applications at the bottom of this page give you a working starting point.
## Using this page with an AI assistant
Many integrations are now written with the help of an AI coding assistant. If you are using one, copy the text below into it and add a sentence describing what you want to build.
The prompt points the assistant at this page and warns it about the handful of things assistants tend to get wrong here.
```text
Before writing any code, read this page:
https://www.veeting.com/en/veeting-blocks/introduction
It documents Veeting Blocks, a set of web components for video
meetings. Keep these five rules in mind:
1. Ask me for my Veeting white label domain. Do not guess one,
and do not assume rooms.veeting.com is mine.
2. @veeting/blocks-loader comes from our own npm registry, not
from npmjs.com. The .npmrc line is on this page and the
install fails without it.
3. Call Blocks.init() exactly once, guarded by
Blocks.isInitialized(). Everything else has to wait for its
initialized callback.
4. A Block fills its parent element. If you do not give the
parent a size, nothing appears and the page looks broken.
5. Joining needs a meeting ID, which comes from the REST API or
from the web application. Blocks does not create meetings.
What I want to build:
```
## Requirements
These are the basic requirements to use Veeting Blocks:
- `Node.js` and `npm` to install the loader package. Any version still supported by the Node project will do.
- Familiarity with installing npm packages.
- Experience building web application front ends.
## Installation
Add our private npm registry to your workspace by adding a line to the `.npmrc` file in your project root. Create the file if it does not exist yet.
```bash
@veeting:registry=https://releases.veeting.net/npm/
```
Then install the Veeting Blocks loader:
```bash
npm install @veeting/blocks-loader
```
The loader always pulls the most up-to-date code directly from our servers. It also ships Typescript definitions for all APIs.
## Importing and initialization
### Import with Typescript or ES6
Import Blocks into the file where you use it:
```Typescript
import { Blocks, MeetingRoomApiEvent } from "@veeting/blocks-loader";
```
The package exports the enums and the interface definitions alongside `Blocks`, so import whatever else you use. `MeetingRoomApiEvent` is needed by the join example below.
### Importing with plain Javascript
If you don't use a build system, copy the contents of `node_modules/@veeting/blocks-loader` into your assets folder, for example `assets/js/blocks`, and include the Javascript file directly in your HTML.
```html
```
This script puts everything on the global `veeting` object, so every call becomes `veeting.Blocks.x` instead of `Blocks.x`. The two are otherwise the same API.
### Initialization
Initialize Blocks before you use any Block or any API. Initialization loads the main Veeting Blocks code.
> **Note:** You need access to a Veeting white label instance. Contact us if you don't have one yet.
```Typescript
// Configure the domain name of your Veeting white label instance
const whitelabelDomain = "rooms.veeting.com"
if (!Blocks.isInitialized()) {
// Blocks.init() must only be called once!
Blocks.init({
version: "latest",
whitelabelDomain: whitelabelDomain,
initialized: async () => {
// Veeting Blocks is initialized
}
});
}
```
## Basic use case
### Create a meeting
Veeting is built around meetings. Each meeting has a start date, an end date that you can extend, and a unique meeting ID. You need the meeting ID to join a meeting.
You can generate meeting IDs in our web application or through our [REST APIs](/developer-documentation/api-usage).
### Include Blocks to your HTML
The example below adds the audio and video Block and the whiteboard Block to a page. Every Block element starts with the prefix `vrb-`.
```html
```
> **Note:** A Veeting Block fills its parent container. Give the parent a size, or the Block renders at zero height and the page looks broken.
### Initialize Blocks and join a meeting
The following code initializes Blocks and joins a meeting. As described above, you need a meeting ID to join.
```javascript
// Configure the domain name of your Veeting white label instance
const whitelabelDomain = "rooms.veeting.com"
// We assume that you have generated the meeting ID elsewhere
const meetingId = "0000-0000-0000-0000";
// Each Blocks participant needs a name. You can generate one randomly,
// for instance with a UUID algorithm.
const participantName = "Joe Doe";
/*
* Note: if you loaded blocks.js into your HTML instead of importing the package, every
* Blocks reference below becomes veeting.Blocks - veeting.Blocks.init({...}) and so on.
*/
if (!Blocks.isInitialized()) {
// Blocks.init() must only be called once!
Blocks.init({
version: "latest",
whitelabelDomain: whitelabelDomain,
initialized: async () => {
// Optional, load the meeting to ensure that
// the meeting exists and that the room is open
const config = await Blocks.api.loadMeeting(meetingId);
if (!config || !config.isOpen) {
alert("Meeting not found or not open");
return;
}
// Subscribe before joining, so you do not miss the first events
Blocks.api.on(MeetingRoomApiEvent.participantsUpdated, (participantsList) => {
// The participants list has been updated
});
// Join the meeting
await Blocks.api.joinMeeting({
meetingId: meetingId,
participantName: participantName,
audio: true,
video: true
})
// Call APIs. The argument is required by the signature but has no effect
// on this one, see the APIs page.
const cameraDevices = Blocks.api.getMediaDeviceVideoInputList(false);
}
});
}
```
## Examples
### Demo workspaces
We provide `Visual Studio Code` workspaces for `Angular`, `Ionic` and `plain Javascript` demo applications.
> **Note:** As with any WebRTC application that needs the camera and microphone, you must run these demos on localhost or on a host with HTTPS. Browsers block media access over plain HTTP.
### Angular Demos
The Angular demo workspace contains three projects that you can run independently.
The `Broadcast Button` project shows a basic webinar setup with one moderator and several participants. It uses only the [Video Block](/veeting-blocks/components#video-block), with mute buttons for audio and video. Install the dependencies with `npm install`, then run `npm run broadcast-button`.
The `Coffee Table` project shows a basic video conference with several participants. It uses the [Video Block](/veeting-blocks/components#video-block) and implements the Video Display Calculator interface to arrange the videos in a circle instead of our standard layout. Install the dependencies with `npm install`, then run `npm run coffee-table`.
The `Meeting Room` project is a complete meeting room that uses every Veeting Block. Install the dependencies with `npm install`, then run `npm run meeting-room`.
Download the Angular workspace here:
[Angular Workspace](https://releases.veeting.net/demo/downloads/veeting-blocks-angular-demo-20230111.tar.gz)
### Ionic Demo
The Ionic demo workspace contains a small demo that uses the [Video Block](/veeting-blocks/components#video-block), [Chat Block](/veeting-blocks/components#chat-block) and [Whiteboard Block](/veeting-blocks/components#whiteboard-block). Install the dependencies with `npm install`, then run `npm start`.
Download the Ionic workspace here:
[Ionic (Angular) Workspace](https://releases.veeting.net/demo/downloads/veeting-blocks-ionic-demo-20230111.tar.gz)
### Plain Javascript Demo
The plain Javascript demo is a small application built around the [Video Block](/veeting-blocks/components#video-block). It uses `Gulp` as its build system. Install the dependencies with `npm install`, then run `npm start`.
Download the Javascript workspace here:
[Javascript Workspace](https://releases.veeting.net/demo/downloads/veeting-blocks-javascript-demo-20251229.tar.gz)
---
## 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 - Components](https://www.veeting.com/en/veeting-blocks/components)
- [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