# Import the Meeting SDK for web
Import the Meeting SDK for web into your project via npm or the Meeting SDK CDN.
## Import via npm
If you [installed the Meeting SDK via npm](/docs/meeting-sdk/web/get-started#install-from-npm), import `ZoomMtg` in the component file where you want to use the Meeting SDK:
```javascript
import { ZoomMtg } from "@zoom/meetingsdk";
```
## Import via CDN
If you [installed the Meeting SDK via the CDN](/docs/meeting-sdk/web/get-started#install-from-cdn), `ZoomMtg` should already be available in the window.
## Init the Meeting SDK
In your component file, add the following JS functions to load the WebAssembly assets:
```js
// loads WebAssembly assets
ZoomMtg.preLoadWasm();
ZoomMtg.prepareWebSDK();
```
### Dependent assets
The parameter in the `setZoomJSLib` function determines where to find the Meeting SDK WebAssembly assets.
- Set to `https://source.zoom.us/{VERSION_NUMBER}/lib` to use the Zoom hosted assets.
- To self-host these assets, pass in your own URL where you are hosting the assets. Find the [assets here](https://github.com/zoom/meetingsdk-web/tree/master/dist/lib/av). **Be sure to update these assets each time you upgrade the SDK. Each version includes updated assets in the SDK package.**
Set `patchJsMedia` to `true` in `client.init` to point to the latest branch of the dependent assets, instead of a specific version. This allows you to receive hot fixes within the dependent assets automatically. By default, `patchJsMedia` is `false`.
See the [SDK reference](https://marketplacefront.zoom.us/sdk/meeting/web/modules/ZoomMtg.html) for the full set of `ZoomMtg` properties.
## Using Angular
When using the SDK with Angular, you must run the SDK [outside the Angular zone](https://angular.io/guide/zone#ngzone-run-and-runoutsideofangular) and set up a `zone-flags.ts` file to disable unnecessary change detection and avoid performance issues.
In the `src` directory, create a `zone-flags.ts` file and add the following code:
```javascript
// disable patching requestAnimationFrame
(window as any).__Zone_disable_requestAnimationFrame = true;
// disable patching specified eventNames
(window as any).__zone_symbol__UNPATCHED_EVENTS = ['message'];
```
Then, in your `angular.json` file in the polyfills array, add `"src/zone-flags.ts"` before zone.js.
```json
"polyfills": [
"src/zone-flags.ts",
"zone.js"
]
```
Also add it to your tsconfig.app.json file in the include array:
```javascript
"include": [
"src/**/*.d.ts",
"src/zone-flags.ts"
]
```
Finally, in your file where you are calling the `init` and `join` functions, run them outside the Angular zone. See the example for details.
### Meeting SDK for web client view Angular example
```js
import { Component, NgZone } from '@angular/core';
import { ZoomMtg } from '@zoom/meetingsdk';
ZoomMtg.preLoadWasm();
ZoomMtg.prepareWebSDK();
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(private ngZone: NgZone) {
}
// ...
join() {
this.ngZone.runOutsideAngular(() => {
ZoomMtg.init({
leaveUrl: leaveUrl, // https://example.com/thanks-for-joining
success: (success) => {
ZoomMtg.join({
signature: signature, // role in SDK signature needs to be 1
meetingNumber: meetingNumber,
passWord: passWord,
userName: userName,
zak: zakToken, // the host's ZAK token
success: (success) => {
console.log(success)
},
error: (error) => {
console.log(error)
}
})
},
error: (error) => {
console.log(error)
}
})
})
}
// ...
}
```
## Appended DOM elements
When imported, the Meeting SDK client view adds new elements to the DOM to handle client overlays and accessibility elements. The following elements are added to the end of ``:
```html
```
When `ZoomMtg.init()` is called, additional DOM elements are appended to include core in-meeting UI and functions:
##### index.html
```html
```
To show or hide the meeting UI from your app, target `#zmmtg-root` directly:
```javascript
const zoomMeetingSDK = document.getElementById("zmmtg-root");
// To hide
zoomMeetingSDK.style.display = "none";
// To show
zoomMeetingSDK.style.display = "block";
```
## Avoid CSS conflicts in host applications
Because the SDK injects the previously shown elements into your host document and loads its own stylesheet (based on Bootstrap and React Select), SDK styles and host styles can collide in either direction.
Conflicts are especially likely when the host uses a CSS reset, a utility-first framework such as Tailwind CSS, or a component library such as Bootstrap or MUI, which redefine base selectors (`body`, `*`, headings, `button`) that the SDK also relies on.
Mitigate this using one of the following options, listed by isolation strength, strongest first.
### Option 1 - Dedicated route or subdomain (recommended)
Mount client view on a dedicated route (for example, `/meeting`) or subdomain (for example, `meeting.example.com`) that does not load your application's global CSS framework or reset. Because the SDK and your host UI never coexist on the same page, conflicts cannot occur.
### Option 2 - iFrame embed
Embed client view in an `