Web SDK for meetings. Chat is not working in Chrome and Chromium

Meeting SDK Type and Version: (type) Client View and (version) 2.6.0

In the meeting client view, when clicking on Chat. Its opening a side bar with nothing in it.
I want to chat to other people in the meeting. I am not able to do that.

No error message

How To Reproduce
Steps to reproduce the behavior including:
*1. Open Chrome or Chromium
*2. Join the meeting using meeting sdk from React
*3. Click on Chat button below on the bottom bar
*4. See that side bar is opening with nothing in it

Please dont close this post. Kindly go through it and reply.


Welcome to the Developer Forum! Can you share a screenshot of what you are seeing when clicking on chat? This will help to diagnose what may be happening.

I have shared a screenshot of what happens when I click on chat. It shows an empty side bar.

Here is my code:

import React, { Component } from ‘react’;
import { connect } from ‘react-redux’;
import { lessons, payment } from ‘…/…/…/actions’;

import { ZoomMtg } from ‘@zoomus/websdk’;
import KJUR from ‘jsrsasign’;

import ‘@zoomus/websdk/dist/css/bootstrap.css’;
import ‘@zoomus/websdk/dist/css/react-select.css’;

import ‘./index.css’;

import $ from ‘jquery’;

class Meeting extends Component {
constructor(props) {

this.generateSignature = this.generateSignature.bind(this);
this.showZoomDiv = this.showZoomDiv.bind(this);
this.startMeeting = this.startMeeting.bind(this);
this.handleUnload = this.handleUnload.bind(this);


showZoomDiv = () => {
document.getElementById(‘zmmtg-root’).style.display = ‘block’;

handleUnload = () =>{

componentDidUpdate = () => {
console.log(“comp update”);

componentDidMount = () => {

ZoomMtg.setZoomJSLib('https://source.zoom.us/2.6.0/lib', '/av');

// loads language files, also passes any error messages to the ui

//this.props.getMeetingId().then(result => {
  //  var id = result.id;
    //console.log("meeting id: " + id);

    //var password = result.password;
    //console.log("meeting password: " + password);

    var id = 88367540064; //parseInt(localStorage.getItem("meetingId"));
  var sign = 0;
  var password = 0;


    var sign = this.generateSignature(id);
    this.startMeeting(sign, id, password);

//passcode not required for meeting type 3 recurrent

generateSignature = (/sdkKey, sdkSecret,/ meetingNumber/, role/) => {

const iat = Math.round((new Date().getTime() - 30000) / 1000)
const exp = iat + 60 * 60 * 2
const oHeader = { alg: 'HS256', typ: 'JWT' }

const oPayload = {
  sdkKey: 'xxxxxx',
  mn: meetingNumber,//meetingNumber,
  role: 1,
  iat: iat,
  exp: exp,
  appKey: 'xxxxxx',
  tokenExp: iat + 60 * 60 * 2

const sHeader = JSON.stringify(oHeader)
const sPayload = JSON.stringify(oPayload)
const sdkJWT = KJUR.jws.JWS.sign('HS256', sHeader, sPayload, 'xxxxxx')
return sdkJWT


startMeeting = (signature,id , passcode) => {
console.log(“here 2”);

//document.getElementById('zmmtg-root').style.display = 'block';

// setup your signature endpoint here: https://github.com/zoom/meetingsdk-sample-signature-node.js
var signatureEndpoint = 'http://localhost:4000'
// This Sample App has been updated to use SDK App type credentials https://marketplace.zoom.us/docs/guides/build/sdk-app
var sdkKey = 'xxxxxx'
var meetingNumber = id//id
var role = 1
var leaveUrl = 'https://console.skillkidz.com'
var userName = 'Skillkidz_Feby'//localStorage.getItem("userFullName")//'Skillkidz_Feby'
var userEmail = ''
var passWord = passcode
// pass in the registrant's token if your meeting or webinar requires registration. More info here:
// Meetings: https://marketplace.zoom.us/docs/sdk/native-sdks/web/client-view/meetings#join-registered
// Webinars: https://marketplace.zoom.us/docs/sdk/native-sdks/web/client-view/webinars#join-registered
var registrantToken = ''

console.log("here 2 again");

  leaveUrl: leaveUrl,
  success: (success) => {
    console.log("here 3");

      signature: signature,
      meetingNumber: meetingNumber,
      userName: userName,
      sdkKey: sdkKey,
      //userEmail: userEmail,
      //passWord: passWord,
      tk: registrantToken,
      success: (success) => {
        console.log("here 4");
        var leaveMeetingButton = document.getElementsByClassName('footer__leave-btn');

        leaveMeetingButton[0].onclick =  function() {
          console.log("leave button clicked");
            var endMeetingButtons = null
            console.log("here window event");
            endMeetingButtons = document.getElementsByClassName('leave-meeting-options__btn leave-meeting-options__btn--default');
            for (let i = 0; i < endMeetingButtons.length; i++) {
              console.log("here: " + i);
              endMeetingButtons[i].onclick = function() {
                console.log("leave confirm clicked");
                window.open('', '_self', ''); window.close();
            console.log("left meeting");
      error: (error) => {

  error: (error) => {


render() {
return (


const mapStateToProps = state => {
let error = null;
let result = null;
let studentDetails = null;
if(state.groups.errors) {
error = state.groups.errors;
} else if(state.groups.createResult){
result = state.groups.createResult.result;
} else if(state.parent.studentFromParentTable) {
console.log(“student details in redux”);
studentDetails = state.parent.studentFromParentTable;
return {

const mapDispatchToProps = dispatch => {
return {
getMeetingId: () => {
return dispatch(lessons.getMeetingId());
updatePaymentInfo: (state) => {
return dispatch(payment.updatePaymentInfo(state));
loadLessonsOfStudent: (data) => {
return dispatch(lessons.loadLessonsOfStudent(data));
markLessonsHappened: (id, status) => {
return dispatch(lessons.markLessonsHappened(id, status));
writeActualStartTime: (id) => {
return dispatch(lessons.writeActualStartTime(id));

export default connect (mapStateToProps, mapDispatchToProps) (Meeting);

@feby ,

Thank you for sharing that information! Can you also share how you are rendering the SDK in your application? Are you leveraging an IFrame? Also, please share a screenshot of the browser console when you click the chat button.

strange - normaly the chat area is white, but on your screenshot it is black

you are on linux? which browser?

have you checked with your browser a meeting direct on zoom.us with the option “Join from Your Browser”, do you see the “white” chat area

I have shared my code for integrating SDK to my React app.
I am not leveraging an iframe.
Screen shot already shared above.

Thanks for the reply, @feby! Can you also share a screenshot of the browser console when the chat is enabled?

I am on linux on Chromium.
But the same issue is seen on Mac and Windows.
I checked on both of them.

Thanks for the screenshots, @feby ! How are you importing the Meeting SDK scripts? If you are installing the SDK via NPM, you should be including the styles on the index.html if you are using a single-page app framework. Here is our documentation on this matter for your reference:

Also, you may be interested in checking out our sample react app for reference :

I have installed web meeting zoomus/websdk.

I tried running the sample react app. Here is the error I received:
I did the instructions given in README step by step for Local (I want client view for my site). When I do npm start, it gives the following error:

https false
disableCORP false

[HPM] Proxy created: /meeting.html →
:information_source: 「wds」: Project is running at
:information_source: 「wds」: webpack output is served from /static
:information_source: 「wds」: Content not from webpack is served from /home/user/Documents/skillkidz/code/test/meetingsdk-web-sample/Local
:information_source: 「wds」: 404s will fallback to /index.html
Listening at
:information_source: 「wds」: Project is running at
:information_source: 「wds」: webpack output is served from /static
:information_source: 「wds」: Content not from webpack is served from /home/user/Documents/skillkidz/code/test/meetingsdk-web-sample/Local
:information_source: 「wds」: 404s will fallback to /index.html

Listening at
throw er; // Unhandled ‘error’ event

Error: spawn chrome ENOENT
at ChildProcess._handle.onexit (node:internal/child_process:283:19)
at onErrorNT (node:internal/child_process:476:16)
at process.processTicksAndRejections (node:internal/process/task_queues:82:21)
Emitted ‘error’ event on ChildProcess instance at:
at ChildProcess._handle.onexit (node:internal/child_process:289:12)
at onErrorNT (node:internal/child_process:476:16)
at process.processTicksAndRejections (node:internal/process/task_queues:82:21) {
errno: -2,
code: ‘ENOENT’,
syscall: ‘spawn chrome’,
path: ‘chrome’,
spawnargs: [ ‘’ ]

Node.js v18.2.0

I shall including the styles in index.html

Tried including styles in index.html

Its still not working.