​
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

  1. Be Clear: Make conditions easy to understand
  2. Be Logical: Use clear branching logic
  3. Be Fallback: Always provide a default path
  4. 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

Tooltips

Learn about tooltip steps

Modals

Learn about modal steps