Customizing the Zoom embedded client (react)

I want to integrate the participant UX for webinars, in our website. Ideally, we can schedule a webinar using the standard zoom app, and the presenter would use the app as well. But for the participants, we’d like them to be able to go to a specific page on our site, and join that meeting, without them needing to know/care meeting id, password, etc etc.

I was able to do something close to this (albeit with meetings, since we have not yet paid for webinars until we can test this out):

  1. I created a server-to-server app, and our backend uses the meeting API to get a specific meeting’s details (e.g. password).
  2. I create a “General App” that our website’s react frontend uses to embed the zoom client.

However, the embedded zoom client has some functionality enabled (such as being able to see a list of participants). We require that participants not be able to see who the other participants are. But I could not find a way to disable these options using the web SDK (I was only able to see basic configuraiton in the EmbeddedClient docs, such as changing the background.)

Is there perhaps a different way that we can integrate the zoom client on our site that allows for more flexibility as to which components of the zoom client we show?

Which Web Meeting SDK version?
Using @zoom/meetingsdk v 3.8.5.

1 Like

Hi @alex-ghst, welcome, thanks for posting :wave:

All of this is possible and we have a ton of developers doing exactly this. Good on you for figuring out the server-to-server app for the API requests and General App for the Meeting SDK features… we’re working on making that clearer in our docs.

There are some features that just cannot be customized; we require, for example, all users to have access to security features in a Meeting. But it reads to me that you just need to be testing out the Webinar UI. Seeing that the email you use here on this forum has the apps you’re referring to, I’ve gone and added a free trial for the webinar features to your account. I’ll DM you if you have any account-specific questions.

You’ll just need to assign webinar licenses to your user account. From there, you’ll be able to create a webinar in the web or standard Zoom app and join it from your site.

Hi @michael.zoom ! Thank you so much for the webinar trial, I’ll give it a try and let you know how it goes.

Hi @michael.zoom , thanks again for letting us try out the webinar integration.

I’ve created and started a webinar using the zoom app.

On our backend, we’re fetching the /webinar/:id API to get the password of the webinar. We return those details, along with the JWT, to our web client app.

This scheme worked for meetings, but now that I’m trying it for webinars, I’m getting this error on the client.join() method:

  1. errorCode: 200
  2. reason: “Fail to join the meeting.”
  3. type: “JOIN_MEETING_FAILED”

I searched the forums for others having this issue, but I haven’t found an issue with how we’re crafting the request.

I am passing these parameters to the client.join() call:

sdkKey: "kq...." (our general app client id)
signature: (our token from the backend)
meetingNumber: "926..." (the webinar id, here as a string)
password: "2..." (the webinar password)
userName: "some_user",
userEmail: "someuser@...."

Our JWT token has these parameters:

appKey:  "A6L...." (our server to servier client id)
sdkKey: same value as appKey
mn: "926..." (the webinar id, here as a string)
role: 0 (participant)
tokenExp: (now + 1900 seconds)

We are signing the token wth HS256 (HMAC-SHA256).

(This JWT was working just fine with my previous trial with a meeting vs webinar.)

Any help would be appreciated!

@alex-ghst, is the webinar started and are you attempting to join as a participant?

Is role in the signature set to 0?

Docs: Joining Webinars via Client View in Web SDK

@michael.zoom yes, the webinar is started, I am trying to join as participant, and role is 0 in the JWT. (The full list of params is in my prev message, if that helps.)

Hmm. Let me try to reproduce this (I’m stepping out for the afternoon but will loop back).

Can you try a few things -

  1. Can you use set sdkKey in the signature to the general app client ID, not the server to server app? (these are separate apps)
  2. Make sure the sdkKey is the Production client ID of the general app
  3. Remove appKey from the JWT

If this doesn’t work, I’ll loop back trying to reproduce.

I’d also try joining as the host. This might be a little extra effort, you just need to get the ZAK token for the user.

Hi @michael.zoom

Remove appKey from the JWT

Done!

Can you use set sdkKey in the signature to the general app client ID, not the server to server app?

It looks like that is what I was using already:

sdkKey: “kq…” (our general app client id)

I also presume I am going to sign the key with the general app client id + secret.

Make sure the sdkKey is the Production client ID of the general app

I see. I was using the dev one. If I use the prod one, I get a “invalid signature” error code 3712. Does the prod app need to be published? (We are not intending to publish an app in the marketplace, just allow us to integrate the viewer in our site.)

1 Like

@michael.zoom this is super important for us so pinging this again :slight_smile:

Hi @michael.zoom , I tried a few more things:

I’ve just tried joining the webinar using the sample zoom repos: meetingsdk-react-sample connecting to meetingsdk-react-sample, both using my General App id and secret (production). I am getting the same error as I did with the version I coded for my site.

I have also tried joining as the host, by setting the userEmail in the token to the presenter’s email (e.g. my email), role set to 1, and adding a zak token I obtained via the https://api.zoom.us/v2/users/:id/token?type=zak API, but that fails too:

errorCode: 200
reason: "Not support start meeting via tokens"
type: "JOIN_MEETING_FAILED"

Hey @alex-ghst, I’m going to DM you to share a signature value so I can take a look, thanks for working through this.

1 Like