# Behavior

***

### Quick Access <a href="#id-2-quick-access" id="id-2-quick-access"></a>

#### [**General Behavior Options**](#general-behavior-options-1)

* [**Checklist Step**](#checklist-step)
  * [Auto Expand](#auto-expand)
  * [Dismissible](#dismissible)
  * [Completion Order](#completion-order)
* [**Task List**](#task-list)
  * [Expand Behavior](#expand-task-behavior)
* [**Completion Step**](#completion-step)
  * [Dismissing Behavior](#dismissing-behavior)
  * [Draggable Mode](#draggable-c)
  * [Single CTA Action](#single-cta-action)

#### [**Tasks Behaviors**](#tasks-behaviors-1)

* [**Main Task Action**](#main-task-action)
* [**Completion Conditions**](#completion-conditions)
* [**CTAs Actions**](#ctas-actions)
  * [Primary CTA Action](#primary-cta-action)
  * [Secondary CTA Action](#secondary-cta-action)

***

## **General Behavior Options**

These options allow you to manage the flow, dismissal, completion behavior, and position flexibility of your checklist, helping users track their progression effectively and interact with the widget in a way that suits their workflow.

### **Checklist Step**

This section helps you define how your checklist interacts with users. You can manage how tasks are expanded, whether the checklist can be dismissed, the order in which tasks should be completed, and whether users can reposition the checklist by dragging it around the screen.

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2Ftiw9IZoYtfgoIZy8cS89%2Fimage.png?alt=media&#x26;token=c437f85d-e83c-42a8-b5ea-e33dcd740130" alt=""><figcaption></figcaption></figure>

#### Auto Expand (A)

By default, tasks expand automatically upon task completion which means that it forces the checklist from the [collapsed version](#user-content-fn-1)[^1] to the [full version](#user-content-fn-2)[^2]. You can disable this and set custom conditions (similar to [experience step triggers](https://help.usejimo.com/docs/build/triggers-and-conditions/steps-triggers#setting-conditions-if)). For instance, expanding can be triggered based on element visibility, page visit, or a delay.

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FuORDb9EZ697lnhGaiWzM%2Fimage.png?alt=media&#x26;token=d48e4c73-94fb-44cb-a6fe-0ab46b66552a" alt=""><figcaption></figcaption></figure>

#### Dismissible (B)

If set to **Yes**, a dismiss button appears, allowing the checklist to be skipped without completing all tasks. Without this, the only way to dismiss the checklist is by completing all tasks.&#x20;

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2F2r28jy7fRbCdEBC2leJu%2Fimage.png?alt=media&#x26;token=0463fbf3-b7c1-4770-831e-edceecc57f3d" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
Using the dismiss button can prevent the checklist from being completed if there’s no recurrence setup, depending on your targeting settings.
{% endhint %}

#### Draggable (C)

The **Draggable** option controls whether users can reposition the checklist on screen.

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FQt4vJsNyvPVE8jN99wbS%2Fimage.png?alt=media&#x26;token=9b7d78ab-3c79-483b-9b78-b02238ca08e8" alt=""><figcaption></figcaption></figure>

* When enabled (**Yes**), end users can drag and move the checklist widget anywhere along the screen borders, offering flexibility to place it in a convenient location as they work through tasks.
* When disabled (**No**, default), the checklist will remain fixed at the position defined in the **General > Position** setting.

{% hint style="info" %}
The **draggable behavior applies** both when the checklist is **expanded** and when it is **minimized**, allowing users to move it even after collapsing it.

![](https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2F0YbXvDSPRxXPFw4haUww%2Fimage.png?alt=media\&token=2f79a036-b398-496c-8f0d-e79dbbf573af)
{% endhint %}

#### Completion Order (D)

You can control how tasks are completed:

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FReYSPdXBpUqHaDJIXR5F%2Fimage.png?alt=media&#x26;token=45ab4080-9930-4067-ac26-ef37e75f8150" alt=""><figcaption></figcaption></figure>

* **In order:** Forces users to complete tasks from top to bottom.
* **In any order:** Allows users to complete tasks in any sequence they prefer.

### **Task List**

This section lets you manage how tasks within the checklist are displayed and interacted with, along with the structure and elements of each task.

#### **Expand Task Behavior**

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FtmIdaR4dUmCHKiI2a5sn%2Fimage.png?alt=media&#x26;token=1eda93e7-1349-4ce6-9256-bba716bda610" alt=""><figcaption></figcaption></figure>

This setting controls how tasks expand to show more details like a paragraph or CTAs (Call to Actions):

* **Hover:** Tasks automatically expand when the user hovers over them. This option allows users to see the task details without clicking.
* **Click:** Users need to click on a task to expand and view the details. This gives users more control over what they see and when, making it useful if you want a cleaner interface until users are ready to take action.

### **Completion Step**

The **Completion Step Section** is where you can configure the final behaviors after users have completed all tasks in the checklist. This section lets you tweak how the step is **dismissed**, manage **completion actions**, and adjust the **primary CTA**.

#### Dismissing Behavior

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FVAriMBRhPUzfDyqPYpkV%2Fimage.png?alt=media&#x26;token=8b59904a-ccfe-4776-8622-de1aed8195c4" alt=""><figcaption></figcaption></figure>

The **general options** define how users can dismiss the completion step, with available options such as:

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FRo7NWiDVyiFSYNOBUtXq%2Fimage.png?alt=media&#x26;token=98a1c4a9-6384-4eff-b73f-e56c1488a926" alt=""><figcaption></figcaption></figure>

* **Click the cross** (default) – Users need to click the cross to dismiss.
* **Click outside** – Dismisses the checklist when the user clicks outside the modal.
* **Can't be dismissed** – Forces users to stay on the modal unless they take specific actions (such as clicking on your primary CTA).

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FmvFZGcOhlcbuxJekPKRx%2Fimage.png?alt=media&#x26;token=ed9c381b-3687-4322-9d6c-34dc88bba0f4" alt=""><figcaption></figcaption></figure>

The **cross element** automatically dismisses the checklist and currently, this default behavior can't be changed.

#### Single CTA Action

Unlike modals that may include secondary CTAs, the completion step has **only one primary CTA**.

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FLfVv8GUcFXqmEK1Mlopi%2Fimage.png?alt=media&#x26;token=743e78bc-ea3c-4eeb-be3f-100731ecadd3" alt=""><figcaption></figcaption></figure>

This **primary CTA** comes with a default action to **complete the checklist**, which cannot be removed. However, you can add additional actions to it, similar to [CTAs actions](https://help.usejimo.com/docs/tours-and-modals/components#cta-actions) in tours. These actions include:

* **Launching a new Jimo experience**
* **Opening a changelog or post**
* **Navigating to a specific URL**
* **Executing custom JavaScript code**.

## **Tasks Behaviors**

In the **Tasks Behavior** section, you can define specific actions for each task, allowing you to control what happens when a user interacts with tasks and how tasks are marked as completed.&#x20;

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FpwxldzKf8PpgaLYLlo4q%2Fimage.png?alt=media&#x26;token=9e1509b5-f828-485f-9566-b8204eb80ee7" alt=""><figcaption></figcaption></figure>

By combining these conditions or setting logic groups, you can create flexible and powerful completion criteria, ensuring that tasks are completed according to your user journey flow.

### **Main Task Action**

These are triggered when a user clicks on the task title or interacts with the task's primary CTA. Task actions operate similarly to any other [CTA or trigger actions](https://help.usejimo.com/docs/build/triggers-and-conditions/steps-triggers#types-of-actions-then) within Jimo experiences.

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FwZCvguxpu8W341szkcpn%2Fimage.png?alt=media&#x26;token=442bc6c0-0545-4535-a41c-60731af976bf" alt=""><figcaption></figcaption></figure>

### **Completion Conditions**

These are conditions that, once met, automatically mark the task as completed. When the task is completed, it will display the checkmark, and progress will be updated. Common conditions include:

* **On experience completion**: A typical condition used when the task’s action involves launching another Jimo experience, and completion of that experience marks the task as complete.
* Other conditions, similar to the ones available for any [Jimo experience trigger conditions](https://help.usejimo.com/docs/build/triggers-and-conditions/steps-triggers#types-of-conditions-if), can also be set to mark the task complete.

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FPhLzxBvi4RI47kRaWfb6%2Fimage.png?alt=media&#x26;token=4ed19727-5d32-43f2-818a-8dcdbf7d7dff" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
You can select and combine different types of conditions.&#x20;

Multiple conditions can be grouped with logical operators, making it possible to define precisely when a task should be marked as completed.
{% endhint %}

### **CTAs Actions**

The [**CTA actions**](https://help.usejimo.com/docs/tours-and-modals/components#cta-actions) section plays a crucial role in shaping the **progression of the checklist** by offering flexible control over how tasks are completed and how users engage with the tasks. These actions allow you to design alternative flows, set rules for task completion, and provide users with access to key resources.

#### Primary CTA Action

This action drives the **main progression** of the checklist. By default, if no custom action is added, the Primary CTA will trigger the **Main Task action**, such as launching an experience. This action is key to maintaining the flow but can also be customized to suit alternative designs or interactions.

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FR0x9nikmIGIGY3cKKi2F%2Fimage.png?alt=media&#x26;token=4ae91978-326e-44f5-b4e0-7c5ff4a0e729" alt=""><figcaption></figcaption></figure>

#### Secondary CTA Action

Offers more flexibility, typically defaulting to a **Skip task** action, unique to this element. This allows users to mark a task as completed without fulfilling the usual conditions, providing a shortcut or alternative path in the checklist flow. Like the Primary CTA, this action can be replaced with custom actions for additional functionality.

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2F84cO5EGQELifyuYkB3jg%2Fimage.png?alt=media&#x26;token=d75fff5c-159a-4222-9101-a6c9de1d48ec" alt=""><figcaption></figcaption></figure>

[^1]: ![](https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FLFYFcGReRWKWov6ef78D%2Fimage.png?alt=media\&token=7ecec6c3-9dda-4fac-8463-5aa4a1f1282c)

[^2]: ![](https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2F1WzMMyAaFwkHJtRprGCh%2Fimage.png?alt=media\&token=7fff0761-7755-4def-a740-348fb944f912)
