# Inserting Javascript into DOM

The following example walks through how you can load a remotely hosted script into your integration.  A great example of this technique is the official [Google Maps integration](https://github.com/polarityio/google-maps).

To start you will need to add a `vendor.js` file to your integration config file.

{% code title="config/config.js" %}

```
javascript: [
    './vendor/vendor.js'       
]
```

{% endcode %}

Once you've updated your config, create the `vendor.js` file in the appropriate location.  In our example, we will be including the google maps API which is hosted by Google. We will need to include an API Key which we have configured as an option on the integration. Since we are using integration options as part of our code, we will need to implement the logic inside the `onSettingsChange` method.  This way, anytime the user updates their API key, we will be able to update the Google Maps API with the correct API Key value.

To start, we will declare a variable that will hold our API script object.  In addition, we will register a function with the `onSettingsChange` hook which will call our function `initGoogleMaps` anytime the integration option values for the user change.  The `onSettingsChange` method will always be called once when the integration first loads in the client.

{% code title="vendor/vendor.js" %}

```javascript
'use strict';

//remember the script element we add so that we can remove it on apikey change
let googleMapsApiScript = null;

//load the google maps api script and add it to the head
function initGoogleMaps(integration, userConfig, userOptions) {

}

onSettingsChange(initGoogleMaps);
```

{% endcode %}

Next we'll need to implement our `initGoogleMaps` method.  The first thing we'll do is remove any previous version of the API that might be present.  We check to see if the `googleMapApiScript` variable has been previously set.  If it has, we remove the script element that was set.

```javascript
  //remove an already existing script tag
  if (googleMapsApiScript !== null) {
    document.getElementsByTagName('head')[0].removeChild(googleMapsApiScript);
  }
```

After ensuring that any previous script has been removed, we can add our script in.  First we check to make sure the user has set an API Key option.  If the option exists, we go ahead and insert our script into the `head` element of the web page and save the resulting element.

```javascript
  if (typeof userOptions.apikey !== 'undefined' && userOptions.apikey.length > 0) {
    //add the google map script element to the head of the document
    let script = document.createElement('script');
    script.setAttribute('src', 'https://maps.googleapis.com/maps/api/js?key=' + userOptions.apikey);
    document.getElementsByTagName('head')[0].appendChild(script);

    //remember the element
    googleMapsApiScript = script;
  }
```

{% hint style="info" %}
The `vendor.js` file is being run in the Overlay Window so adding a script to the `head` of the document will modify the HTML for the Overlay Window itself.
{% endhint %}

The final `vendor.js` file will look like this.

{% code title="vendor/vendor.js" %}

```javascript
'use strict';

//remember the script element we add so that we can remove it on apikey change
let googleMapsApiScript = null;

//load the google maps api script and add it to the head
function initGoogleMaps(integration, userConfig, userOptions) {
  //remove and already existing script tag
  if (googleMapsApiScript !== null) {
    document.getElementsByTagName('head')[0].removeChild(googleMapsApiScript);
  }

  if (typeof userOptions.apikey !== 'undefined' && userOptions.apikey.length > 0) {
    //add the google map script element to the head of the document
    let script = document.createElement('script');
    script.setAttribute('src', 'https://maps.googleapis.com/maps/api/js?key=' + userOptions.apikey);
    document.getElementsByTagName('head')[0].appendChild(script);

    //remember the element
    googleMapsApiScript = script;
  }
}

// onSettingsChange is called once when the integration loads and then
// anytime the settings are changed
onSettingsChange(initGoogleMaps);
```

{% endcode %}


---

# 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.polarity.io/integrations/build-an-integration/vendor/inserting-javascript-into-dom.md?ask=<question>
```

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.