MARKETPLACE
PLUGINS
HOPSCOTCH STEP-BY-STEP TOURS
Hopscotch Step-By-Step Tours logo

Hopscotch Step-By-Step Tours

Published July 2018
   •    Updated this month

Plugin details

Create step-by-step walkthroughs for your application. Useful for onboarding / to guide your users to specific app features

Free

For everyone

3.6 stars   •   8 ratings
9.2K installs
This plugin does not collect or track your personal data.

Other actions

Platform

Web

Contributor details

Airdev logo
Airdev
Joined 2016   •   33 Plugins
View contributor profile

Instructions

- In Bubble, go to Settings > General > ensure that "Expose the option to add an ID attribute to HTML elements" is checked - Add a "Tour" element to your Bubble page
- Use the "Add step to" action to add steps to your tour one by one using element IDs (a standard method for this is adding steps on page load)
- Use the "Start" action to begin your tour. Tours will start at step #1 every time

Tips:
- You can configure options for the tour on the Tour element and options for each step on the "Add step to" action
- You can access the current step number on the Tour element
- You can trigger Bubble workflows based on various tour events, such as tour start or tour call-to-action button clicked
- When you add a step for a Bubble element, make sure that element is visible at the time the step is added
- Use "Reset steps for" to remove all steps that have been previously added to that tour (if you are adding steps in same workflow that you use to start the tour, consider including this action at the beginning)

Types

This plugin can be found under the following types:
Background Services   •   Element   •   Event   •   Action

Categories

This plugin can be found under the following categories:
Technical   •   Customer Support   •   Visual Elements   •   Productivity

Resources

Support contact
Documentation
Tutorial

Rating and reviews

Average rating (3.6)

Issues with popups and multiple tours
March 12th, 2025
I have two separate tour elements on the page for two different tours. First one seems to be working fine and runs through all tour steps when triggered. The second one only runs step one and then stops working when the next button is pressed at step 1. Have spent a lot of time trying to reconfigure but still doesn't appear to be working and cannot see any errors logs. UPDATE - this error specifically occurs when the next step in the sequence opens a popup and the tour reference element is that popup group. In my first tour I have used this same approach and it works fine (opens the popup and then shows the tour element next to the popup) for some reason with the second tour on the page it does not work.
No Next Button
March 5th, 2024
I cannot go to the next tour or step for the tour and no next button show up
Let me change the colors!
April 20th, 2023
End tour action not working
May 31st, 2022
When the end tour action is added to the workflow the tour no longer works. Would be great to customise border and colours of tour component.
Amazing plugin & feature request!
August 5th, 2021
This is really a nice plugin, good job! I just missed the action of starting a concrete step, like ‘Start Step’ by index for controlling the steps manually, without using ‘next’/’back’ buttons nor clicking target elements for executing the next step. So I cloned this plugin and I published a new one called ‘Hopscotch Step-By-Step Tours (FORK)’ with these functionalities. I would really appreciate if you take a look (since the changes are minimal) and you can add them to the original plugin (if they make sense for you, of course). Demo and Editor pages: https://play-and-fun.bubbleapps.io/version-test/step-by-step-hopscotch?debug_mode=true https://bubble.io/page?type=page&name=step-by-step-hop&id=play-and-fun&tab=tabs-1 Thanks a lot AirDev! 😊
Bubble logo
Product
AI
Mobile
Design
Data
Logic
Collaboration
Security
Status
Release notes
Bubble for
Founders
Developers
Agencies
Enterprise
Discover
How Bubble works
Examples
Pricing
Learn
Academy
Technical guides
Blog
How to build
Coaching
Resources
Connect to AI
Marketplace
Templates
Plugins
Experts
Bootcamps
Certification
Partnerships
Affiliates
Figma to Bubble
Community
Bubble community
Forum
Newsletter
Immerse
Early access
Store
Company
About
Careers
Brand guidelines
Support
Contact us
Legal
Terms
Privacy
©  2026, Bubble Group, Inc. All rights reserved.
Bubble
Pricing
Enterprise
Contact sales