Make a step-through tutorial to help staff use Rock features with driver.js.

I threw this together this morning and had it done in maybe 15 minutes.

We are about to launch a new way of building our email newsletters using Content Channels, and want a way to train people easily. This was surprisingly easy to put together and I think it will be very helpful to our staff to be able to get a refresher on how to use a particular feature, or follow a process.

Example: 

1. I made some preview buttons to show active content from a channel per campus, so that people would be able to see what would be included in an email without having to build the email first. When they click the 'Help' button, it highlights this and walks them through the process of creating a new item.

2. In the edit screen i made another little help button that walks them through what each area does.

3. You can highlight any element in the UI and put some quick help text to explain what is going on.

How to do it:

Here was the script for a 10 step tutorial in the 'Edit Content Channel Item'

In the Advanced section of Block settings I put in this code:

In Pre-HTML:

<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"/>
<script>
    const driver = window.driver.js.driver;
    const driverObj = driver({
      showProgress: true,
      steps: [
        { element: '.form-group.data-text-box.required:has([for~="ctl00_main_ctl35_ctl01_ctl06_tbTitle"])', popover: {
            title: 'Title',
            description: 'Can be displayed in the email (or not) with setting below.'
        } },
        { element: '.form-row:has([for~="ctl00_main_ctl35_ctl01_ctl06_dtpStart"])', popover: {
            title: 'Active Date Range',
            description: 'At sending time, if the date is outside of this range, it will not be included in the email. TIP: You can pre-schedule content!'
        } },
        { element: '.form-group.number-box', popover: {
            title: 'Sets the order of the content items in the email.',
            description: '0 = disabled. 1 = first item. 2 = second item. etc. Items with the same number will be sorted by date.'
        } },
        { element: '.form-group.html-editor', popover: {
            title: 'Article Content goes here',
            description: 'Each entry will be a section in the email. (While you CAN add links and images here, look below for better options that will display more consistently.)'
        } },
        { element: '#ctl00_main_ctl35_ctl01_ctl06_attributeCol_Campuses', popover: {
            title: 'Select Campus that this content is for.',
            description: 'If no campus is selected, the content will be sent to all campuses.'
        } },
        { element: '#ctl00_main_ctl35_ctl01_ctl06_attributeCol_PrimaryImage', popover: {
            title: 'Image that will display for this item.',
            description: 'This image will be linked to the Call to Action URL below (if supplied). It will be placed according to the "Layout" options below.'
        } },
        { element: '#ctl00_main_ctl35_ctl01_ctl06_attributeCol_ContentType', popover: {
            title: 'Where this article will display in the Pastors Desk email.',
            description: 'Choose the correct category. At time of sending, the email will show the latest content items for each category and campus.'
        } },
        { element: '#ctl00_main_ctl35_ctl01_ctl06_ctl03', popover: {
            title: 'Determines how the content (Text + Primary Image) will be displayed in the email.',
            description: 'Pastor\'s Desk can mostly ignore this.'
        } },
        { element: '#ctl00_main_ctl35_ctl01_ctl06_ctl08', popover: {
            title: 'Call to Action',
            description: 'How you want the CTA to display. (button, link, or none) The "Call to Action URL" also links the Primary Image, even if nothing else is entered.'
        } },
        { element: '#ctl00_main_ctl35_ctl01_ctl06_ctl02 .help', popover: {
            title: 'Hover over these tooltips for help!',
            description: 'These tooltips are a great way to understand what each element does.'
        } },
        { element: '#cchelp', popover: {
            title: 'Add New Content',
            description: 'Create a new item! This help is always available here.'
        } },
      ]
    });

</script>

In Post-HTML:

/- POST HTML: Adds help button before the pastors desk label. -/
<script>
    // Select the element(s) that say "Pastor" or "News"
    var emailChannelsLabel = $('.label.label-type:contains("Pastor"), .label.label-type:contains("News")');
    // Only show help button on those content channels
    emailChannelsLabel.before( '<button type="button" id="cchelp" onclick="return driverObj.drive();" class="btn btn-outline-info btn-xs mx-2">Help</button>' );
</script>

Adding the button in the right place was actually the hardest part. What is happening above is:

1. Finding the element that has the all of the classes "label" and "label-type" AND has the content "Pastor" or "News" because I only wanted to show it on a couple of content channels. 

2. Once I found it, use jquery's `before` method to insert a new button that launches the tutorial.

To learn more about CSS Selectors, here is a good resource. 

But setting up the steps was super easy. Just one js object per step:

{ element: '#ctl00_main_ctl35_ctl01_ctl06_ctl08', popover: {
    title: 'Call to Action',
    description: 'How you want the CTA to display. (button, link, or none) The "Call to Action URL" also links the Primary Image, even if nothing else is entered.'
} },

the `#ctl00_main_ctl35_ctl01_ctl06_ctl08` is the selector for what element to highlight, and then just give it a title and description. (Right-click and inspect element in your browser to find these identifiers.)

I think we will use this more in the future, and there is no reason we couldnt use this on the front-end either for people to understand how to use their account.

If you want to show the tutorial automatically to people until they have seen it, you might need to store a person attribute of some sort to store when they have completed the tutorial, and then only show it to people based on that attribute.