Discover key components for crafting Surveys in Jimo. Enhance surveys with Text, Media, and Interaction assets to ensure a comprehensive, informative journey.
Collect user data with a variety of question types, allowing participants to vote, select options, or provide open-ended feedback.
⇒ Perfect for gathering opinions, measuring satisfaction, or validating ideas in a straightforward, responsive way.
NPS
Collect Net Promoter Score by asking users how likely they are to recommend your product.
⇒ Perfect for measuring overall loyalty or satisfaction at key points in the user journey.
Multiple Choice
Present a set of predefined options for quick user selection.
⇒ Perfect for identifying user preferences, validating ideas, or segmenting responses based on chosen answers.
Slider
Allow users to pick a value on a continuous scale by dragging a slider.
⇒ Perfect for gauging intensity or sentiment when numerical precision is important (e.g., budget ranges, satisfaction levels).
Opinion Scale
Use a 3 to 7, star or emoji-based scale to capture user sentiment.
⇒ Perfect for quick emotional checks, simple ratings, or micro-feedback on features.
Open Question
Invite free-form text input for more detailed user responses.
⇒ Perfect for gathering extensive feedback, feature suggestions, or user stories in their own words.
Test
Showcase external content (e.g., prototypes, calendars) and encourage users to interact or respond directly.
⇒ Perfect for validating concepts, scheduling follow-ups, or gathering in-depth feedback on mockups or design elements.
Concept Test
Showcase a mockup, prototype, or description and gather reactions.
⇒ Perfect for validating designs or ideas before further investment, leveraging direct user feedback on visuals or concepts.
Interview Prompt
Prompt users to volunteer for interviews or deeper usability testing.
⇒ Perfect for finding engaged participants who are willing to provide more in-depth insights or schedule a follow-up session.
Say
Deliver messages without expecting a user response, acting like a mini modal within a survey.
⇒ Perfect for providing context, guiding participants between question sets, or thanking them upon completion.
Text Block
Present informational text or instructions without requiring a response.
⇒ Perfect for providing context, guiding users through sections of the survey, or clarifying key points between questions.
Thank You
Offer a final message or confirmation once the survey is completed, same as a text block but you can add animations on display like confetti.
⇒ Perfect for showing gratitude, giving a summary, or directing users to additional resources after they finish.
Customizing Your Steps
To create engaging and effective Surveys, you can combine Ask, Test, and Say question types with additional elements that guide users, offer context, or invite interaction. Each element is fully customizable from the Content Builder, ensuring your survey aligns with your brand and objectives.
Add Elements
Available Elements
Text Elements
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.
Media Assets
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.
Interactions
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.
Elements Parameters
After assembling your survey’s steps in the Flow Builder, it’s time to refine each element in the Content Builder to ensure your questions are clear, engaging, and visually cohesive. Every component, whether it’s a rating scale, an open-ended question, or a “Thank You” message, comes with specific parameters you can adjust.
Main Step
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.
Type
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.
If you want different styles mid-survey, you must split your questions into multiple surveys.
Step Type: Select the desired step style from the dropdown menu
Options: Tooltip, Snippet, Modal, Badge
General
Contains parameters specific to the selected step style 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.
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.
Behavior
Define how the step behaves in response to user interactions, ensuring the step responds appropriately to user actions.
Answer Required (Only for Ask-type steps): Determines whether users must answer the current question before proceeding.
Options:
Toggle On: The “Next” or “Continue” CTA remains disabled until the user provides an answer.
Toggle Off: The user can skip this question and still advance to the next step.
To Show (Only for Badge-style steps): 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.
Layout
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.
Style
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.
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.
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).
Animation
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.
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.
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.
Special Elements
This section encompasses parameters specific to certain experience types, providing additional customization options to enhance user interactions.
Target Element Parameters
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.
Target Element
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.
Effects
Add visual flair to highlight the targeted element more prominently.
Type: Choose the style of the highlighting effect.
Options:
None: No additional highlighting beyond standard positioning.
Glow: A soft glow radiates around the targeted element.
Shimmer: A moving highlight sweeps across the element periodically.
Color: Define the color of the glow or shimmer effect.
Options:
Color Picker: Select a color from the palette.
Hex Input: Enter a specific hex color code.
Speed: Adjust the animation speed or frequency of the effect.
Options:
Slider: Move to set faster or slower animation intervals.
Direct Input: Enter a numeric value indicating refresh or pulse rate
Hotspot parameters
Exclusive to the Badge step type, the Hotspot section allows you to customize the badge pin icon to draw user attention effectively.
Behavior
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.
Style
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.
Survey-Specific Steps
Unlike Tours (where each step can be a different style), Survey steps all share the same style but differ in function. When you add an NPS, Multiple Choice, or any other Ask / Test / Say step, an additional “question-specific” element appears in the navigator.
Fixed Position in Navigator: Each question type has a dedicated node in the tree you cannot remove, ensuring every step’s core functionality remains intact.
NPS
This step displays two labels (left and right), with numbers in between, and allows styling options to fit your survey’s look and feel.
Style
Animation: Enables or disables the main step’s configured animation for the NPS scale.
Options:
Yes: Inherits slide, fade, or other effects from the main step.
No: The NPS element remains static, ignoring any main step animations.
Left Label: Text for the low/negative end of the scale (default: "Feel very bad").
Options:
Editable Text Field: Change the displayed label.
Right Label: Text for the high/positive end of the scale (default: "Feel very good").
Options:
Editable Text Field: Change the displayed label.
Font Size: Sets the text size for labels and numbers.
Options:
Slider or Direct Input: Specify a pixel value.
Padding (Vertical & Horizontal): Controls the space around the NPS component.
Options:
Vertical: Enter a pixel value for top/bottom spacing.
Horizontal: Enter a pixel value for left/right spacing.
Font Family: Selects the typeface for labels and numbers.
Options:
Dropdown: Pick from available fonts.
Search Bar: Locate a custom or uploaded font.
Labels Color(Optional): Defines a custom color for the left and right labels (default: black).
Options:
Color Picker: Choose from the palette.
Hex Input: Enter a hex code.
Multiple Choice
This step includes a dedicated Options section for creating and editing choices, and a Layout section for styling how those choices appear.
Options
Manage the content and structure of your MCQ options.
Option 1 & Option 2: Default placeholders for at least two choices.
Options:
Editable Labels: Rename or edit each choice’s text.
Minimum of Two: You can’t remove both options; at least two must remain.
+ Icon: Use the plus icon to add additional choices to the MCQ.
Options:
New Choice: Labeled “Choice 3,” “Choice 4,” etc., by default.
Trash Icon: Delete an unwanted choice from the list.
Layout
Define how the MCQ answer block appears and functions within your survey.
Choice Type
Determines whether participants can select a single option or multiple options.
Options:
Single: Only one choice can be selected at a time.
Multiple: Users can pick several choices from the list.
Checkbox
Toggles the display of a checkbox alongside each option.
Options:
Yes: Place a checkbox to indicate each selection visually.
No: Selected options are highlighted without a checkbox.
Disposition
Chooses how the MCQ options are arranged on the screen.
Options:
Inline: Options appear side by side, wrapping if necessary.
Block: Each option takes a full-width row, stacking vertically.
Font Family
Selects the typeface used for the option labels.
Options:
Dropdown: Pick from available fonts.
Search Bar: Locate a custom or uploaded font.
Font Size
Adjusts the text size for each MCQ option label.
Options:
Slider or Direct Input: Enter a pixel value (e.g., 16px).
Font Weight
Determines the boldness or thickness of the option text.
Options:
Dropdown: Choose from normal, bold, bolder, etc.
Padding
Controls spacing around each MCQ option, creating separation from adjacent text or survey elements.
Options:
Vertical & Horizontal: Enter pixel values for top/bottom and left/right padding.
Gap
Sets the space between individual MCQ options.
Options:
Slider or Direct Input: Pixel value for spacing.
Radius
Defines the roundness of the option containers (if any).
Options:
0% (Sharp): Square corners.
50% (Fully Rounded): Pill-shaped containers.
Color
Determines the text or background color for MCQ options.
Options:
Color Picker: Choose from a palette.
Hex Input: Enter a specific hex code.
Shadow
Adds a subtle or pronounced drop shadow behind each option container.
Options:
Shadow Color & Offsets: Configure using a color picker and numeric values.
Remove: Click the cross icon to disable.
Slider
Allows users to pick a value on a continuous scale, often represented by a draggable handle from left (minimum) to right (maximum).
Style
Manages how the slider is displayed and labeled, including optional emoji handles, colors, and animations.
Size: Sets the thickness or handle size of the slider in pixels.
Options:
Slider or Direct Input: Enter a pixel value (e.g., 6px).
Color: Defines the color of the slider’s main handle or active track.
Options:
Color Picker: Choose from a palette.
Hex Input: Enter a specific hex code (e.g., #1260ebb3).
Background: Specifies the color behind the slider’s active track.
Options:
Color Picker: Pick a palette color.
Hex Input: Enter a hex code (e.g., #1260eb29).
Font Family: Selects the typeface for any labels or numbers displayed with the slider.
Options:
Dropdown: Choose from available fonts.
Search Bar: Locate a custom or uploaded font.
Labels Color: Controls the color of left/right labels indicating min/max or negative/positive ends.
Options:
Color Picker: Pick from a palette.
Hex Input: Enter a hex code (e.g., #1557DB).
Emoji: Choose emoji icon to the slider handle.
Options:
Select Emoji: Choose from an emoji library (default: “🔥”).
Animation: Determines if the main step’s animation applies to elements within the slider card.
Options:
Yes: Inherits slide, fade, or other effects from the main step.
No: The slider element remains static, ignoring animations.
Left Label: Text indicating the lower or “bad” end of the scale (default: “really bad”).
Options:
Editable Text Field: Change to any short descriptor.
Right Label: Text indicating the higher or “good” end of the scale (default: “really good”).
Options:
Editable Text Field: Change to any short descriptor.
Opinion Scale
Allows users to express sentiment or rating across discrete steps (e.g., 1–5), often with symbolic icons (stars or smileys).
Style
Manages how the Opinion Scale is displayed, including the number of steps and the visual icons used.
Steps: Defines how many distinct points the user can choose from (default: 5).
Options:
Slider or Direct Input: Enter the total number of steps (e.g., 3, 5, 7).
Type: Selects the icon style for each step (e.g., stars or smileys).
Options:
Smiley: Renders faces from sad to happy.
Stars: Uses star icons to represent each rating point.
Left Label: Text indicating the lower or “bad” end of the scale (default: “very bad”).
Options:
Editable Text Field: Change the descriptor to fit your context.
Right Label: Text indicating the higher or “good” end of the scale (default: “very good”).
Options:
Editable Text Field: Change to any short descriptor.
Size: Adjusts the size of each icon in pixels.
Options:
Slider or Direct Input: Enter a pixel value (e.g., 20px).
Padding: Controls spacing around the Opinion Scale element.
Options:
Vertical & Horizontal: Enter pixel values for top/bottom and left/right padding (e.g., 8px).
Font Family: Selects the typeface for any labels or numbers displayed with the scale.
Options:
Dropdown: Choose from available fonts.
Search Bar: Locate a custom or uploaded font.
Labels Color: Assigns a custom color to the left and right labels.
Options:
Color Picker: Select from a palette.
Hex Input: Enter a specific hex code.
Open Question
Allows users to provide free-form text feedback, capturing richer insights than fixed options.
Content
Defines the placeholder text and general setup of the response field.
Enter Your Answer: Placeholder message prompting the user to type a response.
Options:
Editable Text Field: Change the placeholder text (e.g., “Share your thoughts...”).
Style
Controls the appearance of the open text box.
Background: Sets a color behind the response field (default: #f3f3f3ff).
Options:
Color Picker: Select from a palette.
Hex Input: Enter a specific hex code.
Radius: Adjusts how rounded the corners of the text box are (default: 6px).
Options:
Slider or Direct Input: Enter a pixel or percentage value (e.g., 6, 8, 10%).
Concept Test
Allows you to showcase a prototype, mockup, or design concept within your survey and gather feedback in context.
Prototype
Embeds an interactive or static prototype from design platforms like Figma or Invision, providing users an opportunity to view and respond directly.
Prototype URL: Enter the link to your prototype or design integration (e.g., Figma, Maze, Invision).
Options:
Text Field: Paste the direct URL (e.g., “https://www.figma.com/file/...”).
Defines how the concept preview (image or embed) is displayed within the survey.
Image: Lets you add a thumbnail or static representation of the concept.
Options:
Add...: Upload an image or provide a URL for reference.
Radius: Adjusts how rounded the concept’s preview corners are (default: 8px).
Options:
Slider or Direct Input: Enter a pixel or percentage value to shape the corners.
Interview Prompt
This step behaves like a standard modal but has one mandatory action—“Book interview”—to integrate with your chosen scheduling platform.
Behavior
Actions
Manage how the Primary CTA functions when users engage with the interview prompt.
Options:
Book Interview: A preset action that prompts users to access a booking URL (e.g., Calendly).
Booking Calendar URL: Enter any scheduling link. (e.g., “https://calendly.com/your-team/30min”)
Unremovable: The “Book interview” action cannot be deleted from this prompt.
Add Action: Append additional actions if you want to continue the survey flow or trigger other experiences after the user schedules.
This might include “Go to Next Step,” “Redirect,” or “Trigger Another Experience,” ensuring the flow remains flexible.
Thank You
Provides a closing message or final note at the end of your survey. Like a Text Block, it displays content without requiring a user response, but includes an optional celebratory animation.
Animation
Controls the celebratory effect that plays when the user reaches the Thank You step.
Animations: Allows you to select a fun, visual flourish to celebrate survey completion.
Options:
Confettis: Show falling confetti.
Heart: Burst of hearts.
Smiley: Cheerful smiley icon.
Check: A checkmark animation symbolizing success.
Duration: Sets how long the animation lasts on-screen.
Options:
Slider or Direct Input: Enter a time in seconds (e.g., 3s).
Generic Elements
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.
Cross
Provides users with a way to dismiss or snooze the experience.
Behavior
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).
Style
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.
Profile
Display an employee profile with a name, title, and image to personify your message.
Content
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.
Style
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.
Image/Video
Integrates media content such as images or videos within the step.
Content
Handles the addition and configuration of media elements.
Media:
Adds an image or video to the step.
Options:
Image:
Upload: Select an image file (maximum 5MB).
URL: Enter the direct link to the image.
Sizing Style:
Fill: Crop the image to fill the container.
Fit: Add padding borders to fit the image without cropping.
Video:
URL: Enter a Vimeo or YouTube link.
Allowed Zoom: Enable or disable zoom functionality for videos.
Zoom on Click:
Enables or disables the option to open the image in full size upon clicking.
Options:
Enable: Users can click to view the image in full size.
Disable: Image remains at its set size without zoom functionality.
Style
Defines the layout and appearance of the media content.
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.
Label
Adds a text label to annotate elements within the step.
Content
Manages the text displayed on the label.
Text:
Defines the text displayed in the label.
Options:
Enter the desired label text.
Layout
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.
Heading
Adds a prominent title to the step for emphasis and context.
Content
Manages the title text and its advanced styling options.
Title Text:
Edits the title text with advanced styling options.
Options:
Text Editor Features:
Bold: Make text bold.
Italic: Italicize text.
Underlining: Underline text.
Insert Hyperlinks: Add clickable links.
Emoji Finder: Insert emojis.
Text Variables: Insert dynamic user data (e.g., user’s name) that auto-updates based on the viewer.
Style
Customizes the visual appearance of the heading.
Color:
Defines the color of the title text.
Options:
Select a color using the color picker or enter a hex code.
Font Family:
Chooses the font for the title text.
Options:
Select from available font families.
Font Size:
Sets the font size for the title text in pixels.
Options:
Enter a value directly or use a slider.
Font Weight:
Adjusts the boldness level of the title text.
Options:
Choose from options such as normal, bold, bolder, lighter, etc.
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.
Paragraph
Adds descriptive body text to provide detailed information within the step.
Content
Manages the paragraph text with advanced formatting options.
Text:
Edits the paragraph text with advanced formatting options.
Options:
Text Editor Features:
Bold: Make text bold.
Italic: Italicize text.
Underlining: Underline text.
Insert Hyperlinks: Add clickable links.
Emoji Finder: Insert emojis.
Bullet Points: Create lists with bullet points.
Multiple Paragraphs: Add new paragraphs with line breaks.
Style
Customizes the visual appearance of the paragraph.
Color:
Defines the color of the 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.
Stepper
Displays the progress of the user through multiple steps.
Layout
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.
Style
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.
Primary CTA
Encourages users to take a primary action within the step.
