How to Add a Guided Tour to a Bubble App

In the Data tab, add a field 'has_completed_tour' (yes/no, default no) to the User Data Type. This tracks whether each user has seen the tour. On the dashboard page, add a 'Page is loaded' workflow with condition 'Only when Current User's has_completed_tour is no' that starts the tour.

Add a semi-transparent overlay Group covering the full page (background black, 50% opacity). On top, add individual tooltip Groups for each tour step — small white cards with an arrow, title text, description text, and Next/Skip buttons. Position each tooltip near the UI element it explains. Use a page custom state 'tour_step' (number, default 1) to control which tooltip is visible: 'When page's tour_step is 1' shows tooltip 1, etc.

To make the referenced UI element stand out through the overlay, add a conditional on the target element: 'When page's tour_step is [this step's number]' → set z-index higher than the overlay (add a CSS override via ID attribute). This makes the highlighted element appear above the dark overlay while everything else stays dimmed. Add a spotlight effect by giving the element a bright border or glow.

On each tooltip's 'Next' button, create a workflow that increments the 'tour_step' state by 1. On 'Back', decrement by 1. On 'Skip' or the final step's 'Done' button, set Current User's has_completed_tour to yes and hide the overlay. Add a progress indicator (Step 1 of 5) using the tour_step state. On the final step, change the Next button text to 'Get Started' and complete the tour.

In the user's account settings or help section, add a 'Replay Tour' button. Its workflow: set Current User's has_completed_tour to no, then reload the page (Go to page → current page). The tour will trigger again on page load. This lets users who dismissed the tour early revisit it later.

For a more polished tour with smooth animations and automatic positioning, embed the Shepherd.js library via an HTML element. Add the Shepherd CSS and JS CDN links, then write a script that defines tour steps targeting Bubble elements by their ID attribute (set IDs in the element's property editor). Shepherd automatically positions tooltips and handles scrolling to elements. Use the Bubble JavaScript-to-Bubble bridge to update the has_completed_tour field on completion.

1<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/shepherd.js@11/dist/css/shepherd.css"/>
2<script src="https://cdn.jsdelivr.net/npm/shepherd.js@11/dist/js/shepherd.min.js"></script>
3<script>
4const tour = new Shepherd.Tour({
5  defaultStepOptions: {
6    cancelIcon: { enabled: true },
7    classes: 'shadow-md'
8  }
9});
10tour.addStep({
11  title: 'Welcome!',
12  text: 'This is your dashboard. Let us show you around.',
13  attachTo: { element: '#dashboard-header', on: 'bottom' },
14  buttons: [{ text: 'Next', action: tour.next }]
15});
16tour.start();
17</script>