White is a full-platform real-time interactive whiteboard that can be used for online education, meetings, remote collaboration, design reviews, POWERPOINT presentations, and more.

Official website of White

We have made a detailed product introduction on our official website, so that users can have a deeper understanding of White’s innovation and advantages in education, collaboration, conference and other scenarios.

Click to view the official website

white web app

For individuals and small teams:

We offer the White App right out of the box. White App covers iOS, Android, Web, mini program, Windows, Mac OS and other mainstream platform applications. Users only need to register White personal account to use it.

Click to use the White web page

White console

Key customers of enterprises:

We provide the high availability White board cloud Service White Service. White Service provides one-stop Service for SDK of iOS, Android, Web and other mainstream platforms as well as for line optimization, data processing and storage distribution of cloud-related businesses. Customers only need to register White enterprise account, obtain White miniToken to prove enterprise identity, and then they can start White interactive whiteboard with one click according to the access document.

Click to view the console

Use JavaScript as an example to start quickly

Hi, dear developers, welcome to the White whiteboard. This tutorial will guide you through introducing an interactive whiteboard into your website. First, though, we assume that you already know the basic syntax of JavaScript and have a basic knowledge of HTML pages.

Create a project

First, you need to create a folder on your desktop as a workspace. We will then add some files to this workspace. Next, we create a file called index.html.


      
<html>
    <head>
        <link rel="stylesheet" href="https://sdk.herewhite.com/white-web-sdk/1.3.0.css">
        <script src="https://sdk.herewhite.com/white-web-sdk/1.3.0.js"></script>
        <script src="index.js"></script>
    </head>
    <body>
        <div id="whiteboard" style="width: 100%; height: 100vh;"></div>
    </body>
</html>
Copy the code

The introduction of resources

This page references three JavaScript resource files.

  • Sdk.herewhite.com/white-web-s… : White’s style file.
  • Sdk.herewhite.com/white-web-s… : White’s SDK file.
  • index.jsThis is the JS file that implements our business logic.

Create a whiteboard

Now we create the index.js file in the workspace.

var whiteWebSdk = new WhiteWebSdk();
var miniToken = 'WHITEcGFydG5lcl9pZD1DYzlFNTJhTVFhUU5TYmlHNWJjbkpmVThTNGlNVXlJVUNwdFAmc2lnPTE3Y2ZiYzg0ZGM5N2FkNDAxZmY1MTM0ODMxYTdhZTE2ZG Q3MTdmZjI6YWRtaW5JZD00JnJvbGU9bWluaSZleHBpcmVfdGltZT0xNTY2MDQwNjk4JmFrPUNjOUU1MmFNUWFRTlNiaUc1YmNuSmZVOFM0aU1VeUlVQ3B0UC ZjcmVhdGVfdGltZT0xNTM0NDgzNzQ2Jm5vbmNlPTE1MzQ0ODM3NDYzMzYwMA';

var url = 'https://cloudcapiv3.herewhite.com/room?token=' + miniToken;
var requestInit = {
    method: 'POST'.headers: {
        "content-type": "application/json",},body: JSON.stringify({
        name: 'my whiteboard'.limit: 100.// Room size is limited})}; fetch(url, requestInit) .then(function(response) {
        return response.json();
    })
    .then(function(json) {
        return whiteWebSdk.joinRoom({
            uuid: json.msg.room.uuid,
            roomToken: json.msg.roomToken,
        });
    })
    .then(function(room) {
        room.bindHtmlElement(document.getElementById('whiteboard'));
    });
Copy the code

Experience with

At this point, you should have two files created in your workspace.

  • index.html
  • index.js

Double-click index.html or enter the absolute path to index.html in the address bar of your browser (Chrome is recommended) to open the page.

After that, you can write on the page and you should see your handwriting. At this point, our first whiteboard application is ready.

The relevant code

You can download all the code for this chapter on Github.