Laravel Driver.js

Appearance

Customizing Button Text ​

Laravel Driver.js allows you to customize the text displayed on the navigation buttons in the popover. This is useful for localizing your tours or matching your application's tone.

Setting the Next Button Text ​

php
DriverJs::nextBtnText(string $text);

Sets the label for the "Next" button. The default is "Next →".

Example ​

php
DriverJs::tour('onboarding')
    ->nextBtnText('Continue →')
    ->step('#header', 'Welcome')
    ->render();

Setting the Previous Button Text ​

php
DriverJs::prevBtnText(string $text);

Sets the label for the "Previous" button. The default is "← Previous".

Example ​

php
DriverJs::tour('onboarding')
    ->prevBtnText('← Go Back')
    ->step('#header', 'Welcome')
    ->render();

Setting the Done Button Text ​

php
DriverJs::doneBtnText(string $text);

Sets the label for the "Done" button, which appears on the last step of a tour. The default is "Done".

Example ​

php
DriverJs::tour('onboarding')
    ->doneBtnText('Get Started!')
    ->step('#header', 'Welcome')
    ->step('#nav', 'Navigation')
    ->step('#footer', "That's it!")
    ->render();

Step-Level Button Text ​

You can also customize button text on individual steps:

php
DriverJs::addStep('#header')
    ->title('Welcome')
    ->nextBtnText('Let\'s Go!');

DriverJs::addStep('#footer')
    ->title("That's it!")
    ->doneBtnText('Start Using the App');

DriverJs::tour('onboarding')
    ->showProgress()
    ->render();

Full Example with Custom Button Text ​

php
DriverJs::tour('onboarding')
    ->nextBtnText('Continue →')
    ->prevBtnText('← Go Back')
    ->doneBtnText('Start Exploring!')
    ->showProgress()
    ->progressText('Step {{current}} of {{total}}')
    ->step('#header', 'Welcome!', 'This is the header.')
    ->step('#nav', 'Navigation', 'Navigate your app.')
    ->step('#content', 'Content', 'Your content area.')
    ->step('#footer', 'All Done!', "You're ready to go!")
    ->render();

That's it! You're now equipped to customize button text using Laravel Driver.js.