Userorbit allows you to embed interactive checklists directly into your application, providing users with guided step-by-step tasks and real-time progress tracking without leaving your product.
What are embedded checklists?
Embedded checklists are interactive task lists that appear directly within your application's interface. They help guide users through complex workflows, onboarding processes, or feature adoption by breaking down larger goals into manageable, trackable steps.
Common use cases:
- User onboarding flows
- Feature adoption guides
- Setup and configuration tasks
- Compliance and training checklists
- Product tour completion tracking
How to embed a checklist
- Go to Checklists in your Userorbit admin dashboard.
- Select the checklist you want to embed.
- Click the Embed button in the checklist settings.
- Copy the generated embed code or JavaScript snippet.
- Paste the code into your application where you want the checklist to appear.
Embedding options
JavaScript Widget
- Best for: Most web applications
- Setup: Add the provided script tag to your HTML
- Customization: Full control over styling and positioning
Iframe Embed
- Best for: Quick integration or restricted environments
- Setup: Use the iframe URL directly
- Customization: Limited styling options
Customizing the embedded checklist
- Styling: Match your brand colors and fonts using CSS custom properties
- Positioning: Control where the checklist appears on your page
- Behavior: Configure auto-open, completion tracking, and user interactions
- Responsive: Automatically adapts to different screen sizes
Advanced configuration
- Targeting: Show different checklists based on user properties or behavior
- Analytics: Track completion rates and user engagement
- Integration: Connect with your existing user management system
- Notifications: Set up alerts for checklist completion or abandonment
Best practices
- Keep checklist items concise and actionable
- Test the embedded checklist across different devices and browsers
- Monitor completion rates to optimize checklist effectiveness
- Use clear, descriptive titles and instructions
- Consider user context when deciding where to place checklists
Troubleshooting
- Checklist not appearing: Verify the embed code is correctly placed and your domain is whitelisted
- Styling issues: Check for CSS conflicts and ensure custom styles are properly applied
- Performance: Monitor page load times and optimize if necessary