Whiteboards.io Plugins SDK
This is a SDK that can be used for creating plugins for Whiteboards.io app. You can add new features, automations, and customisations to your Whiteboards.
Whiteboards.io plugins
Technical requirements
Plugin is a HTML file with accompanying assets like javascript files, CSS stylesheets, or images. It will be loaded in an iframe on whiteboards.io for users, and organisations, which decide to enable it.
It can communicate with Whiteboards.io through this SDK, which under the hood is using window.postMessage
mechanism.
Production version of plugins are loaded in a sandboxed iframe.
Documentation: https://whiteboards-io.github.io/whiteboards-plugins/
Development
Prerequisites:
- Whiteboards.io organisation account: https://app.whiteboards.io
In order to develop a plugin you need to setup a project with http server. For example using Create React App and using http://localhost:3000 url in development console at Whiteboards.io
Once you have your development environment set up, and a hello world running, go to https://app.whiteboards/$YOUR_ORGANISATION/access/config-plugins and follow the instructions.
Usage
Start from installing the library in your plugin project:
npm install --save-dev @whiteboards-io/plugins
Example: Custom static template
import { registerTemplate } from "@whiteboards-io/plugins";
import helloImage from "./hello-image.png";
registerTemplate({
id: "hello-world",
fixed: true,
title: "Hello World Template",
description: "This is a hello world template",
illustration: window.location.origin + helloImage,
content: {
cards: {
_index: {
card1: true,
},
_items: {
card1: {
x: 0,
y: 0,
width: 100,
height: 100,
text: "Hello world!",
},
},
},
},
});
More examples
Check out the samples directory
Feedback
Reach out with feedback and ideas: