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

[Kivo]

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!

[jptrinh]

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…

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

[forgelab]

@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.

[Kivo]

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

[forgelab]

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.

[alexanderl]

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

[wealthsyndy]

Did anyone figure out a solution that does not require deployment? seems like there should be a way to do this in a way where you can test the solution.

Thanks

[wealthsyndy]

OK I think I answered my own question by looking up an answer for a different problem

This tool from @raydeck worked to include driver through it’s CDN implementation: https://weweb-embed.statechange.ai/ . I attached it to a workflow that does the embed and then goes through the tour.

I was able to include driver.js and do a quick walk through with highlights of the elements

[FHEXL]

Following! looking forward to your explanation @forgelab (if your are able to share it publicly here).

[wealthsyndy]

@FHEXL I can share what I did. It was quite easy. I just created a workflow with custom js (for now I am triggering it with a button for testing but you can trigger it any other way (like page load after checking if first time). This is what I added in the custom JS

// this part I got from the tool I mentioned above
if (!window["scp-loading-f513f8f1-3432-42b0-a028-41694bc7dc57"]) {
  window["scp-loading-f513f8f1-3432-42b0-a028-41694bc7dc57"] = true;
  let doc;
  /* Adding script from https://cdn.jsdelivr.net/npm/driver.js@1.0.1/dist/driver.js.iife.js */
  doc = document.createElement("script");
  doc.src =
    "https://cdn.jsdelivr.net/npm/driver.js@1.0.1/dist/driver.js.iife.js";
  document.body.appendChild(doc);
  /* Adding stylesheet link from https://cdn.jsdelivr.net/npm/driver.js@1.0.1/dist/driver.css */
  doc = document.createElement("link");
  doc.href = "https://cdn.jsdelivr.net/npm/driver.js@1.0.1/dist/driver.css";
  doc.rel = "stylesheet";
  document.body.appendChild(doc);
}
// this is what driver.js instructions were for using it from CDN : https://driverjs.com/docs/installation
const driver = window.driver.js.driver;

// your stuff here. You have to go and add element IDs for the ones you want to highlight in Weweb 
const driverObj = driver({
  showProgress: true,
  steps: [
    {
      element: "#menu",
      popover: {
        title: "Menu",
        description: "Your menu is here",
      },
    },
    {
      element: "#filters",
      popover: {
        title: "Filters",
        description: "Filter your results by status, date,  etc",
      },
    }
  ],
});

driverObj.drive();

It works in the editor…