🚶 A lightweight, easy-to-use JavaScript library to create interactive, customizable, accessible guided tours across your websites or web apps!
v1.7.0
What features does Journey.js have?
- Zero-dependencies and extremely lightweight!
- Full API available via public functions.
- Fully styled in CSS/SASS and compatible with the Bootstrap library.
- Full CSS theme support (using :root variables, with a default dark-mode theme).
- Custom triggers for actions (when the dialog is shown for an element, or hidden, etc).
- Shortcut keys (click here to see the full list).
- Browser URL parameters support (click here to see the full list).
- Hints support (not included in the main journey).
- 51 language translations available!
- Customizable tooltips.
- Show progress dots, or a progress bar, or both!
- Group your steps into separate journeys!
- Dialog moving support!
Where can I find the documentation?
All the documentation can be found here:
What browsers are supported?
All modern browsers (such as Google Chrome, FireFox, and Opera) are fully supported.
What languages are supported?
afAfrikaansarArabichyArmenianbeBelarusianbnBengalibgBulgariancaCatalanzhChinese (simplified)daDanishnlDutchenEnglish (default)eoEsperantoetEstonianfaFarsifiFinnishfrFrenchfyFrisianglGaliciankaGeorgiandeGermanelGreekheHebrewhiHindihuHungarianisIcelandicidIndonesiangaIrishitItalianjaJapanesekoKoreanlvLatvianltLithuanianlbLuxembourgishmsMalayneNepalinoNorwegianplPolishptPortugueseroRomaniansiSinhaleseskSlovakslSlovenianesSpanishsvSwedishtlTagalogtaTamilzh-twTaiwaneseteTeluguthThaitrTurkishukUkrainian
What are the most recent changes?
To see a list of all the most recent changes, click here.
How do I install Journey.js?
You can install the library with npm into your local modules directory using the following command:
npm install jjourney.jsOr, you can download the latest zipped up version here.
How do I get started?
To get started using Journey.js, do the following steps:
1. Prerequisites:
Make sure you include the "DOCTYPE html" tag at the top of your HTML, as follows:
<!DOCTYPE html>2. Include Files:
<link rel="stylesheet" href="dist/Journey.js.css">
<script src="dist/Journey.js"></script>3. DOM Element Binding:
<button data-journey-js="{ 'title': 'Get Version', 'description': 'Logs the current version of Journey.js to the developers console.', 'order': 6 }" onclick="console.log( $journey.getVersion() );">Get Version</button>To see a list of all the available binding options you can use for "data-journey-js", click here.
To see a list of all the available custom triggers you can use for "data-journey-js", click here.
4. Finishing Up:
To start the journey, call the following public function:
<script>
$journey.start();
</script>That's it! Nice and simple. Please refer to the code if you need more help (fully documented).
How do I go about customizing Journey.js?
To customize, and get more out of Journey.js, please read through the following documentation.
1. Public Functions:
To see a list of all the public functions available, click here.
2. Configuration:
Configuration options allow you to customize how Journey.js will function. You can set them as follows:
<script>
$journey.setConfiguration( {
safeMode: false
} );
</script>To see a list of all the available configuration options you can use, click here.
To see a list of all the available configuration option custom triggers you can use, click here.