Fork Steps

Learn how to create and customize fork steps in Oppla tours

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