Rich Text elements allow you to add formatted static content, including text, images, and embedded media, to your Live App. Unlike database-driven elements, Rich Text elements can display content that isn't stored in your datatable records.
- What you'll learn:
- How to create and format Rich Text elements
- Ways to incorporate images and embedded content
- Methods for structuring content effectively
- Techniques for HTML implementation
- Best practices for content formatting
- Solutions for common rich text issues
Common Use Cases
- Welcome messages and app introductions
- Printable page headers and logos
- Instructions and documentation
- Static content sections
- Formatted announcements
Basic Configuration
Creating Rich Text Elements
- Navigate to Pages in the Builder
- Select or create a page
- Click "+ Add Element"
- Choose "Rich Text" from Static Elements
Text Formatting Options
- Headers (H1-H6)
- Text styles (Bold, Italic, Strikethrough)
- Color controls (Text and Background)
- Alignment options
- Lists (Ordered and Unordered)
- Indentation controls
- Horizontal dividers
Advanced Features
Image Integration
Adding Images
- Click the image icon in the toolbar
- Enter image URL
- Configure image settings:
- Title (alt text)
- Link URL (optional)
- Position alignment
Note: Images must be hosted on publicly accessible URLs
Image Troubleshooting
- Verify image URL is public
- For Google Drive links: Ensure sharing is public
- For Dropbox links: Replace
?dl=0/with/?raw=1 - Consider using image hosting services for reliable display
HTML Implementation
Using HTML Editor
- Click the
<>icon in the toolbar - Insert HTML code
- Preview changes
Warning: Rich Text elements support basic HTML only. Complex code should be implemented through the API & Code settings.
Content Embedding
Iframe Implementation
- Obtain embed code from third-party source
- Access HTML editor
- Insert iframe code with embed content
- Configure dimensions
html
Copy
<iframe src="your-embed-url" width="100%" height="400px">
</iframe>Best Practices
Design Guidelines
- Maintain consistent formatting
- Use appropriate header hierarchy
- Consider mobile readability
- Optimize image sizes
- Test embedded content responsiveness
Performance Tips
- Compress images before hosting
- Use responsive iframe dimensions
- Minimize complex HTML
- Test across devices
Limitations & Known Issues
Current Limitations
- No anchor link support
- Basic HTML support only
- Public image URLs required
- Iframe restrictions
Common Issues
- Broken image displays
- HTML code removal on save
- Iframe rendering problems
- Format inconsistencies
Troubleshooting
Image Issues
- Verify URL accessibility
- Check file hosting service
- Use image hosting alternatives
- Convert using image tools
Embedding Problems
- Validate iframe code
- Check embed source compatibility
- Adjust dimensions
- Test across browsers
Related Resources
- [Page Layout Guide]
- [HTML Usage Guidelines]
- [Image Hosting Best Practices]
- [Content Formatting Guide]
Tip: Use image hosting services like postimages.org for reliable image display when having issues with other hosting solutions.
Note: Changes to Rich Text elements are immediately visible in the preview, allowing for real-time validation of your content.