Adding Multiple Steps

You can add multiple steps at once using the addSteps() method. This is useful when you have your tour steps defined in a configuration file, database, or when you want to define them all in a single call.

Method Signature

DriverJs::addSteps(array $steps);

or

driverjs()->addSteps(array $steps);

Parameters

• $steps (array): An array of step definitions. Each item should be an associative array with keys like element, title, description, and any other step options.

Example

Using DriverJs::addSteps():

use RealRashid\LaravelDriverJs\Facades\DriverJs;

DriverJs::tour('onboarding')
    ->showProgress()
    ->addSteps([
        ['element' => '#header', 'title' => 'Welcome!', 'description' => 'This is the main header.'],
        ['element' => '#nav', 'title' => 'Navigation', 'description' => 'Use these links to navigate.'],
        ['element' => '#sidebar', 'title' => 'Sidebar', 'description' => 'Your tools and shortcuts.', 'side' => 'right'],
        ['element' => '#content', 'title' => 'Content', 'description' => 'Your main content area.'],
        ['element' => '#footer', 'title' => "That's it!", 'description' => "You're all set!"],
    ])
    ->render();

Using driverjs() helper:

driverjs('onboarding')
    ->showProgress()
    ->addSteps([
        ['element' => '#header', 'title' => 'Welcome!'],
        ['element' => '#nav', 'title' => 'Navigation'],
        ['element' => '#footer', 'title' => "That's it!"],
    ])
    ->render();

Supported Step Array Keys

Each step array supports the following keys:

Key	Type	Description
element	string	CSS selector or JS function expression for the target element
title	string	Popover title
description	string	Popover description
side	string	Position: "top", "right", "bottom", "left"
align	string	Alignment: "start", "center", "end"
popover_class	string	Custom CSS class for popover
show_buttons	array	Buttons to show: "next", "previous", "close"
disable_buttons	array	Buttons to disable
show_progress	bool	Show progress text
next_btn_text	string	Next button text
prev_btn_text	string	Previous button text
done_btn_text	string	Done button text
progress_text	string	Progress text template — use and
disable_active_interaction	bool	Disable interaction with element
on_highlight_started	string	JS callback — called before element is highlighted
on_highlighted	string	JS callback — called after element is highlighted
on_deselected	string	JS callback — called when element is deselected
on_next_click	string	JS callback — overrides Next button click for this step
on_prev_click	string	JS callback — overrides Previous button click for this step
on_close_click	string	JS callback — overrides Close button click for this step
on_popover_render	string	JS callback — called after popover DOM is rendered for this step

Replacing Steps

You can replace all existing steps with a new set using setSteps():

DriverJs::setSteps([
    ['element' => '#new-header', 'title' => 'New Step'],
    ['element' => '#new-content', 'title' => 'Another Step'],
]);

This clears any previously added steps and adds the new ones.

That's it! You're now equipped to add multiple steps to your tours using Laravel Driver.js.