Integrate Web-SDK with vue-project

I have trouble in integrating zoom web sdk with Vue project.
I follow the zoom documents in intergrating through sdk but keep getting [$ is not defined] error
I can make zoom web sdk work smoothly by include script of zoom globally in index.html (through CDN) but, I can not when including it in a vue component

Moreover, I have some questions about destroy zoom frame, everytime we receive responses from zoom web sdk, it can be shown through zoom frame, but I want to show actively through my modals. but I don’t know how to destroy the zoom frame, or showing message through my site, because zoom frame may overlap my site
Below is the way I want to show error message

section.zoom-item //- Overlay Mask to prevent embedded zoom player being clicked .overlay-mask

//- Spinner
.loading-mask(v-if="!errorMessage")
spinner(size=“8em”)

//- Main Player
.zoom-iframe(v-if="!errorMessage" :class="{show: loading}")
zoom-frame(:nickname=“username” :meetingId=“meetingNumber” :password=“password” @error=“showingError”)

.messages-wrapper(v-show=“errorMessage”)
h1 {{ errorMessage }}
p(v-if=“errorMessage”) {{ decodeURIComponent(item.url) }}

Hey @giangthse62424,

Thanks for reaching out, happy to help.

In regards to the ‘not defined’ error you’re seeing, can you provide some additional details (browser console errors, screenshot), as well as your full code snippet or a link to your repo? I’m happy to take a closer look, and this will help me to debug.

As for your inquiry on the Zoom Frame, are you referring to iFraming the SDK? If so, I should note that this is not officially supported, and we recommend implementing the Web SDK in its entirety, outside of any iFrames.

Thanks,
Will

Hi Will. Thanks so much for your reply. I’m currently fixing the error

And about the second question, the thing I really want to focus on is the ability of auto-generating zmmtg-root

to init zoom. Is there any way for us to append zmmtg-root
into a specific tag?

One more thing that is there any chance for us to disable showing options bar from zoom, I just want to show video and audio only from zoom


Best regards,
John Halliwell

Hey @giangthse62424,

to init zoom. Is there any way for us to append zmmtg-root into a specific tag?

Are you referring to an HTML tag or something else?

One more thing that is there any chance for us to disable showing options bar from zoom, I just want to show video and audio only from zoom

While you can’t remove the entire options bar, you can hide certain things like the participants/invite button (see this post).

You can also consider hiding some of these with custom CSS, if you wish.

Let me know if this helps!

Best,
Will

Yes, now zmmtg-root append to body. But I want to append to a specific HTML tag, like a div

And do we have any Event Listener or something like that for listening End Meeting event?
I tried but found nothing about that


The above image is the error that I’ve got when integrating into my project. I have a zoom component and another component that is rendered continuously.


Seem like this error happens when I’m removing Zmmtg-root tag in before destroy hook and rerender the zoom component

Hey @giangthse62424,

The Zmmtg-root is created and appended automatically. If you remove it, you will run into issues.

You can however, use CSS to hide and show it when you would like, take the Angular sample app for example:

As for the event listener, we do have the inMeetingServiceListener, you can read more about it here:

Please let me know if you are running into any other issues.

Thanks,
Tommy

Hi @tommy, This error comes from when rerendering the component which imports zoom SDK, although it runs well in the first time render

Hi @tommy, lately, I see Zoom up to date info about Zoom Fully Customizable SDK, I don’t know really well the differences between the Zoom Web SDK and Zoom Fully Customizable SDK?
One more thing: I want to build an app that supports users who can just only show active zoom meetings on their web browser like a TV show. What’s the best thing for this idea to keep the session of accessing zoom meetings without reaching API limit when users can turn on/turn off multiple times
In other words, is there any chance for us to get streaming data from zoom meetings instantly (when the user provides meeting id and password)

Hey @giangthse62424,

The Web SDK is not designed to be re-rendered, and could have issues.

Here are the differences :slight_smile:

Great question, have you considered embedding a live stream of the meeting on the site?

Thanks,
Tommy