Register a guided product tour from an add-on JS bundle

Premium Intermediate

An add-on that adds screens to the Benecaster admin can also add a guided walkthrough of them, using the same tour system as the built-in ones — so an add-on tour looks and behaves like part of the product rather than a bolted-on overlay.

Register the tour and Benecaster handles the rest: it starts when the tour is named in the page URL, and it remembers per user that they have finished it, so nobody is walked through the same thing twice. Registering early or late both work, so you do not have to race the admin interface as it loads.

Anchor each step to a data-tour="[id]" attribute. Those attributes are a public contract, the same as a hook name, and are safe to depend on. Class names and structural selectors are not — they change without notice, and a tour built on them will break.

Code

<?php
window.BenecasterExtensions = window.BenecasterExtensions || {};
window.BenecasterExtensions.tours = window.BenecasterExtensions.tours || [];

window.BenecasterExtensions.tours.push( {
    id:    'email-editor',
    label: 'Email Editor Tour',
    condition: () => window.benecasterAdmin.addons.includes( 'email-editor' ),
    steps: [
        {
            id:       'pick-template',
            target:   '[data-tour="email-editor-template-picker"]',
            screen:   'settings',
            title:    'Pick a template',
            content:  'Start from a built-in template or duplicate one of your own.',
            position: 'bottom',
        },
        // …
    ],
} );

View on GitHub →

Need this built rather than just documented? See our services →