Onboard users with highlights - tryied NPM driver.js but could not make it work

Ask us anything
1

Hello WeWeb Community,

I am aiming to create a guided onboarding experience on my WeWeb project. My goal is to provide users with an interactive tour that highlights various elements on the page.

I tried using the NPM plugin in WeWeb to install driver.js and wrote the following code:

const driverObj = driver({
  showProgress: true,
  showButtons: ['next', 'previous'],
  steps: [
    { element: '#tour-example', popover: { title: 'Animated Tour Example', description: 'Here is the code example showing animated tour. Let's walk you through it.', side: "left", align: 'start' }},
    { element: 'code .line:nth-child(1)', popover: { title: 'Import the Library', description: 'It works the same in vanilla JavaScript as well as frameworks.', side: "bottom", align: 'start' }},
    { element: 'code .line:nth-child(2)', popover: { title: 'Importing CSS', description: 'Import the CSS which gives you the default styling for popover and overlay.', side: "bottom", align: 'start' }},
    { element: 'code .line:nth-child(4) span:nth-child(7)', popover: { title: 'Create Driver', description: 'Simply call the driver function to create a driver.js instance', side: "left", align: 'start' }},
    { element: 'code .line:nth-child(16)', popover: { title: 'Start Tour', description: 'Call the drive method to start the tour and your tour will be started.', side: "top", align: 'start' }},
  ]
});

driverObj.drive();

Unfortunately, I’m encountering the following error:

ReferenceError: driver is not defined

I have tried both import and require statements, but I keep facing issues like “Cannot use import statement outside a module” or initialization errors.

Could someone guide me on how to properly set up and use driver.js within WeWeb using the NPM plugin? Alternatively, is there another way to achieve a similar guided onboarding experience?

Any help would be greatly appreciated!

Thank you!

1 Like
2

Hey @Kivo !

Gave it a quick try, but I couldn’t make it work with the driver.js library either.
I tried an other library, intro.js and it’s working, but it’s working only on the published app…
CleanShot 2024-06-20 at 08.44.14

It may be possible to build a custom Onboarding/highlight component directly in WeWeb based on the same though

1 Like
3

@Kivo @jptrinh i was able to get the drive.js library working as a proof of concept and will likely integrate into my own project. are you still interested? i can share more details if you’d like.

3 Likes
4

I managed to do it with another way, but I would apreciate if you share how did you manage to get it working :slight_smile:

5

awesome, @Kivo i’ll detail the steps I took shortly when I have a moment. i know @alexanderl also asked to see it as well. :slight_smile:

2 Likes
6

Got it to work now, put it in the body custom code instead of the head and that did the trick.

2 Likes