https://github.com/pexip/plugin-collaboard
Plugin that opens a URL with a whiteboard.
https://github.com/pexip/plugin-collaboard
Last synced: 5 months ago
JSON representation
Plugin that opens a URL with a whiteboard.
- Host: GitHub
- URL: https://github.com/pexip/plugin-collaboard
- Owner: pexip
- License: apache-2.0
- Created: 2022-10-04T11:09:05.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2026-02-10T13:59:25.000Z (5 months ago)
- Last Synced: 2026-02-10T18:35:30.906Z (5 months ago)
- Language: TypeScript
- Size: 728 KB
- Stars: 0
- Watchers: 4
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Web App 3 Plugin: Collaboard
This plugin enables the user to share whiteboard during the meetings with the
rest of the participants.
## Requirements
In order to use this plugin, you need to comply with the following requirements:
| Component | Version |
| -------------- | ------- |
| Pexip Infinity | v36 |
## How to use
This plugin will create a new button in the interface. That will allow us to
share a whiteboard with the rest of the participants.
Once you click on the button, the first thing you will see is a button to log
in:
After you click on log in, you will see a new pop up window with a panel to log
in with username/password and other social login options:
Once you log in, you will see new buttons in the interface:
We have two main options to share a whiteboard:
- **Create whiteboard**: This button will create a new whiteboard and share it
with the rest of participants.
- **Open whiteboard**: This button will show a list of all available whiteboards
and share the selected one with the rest of participants.
Once the user has created or open a whiteboard, the app will show a new window
with the whiteboard:
## How to configure the branding
This plugin uses `oAuth` authentication and, to support this, we need to enable
the redirections in the `manifest.json` file:
```json
{
"applicationConfig": {
"handleOauthRedirects": true
...
}
...
}
```
### Configuration requirements starting from Infinity v37
The `id` of the plugin in the manifest should be `plugin-collaboard` to support
the new Widget concept.
In addition, because of the tightened security in v37,
`"sandboxValues": ["allow-same-origin", "allow-popups", "allow-popups-to-escape-sandbox"]`
needs to be added to the plugin config in the manifest.
More information about the above change can be found here:
https://developer.pexip.com/docs/infinity/web/plugins/webapp-3/sandbox-security
Your manifest will now look something like the following.
```
{
...
"plugins": [
{
"id": "plugin-collaboard",
"src": "...",
"sandboxValues": [
"allow-same-origin",
"allow-popups",
"allow-popups-to-escape-sandbox"
]
}
]
}
```
## How to configure the plugin
This plugin uses the `config.json` file to store the configuration. You should
create the file in the `public` folder in your are developing or in the root of
folder of your plugin, if you are creating a package.
```json
{
"apiUrl": "",
"webappUrl": "",
"clientId": "",
"redirectUri": ""
}
```
## 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:
```env
VITE_INFINITY_TARGET=
VITE_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:
```bash
$ npm i
```
- Run the dev environment:
```bash
$ 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](https://developer.pexip.com/docs/plugins/webapp-3/setup-guide-for-plugin-developers).
## Build for production
To create a package, you will need to first install all the dependencies:
```bash
$ npm i
```
And now to create the package itself:
```bash
$ 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](https://developer.pexip.com).