Skip to main content

Point a tour step at your tab in the episode editor, on a real episode

Free Intermediate

An episode-editor tab (declared with benecaster_episode_editor_tabs) lives at /episodes/{episodeId}?tab={tabId}, and neither the episode nor whether your tab is shown is known until the tour runs. Name the tab with the episode-tab:{tabId} screen; Benecaster picks the episode. Register a tab lookup only if you want to choose which episode it opens.

Benecaster’s own tabs work too (episode-tab:media, episode-tab:more, …) and need no tab lookup — only an episode. The tab ID must be letters, digits, - or _.

Code

window.BenecasterExtensions.tours.push( {
    id: 'my-addon', label: 'My Add-on Tour',
    steps: [ {
        id:      'my-addon-tab',
        target:  '[data-tour="my-addon-tab-panel"]',
        screen:  'episode-tab:my-addon',   // your tab's `id`
        title:   'Your episodes, transcribed',
        content: 'Explain the tab here.',
    } ],
} );

// Optional: choose WHICH episode. Without this, Benecaster opens the current show's most recent episode.
window.BenecasterExtensions.registerEpisodeTabLookup( 'my-addon', async ( showId ) => {
    const res = await fetch( `/wp-json/my-addon/v1/shows/${ showId }/tour-episode`, { headers: { 'X-WP-Nonce': window.benecasterAdmin.nonce } } );
    return res.ok ? ( await res.json() ).episode_id ?? null : null; // null drops the step
} );

View on GitHub →

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