...

Journey.js

A lightweight, easy-to-use JavaScript library to create interactive, customizable, accessible guided tours across your websites or web apps!
GitHub
126
Created a year ago, last commit 3 months ago
Number of contributors not available
355 commits
Stars added on GitHub, month by month
N/A
N/A
N/A
N/A
N/A
N/A
11
12
1
2
3
4
5
6
7
8
9
10
2023
2024
Stars added on GitHub, per day, on average
Yesterday
=
Last week
0.0
/day
Last month
0.0
/day
npmPackage on NPM
jjourney.js
2.2.0
Monthly downloads on NPM
0
11
12
1
2
3
4
5
6
7
8
9
10
2023
2024
No dependencies
README

Journey.js

Tweet npm nuget license discussions Welcome coded by William Troup

🚶 A lightweight, easy-to-use JavaScript library to create interactive, customizable, accessible guided tours across your websites or web apps!

v2.2.0


Journey.js

What features does Journey.js have?

  • Zero-dependencies and extremely lightweight!
  • Written in TypeScript, allowing greater support for React, Angular, and other libraries!
  • 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?

  • af Afrikaans
  • ar Arabic
  • hy Armenian
  • be Belarusian
  • bn Bengali
  • bg Bulgarian
  • ca Catalan
  • zh Chinese (simplified)
  • da Danish
  • nl Dutch
  • en English (default)
  • eo Esperanto
  • et Estonian
  • fa Farsi
  • fi Finnish
  • fr French
  • fy Frisian
  • gl Galician
  • ka Georgian
  • de German
  • el Greek
  • he Hebrew
  • hi Hindi
  • hu Hungarian
  • is Icelandic
  • id Indonesian
  • ga Irish
  • it Italian
  • ja Japanese
  • ko Korean
  • lv Latvian
  • lt Lithuanian
  • lb Luxembourgish
  • ms Malay
  • ne Nepali
  • no Norwegian
  • pl Polish
  • pt Portuguese
  • ro Romanian
  • si Sinhalese
  • sk Slovak
  • sl Slovenian
  • es Spanish
  • sv Swedish
  • tl Tagalog
  • ta Tamil
  • zh-tw Taiwanese
  • te Telugu
  • th Thai
  • tr Turkish
  • uk Ukrainian


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.js

Or, you can download the latest zipped up version here.

Or, you can also use the following CDN links:

https://cdn.jsdelivr.net/gh/williamtroup/Journey.js@2.2.0/dist/journey.min.js
https://cdn.jsdelivr.net/gh/williamtroup/Journey.js@2.2.0/dist/journey.js.min.css


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.