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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.usejimo.com/docs/experiences/resource-center/components.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.