Onbrd.js

Key Features

Tooltips & Modals

Mix tooltip steps and full-page modals for smooth onboarding flows.

Click Interception

Capture clicks on elements and handle them in your onboarding flow. Control whether the native click action is triggered using passThrough (default: true).

Typewriter Input

Simulate typing inside inputs to guide users through forms.

Dynamic Wait

Wait for async content with waitForElement.

Next Conditions

Control "Next" button availability with nextCondition.

Cross-Page Resume

Continue onboarding after navigation (with plugin).

Install Onbrd.js

You can install Onbrd.js in a few simple steps. It consists of two main files: the JS and the CSS part.

1Include the JavaScript and CSS

Onbrd.js is available on NPM and most CDNs.

JavaScript CSS

2Call the `onboarding.start()` method

This initializes the onboarding tour on your page.

const onboarding = new Onbrd({
  steps: [
    { stepId: 'welcome', type: 'main', html: '<h2>Welcome!</h2>' },
    { stepId: 'feature1', type: 'tooltip', selector: '#feature1', text: 'Feature 1' }
  ],
  autoStart: true
});
onboarding.start();

License & Pricing

Onbrd.js is free for personal, educational and open-source use.
For commercial use (proprietary apps, SaaS, client projects, etc),
please purchase a lifetime license ($30 per company):

Purchase License on PayPal

The license will be issued under your company name and emailed to you.
Redistribution or resale of the Software is not permitted.