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.
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.
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.
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.
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.
Minimize Button: The collapse button that allows users to hide the Resource Center and revert it to the trigger state.
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.
When you click on the top of the navigator 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.
These parameters are organized into different sections within the parameter sidebar, allowing comprehensive customization from top to bottom.
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.
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.
These elements define key functionalities and structure within the Resource Center.
The collapse button that allows users to return to the trigger state.
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.
A versatile header element that can display: Title - Subtitle - Ask AI searchbar.
Configure spacing and alignment within the header canvas.
Gap — Space between the Title, Subtitle, and Ask AI 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.
Pick a background for the entire header block.
Background — Visual backdrop behind the header.
Shape: Select from preset gradient shapes.
Color: Choose a solid HEX or theme colour.
A dedicated block for ongoing checklists, automatically linked.
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.
A standard resource block containing interactive elements.
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.
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.
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.
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.
A collection of multiple actions under a single group heading.
Defines how actions within the group are displayed.
Stack → Arranges actions in a vertical list.
Grid → Aligns actions in a flexible grid layout.
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.
A smart, that answers user questions using your trained AI Knowledge. In the Resource Center builder you only design its look and feel. All learning and retraining happen in Project › Settings › AI Knowledge — see that doc for details.
The Ask AI Searchbar lives inside the Resource Center header and lets users start a conversation inline. Design the search field itself. Options are grouped into Layout, Text, and Placeholder.
Controls spacing, corners, background, and shadow of the input field.
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.
Typography settings for the user’s query inside the field.
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.
Configure the default hint text shown before typing.
Content — Helper text shown before the user types.
Can stay blank; supports emojis and inline code.
Colour — Separate colour for placeholder text.
Controls the button that submits the user’s question. First choose its Type, then customise Layout and Style.
Compact button that shows only an icon.
Selects the button overall aspect.
Type — Toggle between Icon and Text modes.
Determines which style options appear.
Icon — Choose the glyph (Arrow Up, Paper Plane, etc.).
Visual appearance options.
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.
When a question is sent, a chat pane slides open. Customize each part under Block settings › Ask AI.
The main Ask AI element only contains a fallback error response message; every other visual or text element is handled by nested components so you can restyle them independently.
The label shown at the top of the chat pane, letting users know they’re talking to your assistant.
Content — Text shown in the header
Name — Enter any label (e.g., Jimo AI). Supports emojis and up to ~20 characters.
Style — Typography options
Color — Font colour picker.
Font family — Dropdown of project fonts.
Font size — Numeric field + slider (8 – 24 px).
Font weight — Thin → Extra Bold.
Visual styling for the messages sent by the user.
Layout — Container shape & fill
Radius — Corner roundness of the bubble (slider 0 – 24 px).
Padding — Inner spacing; set X and Y values independently or link them.
Background — Bubble fill colour (solid or gradient).
Border — Optional 1 px outline; pick colour or leave empty.
Shadow — RGBA shadow toggle to raise the bubble off the background.
Style — Text appearance inside the bubble
Text colour — Colour picker for the message text.
Font family — Choose from project fonts.
Font size — Numeric field + slider (8 – 24 px).
Font weight — Thin → Extra Bold.
Visual styling for the assistant’s replies.
Layout — Container shape & fill
Radius — Corner roundness of the bubble (slider 0 – 24 px).
Padding — Inner spacing; set X and Y values independently or link them.
Background — Bubble fill colour (solid, gradient, or transparent to blend with pane).
Border — Optional 1 px outline; pick colour or leave empty.
Shadow — RGBA shadow toggle to raise the bubble off the background.
Style — Text appearance inside the bubble
Text colour — Colour picker for reply text.
Font family — Choose from project fonts.
Font size — Numeric field + slider (8 – 24 px).
Font weight — Thin → Extra Bold.
Optional button the AI can include in its reply to launch a tour, open a post, or navigate to a URL.
Style — Visual appearance
Text colour — Colour picker for the label.
Font family — Dropdown of project fonts.
Font size — Numeric field + slider (8 – 24 px).
Font weight — Thin → Extra Bold.
Padding — Inner spacing (X/Y px values; link icon to sync).
Radius — Corner roundness (0 – 24 px slider).
Background — Solid colour or gradient.
Border — Optional 1 px outline; pick colour or leave empty.
Shadow — RGBA shadow toggle to add depth.
Row of quick‑action icons that appear under each AI reply (e.g., Like / Dislike / Copy).
Style — Spacing & icon appearance
Gap — Horizontal space between icons.
Numeric field + slider (0 – 32 px).
Size — Icon dimensions.
Numeric px field + slider (8 – 24 px).
Color — Sets the colour for all icons.
Colour picker or theme token; semi‑transparent greys work well.
Tip: Keep icon size small (16 px) and colour subtle so actions don’t overpower the reply content.
List of documents, posts or experiences that were used to craft the answer.
Layout — Spacing between title and items
Title gap — Distance between the Sources heading and the first item (0 – 32 px slider).
Element gap — Vertical spacing between individual source rows.
Sources Title
Single‑line heading that toggles the list open or closed.
Style — Typography options
Font colour — Colour picker.
Font family — Project font dropdown.
Font size — Numeric field + slider (8 – 24 px).
Font weight — Thin → Extra Bold.
Source
Each row links to a specific page or file chunk.
Layout — Container shape & spacing
Radius — Corner roundness of the row (0 – 24 px).
Gap — Space between icon, text, and CTA (0 – 24 px).
Padding — Internal X/Y padding for the row.
Background — Row fill colour.
Border — Optional outline.
Shadow — RGBA shadow toggle.
Sub‑elements
Source Text — Title of the doc/page.
Style — Font colour, family, size, weight.
Source Icon — Phosphor , Twemoji or file‑type custom icon.
Style — Icon picker • Icon colour • Icon size (8 – 32 px).
Source CTA — Small arrow/button that opens the link.
Layout — Padding • Radius.
Style — Background colour • Text/Icon colour • Icon size (8 – 20 px).
Tip: Use a light background and subtle shadow so sources read like clickable cards without stealing focus from the answer above.
Input field where users type follow‑up questions. Includes its own send button (Send Message CTA).
Layout — Shape & spacing
Radius — Corner roundness for the whole bar (0 – 24 px slider).
Padding — Inner X/Y padding; supports linked values.
Background — Fill colour for the bar.
Border colour — Optional 1 px outline; leave blank for none.
Shadow — RGBA shadow toggle to lift the bar off the pane.
Text — Typography for the user’s input
Colour — Font colour picker.
Font family — Project font dropdown.
Font size — Numeric field + slider (8 – 24 px).
Font weight — Thin → Extra Bold.
Placeholder — Helper text before typing
Content — Default hint (e.g., Reply). Emojis supported.
Colour — Separate placeholder colour.
Design the button that submits the user’s question. First pick Icon or Text, then style accordingly.
Layout (always visible) — Selects the button flavour
Type — Toggle between Icon and Text modes.
Determines which style options appear.
Icon mode
Compact button that shows only an icon.
Layout — Size & shape controls
Icon — Choose the glyph (Arrow Up, Paper Plane, etc.).
Style — Visual appearance options
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.
Text mode
Button that contains a short label.
Layout — Controls size and spacing
Label — The text displayed on the button (e.g., Send).
Accepts up to ~12 characters and supports emojis.
Style — Visual appearance options
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.
Tip: Icon mode saves space; Text mode is clearer for first‑time users.
Each Action Block contains several sub-elements that can be customized:
A heading for grouped actions.
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.
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.
A visual representation of the resource action (customizable with Phosphor Icons or Twemoji).
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.
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.
The Trigger is the minimized state of the Resource Center, allowing users to expand it when needed.
The Trigger element defines how the Resource Center is initially displayed on the interface.
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.
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.
Configures spacing and padding around the trigger elements.
Gap: Sets the spacing between elements.
Padding: Adjusts internal spacing within the trigger.
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.
The main symbol representing the Resource Center in its collapsed state.
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.
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.
Optional accompanying text label next to the trigger icon.
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.
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.
A directional indicator that animates when hovered.
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.
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.
Displays the user's checklist completion progress (if a checklist is present).
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.
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.
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.)
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.
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.
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.)
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.
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.
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.
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.
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.
Enables the addition of visual content such as images, icons, or videos inside action blocks to enhance engagement.
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.
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.
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.
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.
Defines the actions triggered when the CTA is clicked.
⇒ 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.
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.
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.
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.
Last updated
Was this helpful?
