Requirements
To install our widget, first, sign in to our dashboard . If you don't have an account, feel free to request access .
Load the snippet on your website
Replace "YOUR_PROJECT_ID_HERE"
with your project ID.
Paste the updated snippet into the <head>
section of your website.
Copy <!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>
Failing to replace the project ID will prevent the SDK from working correctly.
When copying the snippet code to your website, make sure to replace "YOUR_PROJECT_ID_HERE"
with your actual project ID.
You can find your project ID in the dashboard under Settings > General .
Advance integrations
If you are using a framework, please check the corresponding guide just below
React Next.js Vue Angular Google Tag Manager Segment.io
Integrate Jimo in your React.js app
Here is a way to load the snippet with React:
Copy // 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.
Integrate Jimo in your Next.js app
Here is a way to load the snippet with Next.js:
Copy // _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.
Integrate Jimo in your Vue app
Here is a way to load the snippet with Vue
Copy 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.
Integrate Jimo in your Angular app
Here is a way to load the snippet with Angular:
Copy 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.
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
Copy this._ngZone.runOutsideAngular(() => {
window['jimo'].push(...); // Any SDK calls
});
Integrate Jimo using Google Tag Manager
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
Access Settings > Installation and locate the “Setup with Google Tag Manager” section.
Setup Google Tag Manager
1.Click on Connect to “Google Tag Manager”
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:
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
Copy declare module globalThis {
interface Window {
// Types for Jimo
jimo:
| {
push: (args: [string, string, (string | number | object)[]]) => void;
}
| Array<[string, string, (string | number | object)[]]>;
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 :
Copy 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
Install with Google Tag Manager
Integrate Jimo using Google Tag Manager
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
Access Settings > Installation and locate the “Setup with Google Tag Manager” section.
Setup Google Tag Manager
Click on Connect to “Google Tag Manager”
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: