Build 10x products in minutes by chatting with AI - beyond just a prototype.
Topics
Intro.js is a powerful JavaScript library designed to create guided product tours. When combined with React, a popular JavaScript library for building user interfaces, Intro.js can enhance user onboarding by providing interactive and informative step-by-step guides.
In this blog, we will explore how to integrate Intro.js with React to create an engaging user experience.
ReactJS, often called React, is an open-source JavaScript library for building dynamic user interfaces. It enables developers to create large web applications that can change data without reloading the page. React's component-based architecture makes it an ideal choice for implementing complex features like product tours with Intro.js.
User onboarding is a critical phase where users learn to navigate and use an application effectively. Intro.js guides users through the application's features and functionalities, ensuring a smoother transition and better user retention.
To use Intro.js in a React application , you must install it via npm or yarn. Run the following command in your project directory:
1npm install intro.js react-introjs --save 2
This command installs Intro.js and its small React wrapper, allowing seamless integration with React components.
After installation, you can set up your first tour by importing Intro.js into your React component and configuring the steps. Here's a basic example:
1import React from 'react'; 2import { Steps, Hints } from 'intro.js-react'; 3 4const steps = [ 5 { 6 element: '.first-step', 7 intro: 'Welcome to your first step!', 8 }, 9 // Add more steps as needed 10]; 11 12function App() { 13 return ( 14 <div> 15 <Steps 16 enabled={true} 17 steps={steps} 18 initialStep={0} 19 onExit={() => console.log('Tour exited')} 20 /> 21 {/* Your app content */} 22 </div> 23 ); 24} 25 26export default App; 27
Intro.js offers various options to customize the tour experience. For instance, you can use the string highlight class CSS class and string tooltip class CSS class to style the highlighted area and the tooltip text, respectively. Here's how to apply these options:
1<Steps 2 enabled={true} 3 steps={steps} 4 initialStep={0} 5 options={{ 6 highlightClass: 'custom-highlight-class', 7 tooltipClass: 'custom-tooltip-class', 8 }} 9 onExit={() => console.log('Tour exited')} 10/> 11
The highlightClass option allows you to apply a custom CSS class to the highlighted element. This is useful for setting a specific style to draw attention during the tour:
1.custom-highlight-class { 2 border: 2px solid #0056b3; 3} 4
Similarly, the tooltipClass option lets you assign a custom CSS class to the tooltip elements, giving you control over tooltip content and their appearance:
1.custom-tooltip-class { 2 background-color: #f0f0f0; 3 color: #333; 4 border-radius: 4px; 5} 6
The scrollToElement option determines whether the page will automatically scroll to the highlighted element. Set this option to true to enable automatically scrolling:
1options={{ 2 scrollToElement: true, 3}} 4
When dealing with dynamic elements that may not be immediately present in the DOM, Intro.js can handle them gracefully. Use the refresh method provided by the wrapper to update the positions of the steps when the dynamic elements are rendered.
Intro.js is free to use under a non-commercial license, but you must obtain a commercial license. This ensures you are legally compliant when using Intro.js in a business environment.
The overlayOpacity option allows you to set the opacity of the overlay layer that appears behind the highlighted element. This can enhance focus on the active element during the tour:
1options={{ 2 overlayOpacity: 0.5, 3}} 4
You can control the visibility of the navigation elements such as the next button and bullets by using the hidenext and showbullets options:
1options={{ 2 hideNext: true, 3 showBullets: false, 4}} 5
To start the tour at a specific step, use the initialStep property. This is useful when you want to resume the tour from where the user left off, small example:
1<Steps 2 enabled={true} 3 steps={steps} 4 initialStep={2} // Starts the tour from the third step 5 onExit={() => console.log('Tour exited')} 6/> 7
The exitOnOverlayClick option allows users to exit the tour by clicking on previous button in the overlay. This provides a quick way to close the tour if needed:
1options={{ 2 exitOnOverlayClick: true, 3}} 4
Intro.js provides options like boolean hintposition and boolean tooltipposition to control the position of hints and tooltips relative to the target elements:
1options={{ 2 hintPosition: 'top-middle', 3 tooltipPosition: 'auto', 4}} 5
For dynamically created elements, ensure that the steps are updated to reflect the current state of the DOM. This can be done by adjusting the steps array or using the refresh method provided by Intro.js.
Hints are small information that users can see as they interact with the application. Enable hints using the hints option:
1<Hints enabled={true} hints={const hints} /> 2
It's important to distinguish between non commercial use and situations where a commercial license is required. Ensure that you comply with the licensing terms to avoid legal issues.
The small react wrapper provided by react-introjs makes it easy to integrate Intro.js into React applications. It simplifies the process of passing props and managing the state of the tour.
You can override the default values provided by Intro.js by passing your settings through the wrapper's props. This allows for greater customization of the tour experience.
Customize the text of button label on the navigation buttons by setting properties like nextLabel, prevLabel, and skipLabel. This allows you to tailor the button labels to your application's language and style.
1options={{ 2 nextLabel: 'Next step', 3 prevLabel: 'Previous step', 4 skipLabel: 'Exit tour', 5}} 6
Intro.js provides various callback events such as onbeforechange, onchange, onafterchange, and more. Use these to execute custom code at different stages of the tour:
1<Steps 2 enabled={true} 3 steps={steps} 4 onBeforeChange={(nextStepIndex) => console.log('Before changing to step:', nextStepIndex)} 5 onChange={(currentStepIndex) => console.log('Changed to step:', currentStepIndex)} 6 // Add more callbacks as needed 7/> 8
Further customize the tour by enabling or disabling features like boolean showprogress, boolean showbullets, and boolean keyboardnavigation. These options provide control over the tour's interactivity and user interface elements.
To make hints more engaging, use the string hintanimation option to add animations. Additionally, customize the hint text to provide helpful information to users.
When elements are not visible on the page, Intro.js can automatically scroll to them if boolean scrolltoelement is enabled. This ensures that users get all the steps in the tour.
Combine all the features and configurations of Intro.js to create a comprehensive and interactive product tour. This can significantly improve the onboarding experience and help users understand your application quickly.
Encounter issues such as elements not being highlighted or tooltips not aligning correctly? We'll discuss common problems and solutions to ensure your Intro.js implementation works smoothly.
For more detailed information and advanced configurations, refer to the official Intro.js documentation. It provides a wealth of knowledge on all the features and options available, source code examples and best practices.
Incorporating Intro.js into your React application can significantly improve the customer onboarding process. By guiding users through the interface and highlighting key features, you can ensure a better understanding of your product, leading to increased user engagement and satisfaction.
Following the steps outlined in this blog, you should now understand how to implement Intro.js in a React application. Remember to consider the licensing requirements, customize the tour to fit your application's needs, and utilize the callbacks to create a dynamic and interactive experience.
Whether building complex enterprise software or a simple web app, Intro.js React can help you create a practical product tour that educates and engages your users.
