### Set Custom Attributes and Refetch Posts

Source: https://help.usejimo.com/docs/for-developers/for-developers/sdk-guides/setup-the-segmentation

JavaScript examples demonstrating how to push custom key-value pairs to Jimo. Includes an option to trigger a refetch of boosted posts after the attributes are updated.

```javascript
// Example 1: Set the attribute foo and bar
window.jimo.push([ "set", "user:attributes", [ {foo : "hello", bar: "world" } ] ])

// Example 2: Set the attribute foo and bar and refetch boosted posts
window.jimo.push([ "set", "user:attributes", [ {foo : "hello", bar: "world" }, true ]])
```

--------------------------------

### Integrated User Identification and Segmentation

Source: https://help.usejimo.com/docs/for-developers/for-developers/sdk-guides/setup-the-segmentation

A comprehensive example showing the full flow of identifying a user, setting default profile information, and assigning custom segmentation attributes. This should be executed after the Jimo SDK is loaded on the login page.

```javascript
// 1️⃣ Identify the user
window.jimo.push(["identify", {
  id: "user_12345"
}]);

// 2️⃣ Set default Jimo attributes
window.jimo.push(["set", "user", {
  name: "John Doe",
  email: "john.doe@email.com"
}]);

// 3️⃣ Set custom attributes for segmentation
window.jimo.push(["set", "user:attributes", { 
  plan: "Pro",
  user_role: "Admin",
  permissions: ["edit", "publish"],
  signup_date: "2023-06-01T00:00:00Z",
  last_active_days: 12,
  browser: "Chrome",
  os: "MacOS",
  timezone: "UTC+2",
  notifications_enabled: true,
  preferred_theme: "dark"
}]);
```

--------------------------------

### Tour Started Event Example (JSON)

Source: https://help.usejimo.com/docs/for-developers/for-developers/webhooks/events

This JSON object represents an example payload for the 'tour.started' webhook event. It includes details about the event, the specific tour experience, and the user who initiated the tour. This data can be used to trigger downstream actions or logging.

```json
{
  "event": "tour.started",
  "version": "0",
  "time": 1740133655000,
  "experience": {
    "uid": "0814ae77-568d-41c0-912a-0b4c63dc03ff",
    "title": "Onboarding",
    "type": "TOUR",
    "state": "LIVE",
    "isDraft": false,
    "publishedAt": "2025-02-19T10:37:10.000Z",
    "createdAt": "2025-02-19T10:36:46.000Z",
    "expiresAt": null,
    "triggerType": "DEFAULT",
    "recurrencyType": "EVERY_TIME",
    "recurrencyValue": 1
  },
  "jimer": {
    "uid": "17dff65e-434d-4454-bb57-a1167fefbb6b",
    "identifyToken": "sam",
    "username": "Sam",
    "email": null,
    "createdAt": "2025-02-03T11:50:01.000Z",
    "lastActivityAt": "2025-02-21T10:27:35.000Z"
  }
}
```

--------------------------------

### Check Jimo Snippet Installation in Browser Console

Source: https://help.usejimo.com/docs/settings/troubleshooting

This snippet demonstrates how to check the installation status of the Jimo snippet using the browser's developer console. It helps differentiate between a missing script, an uninitialized script, and a correctly installed script.

```javascript
console.log(window.jimo);
```

--------------------------------

### Identify User with Additional Attributes (JavaScript)

Source: https://help.usejimo.com/docs/for-developers/for-developers/sdk-guides/identify-users

This code example shows how to identify a user and simultaneously set additional attributes, such as the username, using a callback function. This allows for richer user profiles and is useful when you need to associate more data with a user immediately after identification. The Jimo SDK must be installed.

```javascript
window['jimo'].push([
  'do',
  'identify',
  [
    userId,
    () => {
      window['jimo'].push(['set', 'user:name', [username]]);
    },
  ],
]);
```

--------------------------------

### Example CSV for Segment Import

Source: https://help.usejimo.com/docs/analyze/users-and-segments/import

This is an example CSV file structure for importing user segments. The first row must contain headers, with the first column recommended to be a unique identifier like 'id' or 'email'.

```csv
id,email,plan,creation_date
1,johndoe@example.com,Basic,2023-01-15
2,janedoe@example.com,Premium,2023-02-20
3,bobjohnson@example.com,Standard,2023-03-10
4,alicemiller@example.com,Basic,2023-04-05
5,charlesbrown@example.com,Premium,2023-05-25
```

--------------------------------

### Example: Identify User 'Sam' with Name (JavaScript)

Source: https://help.usejimo.com/docs/for-developers/for-developers/sdk-guides/identify-users

This is a concrete example of identifying a user with a specific UUID and setting their name to 'Sam' using the Jimo SDK's callback functionality. It illustrates the practical application of the identify command with additional user attributes. The Jimo SDK needs to be integrated into your web application.

```javascript
window['jimo'].push([
  'do',
  'identify',
  [
    "b7b8c565-65a0-4dbd-8438-3b8c8773f49f",
    () => {
      window['jimo'].push(['set', 'user:name', ["Sam"]]);
    },
  ],
]);
```

--------------------------------

### Checklist Started Event Example (JSON)

Source: https://help.usejimo.com/docs/for-developers/for-developers/webhooks/events

This JSON object represents a webhook event triggered when a user starts a checklist. It includes details about the event, the experience (checklist), and the user (jimer) who initiated the action.

```json
{
  "event": "checklist.started",
  "version": "0",
  "time": 1740142189000,
  "experience": {
    "uid": "f15155ac-814b-4281-a998-a1db77979b5f",
    "title": "First steps",
    "type": "CHECKLIST",
    "state": "LIVE",
    "isDraft": false,
    "publishedAt": "2025-02-21T12:46:20.000Z",
    "createdAt": "2025-02-21T12:46:05.000Z",
    "expiresAt": null,
    "triggerType": "DEFAULT",
    "recurrencyType": "SINGLE_TIME",
    "recurrencyValue": 1
  },
  "jimer": {
    "uid": "17dff65e-434d-4454-bb57-a1167fefbb6b",
    "identifyToken": "sam",
    "username": "Sam",
    "email": null,
    "createdAt": "2025-02-03T11:50:01.000Z",
    "lastActivityAt": "2025-02-21T12:49:37.000Z"
  }
}
```

--------------------------------

### Buffer Commands Before Jimo Initialization (JavaScript)

Source: https://help.usejimo.com/docs/for-developers/for-developers/sdk-guides/manual-initialization

Demonstrates how to buffer commands, such as user identification and setting user properties, before manually initializing Jimo. Commands are pushed to the `window.jimo` array and executed after `jimoInit()` is called.

```javascript
function launchJimo(user) {
    // Buffer some commands before initialize
    window['jimo'].push(['do', 'identify', [user.id]]);
    window['jimo'].push(['set', 'user:name', [user.username]]);
    
    // Initialize Jimo
    window.jimoInit();
}
```

--------------------------------

### Configure Jimo SDK initialization

Source: https://help.usejimo.com/docs/for-developers/for-developers/sdk-methods

Example of how to initialize the Jimo SDK with custom configuration, such as setting the default trigger state to hidden.

```javascript
<script>
  window.jimo = [];
  (function (j, i, m, o) {
    var s = document.createElement("script");
    s.type = "text/javascript";
    s.async = true;
    s.src = "https://undercity.usejimo.com/jimo-invader.js";
    j["JIMO_PROJECT_ID"] = "your-project-id";
    j["JIMO_DEFAULT_TRIGGER_HIDDEN"] = true;
    document.getElementsByTagName("head")[0].appendChild(s);
  })(window);
</script>
```

--------------------------------

### Embed Usejimo SDK Snippet in HTML

Source: https://help.usejimo.com/docs/for-developers/for-developers/install-our-sdk

This snippet demonstrates how to embed the Usejimo SDK into the `<head>` section of an HTML page. It includes the necessary script tag to load the Usejimo JavaScript file and sets the project ID. Ensure you replace 'YOUR_PROJECT_ID_HERE' with your actual project ID from the Usejimo dashboard.

```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>
```

--------------------------------

### Jimo JavaScript Source URLs for Self-Hosting

Source: https://help.usejimo.com/docs/for-developers/for-developers/install-our-sdk

These are the public URLs for the two JavaScript files required for self-hosting Jimo. Hosting these files yourself allows for greater control over the Jimo version running in your application, but requires regular updates to include the latest fixes.

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

```javascript
https://undercity.usejimo.com/jimo-main.js
```

--------------------------------

### Integrate Jimo SDK in Frontend Frameworks

Source: https://help.usejimo.com/docs/for-developers/for-developers/install-our-sdk

Standardized methods for injecting the Jimo script into the DOM lifecycle of various frontend frameworks. These implementations ensure the script is loaded once and configured with the required project ID.

```React
// 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);
}
```

```Next.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} />
    </>
  );
}
```

```Vue
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')
```

```Angular
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 = 'text/javascript';
        script.async = true;
        script.src = "https://undercity.usejimo.com/jimo-invader.js";
        this._renderer2.appendChild(this._document.body, script);
    }
}
```

--------------------------------

### Tour Completed Webhook Example

Source: https://help.usejimo.com/docs/for-developers/for-developers/webhooks

A concrete example of a 'tour.completed' event payload. It includes details about the specific experience triggered and the user (jimer) involved in the event.

```json
{
  "event": "tour.completed",
  "version": "0",
  "time": 1740133769000,
  "experience": {
    "uid": "0814ae77-568d-41c0-912a-0b4c63dc03ff",
    "title": "Onboarding",
    "type": "TOUR",
    "state": "LIVE",
    "isDraft": false,
    "publishedAt": "2025-02-19T10:37:10.000Z",
    "createdAt": "2025-02-19T10:36:46.000Z",
    "expiresAt": null,
    "triggerType": "DEFAULT",
    "recurrencyType": "EVERY_TIME",
    "recurrencyValue": 1
  },
  "jimer": {
    "uid": "17dff65e-434d-4454-bb57-a1167fefbb6b",
    "identifyToken": "sam",
    "username": "Sam",
    "email": null,
    "createdAt": "2025-02-03T11:50:01.000Z",
    "lastActivityAt": "2025-02-21T10:29:28.000Z"
  }
}
```

--------------------------------

### Initialize and Kill Jimo (JavaScript)

Source: https://help.usejimo.com/docs/for-developers/for-developers/sdk-guides/manual-initialization

Provides the JavaScript commands to manually initialize Jimo using `window.jimoInit()` and to stop its operation using `window.jimoKill()`. These are used after disabling automatic initialization.

```javascript
window.jimoInit()
```

```javascript
window.jimoKill()
```

--------------------------------

### Banner Deleted Event Example (JSON)

Source: https://help.usejimo.com/docs/for-developers/for-developers/webhooks/events

This JSON object represents an example payload for the `banner.deleted` event. It includes details about the event, the experience (banner) that was deleted, and the user who performed the action.

```json
{
  "event": "banner.deleted",
  "version": "0",
  "time": 1740143353000,
  "experience": {
    "uid": "62a81366-9670-4ba7-8e35-baf85b8a90b9",
    "title": "Upcoming maintenance",
    "type": "BANNER",
    "state": "PAUSED",
    "isDraft": false,
    "publishedAt": "2025-02-21T13:08:30.000Z",
    "createdAt": "2025-02-21T13:08:22.000Z",
    "expiresAt": null,
    "triggerType": "DEFAULT",
    "recurrencyType": "SINGLE_TIME",
    "recurrencyValue": 1
  },
  "user": {
    "uid": "17de6523-2033-4aaa-a500-d9369b611284",
    "email": "sam@usejimo.com",
    "firstName": "Sam",
    "lastName": "at Jimo"
  }
}
```

--------------------------------

### Identify Event Example (JSON)

Source: https://help.usejimo.com/docs/integrations/server-side-events

An example JSON payload for an 'identify' event. This event is used to update user traits and attributes. It requires a userId, type, timestamp, and a traits object.

```json
{
  "userId": "12345",
  "type": "identify",
  "timestamp": "2024-01-01T12:00:00Z",
  "traits": {
    "plan": "premium",
    "signup_date": "2023-06-15"
  }
}
```

--------------------------------

### Banner Status Changed Event Example (JSON)

Source: https://help.usejimo.com/docs/for-developers/for-developers/webhooks/events

This JSON object illustrates an example payload for the `banner.status-changed` event. It contains information about the event, the updated banner details (including its new state), and the user who made the change.

```json
{
  "event": "banner.status-changed",
  "version": "0",
  "time": 1740143346000,
  "experience": {
    "uid": "62a81366-9670-4ba7-8e35-baf85b8a90b9",
    "title": "Upcoming maintenance",
    "type": "BANNER",
    "state": "LIVE",
    "isDraft": false,
    "publishedAt": "2025-02-21T13:08:30.000Z",
    "createdAt": "2025-02-21T13:08:22.000Z",
    "expiresAt": null,
    "triggerType": "DEFAULT",
    "recurrencyType": "SINGLE_TIME",
    "recurrencyValue": 1
  },
  "user": {
    "uid": "17de6523-2033-4aaa-a500-d9369b611284",
    "email": "sam@usejimo.com",
    "firstName": "Sam",
    "lastName": "at Jimo"
  }
}
```

--------------------------------

### Identify with Signed Identifier (JavaScript)

Source: https://help.usejimo.com/docs/for-developers/for-developers/sdk-guides/setup-identify-verification

This snippet demonstrates how to call the Jimo Javascript SDK's 'identify' method, passing a signed identifier as the third parameter. Ensure the identifier and signedIdentifier are correctly generated before calling this method.

```javascript
window['jimo'].push(['do', 'identify', [identifier, null, signedIdentifier]]);
```

```javascript
window['jimo'].push(['do', 'identify', ["john.doe@company.com", null, "6a403a1fcfcc866b8917e6e208a553004c54c73846bc4f3f686757e2a5ad588e-1741761604"]]);
```