Developers

Whiteboard API

Embed online whiteboards into your products.

Quickstart

Adding Whiteboard Team to your site is quick and easy. Just add this code to your HTML document:

                    
<body>
    <div style="width: 600px; height: 550px;" id="wt-container"></div>

    <script src="https://www.whiteboard.team/dist/api.js"></script>
        <script type="text/javascript">
            var wt = new api.WhiteboardTeam('#wt-container', {
            clientId: '<your clientId>',
            boardCode: '<board code>'
        });
    </script>
</body>
        
    

clientId: To use Whiteboard Team API, you need a client ID. We’re currently in BETA. Get your client credential

boardCode: Each board is identified by an unique string code. It should be a unique and unguessable string

The ready event occurs when the board has been loaded and ready to use so, it is a good place to have all other function callings.

wt.onReady(() => console.log('ready'));

IMPORTANT: Do not download the script to your site and host them yourself, this will break the functionality.

API Docs Overview

To create a whiteboard, create a new instance of api.WhiteboardTeam() with a container element and preferred options.

new api.WhiteboardTeam(element, {options})
  • element [string | object] – contains a reference to the element in which whiteboard is
  • {options} [object] – options object

Options

clientId [string]
The public identifier for the application. Here's an example:
clientId: '42c8014a89e6ad83a13e26538f1a63b6'
boardCode [string]
Whiteboard will use its value as the board's unique code to create a new or load existing board. By default, this option is not set, it should be a unique and unguessable string. We strongly suggest use universally unique identifiers (UUID). Alternatively, URL query strings could identify board codes. For example, board SOMEUNIQUESTRING would have URL: http://yourdomain.com/yourpage?wtBoard=SOMEUNIQUESTRING.
boardCode: '361249e0-feca-4acb-8483-66cf47dad409'
defaultTool [string]

With this option you can set a default tool, valid tools are pan, pen, line, arrow, circle, filledCircle, rectangle, filledRectangle, text, stickyNote or select. Default of this option is pen. Here is an example:

defaultTool: 'pen'
defaultLineWith [number]

With this option you can set a default line-with, a line-with you start with when you begin drawing a new shape. Default of this option is 2. Here is an example:

defaultLineWith: 1
colors [array]

With this option you can replace your color sub-menu colors. It should be a array of hex colors. The default of this option is null. Here is an example:

colors: ['#FF5733', '#3498DB', '#5B2C6F', '#212F3C']
defaultColor [string]

With this option you can set a default color that will appear as the color button on the main menu. It doesn't have to be a part of your color sub-menu colors. It should be a hex color format. The default of this option is black. Here is an example:

defaultColor: '#000000'
defaultBackground [string]

With this option you can set a default background for the board. The default of this option is 'Dot'. Valid backgrounds are 'Dot', 'Graph paper', 'Large grid', 'Small grid', 'Line' Here is an example:

defaultBackground : 'Small grid'

Methods:

zoomIn()

Zooms the board in by one step.

wt.zoomIn()
zoomOut()

Zooms the board out by one step.

wt.zoomOut()
resetZoom()

Zooms the board to 100%

wt.resetZoom()
undo()

Does undo of the previous own operation.

wt.undo()
fitToScreen()

Repositions zoom level and pan position so that the entire content on the board is visible.

wt.fitToScreen()
removeCommand()

Removes objects from the board.

wt.removeCommand(commands);
Parameters

  • commands {array} - list of objects to remove

drawLine()

Draws a line or arrow on the board.

wt.drawLine(points, color, lineWidth, type);
Parameters

  • points {array} - list of two points. Example [{x:100, y:100},{x:200, y:200}]
  • color {string} - '#' followed by the 6 digit HEX code
  • lineWidth {number} - width of the stroke in pixels relative to the canvas with zoom level 1
  • type {string} - type of the line could be 'line' or 'arrow'

drawPen()

Draws shape defined as array of points

wt.drawPen(points, color, lineWidth);
Parameters

  • points {array} - list of drawing points, one point is object of two numbers {x:x, y:y}
  • color {string} - '#' followed by the 6 digit HEX code
  • lineWidth {number} - width of the stroke in pixels relative to the canvas with zoom level 1

drawRectangle()

Draws a rectangle on the board

wt.drawRectangle(x, y, w, h, color, lineWidth, {type : type});
Parameters

  • x {number} - X coordinate of the top left point of the rectangle
  • Y {number} - Y coordinate of the top left point of the rectangle
  • w {number} - width of the rectangle
  • h {number} - height of the rectangle
  • color {string} - '#' followed by the 6 digit HEX code
  • lineWidth {number} - width of the stroke in pixels relative to the canvas with zoom level 1
  • fillBrush {object} - type of the fills {type : 'e'} for empty or {type : 'f'} for filled

drawCircle()

Draws a circle on the board

wt.drawCircle(x, y, r, color, lineWidth, {type : type});
Parameters

  • x {number} - X coordinate of the middle point of the circle
  • y {number} - Y coordinate of the middle point of the circle
  • r {number} - radius of the circle
  • color {string} - '#' followed by the 6 digit HEX code
  • lineWidth {number} - width of the stroke in pixels relative to the canvas with zoom level 1
  • fillBrush {object} - type of the fills {type : 'e'} for empty or {type : 'f'} for filled

drawText()

Draws a text on the board

wt.drawText(x, y, text, color, font, size);
Parameters

  • x {number} - X coordinate of the top left point of text
  • y {number} - Y coordinate of the top left point of text
  • text {string} - text to be drawn
  • color {string} - '#' followed by the 6 digit HEX code
  • font {string} - font of the text font
  • size {number} - size of the text font

drawStickyNote()

Draws a sticky note on the board

wt.drawStickyNote(x, y, w, h, text, color, size);
Parameters

  • x {number} - X coordinate of the top left point of sticky note
  • y {number} - Y coordinate of the top left point of sticky note
  • w {number} - width of the sticky note
  • h {number} - height of the sticky note
  • text {string} - text to be drawn
  • color {string} - '#' followed by the 6 digit HEX code
  • size {number} - size of the sticky note font

onReady(callback)

The callback will call when the board has been loaded. Here's an example:

wt.onReady(ctx => console.log(ctx));
Callback Parameters

  • ctx {object} - contains uid of the user

onError(error)

The callback will call when any error occurred. Here's an example:

wt.onError(error => {
    console.log(error.type, error.message);
})

Callback Parameters

  • error {object} - contains error type and error message

onUserJoined(callback)

The callback will call when any other user joins the board.

wt.onUserJoined(ctx => console.log(ctx));
Callback Parameters

  • ctx {object} - contains uid and display name of the user

onUserLeft(callback)

The callback will call when any other user leaves the board.

wt.onUserLeft(ctx => console.log(ctx));
Callback Parameters

  • ctx {object} - contains uid and display name of the user

getImage()

Get the image of board.

wt.getImage().then(img => console.log(img));
Returns

Promise with base65 image.

getCurrentUser()

Get the current user of the board.

wt.getCurrentUser().then(user => console.log(user));
Returns

Promise with an object containing the user id.

REST APIs

Using client secret for REST API requests.

You can pass client secret in Api-Key header

Api-Key: <SECRET_KEY>

[GET] /api/v1/boards

Gets all boards and returns an array of board objects

curl  -H "Api-Key: <SECRET_KEY>" -X GET "https://www.whiteboard.team/api/v1/boards"
Returns

returns an array of board objects

                            
{
    "data": [
        {
            "id": "9725c0f7-8a4e-43ee-c87b-08d7a3020e76",
            "name": "Sample Board",
            "code": "8331612C-B0E7-466F-8F50-D2B90ADB42A9",
            "createdDate": "2020-01-27T12:00:49.1113226",
            "lastUse": "2020-01-30T08:07:23.383282",
            "lastChange": "2020-01-29T15:12:11.6749696",
            "shareType": 1
        }
    ],
    "totalCount": 1
}

[GET] /api/v1/boards/<BORAD_ID>

Gets a board by id and returns a board objects

curl  -H "Api-Key: <SECRET_KEY>" -X GET "https://www.whiteboard.team/api/v1/boards/<BORAD_ID>"
Parameters

BORAD_ID [string] - board id

Returns

returns a board object

                            
{
    "name": "Sample Board",
    "code": "8331612C-B0E7-466F-8F50-D2B90ADB42A9",
    "createdDate": "2020-01-27T12:00:49.1113226",
    "lastUse": "2020-01-29T19:17:15.5687596",
    "lastChange": "2020-01-29T15:12:11.6749696",
    "shareType": 1,
    "members": [
        {
            "uid": "68ea8ac4-e21d-4c8b-9e3b-d977feee177e",
            "username": null,
            "joinedDate": "2020-01-27T12:00:49.1180617",
            "isActive": true,
            "isOwner": false
        },
    ]
}

[DELETE] /api/v1/boards/<BORAD_ID>

Delete a board by Id.

curl -H "Api-Key: <SECRET_KEY>" -X DELETE "https://www.whiteboard.team/api/v1/boards/<BORAD_ID>"
Parameters

BORAD_ID [string] - board id

[POST] /api/v1/boards/<BORAD_ID>/upload

Upload an image to the board.

curl -H "Api-Key: <SECRET_KEY>" -F Uid=<USER_ID> -F file=@<FILENAME> https://www.whiteboard.team/api/v1/boards/<BORAD_ID>/upload"
Parameters