Fork Steps
Learn how to create and customize fork steps to create branching paths in your tours based on user actions or conditions.
Basic Usage
Create a Fork Step
import { createTour } from '@oppla-ai/tours';
const tour = createTour({
id: 'feature-tour',
steps: [
{
type: 'fork',
conditions: [
{
condition: () => document.querySelector('#premium-feature') !== null,
steps: [
{
type: 'tooltip',
target: '#premium-feature',
content: 'Try our premium feature!'
}
]
},
{
condition: () => true,
steps: [
{
type: 'tooltip',
target: '#basic-feature',
content: 'Try our basic feature!'
}
]
}
]
}
]
});
tour.start();
Fork with Options
{
type: 'fork',
conditions: [
{
condition: () => user.isPremium,
steps: [
{
type: 'tooltip',
target: '#premium-feature',
content: 'Premium feature available!'
}
]
},
{
condition: () => true,
steps: [
{
type: 'tooltip',
target: '#basic-feature',
content: 'Basic feature available!'
}
]
}
],
defaultSteps: [
{
type: 'tooltip',
target: '#default-feature',
content: 'Default feature available!'
}
]
}
Advanced Features
User Action Forks
Create forks based on user actions:
{
type: 'fork',
conditions: [
{
condition: () => userAction === 'click',
target: '#upgrade-button',
steps: [
{
type: 'modal',
content: 'Would you like to upgrade?'
}
]
},
{
condition: () => userAction === 'click',
target: '#learn-more-button',
steps: [
{
type: 'modal',
content: 'Learn more about our features'
}
]
}
]
}
Complex Conditions
Create forks with complex conditions:
{
type: 'fork',
conditions: [
{
condition: () => {
return user.isPremium && user.hasCompletedOnboarding;
},
steps: [
{
type: 'tooltip',
target: '#advanced-feature',
content: 'Try our advanced feature!'
}
]
},
{
condition: () => user.isPremium,
steps: [
{
type: 'tooltip',
target: '#premium-feature',
content: 'Complete onboarding to unlock advanced features!'
}
]
}
]
}
Best Practices
- Be Clear: Make conditions easy to understand
- Be Logical: Use clear branching logic
- Be Fallback: Always provide a default path
- Be Maintainable: Keep conditions simple and well-documented
Common Issues
Fork Not Working
- Check condition logic
- Verify target elements exist
- Check for timing issues
- Ensure proper event handling
User Experience
- Avoid complex branching
- Provide clear feedback
- Handle edge cases
- Consider fallback options
Next Steps
