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

Free Intermediate Since v1.0.0

Push a TourDef onto window.BenecasterExtensions.tours before or after the React app mounts. TourManager reads the registry, launches the tour when ?bc_tour=[id] is in the URL, and POSTs to /tours/{id}/complete on finish (writes benecaster_tour_{id}_completed_at to user meta). Target elements with data-tour="[id]" attributes — treat these as public contracts, the same as hook names. Never use class names or structural selectors.

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',
        },
        // …
    ],
} );