> 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/resource-center/components.md).

# Components

## Understanding Components

Resource Centers provide a structured way to offer **self-serve support** and **quick access to key resources** in your application. Unlike Tours or Surveys, a Resource Center is a **single-step experience** that remains accessible at any time, similar to Banners or Checklists.

Each Resource Center consists of **two main parts**:

* **Resource Center Panel**: The main content area where users can navigate through available resources.
* **Trigger**: The collapsed view that users click to open the Resource Center.

Since Resource Centers are not sequential, there is no **Flow Builder**. Instead, everything is managed from the **standalone Resource Center Builder**, where you can **customize the layout, style, and content blocks**.

In a new Resource Center, some **default elements** are already present, and you can **add additional blocks** to extend the available content.

## Component for Building Resource Centers

### Resource Center (Single-Step)

Unlike multi-step experiences like Tours or Surveys, the Resource Center is a **single component** that remains accessible through a floating widget. Users can explore available checklists, guides, or links without disrupting their workflow.

<figure><img src="/files/9YPMHkciSAX3qCdCf4Hr" alt=""><figcaption></figcaption></figure>

> **Ideal for**:
>
> * Creating a self-serve help hub within your product.
> * Aggregating and structuring key resources (Checklists, Documentation, FAQs, etc.).
> * Offering contextual access to relevant content without overwhelming users.

***

## Customizing Your Steps

Since the Resource Center is a **single-step experience**, all elements are directly managed from the **Navigator**.

* **Resource Center Tab**: Customize the **overall panel style** and structure.
* **Trigger Tab**: Define how the **collapsed widget** looks and behaves.
* **Drag & Drop Management**: Rearrange content blocks directly within the Builder.
* **Nested Content**: Click on a block to edit its **sub-elements (Titles, Buttons, Icons, etc.)**.

Each **Group** in the Resource Center consists of **Action elements** (links, buttons) with a **Group Title** for organization. Actions can include:

* **Text Elements** (Title, Paragraph).
* **Media Elements** (Icons, Images).
* **Buttons (CTAs)** for quick actions.

### Add Elements

Unlike other experiences where you add multiple steps, in a Resource Center, you **add blocks and elements** within the main structure. Different **preset components** are available, and each can be customized with additional elements.

You can manage and add elements in three key areas:

{% tabs %}
{% tab title="Main Step" %}
Add blocks and individual elements to the main Resource Center.

<figure><img src="/files/orkMJJ0jGL7KDorzVFwJ" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Groups" %}
Add multiple **actions** inside **group blocks** to organize resources.

<figure><img src="/files/alGCJdeIn3QhgwgbWzmS" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Actions" %}
Customize each action by adding text, media, or buttons.

<figure><img src="/files/T1N4Doe6yuc0Woq8nukB" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Trigger Tab" %}
Customize the **Trigger** with additional elements like icons, text, arrows, or progress indicators.

<figure><img src="/files/IsqIr8ZAI4u0JHQ8CuXz" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### Available Elements

Each Resource Center consists of various **main elements** that define its structure and **sub-elements** that enhance individual blocks. Below is a breakdown of all elements available for customization.

#### **Main Elements**

<figure><img src="/files/i7oc1YnEdD1OEfzEZE41" alt="" width="563"><figcaption></figcaption></figure>

<details>

<summary><strong>Minimize</strong></summary>

* **Minimize Button:**\
  The collapse button that allows users to hide the Resource Center and revert it to the trigger state.

![](/files/oIXPrqhH3Aod5suQPu2R)

</details>

<details>

<summary><strong>Text Elements</strong></summary>

* **Title:**&#x20;

  The main heading of the Resource Center, used to define the purpose or name of the hub.
* **Subtitle:**&#x20;

  A secondary heading that provides additional context or instructions.

</details>

<details>

<summary><strong>Blocks</strong></summary>

The core of the Resource Center, containers that hold content, organizing resources into different sections:

* **Action Block:**\
  A customizable block where you can add multiple **actions** with different elements like text, images, and buttons.
* **Group Block:**\
  A structured container for organizing multiple related actions under a single section with a group title.
* **Checklist Block:**\
  Automatically added by default; users can access any ongoing checklist inside the Resource Center. *(cannot be removed)*

</details>

#### **Trigger Elements**

<figure><img src="/files/I9jXZLAz4NFYHUKyvdKy" alt="" width="452"><figcaption></figcaption></figure>

<details>

<summary><strong>Trigger</strong></summary>

The **Trigger** is the collapsed state of the Resource Center and can be fully customized. It includes:

* **Icon** – Displays an image or symbol for better recognition.
* **Text** – A label or short phrase to describe the Resource Center (e.g., “Help” or “Resources”).
* **Arrow** – A small directional icon that reinforces the action of expanding the Resource Center.
* **Progress Indicator** – A visual cue showing checklist completion progress (if applicable).

</details>

#### **Block Action Elements**

<figure><img src="/files/aV8U1PewNFwcaGSjQIi2" alt="" width="563"><figcaption></figcaption></figure>

<details>

<summary><strong>Text Elements</strong></summary>

* **Title:**&#x20;

  A short, bold heading for the action, clearly indicating its purpose.
* **Paragraph:**&#x20;

  A longer text description providing additional information or context.

</details>

<details>

<summary><strong>Media Elements</strong></summary>

* **Image/Video:**\
  Allows embedding images or videos for a more engaging and visual experience.
* **Icon:**\
  A small visual marker to differentiate actions or reinforce meaning.

</details>

<details>

<summary><strong>Button</strong></summary>

* **Primary Button (CTA):** \
  A **Call-to-Action** button that allows users to engage further (e.g., opening a link, starting a survey, or navigating to a different page).

</details>

***

## Elements Parameters

In a **single-step** structure like the Resource Center, parameters define both the overall widget style and the behavior of each added element. These customization options ensure flexibility in organizing and presenting resources.

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

### Main Step

When you click on the top of the [navigator](https://help.usejimo.com/help-center/using-jimo/~/changes/Cm3LFsDmjpOrhMLW0b5u/build/navigator) arborescence, you access the **Resource Center main step** which defines the expanded widget’s overall appearance, position, and structure. It serves as the container for all other sections (except the trigger) and can be **draggable**, allowing end users to reposition the Resource Center freely on screen.

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

These parameters are organized into different sections within the parameter sidebar, allowing comprehensive customization from top to bottom.

<details>

<summary><strong>Behavior</strong></summary>

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

**Draggable**: This toggle enables or disables drag-and-drop repositioning of the entire Resource Center.

* **By default**, the Resource Center opens in a fixed position on screen, determined by the **Position** and **Offset** parameters configured below.
* When **Draggable** is enabled, end users can click and drag the Resource Center to reposition it freely along the screen bottom edge.

<figure><img src="/files/BzSePT6xHKvo7TlCYBV3" alt="" width="375"><figcaption></figcaption></figure>

* The draggable behavior applies in **both the expanded state and the trigger (minimized) state**, so users retain control over where the widget appears after minimizing it.<br>

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

</details>

<details>

<summary><strong>Layout</strong></summary>

Controls **width, height, padding, spacing**, and positioning of elements within the Resource Center.

![](/files/WoQ186SIfteBsmBIz5fY)

* **Width & Height**:
  * **Auto**: Adjusts dynamically based on content.
  * **Custom**: Manually set a fixed width or height using pixel values.
* **Padding**: Defines the space between the content and the edges.
  * **Vertical Padding**: Adjusts top and bottom spacing.
  * **Horizontal Padding**: Adjusts left and right spacing.
* **Gap**: Controls spacing between blocks inside the Resource Center.
  * **Slider Input**: Adjust the gap dynamically.
  * **Direct Input**: Manually enter pixel values.
* **Position**: Defines alignment within the interface.
  * **Left / Right**: Adjust where the Resource Center appears.
* **Offset**: Fine-tunes exact positioning relative to the set position.
  * **X / Y values**: Adjust horizontal and vertical offset.

</details>

<details>

<summary><strong>Style</strong></summary>

Customizes the **overall look and feel** of the Resource Center.

![](/files/lC3hhPL4UAYidCPX2niQ)

* **Radius**: Adjusts the border roundness.
* **Background**: Set a solid or gradient color for the background.
* **Border**: Define a border color and thickness.
* **Shadow**: Customize the drop shadow effect.

</details>

***

### Special Elements

These elements define key functionalities and structure within the Resource Center.

#### **Control**

&#x20;**Control** manages the block located at the top-right of the Resource Center, allowing users to drag to reposition it or collapse it back to trigger state.

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

<details>

<summary><strong>Layout</strong></summary>

Controls the **shape, appearance, and spacing** of both the minimize button and the drag handle.

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

* **Radius**: Adjusts the roundness of the control buttons.
  * *Slider Input*: Increase or decrease corner rounding.
  * *Direct Input*: Enter a pixel value for precision.
* **Padding**: Defines internal spacing around the icon.
  * *Horizontal and vertical padding* can be adjusted independently.
* **Gap**: Controls the space between the minimize and drag buttons.
* **Icon Size**: Sets the size of the icons for both controls.
* **Icon Color**: Defines the color of the icons.
  * *Color Picker*: Select any color.
  * *Hex Input*: Enter a hex code manually.
* **Background**: Sets the background color of the control buttons.
  * *Solid Color*: Choose a fill color.
  * *Transparent Option*: Remove background if desired.
* **Border**: Defines border color and style.
  * *Custom Border Color*: Pick a border color.
  * *Optional Input*: Leave empty for no border.
* **Shadow**: Adds depth to the controls.
  * *Color Picker*: Choose shadow color.
  * *Opacity Control*: Adjust shadow transparency.

</details>

#### Header Block

A versatile header element that can display: [**Title**](#title) - [**Subtitle**](#subtitle) - [**AI Agent searchbar**](#ask-ai-searchbar).

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

<details>

<summary><strong>Layout</strong></summary>

Configure spacing and alignment within the header canvas.

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

* **Gap** — Space between the Title, Subtitle, and Ask Agent element.
  * Adjustable with a slider (0–32 px).
* **Padding X / Y** — Internal horizontal (X) and vertical (Y) padding around the header group.
  * Enter pixel values (0 px allowed) or bind to a spacing token.
* **Align** — Horizontal alignment for all header items.
  * Choices: Left · Center · Right.

</details>

<details>

<summary><strong>Style</strong></summary>

Pick a background for the entire header block.

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

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

* **Background** — Visual backdrop behind the header.
  * *Shape*: Select from preset gradient shapes.
  * *Color*: Choose a solid HEX or theme colour.

</details>

#### **Checklist Block**

A dedicated block for ongoing checklists, automatically linked.

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

<details>

<summary><strong>Behavior</strong></summary>

Defines which checklist is displayed within the resource center.

![](/files/Uu7Y59OBbggBzhldQuDw) ![](/files/SVruQZp294h4Pal9Riko)

* **Active Checklist**: Automatically displays the user’s currently active checklist. Displays nothing and hide this section if there's no active checklist.&#x20;
* **Selected Checklist**: Allows you to choose a specific checklist to display, even if it has been completed by the user.

When using the **Selected Checklist** option, a search dropdown appears to manually select which checklist should be displayed **from published ones**.

</details>

#### **Action Block**

A standard resource block containing interactive elements.

<figure><img src="/files/83yf9XTwOwWD1JEf4iUR" alt=""><figcaption></figcaption></figure>

<details>

<summary><strong>Behavior</strong></summary>

Define up to **four actions** that will be executed when a user clicks the action block. Each action block has its own independent set of actions.

![](/files/I6conCmQ7WQ905qbptg4)

**Available Actions:**

* **Navigate to** → Redirect users to a specific URL or in-app page.
  * **Destination Type**: Choose where to navigate.
    * **External URL** → Open an external webpage.
    * **Internal Page** → Redirect to a specific page within the application.
  * **Open in**: Define how the page opens.
    * **New tab** → Opens in a separate browser tab.
    * **Same tab** → Replaces the current page.
* **Launch Experience** → Open another Jimo experience.
  * **Experience Type**: Select which type of experience to launch.
    * **Tour** → Start an onboarding or feature tour.
    * **Survey** → Open a feedback survey.
    * **Checklist** → Load a predefined task list.
    * **Banner** → Display a banner notification.
* **Open Post** → Link to a help center or documentation page.
  * **Post Selection**: Choose a specific article or enter a custom URL.
* **Run JavaScript** → Execute custom scripts when the block is clicked.
  * **Custom Code** → Insert JavaScript code directly.

💡 **Note:** Actions will execute in the order they appear. If multiple actions are set, all will trigger in sequence upon clicking the action block.

</details>

<details>

<summary><strong>Layout</strong></summary>

Controls the **appearance and structure** of the action block to align with your design preferences.

![](/files/6zOYsOHBbgakPsEilyYr)

* **Radius**: Adjusts the button's corner roundness.
  * **Slider Input** → Increase/decrease rounding.
  * **Direct Input** → Enter a specific pixel value.
* **Gap**: Defines spacing between elements inside the block.
  * **Slider/Input** → Adjust pixel distance.
* **Padding**: Sets internal spacing between the block’s content and edges.
  * **Vertical/Horizontal Inputs** → Define custom padding.
* **Background**: Customize the block’s background.
  * **Solid Color** → Set a background color.
  * **Transparent** → Remove background if needed.
* **Border & Shadow**: Customize outline and depth.
  * **Border** → Add/remove and adjust color.
  * **Shadow** → Apply soft or strong shadows.

💡 **Note**: **Layout settings** apply to **all action blocks** for a consistent look across your Resource Center.

</details>

<details>

<summary><strong>Hover Effect</strong></summary>

Applies visual effects when users hover over the action block.

![](/files/bxBSLRjvEUXDayMliq9e)

* **Background**: Change background color on hover.
* **Border**: Modify the border style on hover.
* **Shadow**: Adjust hover shadow visibility and intensity.
* **Scale**: Resize the block when hovered.
  * **Slider/Input** → Adjust zoom effect.

💡 **Note**: **Hover Effect settings** apply to **all action blocks** for a consistent look across your Resource Center.

</details>

#### **Group Block**

A collection of multiple actions under a single group heading.

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

<details>

<summary><strong>Type</strong></summary>

Defines how actions within the group are displayed.

![](/files/tOm9NI6TIAgZvujOiKQA)

* **Stack** → Arranges actions in a vertical list.
* **Grid** → Aligns actions in a flexible grid layout.

</details>

<details>

<summary><strong>Style</strong></summary>

Controls spacing and alignment within the group block.

![](/files/cDSaDROpZuTMXkK9citA)

* **Title Gap** → Adjusts the spacing between the group title and its actions.
  * **Slider Input** → Increase or decrease the vertical spacing.
  * **Direct Input** → Enter a precise pixel value.
* **Element Gap** → Defines spacing between individual action elements.
  * **Slider Input** → Adjust spacing.
  * **Direct Input** → Set a custom value for precise control.

💡 **Note:** The style settings apply to all group blocks to maintain visual consistency across the Resource Center.

</details>

***

### Ask Agent Block Elements

The **Ask Agent** block adds a conversational AI prompt to your Resource Center, powered by the [Agent](https://claude.ai/docs/agent). When a user types a question, it opens the Agent chat, which provides instant answers based on your knowledge base, can launch relevant experiences, and trigger automated actions.

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

***

**What it does**

* Displays a **text input field** inside the Resource Center header where users can type a question in plain language.
* On submit, the **Agent chat** opens as a conversational overlay, powered by the knowledge sources, custom answers, tours, and actions you configured in [Agent > Knowledge](https://i.usejimo.com/agent/knowledge).
* The Agent's behavior, personality, and language are controlled from [Agent > Chat](https://i.usejimo.com/agent/chat).

{% hint style="info" %}
**Formerly "Smart Search - AI Knowledge":** This block was previously called "Ask AI" and was tied to the AI Knowledge settings page. The underlying AI functionality is now centralized in the [Agent section](https://i.usejimo.com/agent) of the dashboard. The block still works the same way from the user's perspective, but all configuration has moved to Agent > Chat (for instructions and appearance) and Agent > Knowledge (for training data). The chat style is now unified, it's not specific to each Resource center anymore.
{% endhint %}

The Ask Agent block is added to the **Header** section of the Resource Center. In the Navigator, it appears as **Ask Agent** with two sub-elements:

* **Send message CTA** — The submit button that sends the user's question to the Agent.
* **Title** — The heading text displayed above the input field (e.g. "How can I help? 👋").

To add it, click **+ Add block** on the Header, then under **Interactive**, select **Ask Agent**.

#### **Ask Agent Searchbar**

The search input where users type their questions. When a user submits a question it triggers the AI Agent chat that opens as a conversational overlay. Design the search field itself. Options are grouped into **Layout**, **Text**, and **Placeholder**.<br>

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

<details>

<summary><strong>Layout</strong></summary>

Controls spacing, corners, background, and shadow of the input field.

<figure><img src="/files/6dbE6FEsIn5K3RZYxtCA" alt=""><figcaption></figcaption></figure>

* **Radius** — Corner roundness of the input box.
  * Adjustable with a slider (0–24 px).
* **Padding** — Internal spacing on four sides.
  * Enter px values individually or link them for uniform padding; 0 px allowed.
* **Background** — Fill behind the input.
  * Choose a solid colour or a preset gradient shape.
* **Border colour** — 1 px border for contrast.
  * Leave empty for no border.
* **Shadow** — Adds depth below the field.
  * Toggle colour swatch on/off; set RGBA for intensity.

</details>

<details>

<summary><strong>Text</strong></summary>

Typography settings for the user’s query inside the field.

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

* **Colour** — Font colour picker.
* **Font family** — Dropdown of available project fonts.
* **Font size** — Numeric px field plus slider.
* **Font weight** — Range from *Thin* to *Extra Bold*.

</details>

<details>

<summary><strong>Placeholder</strong></summary>

Configure the default hint text shown before typing.

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

* **Content** — Helper text shown before the user types.
  * Can stay blank; supports emojis and inline code.
* **Colour** — Separate colour for placeholder text.

</details>

#### Send message CTA

Controls the button that submits the user’s question. First choose its **Type**, then customise **Layout** and **Style**.

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

{% tabs %}
{% tab title="Icon Type" %}
Compact button that shows only an icon.

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

<details>

<summary>Layout</summary>

Selects the button overall aspect.

<figure><img src="/files/84CMTkgvvFix6KfD285N" alt=""><figcaption></figcaption></figure>

* **Type** — Toggle between **Icon** and **Text** modes.
  * Determines which style options appear.
* **Icon** — Choose the glyph (Arrow Up, Paper Plane, etc.).

</details>

<details>

<summary>Style</summary>

Visual appearance options.

<figure><img src="/files/4TnwmMMwZobDiKo9l56m" alt=""><figcaption></figcaption></figure>

* **Radius** — Corner roundness (slider 0 – 24 px).
* **Padding** — Inner spacing (X/Y px values; 0 px allowed).
* **Icon size** — Numeric px field + slider.
* **Icon colour** — Colour picker for the glyph.
* **Background** — Solid colour or gradient.
* **Border colour** — Optional 1 px outline.
* **Shadow** — RGBA shadow toggle.

</details>
{% endtab %}

{% tab title="Text Type" %}
Button that contains a short label.

<figure><img src="/files/1sBlkKl9zhP59ADXGjhv" alt=""><figcaption></figcaption></figure>

<details>

<summary>Layout</summary>

Controls size and spacing

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

* **Type** — Toggle between **Icon** and **Text** modes.
  * Determines which style options appear.
* **Label** — The text displayed on the button (e.g., *Send*).
  * Accepts up to \~12 characters and supports emojis.

</details>

<details>

<summary>Style</summary>

Visual appearance options

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

* **Text colour** — Sets font colour.
  * Colour picker or theme token.
* **Font family** — Dropdown of project fonts.
* **Font size** — Numeric field + slider (8–24 px).
* **Font weight** — Choose from Thin → Extra Bold.
* **Padding** — X and Y inner spacing.
  * Separate px fields; link icon to sync values.
* **Radius** — Corner roundness (0–24 px slider).
* **Background** — Solid colour or gradient.
* **Border colour** — Optional 1 px outline; leave blank for none.
* **Shadow** — RGBA shadow toggle; click ✕ to remove.

</details>
{% endtab %}
{% endtabs %}

#### **How it connects to the Agent**

The Ask Agent block is a **trigger point** for the Agent. It does not have its own AI configuration. Everything the Agent knows and how it responds is managed in:

* [**Agent > Chat**](https://i.usejimo.com/agent/chat) — General instructions, persona, presets, language, and chat widget appearance.
* [**Agent > Knowledge**](https://i.usejimo.com/agent/knowledge) — Training sources (URLs, files, text), Tours, Actions, and Custom Answers.
* [**Agent > Analyze**](https://i.usejimo.com/agent/analytics/statistics) — Usage statistics and conversation history.

> **Tip:** You can also trigger the Agent from outside the Resource Center using the **Launch Agent** CTA action in any experience. See the [Agent overview](/docs/experiences/agent.md) for all the ways to trigger the Agent.

***

### Action Block Elements

Each **Action Block** contains several sub-elements that can be customized:

#### **Group Title**

A heading for grouped actions.<br>

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

<details>

<summary><strong>Content</strong></summary>

Customize the text content of the group title.

![](/files/fLYmsOnrJlhS0HBmm2tO)

* **Text Editor** → Allows formatting options:
  * **Bold (B)** → Highlights text in bold.
  * **Italic (I)** → Applies italic styling.
  * **Underline (U)** → Emphasizes text with an underline.
  * **Link** → Adds a hyperlink to the title.
  * **Emoji** → Adds emojis to the title.
  * **User variables (+)** → Insert variables dynamically, like user name or company.

</details>

<details>

<summary><strong>Style</strong></summary>

Controls the visual appearance of the group title.

![](/files/SSxUyFBEM4dWn9Eviopi)

* **Color** → Defines the text color.
  * **Color Picker** → Select a color.
  * **Hex Input** → Manually enter a hex code.
* **Font Family** → Selects the typeface for the title.
* **Font Size** → Adjusts the text size.
  * **Slider Input** → Increase or decrease font size.
  * **Direct Input** → Enter a pixel value for precise control.
* **Font Weight** → Defines text thickness (e.g., Regular, Bold).
* **Align** → Determines the text alignment.
  * **Left** → Aligns text to the left.
  * **Center** → Centers the text.
  * **Right** → Aligns text to the right.

💡 **Note:** The style settings apply to all group titles to maintain visual consistency across the Resource Center.

</details>

#### **Icon**

A visual representation of the resource action (customizable with Phosphor Icons or Twemoji).

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

<details>

<summary><strong>Layout</strong></summary>

Defines the spacing and size of the icon within the action block.

![](/files/ojFAm7wDyOx38hJ7Sb0e)

* **Padding** → Controls the space around the icon.
  * **Vertical & Horizontal Input** → Set independent values for top/bottom and left/right padding.
* **Radius** → Adjusts the icon’s corner roundness.
  * **Slider Input** → Increase or decrease rounding.
  * **Direct Input** → Enter a pixel value for precise control.
* **Icon Size** → Defines the display size of the icon.
  * **Slider Input** → Adjust the icon size dynamically.
  * **Direct Input** → Enter a pixel value.

💡 **Note:** The layout settings apply to all actions icons to maintain visual consistency across the Resource Center.

</details>

<details>

<summary><strong>Style</strong></summary>

Customizes the icon’s appearance.

![](/files/8dwaFgWOIT0OdwtTZgtC)

* **Icon** → Selects the icon to display.
  * **Preset Icons** → Choose from built-in libraries (**Phosphor Icons** or **Twemoji**) for quick selection.
  * **Custom Upload** → Upload your own icon in **PNG, JPG, or SVG format** for full customization.
* **Icon Color** → Defines the color of the icon.
  * **Color Picker** → Select a custom color.
  * **Hex Input** → Enter a hex code manually.
* **Background** → Controls the background behind the icon.
  * **Solid Color** → Choose a background color.
  * **Transparent Option** → Remove the background if needed.
* **Border** → Adds a border around the icon.
  * **Color Picker** → Choose a border color.
  * **Thickness Input** → Set the border width.

</details>

***

### Trigger Elements

The **Trigger** is the minimized state of the Resource Center (RC), allowing users to expand it when needed. It defines how the RC initially appears in the interface.

#### **Trigger Main Step**

&#x20;The **Trigger** element defines how the Resource Center is initially displayed on the interface.&#x20;

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

<details>

<summary><strong>Type</strong></summary>

Controls how the trigger is displayed and interacts with users.

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

* **Compact**: Starts with only an icon and expands on hover.
* **Expanded**: Displays all trigger elements at all times.
* **Custom Element**:The trigger is hidden by default and only controllable via SDK commands.

</details>

<details>

<summary><strong>Behavior</strong></summary>

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

**Draggable**: This toggle enables or disables drag-and-drop repositioning of the entire Resource Center.

* **By default**, the Resource Center opens in a fixed position on screen, determined by the **Position** and **Offset** parameters configured below.
* When **Draggable** is enabled, end users can click and drag the Resource Center to reposition it freely along the screen bottom edge.

<figure><img src="/files/BzSePT6xHKvo7TlCYBV3" alt="" width="375"><figcaption></figcaption></figure>

* The draggable behavior applies in **both the expanded state and the trigger (minimized) state**, so users retain control over where the widget appears after minimizing it.<br>

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

</details>

<details>

<summary><strong>Position</strong></summary>

Defines where the trigger is placed within the interface.

![](/files/t4upGxn2knp90SI5y5xW)

* **Position**: Aligns the trigger to the **left** or **right** side.
* **Offset**: Adjusts the precise placement using pixel values.

</details>

<details>

<summary><strong>Layout</strong></summary>

Configures spacing and padding around the trigger elements.

![](/files/94iwn9pmpqmB4GCfGe8N)

* **Gap**: Sets the spacing between elements.
* **Padding**: Adjusts internal spacing within the trigger.

</details>

<details>

<summary><strong>Style</strong></summary>

Customizes the visual appearance of the trigger.

![](/files/A2NOyP6mBDcPR3bL2Njg)

* **Radius**: Adjusts the roundness of the trigger container.
* **Background**: Sets the background color.
* **Border**: Adds an optional border.
* **Shadow**: Controls the shadow effect.

</details>

{% hint style="warning" %}

### Custom Trigger

With the **Custom Trigger** type, the RC behaves differently:

* **No visible trigger** → The RC is invisible when collapsed.
* **Respects filters** → The RC is still restricted by its publication rules (URL, user filters, etc.).
* **Manual control only** → Expansion and dismissal must be implemented with your own logic using SDK commands.

👉 For full control, use the SDK methods: [Resource Center SDK Commands.](/docs/for-developers/for-developers/sdk-methods.md#open-resource-center)
{% endhint %}

#### **Icon**

The main symbol representing the Resource Center in its collapsed state.

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

<details>

<summary><strong>Layout</strong></summary>

Controls the **spacing and positioning** of the icon within the trigger button.

![](/files/pMlqNK5gFcd1lYhKHjbw)

**Padding**: Adjusts the space between the icon and the trigger’s edge.

* **Vertical Padding**: Sets top and bottom spacing.
* **Horizontal Padding**: Sets left and right spacing.

</details>

<details>

<summary><strong>Style</strong></summary>

Defines the **visual aspects** of the icon, including color, size, and background.

![](/files/8ztC4n1uEowF2XvgMBAq)

* **Icon**: Selects the icon to be displayed within the trigger.
  * **Preset Icons**: Choose from built-in libraries (**Phosphor Icons** or **Twemoji**).
  * **Custom Upload**: Upload your own PNG, JPG, or SVG file.
* **Icon Color**: Adjusts the color of the selected icon.
  * **Color Picker**: Select a custom color.
  * **Hex Input**: Enter a specific hex code manually.
* **Radius**: Defines the roundness of the icon’s background container.
  * **Slider Input**: Adjusts the curvature smoothly.
  * **Direct Input**: Enter a pixel value for precise control.
* **Background**: Defines the background color of the icon container.
  * **Solid Color**: Choose a specific background color.
  * **Transparent Option**: Remove the background if needed.
* **Border**: Adds an outline around the icon container.
  * **Color Picker**: Select a border color.
  * **Hex Input**: Enter a custom hex code.
* **Icon Size**: Controls the overall size of the icon.
  * **Slider Input**: Adjust the size dynamically.
  * **Direct Input**: Set a fixed pixel value.

</details>

#### **Text**

Optional accompanying text label next to the trigger icon.

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

<details>

<summary><strong>Content</strong></summary>

Manages the **text behavior and content** within the trigger.

![](/files/kHoP86T2adN5KZt2iXsJ)

* **Behavior**: Determines dynamic text functionality.
  * **Static Text**: Displays a fixed text label.
  * **Active Checklist**: Automatically updates the text based on the current active checklist.
* **Text**: Defines the displayed text.
  * **Direct Input**: Manually enter the label text.

</details>

<details>

<summary><strong>Style</strong></summary>

Controls the **typography and color** of the trigger text.

![](/files/X4kVdlwqAUxlfe9o8RVG)

* **Font Family**: Select a font style from available typefaces.
* **Font Size**: Adjust the text size.
  * **Slider Input**: Modify dynamically.
  * **Direct Input**: Set a fixed pixel value.
* **Font Weight**: Defines text thickness.
  * Options: Light, Regular, Medium, Bold, etc.
* **Text Color**: Changes the color of the text.
  * **Color Picker**: Select a custom color.
  * **Hex Input**: Enter a specific hex code manually.

</details>

#### **Arrow**

A directional indicator that animates when hovered.

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

<details>

<summary><strong>Layout</strong></summary>

Controls **spacing and positioning** of the arrow within the trigger.

![](/files/pMlqNK5gFcd1lYhKHjbw)

**Padding**: Adjusts the internal spacing around the arrow.

* **Vertical Padding**: Sets top and bottom spacing.
* **Horizontal Padding**: Sets left and right spacing.

</details>

<details>

<summary><strong>Style</strong></summary>

Defines the **appearance and color** of the arrow.

![](/files/bkpIOnB2tNt2Ynkiemvd)

* **Icon Color**: Sets the color of the arrow.
  * **Color Picker**: Select a custom color.
  * **Hex Input**: Enter a specific hex code manually.
* **Radius**: Adjusts the roundness of the arrow background.
  * **Slider Input**: Modify dynamically.
  * **Direct Input**: Set a fixed pixel value.
* **Background**: Configures the background color behind the arrow.
  * **Solid Color**: Choose a color.
  * **Transparent Option**: Remove background if needed.
* **Border**: Adds an optional outline to the arrow background.
  * **Color Picker**: Select a custom border color.
  * **Hex Input**: Enter a specific hex code.
* **Icon Size**: Controls the arrow size.
  * **Slider Input**: Modify dynamically.
  * **Direct Input**: Enter a pixel value for precise scaling.

</details>

#### **Checklist Progress**

Displays the user's checklist completion progress (if a checklist is present).

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

<details>

<summary><strong>Style</strong></summary>

Controls the **appearance and display format** of the checklist progress.

![](/files/GrQRPU1Jj7v8mZImLTO0)

* **Type**: Defines how progress is displayed.
  * **Count**: Displays the number of completed steps out of the total.
  * **Percentage**: Shows progress as a percentage of completion.
* **Color**: Sets the text color of the progress indicator.
  * **Color Picker**: Select a custom color.
  * **Hex Input**: Enter a hex code manually.

</details>

***

### Generic Elements

This section groups parameters specific to common element types used within the **Resource Center**. Each element has its own customization options to enhance functionality and visual appeal.

#### **Title**

Used for defining section headings within the resource center. It is typically used at the top of an action block or group to clearly label its content. **(It's a sub-element included in the header.)**

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

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

<details>

<summary><strong>Content</strong></summary>

Manages the title text and its advanced styling options.

![](/files/YecmoejKjO4DoeD1Cop5)

* **Title Text:**\
  Edits the title text with advanced styling options.

  **Options:**

  * **Text Editor Features:**
    * **Bold:** Make text bold.
    * **Italic:** Italicize text.
    * **Underlining:** Underline text.
    * **Insert Hyperlinks:** Add clickable links.
    * **Emoji Finder:** Insert emojis.
    * **Text Variables:** Insert dynamic user data (e.g., user’s name) that auto-updates based on the viewer.

</details>

<details>

<summary><strong>Style</strong></summary>

Customizes the visual appearance of the heading.

![](/files/8FQLlbhLiZuFfPg35o84)

* **Color:**\
  Defines the color of the title text.

  **Options:**

  * Select a color using the color picker or enter a hex code.
* **Font Family:**\
  Chooses the font for the title text.

  **Options:**

  * Select from available font families.
* **Font Size:**\
  Sets the font size for the title text in pixels.

  **Options:**

  * Enter a value directly or use a slider.
* **Font Weight:**\
  Adjusts the boldness level of the title text.

  **Options:**

  * Choose from options such as normal, bold, bolder, lighter, etc.
* **Alignment**: Determines text placement.
  * **Left, Center, Right Buttons**: Choose the alignment.

</details>

***

#### **Subtitle**

Provides additional context under a **Title**. It is used to introduce sections or provide concise explanations for what users can expect. **(It's a sub-element included in the header.)**

<figure><img src="/files/1nBkWApGYs34MNEcDspm" alt=""><figcaption></figcaption></figure>

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

<details>

<summary><strong>Content</strong></summary>

Manages the title text and its advanced styling options.

![](/files/YecmoejKjO4DoeD1Cop5)

* **Title Text:**\
  Edits the title text with advanced styling options.

  **Options:**

  * **Text Editor Features:**
    * **Bold:** Make text bold.
    * **Italic:** Italicize text.
    * **Underlining:** Underline text.
    * **Insert Hyperlinks:** Add clickable links.
    * **Emoji Finder:** Insert emojis.
    * **Text Variables:** Insert dynamic user data (e.g., user’s name) that auto-updates based on the viewer.

</details>

<details>

<summary><strong>Style</strong></summary>

Customizes the visual appearance of the subtitle.

![](/files/8FQLlbhLiZuFfPg35o84)

* **Color:**\
  Defines the color of the title text.

  **Options:**

  * Select a color using the color picker or enter a hex code.
* **Font Family:**\
  Chooses the font for the title text.

  **Options:**

  * Select from available font families.
* **Font Size:**\
  Sets the font size for the title text in pixels.

  **Options:**

  * Enter a value directly or use a slider.
* **Font Weight:**\
  Adjusts the boldness level of the title text.

  **Options:**

  * Choose from options such as normal, bold, bolder, lighter, etc.
* **Alignment**: Determines text placement.
  * **Left, Center, Right Buttons**: Choose the alignment.

</details>

***

#### **Paragraph**

Allows for longer descriptions and explanations inside action blocks. It supports rich text formatting and is used to give users deeper insights into an action or resource.

<figure><img src="https://help.usejimo.com/~gitbook/image?url=https%3A%2F%2F2794860263-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FKzAcDWQbK1gKbpra7bkb%252Fuploads%252FF1x3JuK5WV2TPIr6peR6%252Fimage.png%3Falt%3Dmedia%26token%3Dc4a46b68-1e7a-4d7f-8203-ef74cb2f643a&#x26;width=768&#x26;dpr=4&#x26;quality=100&#x26;sign=bd6f4470&#x26;sv=2" alt=""><figcaption></figcaption></figure>

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

<details>

<summary><strong>Content</strong></summary>

Manages the paragraph text with advanced formatting options.

![](/files/eZNQQDziBOhPejxUg6zA)

**Text:**\
Edits the paragraph text with advanced formatting options.

**Options:**

* **Text Editor Features:**
  * **Bold:** Make text bold.
  * **Italic:** Italicize text.
  * **Underlining:** Underline text.
  * **Insert Hyperlinks:** Add clickable links.
  * **Emoji Finder:** Insert emojis.
  * **Bullet Points:** Create lists with bullet points.
  * **Multiple Paragraphs:** Add new paragraphs with line breaks.

</details>

<details>

<summary><strong>Style</strong></summary>

Customizes the visual appearance of the paragraph.

![](/files/8FQLlbhLiZuFfPg35o84)

* **Color:**\
  Defines the color of the title text.

  **Options:**

  * Select a color using the color picker or enter a hex code.
* **Font Family:**\
  Chooses the font for the title text.

  **Options:**

  * Select from available font families.
* **Font Size:**\
  Sets the font size for the title text in pixels.

  **Options:**

  * Enter a value directly or use a slider.
* **Font Weight:**\
  Adjusts the boldness level of the title text.

  **Options:**

  * Choose from options such as normal, bold, bolder, lighter, etc.
* **Alignment**: Determines text placement.
  * **Left, Center, Right Buttons**: Choose the alignment.

</details>

***

#### **Media**

Integrate rich media into any Jimo step ― from static screenshots to hosted videos, or **interactive product demos** built with Arcade or Storylane.

<figure><img src="/files/23hR1KszXW6BLNwdOr6r" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/2rFdbSLKSXwzLRXUEyKe" alt=""><figcaption></figcaption></figure>

<details>

<summary><strong>Content</strong></summary>

Handles the addition and configuration of media elements.

![](/files/nA7VK40mlmMyAYs3Au0d)

* **Media Type**

  * **Image**
    * **Upload**: Select an image file (max 5 MB).
    * **URL**: Paste a direct link to an image.
    * **Sizing Style**:
      * *Fill* – crop image to cover container.
      * *Fit* – pad so entire image is visible.
    * **Zoom on Click**: Enable or disable full-size view on click.<br>

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

  * **Video**

    * **URL**: Paste a Vimeo or YouTube link.

    **⇒ Embed:** Automatically renders an interactive player for your video.<br>

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

  * **Demo**

    * **URL**: Paste your Arcade or Storylane share link.

    **⇒ Embed:** Automatically renders an interactive iframe of your demo.\ <br>

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

</details>

<details>

<summary><strong>Style</strong></summary>

Adjusts the visual display of the media element.

![](/files/2L56l4EsilmUN29Jmfa2)

* **Height**: Defines the media height.
  * **Auto**: Adjusts dynamically based on content.
  * **Custom**: Set a fixed pixel value using a slider or manual input.

</details>

***

#### **CTA** (Call-to-Action)

Allows users to interact with an action block by clicking a button that directs them to a link, opens a new resource, or triggers an event.

<figure><img src="https://help.usejimo.com/~gitbook/image?url=https%3A%2F%2F2794860263-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FKzAcDWQbK1gKbpra7bkb%252Fuploads%252FK2tHCoXinVeGkkhhEvgB%252Fimage.png%3Falt%3Dmedia%26token%3Dc06da017-f8c4-4219-be41-7fb42ec1ec1d&#x26;width=768&#x26;dpr=4&#x26;quality=100&#x26;sign=11b44ee5&#x26;sv=2" alt=""><figcaption></figcaption></figure>

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

<details>

<summary><strong>Type</strong></summary>

Defines the style of the CTA.

![](/files/1PpOUEkLzNgIIYemI7iz)

* **Text CTA**: A button with a text label.
* **Icon CTA**: A clickable icon that serves as an action button.

</details>

<details>

<summary><strong>Actions</strong></summary>

Defines the [actions triggered](/docs/build/triggers-and-conditions/steps-triggers.md#types-of-actions-then) when the CTA is clicked.

![](/files/Py9lo7B14hJwGUAKTqjA)

**⇒ CTA Action**: Automatically follows the action assigned to the parent action block.

* **Navigate to** → Redirect users to a specific URL or in-app page.
  * **Destination Type**: Choose where to navigate.
    * **External URL** → Open an external webpage.
    * **Internal Page** → Redirect to a specific page within the application.
  * **Open in**: Define how the page opens.
    * **New tab** → Opens in a separate browser tab.
    * **Same tab** → Replaces the current page.
* **Launch Experience** → Open another Jimo experience.
  * **Experience Type**: Select which type of experience to launch.
    * **Tour** → Start an onboarding or feature tour.
    * **Survey** → Open a feedback survey.
    * **Checklist** → Load a predefined task list.
    * **Banner** → Display a banner notification.
* **Open Post** → Link to a help center or documentation page.
  * **Post Selection**: Choose a specific article or enter a custom URL.
* **Run JavaScript** → Execute custom scripts when the block is clicked.
  * **Custom Code** → Insert JavaScript code directly.

</details>

<details>

<summary><strong>Content</strong></summary>

Manages what is displayed inside the CTA.

![](/files/BIVbqmh3ExEBAL7b1NpA) ![](/files/yZomf7JVL21l4C7cOxUE)

**Icon CTA**

* **Icon Selection** (for Icon CTA): Defines the symbol used.
  * **Preset Icons**: Choose from available libraries (Phosphor, Twemoji).
  * **Custom Upload**: Upload a custom icon (PNG, JPG, SVG).

**Text CTA**

* **Text Field** (for Text CTA): Defines the text displayed.
  * **Text:** Enter the button label.

</details>

<details>

<summary><strong>Style</strong></summary>

The **Style** section controls the visual appearance of the CTA, allowing customization for both **Icon CTA** and **Text CTA** elements.

**Icon CTA**

Defines the appearance of the CTA when using an icon.

![](/files/ti84u2Ck1WcBXwRNez5x)&#x20;

* **Padding:** Adjusts internal spacing around the icon.
  * **Horizontal & Vertical Input:** Set specific padding values.
* **Radius:** Controls the roundness of the CTA button.
  * **Slider Input:** Adjust the corner radius.
  * **Direct Input:** Enter a pixel value for precise control.
* **Icon Size:** Defines the scale of the icon inside the CTA.
  * **Slider Input:** Adjust the icon size.
  * **Direct Input:** Enter a pixel value.
* **Icon Color:** Modifies the color of the icon.
  * **Color Picker:** Select a custom color.
  * **Hex Input:** Enter a hex code manually.
* **Background:** Sets the background color of the CTA.
  * **Solid Color:** Choose a color.
  * **Transparent Option:** Remove the background if needed.
* **Border:** Adds a border around the CTA.
  * **Border Input:** Define color and thickness.
* **Shadow:** Applies a shadow effect to the CTA.
  * **Shadow Input:** Set shadow intensity and color.

**Text CTA**

Defines the appearance of the CTA when using a text label.

![](/files/aCxEoSSNJyRxjSaoUQOQ)

* **Font Family:** Selects the font style for the CTA text.
  * **Dropdown Selection:** Choose from available font families.
* **Font Size:** Adjusts the text size.
  * **Slider Input:** Modify font size dynamically.
  * **Direct Input:** Enter a specific pixel value.
* **Font Weight:** Controls text thickness.
  * **Dropdown Selection:** Choose from different weight options.
* **Padding:** Adjusts spacing inside the button.
  * **Horizontal & Vertical Input:** Define padding values.
* **Radius:** Adjusts the roundness of the button corners.
  * **Slider Input:** Modify border-radius.
  * **Direct Input:** Set a specific pixel value.
* **Text Color:** Changes the font color.
  * **Color Picker:** Select a custom color.
  * **Hex Input:** Enter a hex code manually.
* **Background:** Defines the button background color.
  * **Solid Color:** Choose a background shade.
  * **Transparent Option:** Remove the background.
* **Border:** Adds an outline around the CTA.
  * **Border Input:** Define color and thickness.
* **Shadow:** Applies a shadow effect for depth.
  * **Shadow Input:** Adjust shadow properties.

</details>