Conditional Product Tours: How to Handle Dynamic Content Like a Pro

Real websites are messy. Elements appear and disappear, error messages change, banners rotate, and A/B tests shuffle the UI. Your product tours need to handle all of it gracefully.

The Problem with Static Tours

Most tour builders assume every element will always be there. When it's not:

This is why conditional steps exist — and why most enterprise tools charge $250+/month for them.

What Are Conditional Steps?

A conditional step is a tour step that only appears when its target element exists and is visible. If the element is missing or hidden, the step is automatically skipped and the tour continues seamlessly.

Use Cases

Basic Conditional: Element Presence

The simplest condition — skip the step if the element doesn't exist in the DOM.

When to use:

How it works:
1. Set your CSS selector (e.g. .promo-banner, #cookie-notice)
2. Mark the step as conditional
3. If the element isn't found after retries, the step is skipped
4. Tour continues to the next step automatically

Advanced Conditional: Text Content Matching

Sometimes the element exists, but its content changes. A form error label might say "Please enter a valid email" one moment and "This field is required" the next. Same element, different meaning.

When to use:

How it works:
1. Set your CSS selector for the element
2. Mark the step as conditional
3. Add required text content (e.g. "accept addresses from icloud.com")
4. Step only shows when the element contains that exact text
5. Different text or missing element → step is skipped

Visibility Detection Done Right

Not all "hidden" elements are the same. A robust conditional system checks:

Common pitfall: Many tools only check offsetParent, which returns null for position: fixed elements — marking visible sticky headers and modals as "hidden."

Combining Conditionals with Form Actions

The real power comes when you combine conditional steps with form filling:

Example: Email Validation Tour

1. Step 1 — Highlight the email input field
2. Step 2 — Fill the input with a test email (with persist enabled)
3. Step 3 — Click the submit button
4. Step 4 (conditional + text match) — Show hint on validation error, but only if it says "does not accept addresses from icloud.com"
5. Step 5 — Continue with the rest of the tour

Without conditional text matching, Step 4 would trigger on ANY error — including "this field is required" if the input got cleared. With text matching, it only fires on the specific error you want to demonstrate.

Best Practices

Selector Strategy

Step Design

Testing

How Enterprise Tools Handle This

| Feature | Enterprise DAPs ($250-1000/mo) | Illumate UI ($29/mo) |
|---|---|---|
| Element presence check | ✅ | ✅ |
| Visibility detection | Basic | Robust (parent chain) |
| Text content matching | ❌ (most) | ✅ |
| Works on any website | ❌ (requires SDK) | ✅ (zero install) |
| Form fill + conditional combo | Limited | Full support |

Quick Start: Your First Conditional Tour

1. Load any website in Illumate UI
2. Create your tour steps normally
3. For dynamic elements, check "Conditional"
4. Enter a real CSS selector from the page
5. Optionally add required text content
6. Preview — watch the step get skipped when conditions aren't met

The result: tours that adapt to whatever the website throws at them.

---

Ready to build tours that handle the real world? Try Illumate UI — conditional steps, text matching, and zero-install setup included.