# Web Component
This page will give you an introduction on how to get started using the Map Template as a Web Component. In this guide you will learn how to install and use the Web Component step by step.
### Using NPM
Install the package:
`npm install @mapsindoors/map-template@stable`
In your script:
```javascript
import MapsIndoorsMap from '@mapsindoors/map-template/dist/mapsindoors-webcomponent.es.js';
window.customElements.define('mapsindoors-map', MapsIndoorsMap);
```
In your styles, make sure to give it a size. For example:
```css
mapsindoors-map {
display: block;
width: 100vw;
height: 100dvh;
}
```
Use the Web Component in your HTML:
```html
```
Add attributes to the Web Component as needed (see supported properties below).
**Note!** The `external-IDs` and `app-user-roles` expect an array, which in a Web Component is handled differently (see example below).
In your script, define the array of external IDs that you want to be shown on the Map Template. Then get a hold of the `mapsIndoorsMapElement` using the `document.querySelector()` method. When you have the `mapsIndoorsMapElement`, assign its prop `externalIDs` the array of External IDs that you defined at the beginning.
```javascript
const externalIDsArray = ["externalID-1", "externalID-2"]
const mapsIndoorsMapElement = document.querySelector('mapsindoors-map')
mapsIndoorsMapElement.externalIDs = externalIDsArray;
```
### Using just the browser
```html
My Map
```
Add attributes to the Web Component as needed ([see list](https://docs.mapsindoors.com/products/fast-track-maptemplate/configuration)).
Use query parameters to configure the Web Component by setting the `supports-url-parameters` attribute to `true` in your `mapsindoors-map` component.