Using driver.js to create a tutorial overlay for user onboarding

Tutorials
,
1

image
image2462×1634 405 KB

driver.js is a powerful, highly customizable open source vanilla JavaScript engine to drive the user’s focus across the page. Visit the driver.js website and click on Show Demo Tour to see what it looks like.

Using driver.js with WeWeb is very easy. You add the CDN resources to the HTML Head of your app, and simply call driver.js in any workflow.

First, add CDN resources

Head over to the custom code section of your app and add the following to the Head code. Ignore the validation error information message in yellow.

<script src="https://cdn.jsdelivr.net/npm/driver.js@1.0.1/dist/driver.js.iife.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/driver.js@1.0.1/dist/driver.css"/>

image
image1920×1286 94.7 KB

Second, create a workflow that will trigger the overlay

I simply added it to a button. Hence, clicking the button triggers the onboarding overlay. In this workflow, you’ll only need to add one Custom JavaScript action that contains the code require to trigger driver.js.

Single highlight event

The most basic usage would be to trigger a single highlight event. Let’s start with that. Here’s the boilerplate code:

const driver = window.driver.js.driver;

const driverObj = driver();
driver.highlight({
  element: "#some-element",
  popover: {
    title: "Title",
    description: "Description"
  }
});

Here, you’ll notice 3 main variables:

  • element → this is the element’s id
  • title → this is the popover title
  • description → this is the popover description

Set the element ID in WeWeb

You need to tell driver.js which element to highlight. Go ahead and select that element in the WeWeb editor.

You can find the component ID in the element’s HTML attributes. By default, this should be empty. Choose a value that is relevant to this element and take note of it as we’ll add it to the workflow action code. I called it mainformid.

image
image640×1522 55.1 KB

Replace default values in the code

Once that is done, simply head back to your workflow action and replace #some-element with the id you chose, in my case #mainformid. Set a title and a description relevant to this onboarding step, and that’s it!

Note that this won’t work in the editor, even in preview mode. So you’ll need to publish your app in order for it to work.

Multiple steps journey and multiple highlight events

If you want this to involve a multi step journey for the user, you’ll need to adjust the code a little bit. The same logic applies for the different variables, you’ll just need to add objects to the steps array.

Here’s boilerplate code from driver.js (I added const driver as this is required given that we’re loading resources from a CDN):

const driver = window.driver.js.driver;

const driverObj = driver({
  showProgress: true,
  steps: [
    { element: '.page-header', popover: { title: 'Title', description: 'Description' } },
    { element: '.top-nav', popover: { title: 'Title', description: 'Description' } },
    { element: '.sidebar', popover: { title: 'Title', description: 'Description' } },
    { element: '.footer', popover: { title: 'Title', description: 'Description' } },
  ]
});

driverObj.drive();

So, following the same logic, you simply have to change the variables element, title and description for each step in the steps array. If you’re using the element’s ID like we previously did, for the first step, you would replace .page-header with #mainformid (at least in my case).

Here’s what it looks like in the workflow editor:

image
image3402×1236 509 KB

And here’s how the end result looks like: Loom | Free Screen & Video Recording Software | Loom

Let me know if this has been helpful for you, and follow me on socials!

5 Likes
2

Hey, nice addition :slight_smile: Does it work also in the editor preview ‘view’ or does it start working only in published mode?

3

Hey Broberto, thanks for the feedback!

This will only work once published. Not sure if there’s a hack that could make it work in the editor… that would be a great feature for development indeed!

1 Like
4

You should be ok with putting the code in the header inside an html element, then replace window.something with wwLib.getFrontWindow().something

4 Likes