Open in app

Sign in

Write

Sign in

Whiteboard.chat iframe developer APIs

Pawan Uberoy
epiphani
Published in
5 min readAug 7, 2021

Here is how you can use the developer APIs for whiteboard.chat embedded in an iframe. You can get a Free Interactive Online Whiteboard easily in your app.

Example: https://github.com/epiphani-inc/custom-wbc-mg-boards

Step 1: Get a Developer Key

Login to whiteboard.chat, the location where you want to get the key. Click the settings button on the top right (in Teaching or Collaborating mode)

Click the SHOW API key button. Copy it and keep for future use.

Step 2: Create an Iframe on your site for your whiteboard.chat

<iframe allow="camera; microphone" src='https://www.whiteboard.chat/apiaccess/createjoin/[BOARD_UUID]?key=[DEVELOPER_KEY]&teacher=true />

Please replace [BOARD_UUID] with a generated UUID and [DEVELOPER_KEY] with the API key from Step 1. To start the session, teacher=true needs to be passed.

That is it, you can use the following options for the iframe URL to pass arguments

  • logo=xxx: URL encoded path to the logo you want on the top left corner
  • disableNav=true: Set this to disable navigation, to the home page or manage page from the whiteboard.
  • userid=xxx: Set a userid for the user, so we can identify this user and get to their board everytime
  • username=xxx: Set the name of the user so others can see it on their participants
  • deleteOldUsers=xxx: Delete old users on this board, which are older than xxx minutes.
  • conferenceServer=xxx: Change the audio/video server to this URL
  • bg=<URL encoded path to image>: You can load an image (make sure CORS is allowed). The image is loaded only once, once loaded it will stay unless you delete it from the board.
  • bgw=<optional|width of image in pixels> To scale the image you can use this parameter, if not set, no scaling is done.
  • bgh=<optional|height of image in pixels>To scale the image you can use this parameter, if not set, no scaling is done.
  • xAxis=<optional|top left coordinate>To place the image somewhere other than the left corner, use this parameter
  • yAxis=<optional|top left coordinate>To place the image somewhere other than the left corner, use this parameter
  • teacher=true Set for the originator of the board (so they can create the board, students cannot join until they create)
  • readOnly=true Set the board to read only, for example, after the class so the students can view it not edit
  • boardName=xxx: Set the name of the board to something, only works before the board is created
  • resetStore=true: Any value will reset the storage, so you can start a new session fresh. Please use userEmail in conjunction with this option to make sure the users get to the right page
  • userEmail=<EMAIL>: Get the profile of the teacher or student from the email automatically.
  • simpleMode=true: Start the simple mode version of whiteboard.chat
  • collabMode=true: Start whiteboard.chat in collaboration mode.
  • Example of image:
&bg=https%3A%2F%2Fi.imgur.com%2Fg16lJOf.jpeg&xAxis=5&yAxis=5&bgw=500&bgh=500

Sample code included below for completeness. Please use a generated, valid UUID and your API Key in the sample below (exclude the []). The UUID doesn’t need to be known to whiteboard.chat, it just needs to be unique.

Teacher

<html>
  <head>
  </head>
  <body>
    <div style="border: 2px solid blue">
    <iframe title="Whiteboard.chat In iframe"
     style="position: relative; width: 100%; height: 100%; min-width: 1000px;"
     src="https://www.whiteboard.chat/apiaccess/createjoin/[UUID]?key=[APIKEY]&teacher=true&resetStore=true&username=teacher&userEmail=teacher@school.com"
     frameborder="0"
     allow="camera; microphone">
    </iframe>
    </div>
  </body>
</html>

Student

Please make sure to open the student html in a different browser from the teacher.

<html>
  <head>
  </head>
  <body>
    <div style="border: 2px solid blue">
    <iframe title="Whiteboard.chat In iframe"
     style="position: relative; width: 100%; height: 100%; min-width: 1000px;"
     src="https://www.whiteboard.chat/apiaccess/createjoin/[UUID]?key=[APIKEY]&resetStore=true&username=student&userEmail=student@school.com"
     frameborder="0"
     allow="camera; microphone">
    </iframe>
    </div>
  </body>
</html>

Advanced REST API

You can use the following REST API to get details about the interactions. You can get the students engagement metrics and what they are doing on the board including when they placed objects, what type of objects and what was the idle time.

[
    {
        "id": "90bd7004-6ceb-4f30-977e-926ca44deee5-pgNum-1",
        "name": "unsaved", // name of the board
        "createdAt": "2023-05-23T02:14:03.955Z",  // When the board was created
        "updatedAt": "2023-05-23T02:14:03.955Z",
        "Objects": {
            "items": [
                {
                    "objType": "freeHandDraw", // what kind of object
                    "updatedAt": "2023-05-23T02:14:10.605Z", //when was it last updated
                    "createdAt": "2023-05-23T02:14:10.742Z", //when was it created
                    "deleted": null, //if the object is deleted or now
                    "userId": "99a1f717-2213-44e1-9146-1265277c6be1", //the system generated id of the object
                    "creatorName": "Generated2 Monet" // name of the creator
                },
                {
                    "objType": "image",
                    "updatedAt": "2023-05-23T02:14:14.437Z",
                    "createdAt": "2023-05-23T02:14:14.567Z",
                    "deleted": null,
                    "userId": "99a1f717-2213-44e1-9146-1265277c6be1",
                    "creatorName": "Generated2 Monet"
                }
            ],
            "nextToken": null
        },
        "savedOwner": null,
        "parentID": "90bd7004-6ceb-4f30-977e-926ca44deee5",
        "pageNumber": 1, //page number
        "Users": { // list of users on the board
            "items": [
                {
                    "UserProfile": null,
                    "name": "Student1",
                    "content": {
                        "localID": "b9cb70b3-49c7-4b89-b843-ffb83057f85f",
                        "peerID": "9cc4bb8a-0b5e-4e98-a375-c0642eca2dfb",
                        "color": "#F0728A"
                    }
                },
                {
                    "UserProfile": null,
                    "name": "Generated2 Monet",
                    "content": {
                        "localID": "99a1f717-2213-44e1-9146-1265277c6be1",
                        "peerID": "94dc1b11-628b-4e0a-b68c-4846033198a2",
                        "color": "#EF6C35"
                    }
                }
            ],
            "nextToken": null
        },
        "Classroom": "90bd7004-6ceb-4f30-977e-926ca44deee5",
        "CreatorLocalID": "99a1f717-2213-44e1-9146-1265277c6be1",
        "isGroup": false,
        "deleted": null
    },
    {
        "id": "b0827245-c2d7-4ff3-9de1-63fd991802db-pgNum-1",
        "name": "unsaved:Stu",
        "createdAt": "2023-05-23T02:14:29.331Z",
        "updatedAt": "2023-05-23T02:14:29.331Z",
        "Objects": {
            "items": [
                {
                    "objType": "freeHandDraw",
                    "updatedAt": "2023-05-23T02:14:35.186Z",
                    "createdAt": "2023-05-23T02:14:35.323Z",
                    "deleted": null,
                    "userId": "d9eb0f63-ded2-4965-8bf9-f70b985b1599",
                    "creatorName": "Stu"
                }
            ],
            "nextToken": null
        },
        "savedOwner": null,
        "parentID": "b0827245-c2d7-4ff3-9de1-63fd991802db",
        "pageNumber": 1,
        "Users": {
            "items": [
                {
                    "UserProfile": null,
                    "name": "Stu",
                    "content": {
                        "localID": "d9eb0f63-ded2-4965-8bf9-f70b985b1599",
                        "peerID": "50c9b024-923d-4685-84c9-4cb6e4007def",
                        "color": "#9F8FCE"
                    }
                }
            ],
            "nextToken": null
        },
        "Classroom": "90bd7004-6ceb-4f30-977e-926ca44deee5",
        "CreatorLocalID": "d9eb0f63-ded2-4965-8bf9-f70b985b1599",
        "isGroup": false,
        "deleted": null
    },
    {
        "id": "b844ceee-ed91-4d0c-94e1-565e38983018-pgNum-1",
        "name": "unsaved:Student1",
        "createdAt": "2023-05-28T14:19:52.845Z",
        "updatedAt": "2023-05-28T14:19:52.845Z",
        "Objects": {
            "items": [
                {
                    "objType": "object",
                    "content": {
                        "grid": true,
                        "gridSize": 40,
                        "drawPaper": true
                    },
                    "updatedAt": "2023-05-28T14:44:38.520Z",
                    "createdAt": "2023-05-28T14:44:38.747Z",
                    "deleted": null,
                    "userId": "b9cb70b3-49c7-4b89-b843-ffb83057f85f",
                    "creatorName": "Student1"
                },
                {
                    "objType": "object",
                    "updatedAt": "2023-05-28T14:20:00.406Z",
                    "createdAt": "2023-05-28T14:20:00.568Z",
                    "deleted": null,
                    "userId": "b9cb70b3-49c7-4b89-b843-ffb83057f85f",
                    "creatorName": "Student1",
                    "content": {
                        "type": "calc"
                    }
                },
                {
                    "objType": "object",
                    "content": {
                        "palette": true,
                        "drawPaper": true,
                        "source": "https://beta.whiteboard.chat/mani/1Block.png"
                    },
                    "updatedAt": "2023-05-28T14:39:33.593Z",
                    "createdAt": "2023-05-28T14:39:33.752Z",
                    "deleted": null,
                    "userId": "b9cb70b3-49c7-4b89-b843-ffb83057f85f",
                    "creatorName": "Student1"
                }
            ],
            "nextToken": null
        },
        "savedOwner": null,
        "parentID": "b844ceee-ed91-4d0c-94e1-565e38983018",
        "pageNumber": 1,
        "Users": {
            "items": [
                {
                    "UserProfile": null,
                    "name": "Student1",
                    "content": {
                        "localID": "b9cb70b3-49c7-4b89-b843-ffb83057f85f",
                        "peerID": "d95dd233-1a0f-4c46-866b-27ac613f9fbb",
                        "color": "#F0728A"
                    }
                }
            ],
            "nextToken": null
        },
        "Classroom": "90bd7004-6ceb-4f30-977e-926ca44deee5",
        "CreatorLocalID": "b9cb70b3-49c7-4b89-b843-ffb83057f85f",
        "isGroup": false,
        "deleted": null
    }
]

--

--

Pawan Uberoy
epiphani

Written by Pawan Uberoy

60 Followers
Editor for

Help

Status

About

Careers

Press

Blog

Privacy

Terms

Text to speech

Teams