Jimo offers a range of components to build structured Resource Centers, making it easy to customize menus and organize knowledge for a seamless self-serve experience.
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.
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:
Add blocks and individual elements to the main Resource Center.
Add multiple actions inside group blocks to organize resources.
Customize each action by adding text, media, or buttons.
Customize the Trigger with additional elements like icons, text, arrows, or progress indicators.
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
Minimize
Minimize Button:
The collapse button that allows users to hide the Resource Center and revert it to the trigger state.
Text Elements
Title:
The main heading of the Resource Center, used to define the purpose or name of the hub.
Subtitle:
A secondary heading that provides additional context or instructions.
Blocks
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)
Trigger Elements
Trigger
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.
A short, bold heading for the action, clearly indicating its purpose.
Paragraph:
A longer text description providing additional information or context.
Media Elements
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.
Button
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).
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.
Main Step
These parameters are organized into different sections within the parameter sidebar, allowing comprehensive customization from top to bottom.
Layout
Controls width, height, padding, spacing, and positioning of elements within the Resource Center.
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.
Style
Customizes the overall look and feel of the Resource Center.
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.
Special Elements
These elements define key functionalities and structure within the Resource Center.
Minimize
The collapse button that allows users to return to the trigger state.
Layout
Controls the shape and appearance of the minimize button.
Radius: Adjusts the roundness of the button.
Slider Input: Increase or decrease the corner rounding.
Direct Input: Enter a pixel value for precise control.
Icon Color: Defines the color of the minimize icon.
Color Picker: Select a custom color.
Hex Input: Enter a hex code manually.
Background: Sets the background color of the minimize button.
Solid Color: Choose a color for the button.
Transparent Option: Remove the background if needed.
Border: Defines the border color of the button.
Custom Border Color: Select a color for the border.
Optional Input: Leave empty for no border.
Shadow: Adds a shadow effect for depth.
Color Picker: Choose a shadow color.
Opacity Control: Adjust transparency for a subtle or strong effect.
Checklist Block
A dedicated block for ongoing checklists, automatically linked.
Behavior
Defines which checklist is displayed within the resource center.
Active Checklist: Automatically displays the user’s currently active checklist. Displays nothing and hide this section if there's no active checklist.
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.
Action Block
A standard resource block containing interactive elements.
Behavior
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.
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.
Layout
Controls the appearance and structure of the action block to align with your design preferences.
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.
💡 Note: Layout settings apply to all action blocks for a consistent look across your Resource Center.
Hover Effect
Applies visual effects when users hover over the action block.
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.
Group Block
A collection of multiple actions under a single group heading.
Type
Defines how actions within the group are displayed.
Stack → Arranges actions in a vertical list.
Grid → Aligns actions in a flexible grid layout.
Style
Controls spacing and alignment within the group block.
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.
Action Block Elements
Each Action Block contains several sub-elements that can be customized:
Group Title
A heading for grouped actions.
Content
Customize the text content of the group title.
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.
Style
Controls the visual appearance of the group title.
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.
Icon
A visual representation of the resource action (customizable with Phosphor Icons or Twemoji).
Layout
Defines the spacing and size of the icon within the action block.
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.
Style
Customizes the icon’s appearance.
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.
Trigger Elements
The Trigger is the minimized state of the Resource Center, allowing users to expand it when needed.
Trigger Main Step
The Trigger element defines how the Resource Center is initially displayed on the interface.
Type
Controls how the trigger is displayed and interacts with users.
Compact: Starts with only an icon and expands on hover.
Expanded: Displays all trigger elements at all times.
Position
Defines where the trigger is placed within the interface.
Position: Aligns the trigger to the left or right side.
Offset: Adjusts the precise placement using pixel values.
Layout
Configures spacing and padding around the trigger elements.
Gap: Sets the spacing between elements.
Padding: Adjusts internal spacing within the trigger.
Style
Customizes the visual appearance of the trigger.
Radius: Adjusts the roundness of the trigger container.
Background: Sets the background color.
Border: Adds an optional border.
Shadow: Controls the shadow effect.
Icon
The main symbol representing the Resource Center in its collapsed state.
Layout
Controls the spacing and positioning of the icon within the trigger button.
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.
Style
Defines the visual aspects of the icon, including color, size, and background.
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.
Text
Optional accompanying text label next to the trigger icon.
Content
Manages the text behavior and content within the trigger.
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.
Style
Controls the typography and color of the trigger text.
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.
Arrow
A directional indicator that animates when hovered.
Layout
Controls spacing and positioning of the arrow within the trigger.
Padding: Adjusts the internal spacing around the arrow.
Vertical Padding: Sets top and bottom spacing.
Horizontal Padding: Sets left and right spacing.
Style
Defines the appearance and color of the arrow.
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.
Checklist Progress
Displays the user's checklist completion progress (if a checklist is present).
Style
Controls the appearance and display format of the checklist progress.
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.
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.
Content
Manages the title text and its advanced styling options.
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.
Style
Customizes the visual appearance of the heading.
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.
Subtitle
Provides additional context under a Title. It is used to introduce sections or provide concise explanations for what users can expect.
Content
Manages the title text and its advanced styling options.
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.
Style
Customizes the visual appearance of the subtitle.
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.
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.
Content
Manages the paragraph text with advanced formatting options.
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.
Style
Customizes the visual appearance of the paragraph.
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.
Media
Enables the addition of visual content such as images, icons, or videos inside action blocks to enhance engagement.
Content
Manages the media source and its display.
Media Type: Choose between image or video.
Image: Upload an image or provide a URL.
Video: Embed videos from supported platforms.
Image Source:
Upload: Select an image from your computer (PNG, JPG, SVG, GIF).
URL: Enter a direct URL to an image.
Recent Uploads: Choose from previously uploaded media.
Video Source:
Embed URL: Paste a video URL from supported platforms (YouTube, Loom, Vimeo, etc.).
Sizing: Defines how the media adjusts within the element.
Fill: Expands to fit the available space.
Fit: Ensures the entire media remains visible within its boundaries.
Style
Adjusts the visual display of the media element.
Height: Defines the media height.
Auto: Adjusts dynamically based on content.
Custom: Set a fixed pixel value using a slider or manual input.
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.
Type
Defines the style of the CTA.
Text CTA: A button with a text label.
Icon CTA: A clickable icon that serves as an action button.
Actions
⇒ 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.
Content
Manages what is displayed inside the CTA.
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.
Style
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.
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.
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.
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.
When you click on the top of the arborescence, you access the Resource Center main step which is the main structure that contains all other sections except trigger, defining the expanded widget's appearance and content layout.
