Skip to content

Whiteboard

ConnectyCube Whiteboard API allows to create whiteboard functionality and associate it with a chat dialog. Chat dialog’s users can collaborate and draw simultaneously on a whiteboard.

You can do freehand drawing with a number of tools, add shapes, lines, text and erase. To share boards, you just get an easy link which you can email. Your whiteboard stays safe in the cloud until you’re ready to return to it.

Whiteboard demo

The most popular use cases for using the whiteboard:

  • Remote meetings
  • Remote teaching
  • Sales presentations
  • Workflows
  • Real-time collaboration

https://whiteboard.connectycube.com

Follow the Getting Started guide on how to connect ConnectyCube SDK and start building your first app.

In order to start using whiteboard, an additional config has to be provided:

const CONFIG = {
...
whiteboard: {
server: 'https://whiteboard.connectycube.com'
}
}
ConnectyCube.init(CREDS, CONFIG);

Then, ConnectyCube whiteboard is associated with a chat dialog. In order to create a whiteboard, you need to have a chat dialog. Refer to chat dialog creation API.

When create a whiteboard you need to pass a name (any) and a chat dialog id to which whiteboard will be connected.

const params = {
name: 'New Whiteboard',
chat_dialog_id: "5356c64ab35c12bd3b108a41"
};
ConnectyCube.whiteboard.create(params)
.then(whiteboard => {
const wid = whiteboard._id;
})
.catch(error => { });

Once whiteboard is created - a user can display it in app in a WebView using the following url: https://whiteboard.connectycube.com?whiteboardid=<_id>&username=<any_desired_username>&title=<name>

For username - any value can be provided. This is to display a text hint near the drawing arrow.

Use the following code snippet to retrieve a list of whiteboards associated with a chat dialog:

const params = {chat_dialog_id: "5456c64ab35c17bd3b108a76"};
ConnectyCube.whiteboard.get(params)
.then(whiteboard => { })
.catch(error => { });

A whiteboard can be updated, e.g. its name:

const whiteboardId = "5456c64ab35c17bd3b108a76";
const params = {
name: 'New Whiteboard',
};
ConnectyCube.whiteboard.update(whiteboardId, params)
.then(whiteboard => { })
.catch(error => { });
const whiteboardId = "5456c64ab35c17bd3b108a76";
ConnectyCube.whiteboard.delete(whiteboardId)
.then(whiteboard => { })
.catch(error => { });