Tool for creating interactive product walkthroughs
Hey,
I'm currently looking around for a tool to create those onboarding popups for my app. Meaning, those little popups that show your users how to use your app. So after some research it seems that the options out there are either very expensive, or open source, but not that functional. So I'm probably going to end up creating a library for myself to create this.
When I look at the most popular open source onboarding library is Intro.js, which quite honestly looks pretty bad in terms of design quality and it doesn't quite have the features that I would like. It currently only supports navigation via the "next"/"back" buttons, but what I want is the ability to wait for the user to actually do the specified action before moving on to the next step. For example, wait for the user to click on the "Log in" button before moving the next step of the flow.
Initially this would require a developer to integrate it into an existing product, but I do have some ideas for making it simpler in the future.
I would open source this tool seeing as it's not an integral part of my web app, but I'm interested in seeing if this is something that people are interested in using.
So to summarize, nicely designed, interactive product onboarding. Who's interested?
I've been working on https://tournadoapp.com and recently unlocked it for sign ups. I wouldn't say launched as I'm just getting feedback from a handful of contacts at first - and it seems there is plenty to improve :)
I found the open source options too fixed in their templating. I also wanted to have my own project to add different triggers, tracking etc. log which users saw what, persist that to a DB etc. etc. I've got some work in progress for waiting on actions to complete a step, or to invoke a step (wait for someone to open a drop down menu before highlighting an option inside it), but so far its only tours and feature highlights released.
Appcues/UserGuiding is expensive. Intercom is okay if you're on the startup plan at $50pm, but otherwise their walkthrough feature is expensive - and maybe you're already using Intercom alternatives in your project.
My roadmap is to add some more interactivity, let the tooltips double as form helpers, and add a 'Whats new' dropdown like I've seen a few other apps doing (since it all tied together nicely). The fact I'm trying to make it no-code (apart from the pasting of the initial page tag) means handling more advanced stuff in the interface is more of a UX challenge than if someone is coding.
It sounds like it's currently missing one of your requirements but if you'd like to sign up and take a look, it's still in active development and I'd love to react to and deploy any extra stuff you need.
Btw, I just registered for Mastershot and gave it a spin. Very cool and easy to use!
Thanks!
At the moment my biggest requirement is for 3rd party integrations (such as tournadoapp) be served as cross origin isolated resources. Since I'm using SharedArrayBuffer I'm required to cross origin isolate my site which prevents me from using many 3rd party resources unless a specific header is served with them. More information about that here: https://web.dev/cross-origin-isolation-guide/
Basically, what 3rd parties need to do is serve their resources with the following header: Cross-Origin-Resource-Policy: cross-origin
Ah interesting, I've been using it in production on some of both my and some contacts' sites and the only issue we'd come across so far was where their CSP was blocking the script, but I'll look into this and get back to you when it's deployed
This is getting quite off topic for you original thread, I hope you don't mind a reply here. I'd assumed this would be a quick fix and I could return to post a positive update - then you could try it out... however, I fell at the very first hurdle.
I used my app's Chrome extension to invoke the tour builder on your website, which is blocked as you said due to SharedArrayBuffer/CORP (with, I might add, a very helpful message in Chrome developer tools!), no problem I thought, and quickly made a release with the appropriate header added to my deploy script that copies the files to S3. It still didn't work.
It looks like S3 only allows us to pass a handful of common headers, not including Cross-Origin-Resource-Policy.
It runs through CloudFlare so I'll take a look using a Worker to alter the headers and see how it goes. I usually avoid CF Workers unless really necessary for files like this, as after a pretty decent free tier, they start introducing per-request costs - but the current use is very low so... 😂
Anyway... not a useful update but I didn't want to say "I'm looking into it" and then just disappear.
Using CloudFlare workers to set the header on files served from S3, I managed to use the builder to create a quick test tour on your app
https://www.loom.com/share/d7f6483e53304e17afab94d447c41e08
I'm running this on a variety of normal websites and SPAs very smoothly but I found a few glitchy interactions perhaps due to some unusual (or not) DOM manipulation as part of your video builder UI.
If you do want to end up trying it, let me know any issues you have because these 'cant select x element in y scenario' things were more the kinda of bugs I was expecting to find in edge cases during beta. Your CORP thing was a bonus find :)
Do you consider intercom to be expensive? Their product walkthrough feature is pretty nice
Sounds interesting, I built a very simple onboarding tool into my web app but having something more advanced would be great. Definitely interested in seeing what you come up with.