# Whiteboard SDK quickstart (/en/realtime-media/whiteboard/build/set-up-and-build-your-first-app/get-started-sdk/web)
> For AI agents: see the complete documentation index at [llms.txt](/llms.txt).
Interactive Whiteboard rooms enable users to present ideas, share multi-media content, and collaborate on projects on a shared whiteboard from multiple devices simultaneously.
This article describes how to create a basic project and use the Whiteboard SDK to implement basic whiteboard features.
## Understand the tech
The following figure shows the workflow to join an Interactive Whiteboard room.
Interactive Whiteboard room joining workflow
When an app client requests to join an Interactive Whiteboard room, the app client and your app server interact with the Interactive Whiteboard server in the following steps:
1. The app server sends a request with the SDK token to the Interactive Whiteboard server to create a whiteboard room.
2. The Interactive Whiteboard server returns the room UUID to the app server when a room is created successfully.
3. The app server generates a room token using the returned room UUID and sends the room token and UUID to the app client.
4. The app client initializes a Whiteboard SDK instance with the App Identifier received from the Agora Console.
5. The app client calls a method to join the Interactive Whiteboard room using the room UUID and room token.
## Prerequisites
* A web browser that meets the minimum version requirements in [Supported platforms](../../reference/supported-platforms).
* A valid [Agora account](/en/introduction/account#sign-up-for-an-agora-account).
* An Agora project with the Interactive Whiteboard enabled. Get the app identifier and SDK token from the Agora Console. See [Enable and configure Interactive Whiteboard](./enable-whiteboard.md).
## Project setup
### Create a basic web application
```text
agora_join_whiteboard_room/
├── index.html
└── joinWhiteboard.js
```
```html
```
### Create a room
Call [/v5/rooms (POST)](../../reference/rest-api/room-management.md#create-a-room-post) on your app server to create a room.
```javascript
var request = require("request");
var options = {
"method": "POST",
"url": "https://api.netless.link/v5/rooms",
"headers": {
"token": "Your SDK Token",
"Content-Type": "application/json",
"region": "us-sv"
},
body: JSON.stringify({
"isRecord": false
})
};
request(options, function (error, response) {
if (error) throw new Error(error);
console.log(response.body);
});
```
### Generate a room token
After creating a room and getting the `uuid` of the room, your app server needs to generate a room token and send it to the app client.
* Use code. See [Generate a Token from your app server](../authenticate-users/generate-token-app-server.mdx). Recommended.
* Call the Interactive Whiteboard RESTful API. See [Generate a Room Token (POST)](../authenticate-users/generate-token-rest.md#generate-a-room-token-post).
```javascript
var request = require('request');
var options = {
"method": "POST",
"url": "https://api.netless.link/v5/tokens/rooms/",
"headers": {
"token": "Your SDK Token",
"Content-Type": "application/json",
"region": "us-sv"
},
body: JSON.stringify({"lifespan":3600000,"role":"admin"})
};
request(options, function (error, response) {
if (error) throw new Error(error);
console.log(response.body);
});
```
### Join the whiteboard room
In `index.html`, add `` right below the `` line.
Open `joinWhiteboard.js` and add the following code:
```javascript
var whiteWebSdk = new WhiteWebSdk({
appIdentifier: "Your App Identifier",
region: "us-sv",
});
var joinRoomParams = {
uuid: "Your room UUID",
uid: "user uid",
roomToken: "Your room token",
};
whiteWebSdk.joinRoom(joinRoomParams).then(function(room) {
room.bindHtmlElement(document.getElementById("whiteboard"));
}).catch(function(err) {
console.error(err);
});
```
## Reference
Open `index.html` in your browser. If the application runs successfully, you can use your mouse to write and draw on the page.