# Integrating zoom web sdk breaks existing bootstrap features.?

**URL:** <https://devforum.zoom.us/t/integrating-zoom-web-sdk-breaks-existing-bootstrap-features/13661>\
**Category:** Web\
**Created:** [April 17, 2020, 11:21am UTC](https://devforum.zoom.us/t/integrating-zoom-web-sdk-breaks-existing-bootstrap-features/13661 "2020-04-17T11:21:59Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![punya.pradeep94](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/punya.pradeep94/32/4141_2.png) [@punya.pradeep94](https://devforum.zoom.us/u/punya.pradeep94)\
**Post date:** [April 17, 2020, 11:21am UTC](https://devforum.zoom.us/t/integrating-zoom-web-sdk-breaks-existing-bootstrap-features/13661/1 "2020-04-17T11:21:59Z")

</div>

Hi,

I am trying to integrate zoom web sdk in my angular application. I integrated it using CDN method. After integration, the existing styles/bootstrap features are not working. Modal popups are not working. What will be the cause of this issue?

---

<div class="post-metadata">

**Author:** ![tommy](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/tommy/32/72769_2.png) [@tommy](https://devforum.zoom.us/u/tommy)\
**Post date:** [April 19, 2020, 6:44am UTC](https://devforum.zoom.us/t/integrating-zoom-web-sdk-breaks-existing-bootstrap-features/13661/2 "2020-04-19T06:44:05Z")

</div>

Hey @punya.pradeep94,

Please see the Angular Sample App here: [https://github.com/zoom/websdk-sample-angular](https://github.com/zoom/websdk-sample-angular)

Make sure your bootstrap styles are imported after the sdk styles.

Thanks,  
Tommy

---

<div class="post-metadata">

**Author:** ![desarrollos.nit](https://avatars.discourse-cdn.com/v4/letter/d/e495f1/32.png) [@desarrollos.nit](https://devforum.zoom.us/u/desarrollos.nit)\
**Post date:** [April 20, 2020, 7:51pm UTC](https://devforum.zoom.us/t/integrating-zoom-web-sdk-breaks-existing-bootstrap-features/13661/3 "2020-04-20T19:51:17Z")

</div>

What about when the integration is via NPM, @tommy?

I took that other way and i have the same issue and @punya.pradeep94  
Integration with my current theme (on Angular 9) is not good at all, it causes quite important visual interferences on both directions (my page **built over BS 4** gets affected and Zoom UI as well).

Is it currently impossible to coexist or integrate webSDKK on an existing project built over Bootstrap 4, for example?

On the other hand, some other js error are prompted on the console but that is secondary at this point for me cause may be related to this attempt of integration.

Are there any rules about the isolation of the SDK that must be in consideration or is currently not possible such integrations, such us with existing project with newer BS versions than 3.1.1 ?

Thanks a lot!  
Best regards.

---

<div class="post-metadata">

**Author:** ![punya.pradeep94](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/punya.pradeep94/32/4141_2.png) [@punya.pradeep94](https://devforum.zoom.us/u/punya.pradeep94)\
**Post date:** [April 21, 2020, 5:33am UTC](https://devforum.zoom.us/t/integrating-zoom-web-sdk-breaks-existing-bootstrap-features/13661/4 "2020-04-21T05:33:08Z")

</div>

@tommy, The solutions does not seem to be working.

@desarrollos.nit I am still facing the issues like yours. I have no idea how to resolve this issue. After integrating Zoom Web SDK, the scroll effect is also not working.

@tommy, Could you please suggest some solution ?

Thanks,  
Punya

---

<div class="post-metadata">

**Author:** ![tommy](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/tommy/32/72769_2.png) [@tommy](https://devforum.zoom.us/u/tommy)\
**Post date:** [April 21, 2020, 9:21am UTC](https://devforum.zoom.us/t/integrating-zoom-web-sdk-breaks-existing-bootstrap-features/13661/5 "2020-04-21T09:21:34Z")

</div>

Hey @desarrollos.nit, @punya.pradeep94,

The Web SDK does not play well with custom styling. It was designed to be a standalone page.

Your best bet is to host it on a seperate isolated path or sub domain that does not affect your sites CSS.

Utilize the leaveUrl to navigate back to your main web app after the meeting ends.

There will be a No-UI Web SDK in the future.

Thanks,  
Tommy

---

<div class="post-metadata">

**Author:** ![desarrollos.nit](https://avatars.discourse-cdn.com/v4/letter/d/e495f1/32.png) [@desarrollos.nit](https://devforum.zoom.us/u/desarrollos.nit)\
**Post date:** [April 21, 2020, 12:06pm UTC](https://devforum.zoom.us/t/integrating-zoom-web-sdk-breaks-existing-bootstrap-features/13661/6 "2020-04-21T12:06:51Z")

</div>

Thanks @tommy!  
That would the way meanwhile you release a new version which isolates, makes it fully responsive, etc. as i’ve seen in other posts you’re working on and i suscribed to just to be updated.

Thanks again.

---

<div class="post-metadata">

**Author:** ![punya.pradeep94](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/punya.pradeep94/32/4141_2.png) [@punya.pradeep94](https://devforum.zoom.us/u/punya.pradeep94)\
**Post date:** [April 21, 2020, 8:16pm UTC](https://devforum.zoom.us/t/integrating-zoom-web-sdk-breaks-existing-bootstrap-features/13661/8 "2020-04-21T20:16:48Z")

</div>

@tommy,

I created a standalone angular application for zoom, then embedded that in my existing angular application using iframe. On leaving the meeting , i want to navigate to my parent angular application. Is it possible?

Thanks,  
Punya

---

<div class="post-metadata">

**Author:** ![tommy](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/tommy/32/72769_2.png) [@tommy](https://devforum.zoom.us/u/tommy)\
**Post date:** [April 23, 2020, 2:18am UTC](https://devforum.zoom.us/t/integrating-zoom-web-sdk-breaks-existing-bootstrap-features/13661/9 "2020-04-23T02:18:14Z")

</div>

Hey @desarrollos.nit,

Happy to help! Yes we are working on a more customizable Web SDK. 🙂

-Tommy

---

<div class="post-metadata">

**Author:** ![tommy](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/tommy/32/72769_2.png) [@tommy](https://devforum.zoom.us/u/tommy)\
**Post date:** [April 23, 2020, 2:19am UTC](https://devforum.zoom.us/t/integrating-zoom-web-sdk-breaks-existing-bootstrap-features/13661/10 "2020-04-23T02:19:27Z")

</div>

Hey @punya.pradeep94,

You can also checkout the Angular Sample App here:

> **[zoom/websdk-sample-angular](https://github.com/zoom/websdk-sample-angular)**
>
> Use the Zoom Web SDK in an Angular App. Contribute to zoom/websdk-sample-angular development by creating an account on GitHub.

After meeting you can navigate to parent app via the `leaveUrl`.

> <https://github.com/zoom/websdk-sample-angular/blob/master/src/app/app.component.ts#L56>

Thanks,  
Tommy

---

<div class="post-metadata">

**Author:** ![DeveloperBot](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/developerbot/32/12632_2.png) [@DeveloperBot](https://devforum.zoom.us/u/DeveloperBot)\
**Post date:** [August 21, 2020, 8:53pm UTC](https://devforum.zoom.us/t/integrating-zoom-web-sdk-breaks-existing-bootstrap-features/13661/11 "2020-08-21T20:53:45Z")

</div>

Closed on August 21, 2020, 8:53pm UTC


