> ## Documentation Index
> Fetch the complete documentation index at: https://docs.oppla.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# 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

```javascript theme={null}
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

```javascript theme={null}
{
  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:

```javascript theme={null}
{
  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:

```javascript theme={null}
{
  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

<CardGroup cols={2}>
  <Card title="Tooltips" icon="comment" href="/tours/tooltip">
    Learn about tooltip steps
  </Card>

  <Card title="Modals" icon="window-maximize" href="/tours/modal">
    Learn about modal steps
  </Card>
</CardGroup>