> For the complete documentation index, see [llms.txt](https://help.usejimo.com/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.usejimo.com/docs/for-developers/for-developers/install-our-sdk.md).

# Install our SDK

## Requirements

To install our widget, first, [sign in to our dashboard](https://i.usejimo.com/). If you don't have an account, feel free to [request access](https://i.usejimo.com/register).

## Load the snippet on your website

1. Copy the snippet code.
2. Replace `"YOUR_PROJECT_ID_HERE"` with your project ID.
3. Paste the updated snippet into the `<head>` section of your website.

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Your website</title>

  <!-- Paste Jimo snippet here -->
  <script>
    (function(j,i,m,o) {
        if (j["jimo"] != null) {
          return;
        }

        var s = document.createElement("script");

        s.type = "text/javascript";
        s.async = true;
        s.src = "https://undercity.usejimo.com/jimo-invader.js";
        
        j['jimo'] = [];
        j['JIMO_PROJECT_ID'] = "YOUR_PROJECT_ID_HERE";

        document.getElementsByTagName("head")[0].appendChild(s);
    })(window);
  </script>

</head>
<body>
  
</body>
</html>
```

{% hint style="warning" %} <mark style="color:red;">Failing to replace the project ID will prevent the SDK from working correctly.</mark>

When copying the snippet code to your website, make sure to replace `"YOUR_PROJECT_ID_HERE"`with your actual project ID.&#x20;

You can find your project ID in the dashboard under **Settings > General**.
{% endhint %}

### Command buffering

The snippet creates a global command queue (`j['jimo'] = []`) before the Jimo script itself loads. Any SDK command you push is stored in this queue and processed once Jimo initializes: the `identify` command runs first, then the other queued commands are applied in order.

In practice, you can safely push your `set` commands and finish with `identify` right after the snippet, without waiting for Jimo to be ready. See [Identify users](/docs/for-developers/for-developers/sdk-guides/identify-users.md) for the recommended pattern.

***

### Advance integrations

If you are using a framework, please check the corresponding guide just below

{% tabs %}
{% tab title="React" %}
*<mark style="color:blue;">Integrate Jimo in your React.js app</mark>*

Here is a way to load the snippet with React:&#x20;

```jsx
// For project using Hook component
useEffect(() => {
    if (window.jimo != null) {
      return;
    }
    window.jimo = [];
    
    const s = document.createElement('script');

    s.type = 'text/javascript';
    s.async = true;
    s.src = "https://undercity.usejimo.com/jimo-invader.js";
    window['JIMO_PROJECT_ID'] = "ID_OF_YOUR_PROJECT"; // Update this
    document.getElementsByTagName('head')[0].appendChild(s);
}, []);



// For project using Class component
async componentDidMount() {
    if (window.jimo != null) {
      return;
    }
    window.jimo = [];
    
    const s = document.createElement('script');

    window.jimo = [];
    s.type = 'text/javascript';
    s.async = true;
    s.src = "https://undercity.usejimo.com/jimo-invader.js";
    window['JIMO_PROJECT_ID'] = "ID_OF_YOUR_PROJECT"; // Update this
    document.getElementsByTagName('head')[0].appendChild(s);
}
```

If you are using Typescript, you can find additional typings below.
{% endtab %}

{% tab title="Next.js" %}
*<mark style="color:blue;">Integrate Jimo in your Next.js app</mark>*

Here is a way to load the snippet with Next.js:

```javascript
// _app.js

import Script from "next/script";
import "../styles/globals.css";

export default function App({ Component, pageProps }) {
  return (
    <>
      <Script
        id="jimo-widget"
        strategy="afterInteractive"
        dangerouslySetInnerHTML={{
          __html: `
          (function(j,i,m,o) {
              if (j["jimo"] != null) {
                return;
              }
        
              var s = document.createElement("script");
      
              s.type = "text/javascript";
              s.async = true;
              s.src = "https://undercity.usejimo.com/jimo-invader.js";
              
              j['jimo'] = [];
              j['JIMO_PROJECT_ID'] = "ID_OF_YOUR_PROJECT";
              
              document.getElementsByTagName("head")[0].appendChild(s);
          })(window);`,
        }}
      />
      <Component {...pageProps} />
    </>
  );
}
```

If you are using Typescript, you can find additional typings bellow.
{% endtab %}

{% tab title="Vue" %}
*<mark style="color:blue;">Integrate Jimo in your Vue app</mark>*

Here is a way to load the snippet with Vue

```javascript
new Vue({
    mounted: () => {
        if (window.jimo != null) {
          return;
        }
        window.jimo = [];
        
        const s = document.createElement('script');

        s.type = 'text/javascript';
        s.async = true;
        s.src = "https://undercity.usejimo.com/jimo-invader.js";
        window['JIMO_PROJECT_ID'] = "ID_OF_YOUR_PROJECT"; // Update this
        document.getElementsByTagName('head')[0].appendChild(s);
    }
}).$mount('#app')
```

If you are using Typescript, you can find additional typings bellow.
{% endtab %}

{% tab title="Angular" %}
*<mark style="color:blue;">Integrate Jimo in your Angular app</mark>*

Here is a way to load the snippet with Angular:

```javascript
import { Renderer2, OnInit, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';

class MyComponent implements OnInit {

    constructor(
        private _renderer2: Renderer2, 
        @Inject(DOCUMENT) private _document: Document
    ) { }

    public ngOnInit() {
        if (window.jimo != null) {
            return;
        }
        window.jimo = [];
        
        const script = this._renderer2.createElement('script');

        window['JIMO_PROJECT_ID'] = "ID_OF_YOUR_PROJECT"; // Update this
        script.type = 'application/ld+json';
        script.type = 'text/javascript';
        script.async = true;
        script.src = "https://undercity.usejimo.com/jimo-invader.js";
        this._renderer2.appendChild(this._document.body, script);
    }
}
```

If you are using Typescript, you can find additional typings bellow.

{% hint style="warning" %}
A performance impact may be seen, with Angular 18 and bellow, due to the Angular Change Detection mechanism. In order to prevent this, make sure to encapsulate each call to the Jimo SDK method like so

```javascript
this._ngZone.runOutsideAngular(() => {
    window['jimo'].push(...); // Any SDK calls
});
```

{% endhint %}
{% endtab %}

{% tab title="Google Tag Manager" %}
*<mark style="color:blue;">Integrate Jimo using Google Tag Manager</mark>*

In this notice, we will see how to install Jimo using Google Tag Manager. This feature allows you to create a tag in one of your containers automatically. You can choose only to create the tag or also publish the tag to your Google Tag Manager workspace and make it live.

***

### Go to the installation page <a href="#go-to-the-installation-page" id="go-to-the-installation-page"></a>

Access [Settings > Installation](https://i.usejimo.com/settings/install/portal) and locate the “Setup with Google Tag Manager” section.

***

### Setup Google Tag Manager <a href="#setup-google-tag-manager" id="setup-google-tag-manager"></a>

1. 1.Click on Connect to “Google Tag Manager”
2. 2.Select a GTM account.
3. 3.Select a GTM container
4. 4.Click to create the tag *If you want to publish it at the same time, click on “Create and publish tag for me now”* *Note that this might require extra permissions from your Google Tag Manager Administrator*

Here is an example of a GTM setup:<br>

<figure><img src="https://2283895109-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ1pi3sC2zIV5o9Oa46Aq%2Fuploads%2FY3nxb2Xa8PouwCiiXGbT%2FSet-up%20w%3A%20Google%20Tag%20Mng.png?alt=media&amp;token=ffab7c8e-6fb1-45d5-a612-5032aaf18524" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Segment.io" %}
You can install Jimo using the [Jimo Action Integration](https://segment.com/docs/connections/destinations/catalog/actions-jimo/).

Follow the [Get Started section](https://segment.com/docs/connections/destinations/catalog/actions-jimo/#getting-started) of the integration to inject the script using Segment.io.
{% endtab %}
{% endtabs %}

### Typescript

After being injected into your app, Jimo adds some properties to the `window` object.

To prevent linter errors in your project, update (or create) your `global.d.ts` file and add the following types

```typescript
declare module globalThis {
  interface Window {
    
    // Types for Jimo
    jimo:
      | {
          push: (args: [string, string, (string | number | object | boolean)[]]) => void;
        }
      | Array<[string, string, (string | number | object | boolean)[]]>;
    jimoInit: function;
    jimoKill: function;
    JIMO_PROJECT_ID: string;
    JIMO_MANUAL_INIT: boolean;
    JIMO_SESSION_TOKEN: string;
    JIMO_CHANGELOG_PRELOAD: boolean;
    JIMO_DEFAULT_TRIGGER_HIDDEN: boolean;
  }
}
```

### Domain Whitelisting

To prevent CSP (Content Security Policy) errors or if your platform requires some sort of domain whitelisting to load external resources, you will need to add the following domains for Jimo to work properly :

```
i.usejimo.com
res.usejimo.com
stormwind.usejimo.com
undercity.usejimo.com
assets.usejimo.com
karabor.usejimo.com
karabor-undercity.usejimo.com
karabor-undercity-cf.usejimo.com
*.usejimo.com
api.iconify.design
api.simplesvg.com
api.unisvg.com
```

Here is an example of setup incluging CSP per directives :

```
script-src 'self' 'unsafe-inline' https://undercity.usejimo.com;
style-src 'self' 'unsafe-inline' https://undercity.usejimo.com;
connect-src 'self' https://karabor.usejimo.com https://karabor-undercity.usejimo.com https://karabor-undercity-cf.usejimo.com https://api.iconify.design https://api.simplesvg.com https://api.unisvg.com;
frame-src 'self' https://i.usejimo.com https://stormwind.usejimo.com https://*.usejimo.com;
img-src 'self' data: https://res.usejimo.com https://assets.usejimo.com;
font-src 'self' data: https://res.usejimo.com https://assets.usejimo.com;
media-src 'self' https://res.usejimo.com https://assets.usejimo.com;
```

***

## Install with Google Tag Manager

*<mark style="color:blue;">Integrate Jimo using Google Tag Manager</mark>*

In this notice, we will see how to install Jimo using Google Tag Manager. This feature allows you to create a tag in one of your containers automatically. You can choose only to create the tag or also publish the tag to your Google Tag Manager workspace and make it live.

***

### Go to the installation page <a href="#go-to-the-installation-page" id="go-to-the-installation-page"></a>

Access [Settings > Installation](https://i.usejimo.com/settings/install/portal) and locate the “Setup with Google Tag Manager” section.

***

### Setup Google Tag Manager <a href="#setup-google-tag-manager" id="setup-google-tag-manager"></a>

1. Click on Connect to “Google Tag Manager”
2. Select a GTM account.
3. Select a GTM container
4. Click to create the tag *If you want to publish it at the same time, click on “Create and publish tag for me now”* *Note that this might require extra permissions from your Google Tag Manager Administrator*

Here is an example of a GTM setup:

<figure><img src="https://2283895109-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ1pi3sC2zIV5o9Oa46Aq%2Fuploads%2FyIY438sM1AFBHzvZgOtf%2Fimage.png?alt=media&amp;token=a30d03f0-bded-458d-98f4-4d7f11ad6940" alt=""><figcaption></figcaption></figure>

## Self Hosting

You can host the javascript snippet loaded into your application in order to increase the control you have over which version of Jimo runs in your app.

{% hint style="warning" %}
Please keep in mind that self hosting our snippet might increase the risk of bugs since you will not get the latest updates and bug fixes automatically.

We highly recommend to **update your files at least once per month.**
{% endhint %}

### Download our javascript sources

You will have to host **two javascript files**.\
You can find and download them directly from their public URLs&#x20;

* <https://undercity.usejimo.com/jimo-invader.js>
* <https://undercity.usejimo.com/jimo-main.js>

### Update your snippet setup

In order for Jimo to start using your self hosted scripts, please find the following line in your Jimo setup

```javascript
"https://undercity.usejimo.com/jimo-invader.js";
```

and replace it with&#x20;

```javascript
"https://your-domain.com/jimo-invader.js";
```

Finally, please add the following `window` variable

```javascript
window["JIMO_CUSTOM_CDN_DOMAIN"] = "your-domain.com";
```

You are all setup!

### Check that everything works normally

Follow this quick checklist to make sure everything is correctly setup.&#x20;

1. In your browser, open a page where Jimo is installed
2. Open the browser Dev Tool and go to the Network tab
3. Use the JS filter to see only requests that loads a javascript file
4. Look for a request with this url `https://your-domain.com/jimo-invader.js`&#x20;
5. Look for a request with this url `https://your-domain.com/jimo-main.js`

### Upgrade your version

In order to upgrade your version you only need to [#download-our-javascript-sources](#download-our-javascript-sources "mention") again and update your hosted files.

***

## Next step: identify your users

Once the snippet is live, set up user identification to link sessions to your own user IDs and unlock segmentation. Follow the [Identify users guide](/docs/for-developers/for-developers/sdk-guides/identify-users.md).