Jimo offers a variety of components to help you create engaging Tours and Modals. Each component serves a specific purpose, from guiding users with tooltips to celebrating milestones with animations.
Each component provides different ways to interact with users, enhance onboarding flows, and improve feature discoverability.
Components in Jimo are divided into two main categories:
Targeted Components: These attach to specific UI elements on your website, guiding users in context (e.g., Tooltips, Pointers, Stickers, Badges).
Standalone Components: These display information independently without being linked to a UI element (e.g., Modals, Snippets, Celebration).
Additionally, Jimo offers five main step types, which define the overall behavior of a step. When selecting a component in the Flow Builder, it will be categorized into one of these step types:
Cursor: Follows the user’s pointer for dynamic guidance.
Tooltip: Attaches to a UI element, providing contextual information.
Snippet: Displays floating informative cards without attachment.
Modal: Captures attention with larger, centralized pop-ups.
Badge: Attaches a pulsing icon to elements for additional guidance.
Each component selected in the Flow Builder is a variation of one of these five step types, enhanced with preset elements such as animations and visual cues.
(Eg. Sticker is a Tooltip step type with a pre-added sticker visual cue.)
Some elements are common across all step types, while others are specific, ensuring flexibility and adaptability in user interactions.
Celebration
Pointer
Sticker
Presents larger, more detailed messages or prompts that capture user attention by displaying prominently in the center of the screen. Functions as a standalone step within a tour or as its own modal experience.
⇒ Best for important announcements, onboarding new users, or collecting feedback.
Delivers small, informative cards that can be placed in fixed positions across the screen to guide users without being intrusive. It can be placed in corners or center top/bottom without attaching to specific UI elements.
⇒ Ideal for providing tips, quick onboarding steps, or promoting features in non-disruptive ways.
A Modal with a built-in animated effect, designed to enhance user engagement by adding a festive or success-oriented touch.
⇒ Acknowledging user achievements, welcoming new users, or adding a fun and dynamic touch to the experience.
Directs user attention by following their mouse pointer with a customizable, animated cursor that highlights key actions or features. The cursor adds a layer of interactivity and ensures users are guided effectively through your product.
⇒ Perfect for creating dynamic, visually engaging tours that require precise focus on elements like buttons, forms, or tooltips.
Guides users by highlighting specific UI elements, ensuring they understand key features or actions.
⇒ Perfect for pointing out new features, guiding users through complex workflows, or highlighting important buttons.
Attaches a pin or pulsating icon to specific UI elements, providing contextual information or prompts when users interact with them.
⇒ Useful for drawing attention to new or important features, guiding users through specific actions, or highlighting updates.
A Tooltip with a gesture-based animation attached to the targeted element, helping nudge interactions and draw user attention dynamically.
⇒ Encouraging interactions on key features, directing attention to important elements, or guiding users through complex workflows.
A Tooltip with a static icon sticker on the targeted element, visually highlighting key elements in a subtle yet effective way.
⇒ Subtly reinforcing UI elements without distractions, marking essential buttons or inputs, and maintaining visual consistency.
Targeted Step Type
Requires positioning using Jimo’s CSS selector to attach the badge to a specific element on your website.
To create engaging and effective Tours and Modals, you can add various elements to each step. These elements allow you to tailor the content and behavior to meet your specific objectives.
Heading: Craft compelling titles and headers to grab attention and set the context.
Paragraph: Convey detailed information with descriptive text to guide users through the experience.
Label: Use labels to annotate images, videos, and other interactive elements for clarity.
Image/Video: Enhance your component with illustrative images or explanatory videos.
(5MB size limit)
Profile: Personalize the experience by including profile pictures or avatars, which are particularly effective in social proof or testimonial components.
Primary Button (CTA): Encourage users to take action with a prominently styled button.
Secondary Button (CTA): Offer an alternative action with a less dominant button style.
Stepper: Include a stepper for multi-step processes, guiding users through a sequence of actions or content.
Cross: Allows users to dismiss or snooze the experience by clicking a closing cross in the corner.
After selecting your experience structure, it's time to infuse it with content that resonates with your users. Each element you add to a step comes with specific options and parameters to customize its behavior and appearance.
When you click on the top of the navigator arborescence, you access the Main Step Parameters.
These parameters are organized into different sections within the parameter sidebar, allowing comprehensive customization from top to bottom.
Change the style of your step (e.g., from Tooltip to Modal). Switching the step type does not remove or alter any parameters; unused or disappearing parameters remain intact, allowing you to revert to a previous type without losing your configurations.
Step Type: Select the desired step style from the dropdown menu
Options: Tooltip, Snippet, Modal, Badge
Contains parameters specific to the selected step type, enabling functionality tailored to the step's purpose. The General section varies based on the step type, providing unique customization options where necessary.
Modal
Position: Modals have a unique, fixed placement and do not require additional positioning parameters.
Snippet
Position: Defines the fixed position where the Snippet appears on the screen.
Options:
Corners: Top-left, Top-right, Bottom-left, Bottom-right
Centered: Center-top, Center-bottom
Tooltip & Badge
Position: Access all positioning options to define where the Tooltip or Badge appears relative to the target UI element.
Options:
CSS Selector: Define the target element using a CSS selector or select manually.
Relative Placement: Choose from auto-placement, fixed options, or custom offsets.
Z-Index: Set the z-index value to control layering.
Target Highlight (Tooltips Only): Add or remove a pointer and borders around the target element.
Skip if Target Element Not Found: Determines whether the step should be skipped if the specified target element is not found on the page.
Options:
Yes: If the target element is not found, the step is skipped.
No: The step will still display even if the target element is missing.
Define how the step behaves in response to user interactions, ensuring the step responds appropriately to user actions.
or 
To Show (Only for Badge): Determines how the card associated with the Badge is displayed alongside the icon.
Options:
On Click: The card appears when the user clicks the Badge icon.
On Hover: The card appears when the user hovers over the Badge icon.
Always Open: The card is always visible alongside the Badge icon.
To Dismiss: Specifies how users can close the experience. Closing is logged as dismissed in the stats, not as completed.
Options:
Can't Be Dismissed: Users cannot close the step manually.
Click the Cross: Users can close the step by clicking the closing cross icon.
Click Outside: Users can close the step by clicking anywhere outside the step component.
Both: Users can close the step by either clicking the cross or clicking outside the step component.
To Progress (Only for Tooltip): Defines how the tour progresses to the next step from the current Tooltip.
Options:
Default Progression: Progresses based on CTA (Call to Action) buttons and predefined triggers.
Targeted Element Click: Progresses to the next step when the user clicks the element targeted/highlighted by the Tooltip.
Triggers: Provides quick access to the triggers & conditions sidebar panel, allowing you to add if/else logic between steps.
Options:
Add Trigger: Opens the triggers panel to define conditional logic based on user actions or events.
Adjust the dimensions and spacing of the step to ensure proper layout and visual harmony within your user interface.
Width: Set the width of the step component.
Options:
Auto: Automatically adjusts based on content.
Custom: Specify a pixel size using the slider or enter the value directly.
Height: Set the height of the step component.
Options:
Auto: Automatically adjusts based on content.
Custom: Specify a pixel size using the slider or enter the value directly.
Padding: Add vertical or horizontal padding in pixels between the side of the step card and the elements within (paragraph, image, etc.).
Options:
Vertical Padding: Specify the padding in pixels.
Horizontal Padding: Specify the padding in pixels.
Gap: Add a gap in pixels between elements within the card.
Options:
Gap Size: Specify the gap size using the slider or enter the value directly.
Customize the overall visual appearance of the step card to align with your brand and enhance user engagement.
Shadow: (Optional) Add a shadow effect around the step card to create depth.
Options:
Shadow Color: Select the color of the shadow (remove it using the cross).
X Offset (px): Define the horizontal displacement of the shadow.
Y Offset (px): Define the vertical displacement of the shadow.
Blur (percentage): Adjust the blur intensity of the shadow.
Radius: Set the roundness of the step card's corners.
Options:
Percentage: Choose a value between 0% (sharp corners) and 50% (fully rounded corners).
Background: Define the main color of the step card's background.
Options:
Color Mode:
Single Color: Select a plain background color.
Gradient Mode:
Color 1: Choose the first color of the gradient.
Color 2: Choose the second color of the gradient.
Gradient Type:
Classic Fixed Gradient: A static gradient transition.
Animated Gradient: A dynamic gradient transition with movement.
Border: (Optional) Add a border around the step card to define its boundaries.
Options:
Border Color: Select the color of the border (remove it using the cross).
Overlay: (Optional) Apply an overlay to gray out the rest of the screen, highlighting the step card.
Options:
Overlay Color: Choose the color and opacity of the overlay to ensure the step card stands out (remove it using the cross).
Manage visual effects applied to the step. Define how steps animate when they appear or disappear, enhancing the user experience through smooth and engaging transitions.
Elements: Enable or disable animation for each element within the card.
Options:
Yes: Apply animation to each element.
No: Do not apply animation to individual elements.
In: How the step appears on the screen.
Options:
None: No animation.
Fade: Fade into view.
Slide from Up: Slide in from the top.
Slide from Down: Slide in from the bottom.
Slide from Left: Slide in from the left.
Slide from Right: Slide in from the right.
Out: How the step disappears from the screen.
Options:
None: No animation.
Fade: Fade out of view.
Slide to Up: Slide out to the top.
Slide to Down: Slide out to the bottom.
Slide to Left: Slide out to the left.
Slide to Right: Slide out to the right.
This section encompasses parameters specific to certain experience types, providing additional customization options to enhance user interactions.
Located at the top of the navigator, this section provides access to all positioning options, mirroring those found in the General section of the Main Step Parameters.
Configure how the step is attached to a specific UI element.
Position: Access all positioning options to define where the Tooltip or Badge appears relative to the target UI element.
Options:
CSS Selector: Define the target element using a CSS selector or select manually.
Relative Placement: Choose from auto-placement, fixed options, or custom offsets.
Z-Index: Set the z-index value to control layering.
Target Highlight (Tooltips Only): Add or remove a pointer and borders around the target element.
Exclusive to the Badge step type, the Hotspot section allows you to customize the badge pin icon to draw user attention effectively.
Defines how the badge behaves when interacted with by the user.
On Click: Defines the behavior when the user clicks the badge pin to expand the badge content.
Options:
Hide: The badge content hides after being clicked.
Persist: The badge content remains visible once clicked.
Customize the visual aspects of the badge pin to align with your brand and design preferences.
Shape: Determines the visual appearance of the badge pin.
Options:
Plain Dot: A simple circular pin.
Question Mark: A pin featuring a question mark icon.
Info Icon: A pin featuring an information icon.
Animation: (Only available for the Plain Dot shape) Adds a pulsating effect to make the pin more eye-catching.
Options:
Pulse: The pin gently pulsates to attract attention.
No: The pin remains static without any animation.
Position: Provides quick access to positioning options to define where the Tooltip or Badge appears relative to the target UI element, same as those found in the main step parameters.
Options:
CSS Selector: Define the target element using a CSS selector or select manually.
Relative Placement: Choose from auto-placement, fixed options, or custom offsets.
Z-Index: Set the z-index value to control layering.
Target Highlight (Tooltips Only): Add or remove a pointer and borders around the target element.
Hotspot Size: Sets the diagonal size of the badge pin in pixels.
Options:
Slider: Adjust the size using a slider control.
Direct Input: Enter the desired pixel value manually.
Color: Defines the color of the badge pin icon.
Options:
Color: Select a color from the palette.
Exclusive to the Cursor step type, the Cursor section allows you to customize the pointer's appearance and behavior, ensuring it effectively draws user attention to specific areas or actions in your interface. Use these options to stylize the cursor and enhance its visual clarity.
Customize the visual appearance of the cursor element, including its background and border.
Background: Defines the main fill color of the cursor. Options:
Color picker: Choose a color using the palette.
Hex input: Enter a specific hex code.
Border: Adds an optional outline around the cursor. Options:
Color picker: Choose a color using the palette.
Hex input: Enter a specific hex code.
The Cursor step type restricts the generic elements that can be added to:
Text Elements: Only Paragraph is allowed.
Media Assets: Only Image/Video and Profile are allowed.
Interactions: Only the Cross is available.
This limitation ensures that the focus remains on the cursor’s ability to guide the user while maintaining a clean and intuitive design.
Visual Cues are special elements that can be added to targeted steps to enhance user guidance and interaction. They provide subtle or dynamic visual indicators that help direct attention toward specific UI elements.
Choose from Stickers, Gestures, or Pointers based on the intended visual effect.
Jimo offers three types of visual cues, each designed for different use cases:
Stickers: Static icons placed on elements to highlight them. Stickers are pre-added to the Sticker component.
Gestures: Animated icons suggesting user actions (e.g., tap, scroll, swipe). Gestures are pre-added to the Pointer component.
Pointers: Arrows and directional indicators to guide users visually toward an element.
Define where the visual cue appears relative to the targeted element using a fixed positioning grid.
You can also fine-tune the position using X/Y offset fields.
Adjust the overall dimensions and orientation of the visual cue to fit different UI elements and maintain design consistency.
Scale: Adjust the size of the visual cue to fit different UI elements.
Rotate: Modify the orientation of the cue to align with UI flow.
Modify the colors and borders of the visual cue to match your brand and ensure visibility against various backgrounds.
Primary Color: Defines the main color of the visual cue.
Secondary Color: Used for accent colors on specific visual cues.
Border Color (Stickers only): Customize the border to improve visibility.
Control the movement of the visual cue to make it more noticeable and engaging, helping guide users' attention effectively.
Speed: Adjust the speed of the cue’s animation (e.g., pulsing for Stickers, movement for Gestures).
Loop: Toggle whether the animation repeats continuously or plays once.
This section groups parameters specific to common element types used within your Tours and Modals. Each element has its own customization options to enhance functionality and visual appeal.
Provides users with a way to dismiss or snooze the experience.
Defines how the cross behaves when interacted with by the user.
Actions: Defines what happens when the cross is clicked.
Options:
Dismiss: Closes the experience and logs it as dismissed in the statistics.
Snooze: Temporarily hides the experience (only available on the first step).
Customizes the visual appearance of the cross.
Font Size: Sets the size of the cross icon in pixels.
Options:
Enter a value directly or use a slider to adjust.
Radius: Adjusts the roundness of the cross box corners.
Options:
Percentage value to define edge roundness from sharp to fully rounded.
Color: Defines the color of the cross icon.
Options:
Select a color using the color picker or enter a hex code.
Background: Adds and selects the color of the cross background box.
Options:
Choose a background color or remove it by clicking the cross icon.
Display an employee profile with a name, title, and image to personify your message.
Manages the textual and visual information displayed in the profile.
Name: Specifies the name displayed in the profile text block.
Options:
Enter the desired name text.
Title: (Optional) Defines the role or title in the profile text block.
Options:
Enter the title text or leave it blank.
Image: Uploads a profile image or links via URL.
Options:
Upload: Select an image file (maximum 5MB).
URL: Enter the direct link to the image.
Customizes the visual aspects of the profile.
Font Family: Choose the font for the name and title texts.
Options:
Select from available font families.
Font Size: Sets the font size for the name and title in pixels.
Options:
Enter a value directly or use a slider.
Color: Defines the text color for the name and title.
Options:
Select a color using the color picker or enter a hex code.
Integrate rich media into any Jimo step ― from static screenshots, to hosted videos, to 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.
Defines the layout and appearance of the media content.
or 
Type: Chooses the overall layout style for the media.
Options:
Vertical Integration: Aligns the image vertically within the step.
Horizontal Integration: Aligns the image horizontally within the step.
Position: Defines the placement of the media based on the selected type.
Options:
Vertical:
Top: Positions the image at the top of the step.
Bottom: Positions the image at the bottom of the step.
Horizontal:
Left: Positions the image to the left side of the step.
Right: Positions the image to the right side of the step.
Height/Width: Sets the size of the media.
Options:
Vertical:
Height: Choose between Auto or specify a custom pixel size.
Horizontal:
Width: Choose between Auto or specify a custom pixel size using a slider or direct input.
Padding: Adds padding around the media content.
Options:
Horizontal Padding: Specify padding in pixels.
Vertical Padding: Specify padding in pixels.
Radius: Adjusts the roundness of the media corners.
Options:
Enter a percentage or pixel value to define corner roundness.
Adds a text label to annotate elements within the step.
Manages the text displayed on the label.
Text: Defines the text displayed in the label.
Options:
Enter the desired label text.
Configures the styling and positioning of the label.
Font Family: Choose the font for the label text.
Options:
Select from available font families.
Font Size: Sets the font size for the label text in pixels.
Options:
Enter a value directly or use a slider.
Font Weight: Adjusts the boldness level of the label text.
Options:
Choose from options such as normal, bold, bolder, lighter, etc.
Text Color: Defines the color of the label text.
Options:
Select a color using the color picker or enter a hex code.
Background: (Optional) Sets the background color of the label.
Options:
Choose a color using the color picker or remove it by clicking the cross icon.
Border: (Optional) Adds a border around the label.
Options:
Select the border color using the color picker or remove it by clicking the cross icon.
Padding: Adds padding inside the label between the text and its borders.
Options:
Horizontal Padding: Specify padding in pixels.
Vertical Padding: Specify padding in pixels.
Radius: Adjusts the roundness of the label corners.
Options:
Enter a percentage or pixel value to define corner roundness.
Position: Determines the placement of the label within the step.
Options:
Right: Aligns the label to the right side.
Centered: Centers the label horizontally.
Left: Aligns the label to the left side.
Adds a prominent title to the step for emphasis and context.
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.
Align: Determines the alignment of the title within the step.
Options:
Right: Aligns the title to the right.
Centered: Centers the title.
Left: Aligns the title to the left.
Adds descriptive body text to provide detailed information within the step.
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 paragraph text.
Options:
Select a color using the color picker or enter a hex code.
Font Family: Chooses the font for the paragraph text.
Options:
Select from available font families.
Font Size: Sets the font size for the paragraph text in pixels.
Options:
Enter a value directly or use a slider.
Font Weight: Adjusts the boldness level of the paragraph text.
Options:
Choose from options such as normal, bold, bolder, lighter, etc.
Align: Determines the alignment of the paragraph within the step.
Options:
Right: Aligns the paragraph to the right.
Centered: Centers the paragraph.
Left: Aligns the paragraph to the left.
Displays the progress of the user through multiple steps.
Defines the layout and style of the stepper.
Type: Chooses the overall style of the stepper to indicate progress.
Options:
Dotted Line: Shows exact step progress with dots.
Bar: Displays a full bar that progressively fills based on the percentage of steps completed.
Text: Indicates progress with text (e.g., "1 of X").
Position: Determines where the stepper is placed within the step.
Options:
Top: Positions the stepper at the top of the step.
Bottom: Positions the stepper at the bottom of the step.
Align: Sets the horizontal alignment of the stepper.
Options:
Right: Aligns the stepper to the right.
Center: Centers the stepper.
Left: Aligns the stepper to the left.
Customizes the visual aspects of the stepper.
Step: Defines the color of the stepper's background, text, or inactive steps.
Options:
Select the desired color for each element of the stepper.
Step Active: (Only for Bar or Step Types) Sets the color of the current step or the progress fill.
Options:
Choose a color that highlights the active step or the filled portion of the progress bar.
Encourages users to take a primary action within the step.
Defines the actions triggered when the CTA is clicked.
Actions: Defines the actions triggered when the CTA is clicked.
Options:
Go To Step: Proceeds to the next step in the tour.
Redirect: Redirects the user to a specified URL.
Trigger Experience: Initiates another experience.
Combine Actions: Allows multiple actions to be executed upon click.
Notes:
Snooze: Only available on the first step.
Primary CTA Requirement: Must include at least one "Go To Step" action to affect progression.
Adjusts the width style of the CTA button.
Width: Chooses the background style of the CTA.
Options:
Fit: Adjusts the CTA width to fit the text content.
Fill: Extends the CTA to fill the entire available width.
Customizes the content and styling of the CTA button.
Text: Edits the text content of the CTA button.
Options:
Enter and style the desired button text.
Font Family: Chooses the font for the CTA text.
Options:
Select from available font families.
Font Size: Sets the font size for the CTA text in pixels.
Options:
Enter a value directly or use a slider.
Font Weight: Adjusts the boldness level of the CTA text.
Options:
Choose from options such as normal, bold, bolder, lighter, etc.
Padding: Adds padding inside the CTA button between the text and the button borders.
Options:
Vertical Padding: Specify padding in pixels.
Horizontal Padding: Specify padding in pixels.
Radius: Sets the roundness of the CTA button corners.
Options:
Enter a percentage or pixel value to define corner roundness.
Text Color: Defines the color of the CTA text.
Options:
Select a color using the color picker or enter a hex code.
Background: (Optional) Sets the background color of the CTA button.
Options:
Choose a color using the color picker or remove it by clicking the cross icon.
Border: (Optional) Adds a border around the CTA button.
Options:
Select the border color using the color picker or remove it by clicking the cross icon.
Position: Aligns the CTA button within the step.
Options:
Left: Aligns the CTA to the left.
Centered: Centers the CTA.
Right: Aligns the CTA to the right.
Provides an alternative action within the step, typically for less critical actions.
Defines the actions triggered when the secondary CTA is clicked.
Actions: Defines the actions triggered when the Secondary CTA is clicked.
Options:
Go To Step: Proceeds to the previous step in the tour.
Redirect: Redirects the user to a specified URL.
Trigger Experience: Initiates another experience.
Remove Go To Step: Can remove all "Go To Step" actions to prevent affecting the current flow.
Notes:
Default Action: Acts as a back/previous button.
Flexibility: Can be used to open links or trigger experiences without impacting the current tour progression.
Adjusts the width style of the Secondary CTA button.
Width: Chooses the background style of the Secondary CTA.
Options:
Fit: Adjusts the CTA width to fit the text content.
Fill: Extends the CTA to fill the entire available width.
Customizes the content and styling of the Secondary CTA button.
Edits the text content of the Secondary CTA button.
Options:
Enter and style the desired button text.
Font Family: Chooses the font for the Secondary CTA text.
Options:
Select from available font families.
Font Size: Sets the font size for the Secondary CTA text in pixels.
Options:
Enter a value directly or use a slider.
Font Weight: Adjusts the boldness level of the Secondary CTA text.
Options:
Choose from options such as normal, bold, bolder, lighter, etc.
Padding: Adds padding inside the Secondary CTA button between the text and the button borders.
Options:
Vertical Padding: Specify padding in pixels.
Horizontal Padding: Specify padding in pixels.
Radius: Sets the roundness of the Secondary CTA button corners.
Options:
Enter a percentage or pixel value to define corner roundness.
Text Color: Defines the color of the Secondary CTA text.
Options:
Select a color using the color picker or enter a hex code.
Background: (Optional) Sets the background color of the Secondary CTA button.
Options:
Choose a color using the color picker or remove it by clicking the cross icon.
Border: (Optional) Adds a border around the Secondary CTA button.
Options:
Select the border color using the color picker or remove it by clicking the cross icon.
Position: Aligns the Secondary CTA button within the step.
Options:
Left: Aligns the CTA to the left.
Centered: Centers the CTA.
Right: Aligns the CTA to the right.
Allow you to add dynamic effects to steps, enhancing engagement and providing visual feedback for users.
It can be used to highlight key moments or celebrate user actions.
Type: Defines the animation effect applied to the step. (Currently, only "Confetti" is available.)
Speed: Adjusts how fast the animation plays. Higher values make the confetti fall faster.
Play Button: Allows you to preview the animation effect directly in the step editor before applying it.
Last updated
