Documentation
Collaborative Whiteboard
Quick starts
Integration

Integrate the SDK

Last updated：2022-03-22 13:06

1 Set up the development environment

Make sure your development environment meets the following requirements:

A Windows or macOS device that is connected to the internet.
Your application must run on HTTPS. In a development environment, you can use localhost or 127.0.0.1.
Use a browser that is supported by the SDK, as listed in the following table:

Platform	Browser	Supported OS version
Windows	Chrome	Windows 7 or later
macOS	Chrome	macOS 10.10 or later
iOS	Safari	iOS 10.0 or later
iOS	WeChat Embedded Browser	iOS 10.0 or later
Android	Chrome	Android 8.0 or later
Android	WeChat Embedded Browser	Android 8.0 or later

2 Prerequisites

If you need the file sharing feature, download the ZegoDocsView SDK.

3 Integrate the SDK

3.1 Optional: Create a new project

Skip this step if you already have a project.

Create a project folder with the following folder structure:

├── index.html
├── sdk
├── js
│ └── index.js
└── css
    └── index.css

Index.html: the index page of the project.
sdk: the directory where the ZegoWhiteboardView SDK files are located.
js/index.js: the JavaScript code of the ZegoWhiteboardView SDK.
css/index.css: the style sheet of the index page.

Copy the following code into the index.html file.

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ZegoWhiteboardView</title>
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <div id="app"></div>
    <script src="./js/index.js"></script>
</body>
</html>

Run and test the project.

For testing, you can run the project on your local web server (localhost or 127.0.0.1). In production, your web server needs to serve over https.

a. Open Terminal, and run npm i live-server -g to install live-server.

b. Run cd to go to the root directory of the project.

c. Run live-server . to launch the default browser and automatically open the index.html page.

3.2 Download the SDK

3.2.1 Download the SDK from ZEGO's website

Download the latest version of the SDK from the Whiteboard SDK downloads page.

3.2.2 Install the SDK via NPM

npm i zego-express-whiteboard-web

The package installed via npm supports TypeScript language (recommended).

3.3 Import the SDK

Import the SDK using the <script> tag.

<script src="ZegoExpressWhiteboardWeb.js"></script>

import {ZegoExpressEngine} from'zego-express-whiteboard-web';
// or
const ZegoExpressEngine = require('zego-express-whiteboard-web').ZegoExpressEngine;