1. Enable ID attributes in Bubble
This plugin targets page elements by their ID attribute, so first you need to enable that setting in Bubble.

Go to:

Settings → General

Then enable:

Expose the option to add an ID attribute to HTML elements

2. Add ID attributes to the elements you want to target

For every page element you want the tour to point to:

select the element
open its property editor
set an ID Attribute

Example IDs:

step-1
create-project-btn
settings-tab

These same IDs will be used in the plugin actions.

3. Place the Tour element on the page

Drag the Tour element onto the page.

This element acts as the controller for the walkthrough.
It can stay very small and does not need to be visible to users.

4. Configure the Tour element settings

You can customize the tour from the element properties.

In a workflow, use the Add Step action to add each tour step.

After adding all steps, use the Start Tour action.

Typical workflow:

Add Step
Add Step
Add Step
Start Tour


Highlight only one element

Use Highlight Element when you want to spotlight a single element without showing a popup.

This is useful for:

drawing attention to one part of the interface
temporary focus states
lightweight onboarding moments

End or clear the tour

You can also use:

End Tour → stops the current active tour
Clear Steps → removes all saved steps from the current Tour instance

Actions

Add Step
Adds one step to the current tour.

Start Tour
Starts the currently stored tour steps.

Clear Steps
Removes all stored steps from the current tour instance.

End Tour
Ends the active tour.

Highlight Element
Highlights one element without showing a popup.