Web App 3 Plugin: Message Overlay

This plugin enables host participants to use the message overlay feature and establish a message that will be seen by all the participants.

This feature was introduced in Pexip Infinity v35, therefore you will need to use this version or a later one.

How to use

To activate this feature, the host must click the toolbar button. Note that this option is only available during conferences that do not use direct media. If the conference uses direct media, the button will not be available.

After clicking on "Set message overlay" you will see a dialog to enter the text that will appear on the remote video:

If you are using breakout rooms, you will see an additional option to choose if you want to show the message overlay in all the breakout rooms or only in one of them:

Once you click on "Submit", all the participants will see the message on the top of the screen:

Run for development

• To be able to build the plugin, you need to comply with the following versions or higher:

  NodeJS	NPM
  v20.12.2	v10.5.0

• Create a file .env in the root of the project with the following content:

VITE_INFINITY_TARGET=<infinity_url>
VITE_DEV_SERVER_PORT=<dev_server_port>

The VITE_INFINITY_TARGET variable is mandatory and should contain the URL of the Pexip Infinity system where you want to test the plugin.

The VITE_DEV_SERVER_PORT variable is an optional variable used to specify the port on which the development server will run. If not provided, it defaults to 5173.

You can check an example in the provided .env.example file.

• Install all the dependencies:

$ npm i

• Run the dev environment:

$ npm start

The plugin will be served from https://localhost:5173 (visit that page and accept the self-signed certificates), but you should access it thought the Web App 3 URL. You have more information about how to configure your environment in the Developer Portal: Setup guide for plugin developers.

Build for production

To create a package, you will need to first install all the dependencies:

$ npm i

And now to create the package itself:

$ npm run build

Congrats! Your package is ready and it will be available in the dist folder. The next step is to create a Web App3 branding and copy dist into that branding.

If you want to know more about how to deploy your plugin in Pexip Infinity, check our Developer Portal.