Positionning (Trigger)

The Trigger Options allow you to control how and where your changelog is displayed, ensuring it catches your users' attention at the right moment. Here’s a detailed guide to the available triggers.

Trigger Options

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.

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

Temporarily suspend access to the changelog without removing the integration.

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.

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.

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

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

Parameters

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

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.
:
- 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.
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

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

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

Color: Define the color of the icon displayed inside the trigger.
Icon: Choose from:
- (e.g., bell, info, etc.)
- Upload your own SVG, PNG, or JPG icon to match your brand.

📌 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.

Draw attention to the changelog with a pulsating effect.

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.

Parameters

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

Type: Select Pulsating to enable the snippet-based embed trigger.
Trigger snippet: A code snippet is generated for you:
```
<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:

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

📌 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

Use a side badge for a discreet yet accessible entry point to the changelog.

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

Parameters

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.

🔧 General

Select Side badge to activate this side-mounted floating trigger. You can switch to other types like Inline or Widget at any time.
:
- 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.
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

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

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.).

📌 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

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

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

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.

Example

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>

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.

📌 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

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.

PreviousChangelog Navigator NextChangelog Preview

Last updated 1 month ago

Was this helpful?