Developer

Vtioc Whiteboard Iframe Developer APIs.

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://whiteboard.vitoc/whiteboard/[BOARD_UUID]?key=[DEVELOPER_KEY]&user_type=tutor />

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
  • user_id=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
  • user_type=tutor Set for the originator of the board (so they can create the board, students cannot join until they create)
  • boardName=xxx: Set the name of the board to something, only works before the board is created
  • email=<EMAIL>: Get the profile of the teacher or student from the email automatically.
  • 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="VTIOC.Whiteboard In iframe"
    style="position: relative; width: 100%; height: 100%; min-width: 1000px;"
    src="https://whiteboard.vitoc/whiteboard/[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://whiteboard.vitoc/students/[UUID]?key=[APIKEY]&resetStore=true&username=student&userEmail=student@school.com"
    frameborder="0"
    allow="camera; microphone">
    </iframe>
    </div>
  </body>
</html>