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.
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.
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.
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.
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)
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).
Title:
A short, bold heading for the action, clearly indicating its purpose.
Paragraph:
A longer text description providing additional information or context.
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.
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).
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 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.
These parameters are organized into different sections within the parameter sidebar, allowing comprehensive customization from top to bottom.
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.
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.
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.
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.
Controls the shape, appearance, and spacing of both the minimize button and the drag handle.
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.
A versatile header element that can display: Title - Subtitle - AI Agent searchbar.
Configure spacing and alignment within the header canvas.
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.
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.
The Ask Agent block adds a conversational AI prompt to your Resource Center, powered by the 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.
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.
The Agent's behavior, personality, and language are controlled from Agent > Chat.
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 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.
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.
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.
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.
Button that contains a short label.
Controls size and spacing
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.
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.
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 — General instructions, persona, presets, language, and chat widget appearance.
Agent > Knowledge — Training sources (URLs, files, text), Tours, Actions, and Custom Answers.
Agent > Analyze — 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 for all the ways to trigger the Agent.
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 (RC), allowing users to expand it when needed. It defines how the RC initially appears in the interface.
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.
Custom Element:The trigger is hidden by default and only controllable via SDK commands.
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.
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.
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.
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.
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.
Integrate rich media into any Jimo step ― from static screenshots to hosted videos, or interactive product demos built with Arcade or Storylane.
Handles the addition and configuration of media elements.
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.
Video
URL: Paste a Vimeo or YouTube link.
⇒ Embed: Automatically renders an interactive player for your video.
Demo
URL: Paste your Arcade or Storylane share link.
⇒ Embed: Automatically renders an interactive iframe of your demo.
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
