Zoom Meeting Custom Ui

acceluser8866 · July 9, 2020, 9:35am

content is always added in div with id zmmtg-root present in the body even if it’s hidden and there is another div with the same ID in my component. Can you please let me know if there is any workaround to fix this issue?

tommy · July 13, 2020, 10:12pm

Hey @acceluser8866,

This is the expected flow.

Thanks,
Tommy

samadhan.madane31 · July 14, 2020, 3:43am

Hello @tommy ,
Since the zoom web SDK doesn’t support full UI customization.
So I’m trying to host it on different instance and embedding the same instance as iframe in my main app.
for example, my main app is running on http://localhost:3000 and zoom SDK app is on http://localhost:3001, both are react application.

for embedding iframe in main app component -
iframe src=“http://localhost:3001/?(meeting details query params here)” height=“some height” width=“some width”

Then I’m reading the search params from iframe url in zoom SDK app, and launching zoom meeting.

Using this iframe method, I’m getting responsive zoom web sdk in my main app.
But is there any other way by which we can achieve responsive zoom container in main app itself?

I tried adding zoom component in main app itself, but because of global css for zoom web sdk, its breaking main app styles.

Could you please help me to get zoom web sdk as responsive in main app only?

tommy · July 15, 2020, 10:23pm

Hey @samadhan.madane31,

Checkout my response here on how best to handle the Web SDK not over ridding your current CSS:

Feel free to add your own CSS to meet your responsive needs until we make it more responsive.

Thanks,
Tommy

samadhan.madane31 · July 16, 2020, 12:59pm

Hi @tommy,
Thanks for the response,
I have to embed the zoom meeting as iframe in my main page. This iframe will display zoom container which is on separate path of same react application.
I want to go back on previous main page after leaving the meeting.
Suppose my main page is running on - localhost:3000/class-page?status=meetingStart
and embedding iframe on main page which is running on - locahost:3000/zoom-meeting-room
When meeting ends if I give leaveUrl as localhost:3000/class-page?status=meetingEnded then it redirects in iframe itself and displays main page content in iframe.
I want to redirect to localhost:3000/class-page?status=meetingEnded on main page url and depend on param status, I will decide what to display after meeting ends.

How can I achieve this?

tommy · July 20, 2020, 8:00pm

Hey @samadhan.madane31,

Unfortunately the Web SDK was not intended to be used within iFrames. That being said, the supported way to redirect to a page after a meeting is to use the leaveUrl property, and not use the Web SDK inside an iFrame.

Thanks,
Tommy

tchap · August 5, 2020, 9:52am

Hey @tommy

I have a similar use case as the one discussed here, and I’m wondering about your previous comment

Unfortunately the Web SDK was not intended to be used within iFrames.

This is surprising as it seems that it is used in an iframe in the Sample App (here). Is there something I’m missing?

tommy · August 6, 2020, 5:43pm

Hey @tchap,

Let me double check what that iFrame code is doing in the sample app.

Thanks,
Tommy

tommy · August 10, 2020, 6:52pm

Hey @tchap,

At a high level, this is a way to see how the WebSDK will look like in an iframe, however, using the Web SDK in an iFrame is not officially supported or fully tested.

Thanks,
Tommy

js.balucan · August 24, 2020, 12:07am

Hi @tommy

We’re currently using zoom in our tech stack. While we’ve currently resorted to your suggestion of navigating the user to a separate path, this breaks our users’ current flow (ongoing meeting while continuously performing actions on our site).

I understand that Zoom’s Custom UI for Web is in the roadmap, but can you at least give us an indication on when you plan to make this available? Is it this year? Is it next year? What quarter? Is it even a priority? This is so we can properly align and let our board know if and when it would even be possible. Video calling while navigating our website is core to our product. As such, having an open ended timeline for this makes it really difficult to justify sticking to the tech stack.

Thank you for your understanding.

tommy · August 24, 2020, 10:23pm

Hey @js.balucan,

Apologies, but we currently do not have a timeline set in stone. We will share updates here:

Thanks,
Tommy

cestaufelipe08 · November 11, 2020, 3:41am

Hi, any update about this?

tommy · November 11, 2020, 7:09pm

Hey @cestaufelipe08,

Yes, we do have the new Fully Customizable SDK if you would like to customize the whole experience.

In short, this gives you access to the raw audio and video feeds, and then you put your custom frontend in place.

Thanks,
Tommy

cestaufelipe08 · November 11, 2020, 9:48pm

Hi,
I need it so that the styles from the SDK don’t break the styles on my site. But from what I read if I modify the SDK they will no longer be Zoom meetings, in that case what solution do I have?
Thanks,
Felipe

shivam.khanna · November 12, 2020, 3:58pm

When I integrated the Zoom in Angular, it attached to body. Is there anyway to set zoom into a div.

tommy · November 13, 2020, 8:01pm

Hey @cestaufelipe08, @shivam.khanna,

In that case where you want to use the Client Web SDK but don’t want the CSS affected on your site, you can see the solution here:

Thanks,
Tommy

shivam.khanna · November 17, 2020, 6:58am

hey @tommy

I want to integrate zoom web sdk inside my application in Angular, but whenever I try to do this the Zoom div always get attached to body. The structure of my app looks like something like this

Header
Zoom Div
Footer

I’m not able to achieve this, everytime I try to implement this way Zoom div get attached to root level and also I wan’t to alert user for leave meeting when user closes or refreshes the tab, but I 'm not able to achieve that.

I had looked for so many resources at your dev forum but nothing helped much. I hope you will be able to solve my issue.

tommy · November 17, 2020, 6:43pm

Hey @shivam.khanna,

Have you taken a look at the Web SDK Angular Sample App? It shows how to show and hide the Web SDK. That being said, you cannot customize where the Web SDK gets attached.

Thanks,
Tommy

lovenco0410 · March 18, 2021, 6:43am

Hi @tommy
That css is not work for me.

I want to this can split by grid
My css was copied above

Thanks,
LamNV

MaxM · March 19, 2021, 7:48pm

Hey @lovenco0410,

Make sure that you include the CSS to hide the #zmmtg-root element:

Then, you change the display to block before initializing the meeting:

github.com

zoom/websdk-sample-angular/blob/3e69a04cb8dd5fffa468955b0f93bb3d36012298/src/app/app.component.ts#L53


    } else {
      console.log(data)
    }
  }).catch((error) => {
    console.log(error)
  })
}

startMeeting(signature) {

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

  ZoomMtg.init({
    leaveUrl: this.leaveUrl,
    isSupportAV: true,
    success: (success) => {
      console.log(success)

      ZoomMtg.join({
        signature: signature,
        meetingNumber: this.meetingNumber,

Let me know if that helps

Thanks,
Max

Topic		Replies	Views
Resizing the zoom UI window Web	5	2613	August 21, 2020
Customize Embedded Zoom with Component View in 2.2.0 Web	6	2312	May 5, 2022
Use iframe to launch and join meeting on website Web faq	9	3294	June 24, 2021
Resize Embedded Zoom with Component View in 2.0.1 Web	22	4416	February 14, 2022
Modify size of components Web	2	557	November 27, 2021

Zoom Meeting Custom Ui

Related Topics