Implementing a First‑Login Guided Tour with intro.js and Cookie Detection

Introduction: When a new feature is released or a product is upgraded, a usage guide is often shown the first time a user accesses the product. This guide typically consists of a walkthrough page that demonstrates each UI component to improve user experience.

1. Implementing the Guided Page Effect: First, include jQuery, Bootstrap, and the intro.js plugin in the project. Load the required CSS and JS files as shown in the accompanying screenshots. After the files are added, you can start configuring the guide.

2. Setting Parameters: intro.js provides several configurable options. Commonly, only the navigation button parameters are changed while other defaults remain. The following API functions are frequently used: Introjs(); – creates an intro.js instance; Introjs.start(); – starts the guided steps; Introjs.setOptions(option, value); – sets specific step options; oncomplete – callback when the “Skip” button is clicked; onexit – callback when the “Done” button is clicked.

These functions are placed in a dedicated JavaScript file to activate the guide, and the resulting effect is illustrated in the screenshots.

3. Setting a Cookie to Show the Guide Only Once: A cookie is a text file stored on the client side that can be used to determine whether the user is visiting for the first time. By checking a cookie value, the guide can be displayed only on the initial login. Sample code for detecting the first login with a cookie is provided in the images. Note that cookies are transparent to users and can be inspected via browser tools.

While cookies can control the guide’s visibility, they may reappear if the user clears their cache. For a more reliable one‑time display, storing the visit flag in Redis or a database and checking it via a backend request is recommended.

Conclusion: The article demonstrates how to use intro.js together with cookie detection to implement a guided tour that appears only on the first login. Similar functionality can be achieved with other plugins such as pagewalkthrough.js or Bootstrap Tour, as listed in the references.