Unable to make customizations on Zoom SDK to fit my website

I am trying to integrate zoom into my website along with some other features of my website.(Something like zoom in half of the page and my website’s content on other half the page).

When I do the integration through sdk. It has a bad looking page on the index page of my website to join the meeting asking for meeting number & password. After that it goes to another tab and takes the complete screen just like original zoom in browser. I am unable to customize the experience.

Web Client SDK version :
v1.9.1

Screenshots :
new tab

  • Device: Laptop
  • OS: Windows 10
  • Browser: Chrome
  • Browser Version 90.0.4430.85 (Official Build) (64-bit)

I need help regarding the customization part and want my page to look as if zoom has integrated as a part of my website!

Hi @devansh30081999,

There’s also a possibility that you can embed Zoom in an iFrame, however this isn’t officially supported and can sometimes cause audio/video problems for the participant.

Zoom will be releasing a more customisable version of the Web SDK soon with v2.0, there’s also the new Video SDK which allows you to build video/audio apps from the ground up with raw video and audio data.

I hope this helps,
Alex

Thanks for the response @alexmayo

We wanted to achieve something like this :

How can I accomplish this using Zoom? If there is a way by doing it through CSS & Javascript, can you guide a bit?

Hi @devansh30081999,

No problem. For this, you would be best using the new Video SDK. This allows you to completely customise the interface and add/remove features as you wish. Information on how to get started using the Video SDK can be found here: https://marketplace.zoom.us/docs/sdk/video/introduction

There is also a sample app available for download which can give you a head start.

Thanks,
Alex

Thanks Alex!
I checked out the video SDK, but to be honest it is a very expensive for a student project.

But as I can see it already being implemented there might be some use-cases for it.

In anyway I just want Zoom to be integrated with my website as if it were a part of it. I can change the way I am currently working to accomplish that.

Like, Wordpress plugins provide the functionality, I want to implement it natively.

Any suggestions or use cases would be of great help.

Thanks!

No problem!

The Video SDK does come with 10,000 minutes free each month, so it could be completely free for you to develop it.

Unfortunately without the Video SDK there isn’t really a way to integrate the Zoom client into your website, other than having it cover the entire page, or embedded in an iFrame.

Thanks,
Alex

1 Like

Great guidance as always, Alex! :slight_smile:

When I tried embedding zoom using iframe, I am getting another error : I am not able to join meetings or even sign-in.

iframe has eliminated the sizing issue but it is not working. After getting the first page whenever I click on sign-in/sign-up/join meeting I receive this error :

How can I get it working?

Hi I am working with devansh30081999 on the original problem.

Just to give context, I found this image

on another zoom question (How to remove or hide "Full Screen" option in Zoom Web SDK). What we are trying to achieve was how it is shown in screenshot i.e. zoom in part of screen and rest of our website in remaining. We don’t want to do any custom changes to zoom web ui as such but only want to allow some other part of our website running functionally.

Could you help us achieve the same layout?

Thanks

Hi @varshit.dusad,

Looks like you found my question here.

This zoom SDK is embedded in a Moodle website. I used an iframe tag to display it here.

If you want to show the zoom video in the part of the screen just like in the picture, you can try the below example. I have used the same code for this site. You can change the width and height of the iframe tag to display it well on your website.

<div class="iframe-container" style="overflow: hidden; padding-top: 56.25%; position: relative;">
    <iframe style="border: 0; width: 50%; height: 50%; left: 0; position: absolute; top: 0; " src="./add_your_zoom_sdk_path_/index.html" frameborder="0"></iframe>
</div>

Hope it helps.

Thanks.

Thank you for sharing what worked for you @bhanukawork!

@varshit.dusad and @devansh30081999 I’ll note that the Web SDK is not designed to be displayed in an iframe and we don’t support implementing it into an iframe. Instead, it should be displayed directly on the page.

I understand there are some instances where it must be used in an iframe but you may run into issues related to browser privacy and security policies.

Thanks,
Max

Hi @MaxM,

Thanks for your time to reply to this message and it is good to know that iframes are not recommended.

Since there are issues implementing with iframes, you have suggested that it should be displayed directly on the page.

I have used the iframe method to display Zoom video on Moodle site. I would like to know if there are any best alternatives to implement Zoom Web SDK on a Moodle site.

How to display zoom video on the page of a Moodle site?

Hope you understand.

Thanks.

1 Like

Thank you so much @bhanukawork , @alexmayo and Max all of your sharing were really helpful.

Will reach you out again if any other help required :slight_smile:

4 Likes

Hey @bhanukawork,

Great question! There are a couple of options when it comes to integrating Zoom with Moodle. The easiest solution that we offer is the LTI Pro app which is found on the Zoom Marketplace.

If you’re looking to use the Web SDK so that you can display meetings directly within Moodle, I think the best option is to create a Page within Moodle. That should allow you to display HTML content for a course.

You can then follow our guide on building an app with the Web SDK and use our Sample Web App as a reference. Essentially, you would want to build a page similar to meeting.html. You can see most of the logic for that page is in meeting.js.

Please note, you’ll want to use the CDN Method when importing dependencies on the page.

Here is some more info that might help:

https://docs.moodle.org/310/en/Using_Page
https://www.umass.edu/it/support/moodle/add-html-page-a-moodle-course

Let me know if that helps.

Thanks,
Max

1 Like