# External customization of the Map Template
When using the Map Template as a React Component or as a Web Component, you can customize the application by accessing the MapsIndoors instance. To do this, listen for the `mapsIndoorsInstanceAvailable` event on the `window` object.
You can read about all the methods that can be used on the MapsIndoors Instance [here](https://app.mapsindoors.com/mapsindoors/js/sdk/latest/docs/mapsindoors.MapsIndoors.html).
1. **React Component**
To use the MapsIndoors instance within a React Component, you can create a `useEffect` hook that listens for the `mapsIndoorsInstanceAvailable` event on the `window` object.
import MapsIndoorsMap from '@mapsindoors/map-template/dist/mapsindoors-react.es.js';
import { useEffect } from 'react';
function App() {
useEffect(() => {
window.addEventListener('mapsIndoorsInstanceAvailable', () => {
window.mapsIndoorsInstance.setDisplayRule('yourLocationId', { 'polygonFillColor': '#ff69b4' })
})
}, [])
return (
<div>
<MapsIndoorsMap apiKey="yourApiKey" mapboxAccessToken="yourMapboxAccessToken" />
</div>
)
}
export default App;
2. **Web Component**
To use the MapsIndoors instance within a Web Component, include a script tag that listens for the `mapsIndoorsInstanceAvailable` event on the `window` object.
```html
```
In conclusion, integrating the Map Template as either a React Component or a Web Component allows for great customization through the MapsIndoors instance.
By listening for the `mapsIndoorsInstanceAvailable` event, you can easily access and manipulate various features of the map, enhancing the functionality and user experience of your application.
Whether you prefer working within a React framework or using the standard web components, the flexibility of the MapsIndoors instance will enable you to achieve your goals effectively.
Explore the available methods and tailor your map to fit your specific needs, ensuring a seamless and dynamic interaction for your users [here](https://app.mapsindoors.com/mapsindoors/js/sdk/latest/docs/mapsindoors.MapsIndoors.html).
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.mapsindoors.com/products/fast-track-maptemplate/external-customization-of-the-map-template.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.