Talk to us
Talk to us
menu

How to Add Digital Whiteboard for Your Apps

<strong>How to Add Digital Whiteboard for Your Apps</strong>

A digital whiteboard enables users to draw, write, and collaborate in real-time, providing an interactive platform for communication. However, adding a digital whiteboard to your app can seem daunting, especially for those lacking technical expertise.

In this article, we’ll explore the different options for integrating a digital whiteboard and provide helpful tips to ensure a smooth and successful implementation.

ZEGOCLOUD Digital Whiteboard SDK

ZEGOCLOUD, a leading provider of collaboration solutions, has introduced the Super Board SDK, a digital whiteboard SDK designed to enhance collaboration among team members.

zegocloud whiteboard for whiteboard app

The Super Board SDK provides a highly customizable and scalable tool that allows businesses to integrate digital whiteboard capabilities into their applications seamlessly. With this SDK, teams can collaborate in real time, whether remotely or in the same room.

Here are some of the Super Board SDK’s key features:

1. High-quality drawing tools

The Super Board SDK comes equipped with high-quality drawing tools, making it easy for teams to share ideas visually. Users can draw, annotate, and highlight different aspects of their ideas, making it easier to convey complex concepts.

2. Real-time collaboration

One of the most significant advantages of the Super Board SDK is its real-time collaboration capabilities. Multiple team members can work on the same digital whiteboard simultaneously, making brainstorming, planning, and executing projects easier.

3. Seamless integration

You can integrate the Super Board SDK into existing applications, making it a flexible solution for businesses of all sizes. It supports multiple platforms, including desktop and mobile, making it accessible across different devices.

4. Customizable user interface

The Super Board SDK’s user interface is highly customizable, allowing businesses to tailor it to their needs. They can choose different themes, colors, and fonts to make them fit seamlessly into their existing application.

5. Robust security features

ZEGOCLOUD takes security seriously and has implemented robust features into the Super Board SDK. All data is encrypted, ensuring that sensitive information remains safe and secure.

How to Add Digital Whiteboard with ZEGOCLOUD SDK

Adding a digital whiteboard to your application is now easier than ever with ZEGOCLOUD’s SDK. Let’s see how to do this step by step.

Preparation

  • A ZEGOCLOUD developer account – Sign up
  • A computer with multimedia and internet support
  • Understanding of web development

1. Download the SDK

Downloading the ZegoSuperBoard SDK and ZegoExpress-Video SDK is a simple process using NPM. Just run the code provided below to obtain the necessary SDKs and take advantage of their powerful features.

npm i zego-superboard-web

npm i zego-express-engine-webrtc

2. Integrate the SDK

Here’s the JS code to integrate ZEGOCLOUD’s Super Board SDK into your project:

import { ZegoSuperBoardManager } from 'zego-superboard-web';

import {ZegoExpressEngine} from 'zego-express-engine-webrtc'

3. Initialize the SDKs

We added two SDKs via NPM. We have to initialize them to take full advantage of their enormous functionality.

ZegoExpress-Video SDK

Instantiate the ZegoExpressEngine class using your AppID and Server URL from the ZEGOCLOUD Admin Console.

// Initialize the ZegoExpressEngine instance
const zg = new ZegoExpressEngine(appID, server);

ZegoSuperBoard SDK

Retrieve the ZegoSuperBoard instance using getInstance in ZegoSuperBoardManager, then initialize the SDK with the ZegoExpressEngine instance by calling the init method. Start using ZegoSuperBoard SDK with ease.

<!-- Parent container to be mounted to -->
<div id="parentDomID"></div>
// Obtain the ZegoSuperBoard instance.
zegoSuperBoard = ZegoSuperBoardManager.getInstance();
// Initialize ZegoSuperBoard. 

const result = await zegoSuperBoard.init(zg, {
    parentDomID: 'parentDomID', // D of the parent container to be mounted to.
    appID: 0, // The AppID you get.
    userID: '', // User-defined ID
    token: '' // The Token you get that is used for validating the user identity.
});

4. Configure and monitor event callbacks

Tailor the event callbacks to suit your application requirements by monitoring them after initializing the SuperBoard. These include error notifications, remote addition, deletion, and switching of whiteboard files.

// Callback of the listening-for error.     zegoSuperBoard.on('error', function(errorData) {
        // Error code, error prompt
        conosole.log(errorData.code, errorData.message)
    });

// Monitor paging and scrolling in the whiteboard via event listeners.

zegoSuperBoard.on('superBoardSubViewScrollChanged', function(uniqueID, page, step) {

    });
// You can listen for the remote operation of zooming in or out on a whiteboard.

zegoSuperBoard.on('superBoardSubViewScaleChanged', function(uniqueID, scale) {

    }); 

// Remote whiteboard addition event listener.

zegoSuperBoard.on('remoteSuperBoardSubViewAdded', function(uniqueID) {

    });

// Monitor the remote whiteboard destruction operation.

zegoSuperBoard.on('remoteSuperBoardSubViewRemoved', function(uniqueID) {

    });

// Listen for remote whiteboard switching.

zegoSuperBoard.on('remoteSuperBoardSubViewSwitched', function(uniqueID) {

    });
// Listen for remote Excel sheet switching.

zegoSuperBoard.on('remoteSuperBoardSubViewExcelSwitched', function(uniqueID, sheetIndex) {

    });

// Listen for remote whiteboard permission changes.

zegoSuperBoard.on('remoteSuperBoardAuthChanged', function(data) {
        console.log(data.scale, data.scroll)
    });

// Listen for remote whiteboard element permission changes.

zegoSuperBoard.on('remoteSuperBoardGraphicAuthChanged', function(data) {        
        console.log(data.create, data.delete, data.move, data.update, data.clear)
    });

5. Log in to a room

To access a room, use the loginRoom the method with the following parameters: roomID, token, userID, and userName. Additionally, you can provide a configuration object as necessary. If the roomID is non-existent, a new room will be created, and login will occur automatically when the method is called.

const result = await zg.loginRoom(roomID, token, {userID, userName}, {userUpdate: true});

6. Create a whiteboard

SuperBoard supports two types of whiteboards: common and file-based. A common whiteboard can be created by specifying its width, height, and number of pages, while a file whiteboard is created based on an existing file. Login must be successful before creating a whiteboard; only then can a whiteboard be created.

Note: A maximum of 50 whiteboards can be created in a room; if a room already contains 50 whiteboards, whiteboard creation will fail. To determine the current number of whiteboards in a room, use the querySuperBoardSubViewList method.

Create a common whiteboard

const model = await zegoSuperBoard.createWhiteboardView({
    name: '', // Whiteboard name
    perPageWidth: 1600, // Whiteboard page width
    perPageHeight: 900, // Whiteboard page height
    pageCount: // Page count of a whiteboard
});

Create a file whiteboard

To create a file-based whiteboard, retrieve fileID the file first. Please consult Shared File Management for instructions on how to upload the file.

// Whiteboard creation requires successful login to a room.

const model = await zegoSuperBoard.createFileView({
    fileID // fileID of a file, which is the unique identifier returned after a file is successfully uploaded. 
});

7. Mount the current whiteboard

If a client logs in to a room with a whiteboard, the ZegoSuperBoard SDK cannot mount the whiteboard to the parent container because it does not know if it exists. After a successful login, ensure that the parent container exists and use the querySuperBoardSubViewList and switchSuperBoardSubView APIs to notify and mount the whiteboard to the parent container.

// Obtain SuperBoardSubViewList.
const superBoardSubViewList = await zegoSuperBoard.querySuperBoardSubViewList();

// Obtain SuperBoardView.
const superBoardView = zegoSuperBoard.getSuperBoardView();

// Obtain the current SuperBoardSubView.
const zegoSuperBoardSubView = superBoardView.getCurrentSuperBoardSubView()

// Obtain the model corresponding to SuperBoardSubView.
const model = zegoSuperBoardSubView.getModel();

// Obtain a uniqueID of the whiteboard to be mounted.
const uniqueID = model.uniqueID;

// Get the file type and obtain sheetIndex for Excel whiteboard.

let sheetIndex;
const fileType = model.fileType;
if (fileType === 4) {
    // Excel whiteboard
    const sheetName = zegoSuperBoardSubView.getCurrentSheetName();
    // Retrieve the list of sheets for the current Excel file.
    const zegoExcelSheetNameList = zegoSuperBoardSubView.getExcelSheetNameList();
    // To get the sheetIndex from zegoExcelSheetNameList, use the corresponding sheetName.
    sheetIndex = zegoExcelSheetNameList.findIndex(function(element, index) {
        return element === sheetName;
    });
}

// Mount the current whiteboard.
const result = await superBoardView.switchSuperBoardSubView(uniqueID, sheetIndex);

8. Verify whiteboard creation

To test the project, run it on multiple devices and log in to the same room ID. Use your mouse to draw within the ZegoSuperBoardView on any window, and the drawing will be displayed on the ZegoSuperBoardView of the other window.

9. Destroy a whiteboard

The ZegoSuperBoard SDK will automatically switch to another whiteboard after the current one is destroyed.

const result = await zegoSuperBoard.destroySuperBoardSubView(uniqueID)

Run a Demo

If you want to add digital whiteboard capabilities to your apps, you can download the sample demo to get started.

You may also like: How to Draw on Whiteboard with ZEGOCLOUD SDK

Conclusion

Adding digital whiteboard capabilities to your apps is a great way to enhance user engagement and improve collaboration. With ZEGOCLOUD SDK, integrating this feature is easy with just a few steps. Whether you need a standard or file whiteboard, ZEGOCLOUD SDK has got you covered. Start adding digital whiteboards to your apps today and see the difference they can make!

Talk to Expert

Learn more about our solutions and get your question answered.

Talk to us

Take your apps to the next level with our video APIs

Free Trial
  • 10,000 minutes for free
  • 4,000+ corporate clients
  • 3 Billion daily call minutes

Stay updated with us by signing up for our newsletter!

Don't miss out on important news and updates from ZEGOCLOUD!

* You may unsubscribe at any time using the unsubscribe link in the digest email. See our privacy policy for more information.