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.

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:

Create a new issue

@whiteboards-io/plugins

Whiteboards.io Plugins SDK