[New Plugin] Walkthrough Tour / Onboarding

Hi all,

A new plugin available for you all, this one lets you quickly and easily build walkthrough tours, great for onboarding your users. Your tour can highlight any elements in order, and display information popups.

Check it out: https://plugindemos-zeroqode.bubbleapps.io/tour

Available in the plugin store now: https://bubble.io/plugin/walkthrough-tour-1524608392042x800431650188820500

10 Likes

The demo is not working for me.

1 Like

Its bit werid, i though exactly the same.

Maybe zeroqode bought the plugin from @dambusmedia not sure.

But i see too similar those demo pages:


Not sure what happening.

Yes, Zeroqode provide the plugin now, I’ve updated the links above, cheers

Quick question. Can this tour open popups and then focus on an element within that popup? @dambusmedia or @levon

Another question on this plugin. Can we save the steps to a private tour as a thing and load tours dynamically. Or do they all have to be added on page load each time?

Definitely looking for something like this if it can do the above!!

Is this purely for web apps ? Does not seem to run when viewing via my mobile browser safari iOS

No answer to my questions above? @dambusmedia @levon

Sorry I was traveling

the tour once started only highlights specified elements and shows text next to them.

you could probably use dynamic values for the steps and once the workflow action run they will take the values from the database. However the number of actions (steps) should be fixed i think. You could experiment with it and see if it works for you

1 Like

it may behave a bit differently on various browsers, but we’ll check what happens on iOS

1 Like

Thanks for this plugin, it serves a very important purpose so it’s good to have this solution on the Bubble platform.

The plugin works OK, but it doesn’t display elements within a floating group. Here’s a couple of screenshots for your reference: I hope this gets fixed soon.

1a

1b

Another one:
2a

2b

Thanks for this! Good job.

Hey @levon.

Been using the walkthrough and wanted to share my thoughts on possible enhancements when you have time.

  • Larger box for Body editing, or perhaps access to the rich text editor.

  • Dynamic data in the Body and Title.

  • Ability to highlight multiple elements in one step.

  • Ability to highlight white objects – for example, I have a white gear icon sitting on a colored background, when this step is active, I get a completely white box. EDIT: Nevermind – found the highlight color property!

  • Ability to take action when Done is clicked.

Nice job @dambusmedia. Will be using this extensively.

did you compare this plugin with another similar plugin from us? Maybe it would do what you require?
here is the link Welcome Intro Step By Step - New plugin from Zeroqode

Thanks for that @levon I had not tried it out, but now have. Looks like a good alternative, and will experiment with both before choosing.

One big issue on both however…I’m not having any luck highlighting elements within a popup. I can highlight the entire popup itself, but not elements within the popup – the popup content disappears and I only get the tour prompt with an empty highlight box (the element is not seen.)

Do either of these support popups in tours?

Hi @mebeingken
In your case will do much better the intro plugin, that was recommended by Levon.

It won’t anyway resolve your issue with popup. The problem here is hidden in the popup behaviour, that differs from any other element. As the popup uses position fixed, that places it outside the original document (it removes the popup from the normal flow location within the document) above all other elements. Our plugin still search it’s coordinates relative to document, while the popup coordinates are currently relative to the viewport.

Looks great on the demo, this will probably come to good use in one of my projects.

A quick thought, one thing you might want to look into is that the message doesn’t appear off-screen, which happened in the demo for me (Macbook Air, Chrome, 1440 x 900):

@petter You are right here,
This is something that should be planned when you will setting up these steps. You can set if the popups appears aside, above or bellow the highlighted element.

A walkthrough plugin that can accommodate popups and more advanced features like page changes and stuff would be worth a lot. This could be a gold mine plugin given the number of apps being built on bubble and that current solutions online don’t seem to work with bubble. Right now the two available solutions don’t do much besides cover things on a single static page display. I would happily pay $20 a month for such a solution.

I see your point.
Features like this will make a good breakthrough, but unfortunately (as far as I know), this won’t be possible with the current bubble behavior.
What can be done as hotfix solution in this case, is to do classic step-by-step with intro plugin, and add event listener to the workflow, that will redirect to another page, and on the next page, with “when page loads” follow with next steps. There is many to do of course, like sending custom url parameter, that will state, that this one page should start step-by-step, and also it would request another validations, to not see step-by-step every time, but definitively possible with bubble.

And what about popups? Can those be worked into a walkthrough?

I’m afraid, that popups are out of our plugin possibilities. The issue is that both plugins (Walk-through and intro) initiates when page loads, while popup content initiate once the popup loads. So when the plugin looks for the element by ID (when element is inside popup), it actually still doesn’t exist on it’s future position, so plugin cannot locate it properly, and in most cases fails, and shows only dark background, without the highlighted element, or the element isn’t in centre of the highlighted area.