> 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/experiences/changelog/changelog/positionning-trigger.md).

# Positionning (Trigger)

## Trigger Options <a href="#trigger-options" id="trigger-options"></a>

Each trigger option is designed to accommodate different styles and levels of visibility, allowing you to match user interaction with the aesthetic and functional flow of your platform.&#x20;

<figure><img src="/files/2KXn8SQEbpXaJ080Fjpx" alt=""><figcaption><p>Trigger</p></figcaption></figure>

By choosing the appropriate trigger and customizing it to your needs, you can ensure that your changelog effectively engages your users.

<figure><img src="/files/0oTqiIOVjLzhgtm6gqaq" alt=""><figcaption><p>Options</p></figcaption></figure>

{% tabs %}
{% tab title="Disable (by default)" %}
Temporarily suspend access to the changelog without removing the integration.

<figure><img src="/files/NJK79VpC1hB8Cf7gSjBD" alt=""><figcaption><p>Disable</p></figcaption></figure>

* **Usage:**
  * Ideal for when you need to temporarily disable the changelog.
  * To re-enable, select another trigger option.
* **Steps:**
  1. Select **Disable** from the Type dropdown in the General section.
  2. The changelog will not be displayed until a different trigger is selected.

{% hint style="info" %}
Once you have published your first post, you can quickly disable the changelog or set it back to your latest selected trigger directly in the Changelog Hub.
{% endhint %}

<figure><img src="/files/CFvToHjnQUNXIEAvMPp1" alt=""><figcaption><p>Disable quick access</p></figcaption></figure>
{% endtab %}

{% tab title="Float" %}

Display the changelog as an omnipresent floating icon in the bottom right corner.

<figure><img src="/files/80VlgE6l2e3i0J5FgMnp" alt=""><figcaption><p>Floating icon</p></figcaption></figure>

* **Features:** Ensures the changelog is always within reach.
* **Steps:**
  1. Select **Float** from the Type dropdown.
  2. Customize the floating icon text if desired.

<details>

<summary>Parameters</summary>

The **Float** trigger is a floating button that remains visible in a fixed position on the screen. It can be fully customized in terms of visibility, appearance, and content. Below is a breakdown of each setting available when using this trigger type.

***

#### 🔧 General

<figure><img src="/files/uO7ZkjcyW76KWLFGZyIx" alt=""><figcaption></figcaption></figure>

* [**Type**:](#user-content-fn-1)[^1] Select **Float** to use a standalone floating button as the changelog trigger. You can switch to other types like Inline or Widget at any time.
* [**Show**](#user-content-fn-2)[^2]:
  * `Always`: The trigger is always visible, even if all posts have been read.
  * `Only if unread posts`: The trigger will only be displayed if there are one or more unread changelog entries.<br>
* **Title**: Customize the text shown on the trigger (e.g., *“What’s new on Example?”*). This text is visible inside the button and is fully editable.

***

#### 🎨 Style

<figure><img src="/files/5EZbxcsdJTueibj09mGE" alt=""><figcaption></figcaption></figure>

* [**Shadow**:](#user-content-fn-3)[^3] Optionally add a shadow around the trigger. You can define the color and intensity for better contrast. When enabled, additional customization options appear:
  * **Color**: Set the shadow color (HEX + optional transparency).
  * **X**: Horizontal offset of the shadow.
  * **Y**: Vertical offset of the shadow.
  * **Blur**: Adjusts how soft or sharp the shadow appears.
* **Radius**: Controls the roundness of the trigger's corners. A higher value creates a circular appearance.
* **Padding**: Set the internal spacing (vertical and horizontal) between the content and the trigger’s edges.
* **Background**: Customize the background color of the trigger using any HEX code.

***

#### ✍️ Text

<figure><img src="/files/QxyhSDFpxIJrs5RUDEdq" alt=""><figcaption></figcaption></figure>

* **Color**: Choose the text color of the trigger title (usually white by default).
* **Font family**: Select the font style used for the text (e.g., Inter, Roboto, etc.).

***

#### 🔔 Icon

<figure><img src="/files/8BR0CKZchsgY7ZsK2rei" alt=""><figcaption></figcaption></figure>

* **Color**: Define the color of the icon displayed inside the trigger.
* **Icon**: Choose from:
  * [Built-in icons](#user-content-fn-4)[^4] (e.g., bell, info, etc.)
  * [**Custom icons**:](#user-content-fn-5)[^5] Upload your own SVG, PNG, or JPG icon to match your brand.<br>

</details>

### 📌 When to Use

Choose the **Float** trigger when you want:

* A **persistent call-to-action** always visible on screen
* A **ready-made button** with built-in styling and customization (no code required)
* To **highlight updates** in a modern, eye-catching way without needing layout changes
* A quick setup with minimal dev involvement

It's ideal for most teams looking for a simple yet elegant changelog trigger that just works out of the box.
{% endtab %}

{% tab title="Pulsating" %}
&#x20;Draw attention to the changelog with a pulsating effect.

<figure><img src="/files/gPSASugHKyLvmu8HcIR1" alt=""><figcaption><p>Pulsating example</p></figcaption></figure>

* **Features:** Requires attachment to an element on your website.
* **Usage:**
  * Transform the bound element into an interactive component that opens the widget.
* **Steps:**
  1. Select **Pulsating** from the Type dropdown.
  2. Copy the provided snippet and paste it into your website’s HTML to bind the pulsating effect to an element.

<details>

<summary>Parameters</summary>

The **Pulsating** trigger type allows you to embed a fully customizable changelog trigger inside your app’s UI using a simple HTML snippet. This option is great when you want the trigger to appear in a very specific place, with your own design and layout.

***

#### 🔧 General

<figure><img src="/files/RkVG6DirCnPUDEECvuwm" alt=""><figcaption><p>Pulsating Parameters</p></figcaption></figure>

* **Type**: Select **Pulsating** to enable the snippet-based embed trigger.
* **Trigger snippet**: A code snippet is generated for you:

  ```html
  <div class="jimo-widget">What's new?</div>
  ```

Paste this HTML code directly into your app where you want the trigger to appear.

#### 🛠 Customization Notes

Unlike the **Float** trigger, the visual appearance and positioning of the **Pulsating** trigger are **fully controlled by your own CSS**. This allows you to:

* Use your own fonts, colors, and icons
* Apply animation or visual effects (like pulsating rings)
* Decide the layout (inline, centered, etc.)

To visually signal the update, you can add animation classes or styles to the `jimo-widget` class. For instance:

```css
.jimo-widget {
  animation: pulse 2s infinite;
}
```

</details>

### 📌 When to Use

Use the Pulsating trigger if:

* You need to **match your design system perfectly**
* You want **complete control** over where and how the trigger appears
* You already use internal components and just want to plug in the logic
  {% endtab %}

{% tab title="Side badge" %}
&#x20;Use a side badge for a discreet yet accessible entry point to the changelog.

<figure><img src="/files/no3uH2sxq0iRocLdhhUB" alt=""><figcaption></figcaption></figure>

* **Steps:**
  1. Select **Side Badge** from the Type dropdown.
  2. Customize the badge text if needed.

<details>

<summary>Parameters</summary>

The **Side badge** trigger is a floating label typically anchored to the side of your app. It’s ideal for a discreet yet visible entry point to your changelog. It can be fully customized in terms of visibility, appearance, and content.&#x20;

***

#### 🔧 General

<figure><img src="/files/ZXfTJ9FOkiHNM5G6NnWb" alt=""><figcaption></figcaption></figure>

* [**Type**:](#user-content-fn-6)[^6] Select **Side badge** to activate this side-mounted floating trigger. You can switch to other types like Inline or Widget at any time.
* [**Show**](#user-content-fn-2)[^2]:
  * `Always`: The trigger is always visible, even if all posts have been read.
  * `Only if unread posts`: The trigger will only be displayed if there are one or more unread changelog entries.<br>
* **Title**: Customize the text shown on the trigger (e.g., *“What’s new on Example?”*). This text is visible inside the button and is fully editable.

***

#### 🎨 Style

<figure><img src="/files/5EZbxcsdJTueibj09mGE" alt=""><figcaption></figcaption></figure>

* [**Shadow**:](#user-content-fn-3)[^3] Optionally add a shadow around the trigger. You can define the color and intensity for better contrast. When enabled, additional customization options appear:
  * **Color**: Set the shadow color (HEX + optional transparency).
  * **X**: Horizontal offset of the shadow.
  * **Y**: Vertical offset of the shadow.
  * **Blur**: Adjusts how soft or sharp the shadow appears.
* **Radius**: Controls the roundness of the trigger's corners. A higher value creates a circular appearance.
* **Padding**: Set the internal spacing (vertical and horizontal) between the content and the trigger’s edges.
* **Background**: Customize the background color of the trigger using any HEX code.

***

#### ✍️ Text

<figure><img src="/files/QxyhSDFpxIJrs5RUDEdq" alt=""><figcaption></figcaption></figure>

* **Color**: Choose the text color of the trigger title (usually white by default).
* **Font family**: Select the font style used for the text (e.g., Inter, Roboto, etc.).<br>

</details>

### 📌 When to Use

Choose **Side badge** when you want:

* A **subtle but accessible** changelog trigger
* Something that **floats and persists** but doesn't interrupt the main UI
* Full visual customization while staying within the Jimo UI editor
  {% endtab %}

{% tab title="Custom" %}

Fully tailor the trigger, embedding it seamlessly into your site’s design schema.

<figure><img src="/files/2watAivrtC1trYbno2md" alt=""><figcaption><p>Button example</p></figcaption></figure>

* **Usage:** Requires knowledge of HTML/JavaScript and access to your website’s source code.

<figure><img src="/files/Nl5juNk81uRhD4xVIOei" alt=""><figcaption><p>Custom Trigger Option</p></figcaption></figure>

* **Steps:**
  1. Select **Custom** from the Type dropdown.
  2. Create the trigger element in your HTML (e.g., a button).
  3. Set up a click listener to open the widget when the element is clicked.

<details>

<summary>Example</summary>

```html
htmlCopier le code<button id="my_custom_trigger">What's new?</button>
<script>
  const myButton = document.getElementById("my_custom_trigger");
  myButton.addEventListener("click", function() {
    window.jimo.push(["do", "widget:open"]);
  });
</script>
```

{% hint style="info" %}
We offer a set of methods that allows you to have a more advanced usage of Jimo (set user attributes, listen to widget opening and closing, hide trigger, etc.). Your tech team might be interested. You can find all the methods in our [SDK documentation](/docs/for-developers/for-developers/sdk-methods.md).
{% endhint %}

</details>

### 📌 When to Use

Choose the **Custom** trigger if:

* You need **total freedom** over design and interaction
* You want to integrate the changelog into **an existing button or UI component**
* You have **developers available** to implement the logic
  {% endtab %}
  {% endtabs %}

Each trigger option is designed to accommodate different styles and levels of visibility, allowing you to match user interaction with the aesthetic and functional flow of your platform.

[^1]: ![](/files/wQPP61IQUhlVcTJ59Ji4)

[^2]: ![](/files/2k5weLNlybJNkYRjP3Vu)

[^3]: ![](/files/d3Q1MSyp3sfzyLT2PPbz)

[^4]: ![](/files/urVtdbD0Tv0HMhUwLcDO)

[^5]: ![](/files/3PfHVyQdVpVwCRqLTTpB)

[^6]: ![](/files/KgsrxuAqKmapsJjMdKdN)