logo
Console
Call Kit
Web: JS
Overview
Quick start
Call invitation
Custom prebuilt features
Authentication and Kit Token
Powered Byspreading
On this page

Using NPM package manager

This doc works in Web engineering frameworks, and supports both PC and mobile browsers (including WebViews). You can refer to this doc if you're using React, Vue, Angular, and other frameworks.

Prepare the environment

Before you attempt to integrate the SDK, make sure that the development environment meets the following requirements:

  • The development computer with Windows or macOS is connected to the Internet.
  • A browser that meets the compatibility requirements of ZEGO Express Web SDK (To check browser compatibility, please refer to Web SDK compatibility.), it is recommended to use the latest version of Google Chrome.

Install the SDK

Untitled
npm i @zegocloud/zego-uikit-prebuilt --save
1
Copied!

Initialize the SDK

  1. First, you'll need to generate a Kit Token.

    Note

    You can skip generate Kit Token if you wanna speed up your integration testing. Remember to generate the Kit Token by referring to this when you plan to make your app go live officially.

  2. Then, replace the appID and serverSecret parameters in the following code with your project's AppID and ServerSecret that you get from Admin Console.

React
Next.js
Angular
Vue
import * as React from 'react';
import { ZegoUIKitPrebuilt } from '@zegocloud/zego-uikit-prebuilt';


function randomID(len) {
  let result = '';
  if (result) return result;
  var chars = '12345qwertyuiopasdfgh67890jklmnbvcxzMNBVCZXASDQWERTYHGFUIOLKJP',
    maxPos = chars.length,
    i;
  len = len || 5;
  for (i = 0; i < len; i++) {
    result += chars.charAt(Math.floor(Math.random() * maxPos));
  }
  return result;
}

export function getUrlParams(
  url = window.location.href
) {
  let urlStr = url.split('?')[1];
  return new URLSearchParams(urlStr);
}

export default function App() {
      const roomID = getUrlParams().get('roomID') || randomID(5);
      let myMeeting = async (element) => {
     // generate Kit Token
      const appID = ;
      const serverSecret = "";
      const kitToken =  ZegoUIKitPrebuilt.generateKitTokenForTest(appID, serverSecret, roomID,  randomID(5),  randomID(5));

    
     // Create instance object from Kit Token.
      const zp = ZegoUIKitPrebuilt.create(kitToken);
      // start the call
      zp.joinRoom({
        container: element,
        sharedLinks: [
          {
            name: 'Personal link',
            url:
             window.location.protocol + '//' + 
             window.location.host + window.location.pathname +
              '?roomID=' +
              roomID,
          },
        ],
        scenario: {
          mode: ZegoUIKitPrebuilt.GroupCall, // To implement 1-on-1 calls, modify the parameter here to [ZegoUIKitPrebuilt.OneONoneCall].
        },
      });

    
  };

  return (
    <div
      className="myCallContainer"
      ref={myMeeting}
      style={{ width: '100vw', height: '100vh' }}
    ></div>
  );
}
1
Copied!
// ... some other logic code
const { ZegoUIKitPrebuilt } = await import("@zegocloud/zego-uikit-prebuilt");
const kitToken =  ZegoUIKitPrebuilt.generateKitTokenForTest(appID, serverSecret, roomID,  randomID(5),  randomID(5));
const zp = ZegoUIKitPrebuilt.create(kitToken);
zp.joinRoom({
   container: element,
   sharedLinks: [
          {
            name: 'Personal link',
            url:
            window.location.protocol + '//' + 
            window.location.host + window.location.pathname +
              '?roomID=' +
              roomID,
          },
    ],
   scenario: {
          mode: ZegoUIKitPrebuilt.GroupCall, // To implement 1-on-1 calls, modify the parameter here to [ZegoUIKitPrebuilt.OneONoneCall].
    },
});  
// ... some other logic code
1
Copied!
import { Component, ElementRef, ViewChild } from '@angular/core';
import { ZegoUIKitPrebuilt } from '@zegocloud/zego-uikit-prebuilt';

function randomID(len:number) {
  let result = '';
  if (result) return result;
  var chars = '12345qwertyuiopasdfgh67890jklmnbvcxzMNBVCZXASDQWERTYHGFUIOLKJP',
    maxPos = chars.length,
    i;
  len = len || 5;
  for (i = 0; i < len; i++) {
    result += chars.charAt(Math.floor(Math.random() * maxPos));
  }
  return result;
}

export function getUrlParams(
  url = window.location.href
) {
  let urlStr = url.split('?')[1];
  return new URLSearchParams(urlStr);
}

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  @ViewChild('root')
  root!: ElementRef;

  ngAfterViewInit() {
      const roomID = getUrlParams().get('roomID') || randomID(5);

     // generate Kit Token
      const appID = ;
      const serverSecret = "";
      const kitToken =  ZegoUIKitPrebuilt.generateKitTokenForTest(appID, serverSecret, roomID,  randomID(5),  randomID(5));

      // Create instance object from Kit Token.
      const zp = ZegoUIKitPrebuilt.create(kitToken);

      // Start a call.
      zp.joinRoom({
        container: this.root.nativeElement,
        sharedLinks: [
          {
            name: 'Personal link',
            url:
            window.location.protocol + '//' + 
            window.location.host + window.location.pathname +
              '?roomID=' +
              roomID,
          },
        ],
        scenario: {
          mode: ZegoUIKitPrebuilt.GroupCall, // To implement 1-on-1 calls, modify the parameter here to [ZegoUIKitPrebuilt.OneONoneCall].
        },
      });
  }
}
1
Copied!
<template>
  <div id="app" ref="root"></div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue';
import { ZegoUIKitPrebuilt } from '@zegocloud/zego-uikit-prebuilt';

function randomID(len) {
  let result = '';
  if (result) return result;
  var chars = '12345qwertyuiopasdfgh67890jklmnbvcxzMNBVCZXASDQWERTYHGFUIOLKJP',
    maxPos = chars.length,
    i;
  len = len || 5;
  for (i = 0; i < len; i++) {
    result += chars.charAt(Math.floor(Math.random() * maxPos));
  }
  return result;
}

export function getUrlParams(
  url = window.location.href
) {
  let urlStr = url.split('?')[1];
  return new URLSearchParams(urlStr);
}

export default {
  name: 'App',
  components: {},
  mounted() {
      const roomID = getUrlParams().get('roomID') || randomID(5);
      // generate Kit Token
      const appID = ;
      const serverSecret = "";
      const kitToken =  ZegoUIKitPrebuilt.generateKitTokenForTest(appID, serverSecret, roomID,  randomID(5),  randomID(5));

      // Create instance object from Kit Token.
      const zp = ZegoUIKitPrebuilt.create(kitToken);
      // start the call
      zp.joinRoom({
        container: this.$refs.root,
        sharedLinks: [
          {
            name: 'Personal link',
            url:
             window.location.protocol + '//' + 
             window.location.host + window.location.pathname +
              '?roomID=' +
              roomID,
          },
        ],
        scenario: {
          mode: ZegoUIKitPrebuilt.GroupCall, // To implement 1-on-1 calls, modify the parameter here to [ZegoUIKitPrebuilt.OneONoneCall].
        },
      });
  },
};
</script>

<style>
#app {
  height: 100vh;
  width: 100vw;
}
</style>
1
Copied!

Complete code

Click the button below to get the complete code:

React
Angular
Vue

Complete parameter examples

You can also tailor the specific features by customizing parameters. The following shows the complete parameter examples:

Authentication and Kit Token

Follow the steps to generate a Kit Token.

On this page

Back to top