The text element in the editor allows you to add non-interactive text to your experience screens. This can include titles, instructions, or any supporting copy that helps guide consumers through the experience.
Text elements play a key role in clearly communicating the purpose of a screen, setting expectations, or providing context that improves engagement and completion rates.
Before you begin
Before using a text element, make sure:
You’ve added or selected a screen within your experience.
You’ve reviewed your intended message for tone, branding, and purpose.
You know where the text should appear (e.g., above a question or as a page header).
Add a text element
In the Editor tab of your experience, navigate to an existing screen or add a new one.
From the left-hand sidebar, click Add Elements.
Select Text from the available options.
A default text block will appear on the screen. Click directly into the element to edit the text.
Configure a text element
To customize the text element:
Use the Body styling panel on the left to adjust:
Style: Choose predefined typography like Heading, or Body or Custom.
Color: Select the font color.
Font: Choose from available font families (e.g., Open Sans).
Size, line height, and letter spacing: Use pixel-based controls for precision.
Boldness: Adjust font weight (e.g., 400 for regular, 700 for bold).
Alignment: Choose left, center, right, or justified.
Tip: Want to use your brand font? You can upload custom fonts to use within your experience. Learn how to add custom fonts.
To adjust layout and animation:
Spacing: Control padding around the text block (top, bottom, left, right).
Sizing: Set element width.
Fixed scroll: Allows you to define the scrollable area by entering a specific height.
Hotspot: A clickable spot placed on an element. Note: If you're placing a hotspot on a background image, you need to place it separately on Mobile and Desktop views.
Animation: Add entry delay and select from predefined animation styles. Slide in from top, bottom, left, right or zoom in.
Responsive View: Toggle between Mobile and Desktop views.
Layout Modes: Choose from multiple mobile layout presets.
Show Top Logo: Display or hide the persistent top logo on this screen.
Screen Margins: Enable Auto Margins for responsive padding.
Custom CSS: Enable custom CSS styling for advanced customization needs.
Note: To gain access to custom CSS for your Experiences by Jebbit, contact your Customer Success Manager. This feature is restricted by default.
Text element controls
While editing a text element, you'll see additional options appear to the left of the screen. These tools allow you to manage placement, reuse, and enhance your copy efficiently:
Reorder or delete elements
Use the up and down arrows to move the text block within the screen layout.
Use the trash icon to delete the selected element.
Copy & paste with element controls
Click the three-dot menu for options like:
Copy (Cmd/Ctrl + C)
Paste (Cmd/Ctrl + V)
Positioning options (adjust layout positioning more precisely)
Use the AI assistant
Click the icon to open the AI-powered assistant.
Choose from actions like:
Rephrase text
Summarize long blocks
Make it punchier, etc.
You can also refine your prompt (e.g., "Rephrase in fewer than 7 words") and click Generate Suggestions.
Format text inline
When you highlight text within the element, an inline formatting toolbar appears. Use this toolbar to make quick styling changes:
Bold, Italic, or Underline text
Add a link to selected text
Change font color with the droplet icon
Insert dynamic content using the plus (+) icon: Add element attributes or Add query parameters
Open code view for light HTML tweaks
Best practices
Use clear, concise language that supports the purpose of the screen.
Write in sentence case for improved readability and visual consistency.
Use text to set expectations, label the experience type clearly (e.g., personality quiz, product match, lookbook).
Ensure strong color contrast between text and background.
Choose legible fonts that reflect your brand and are easy to read.
Use the Accessibility Checker to catch issues like poor contrast or missing alt text.
Add alt text for any image that contains information.
Use Top Label formatting for form fields to improve screen reader compatibility.
Avoid decorative-only text styles (e.g., heavy shadows or excessive letter spacing).
Preview your experience in both Mobile and Desktop views to confirm layout and text visibility.
Next steps
Preview the experience in Mobile and Desktop view to ensure proper layout before publishing.
FAQ
Can I reuse styled text in other screens?
Yes. Use the Copy function to duplicate and paste styled elements across your experience.
How does the Style Guide impact my text settings?
If a Style Guide is applied to the experience, it will define default text styles, like heading levels, font, and spacing. These settings can still be overridden in the editor, but the guide ensures brand consistency from the start.