I’m about to start working on the first time user experience for my app and am hoping to gain some inspiration from y’all. I’ve used https://www.appcues.com/ in a past project and drawn to their tooltip tutorial approach (see image below for example) where they walk the user through parts of the page highlighting where they can accomplish certain tasks. I’m not sure if this is possible in WeWeb, and wanted to see how others might have accomplished a similar goal in WeWeb. I might just end up falling back to a modal tutorial with animated GIF/video that aims at directing users. Anyhoo, excited to see what y’all have come up with in the past.Thanks in advance!
1 Like
Good to see you on here 
I think it’s possible to do this in WeWeb using the modal and tooltip elements. I haven’t worked on that kind of project but could be a nice use case for a live stream!
2 Likes
This is totally possible!! An array of steps with the drop-down component on the key elements. And an overstretching variable to control the demo experience.
2 Likes
So if I am following you, I would do something like:
[
{
"step": 1,
"title": "Some title for step 1",
"copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam blandit tellus vel est mattis tincidunt."
"button": "Next"
},
{
"step": 2,
"title": "A different title for step 2",
"copy": "Ut felis massa, finibus id felis sit amet, venenatis finibus felis. Etiam vitae metus eu velit auctor semper."
"button": "Next"
},
...
]
… and then some variable that would point to which step in the array to display.
Assuming I’m following that correctly, I can’t wrap my head around how to dynamically control where to display the tooltip—for example, I’d want step 1 to display next to the global navigation and then step 2 to display somewhere in the main page next to various charts. Would I create a static tooltip for each of this and then just dynamically control which to show (which feels like it defeats the array) or would I be passing in X and Y coordinates, or the ID of the element to append the tooltip to in the array?
Totally possible to do it on weweb
1 Like
Ok, I think I’ve got the steps + step manager working as envisioned (see Loom below) but now I’m having trouble understanding how to dynamically append the dropdown/popover to various elements on the page. My goal is that as the user clicks “next” to advance through the onboarding, the popover moves around the page to draw attention to, and explain various sections within the pages of the site.
I recall in past research on tooltips, there was a way to append the tooltip element to another HTML element, but I can’t remember enough to successfully search for it. I think I’ve seen other Community threads, maybe from @Broberto or @dorilama, where you’d declare the corresponding HTML element through the object variable and that would instruct the popover where to append. Does this ring a bell and is this a viable solution? Appreciate it if you could point me in the right direction. Thanks Community!
@archenia_jsanchez
Not sure how they managed to do it in appcuse, but i tried many platforms, and one of the worst was glide (sry)
I would say that one is very possible, just need to know how.
Basically you have all the tools/options here to create that.
If not you can use always custom code.
I am building now my own shopsystem, since i fed up with all the ready to use solutions, and so far it works for all my needs.
What i like with weweb you can create your own logics and design.