Implementing Interactive Embedded Tours with ngx-ui-tour for Portal
As an intern at Poket, one of my first major projects was to enhance the onboarding experience for new users using our Portal. Traditionally, we have provided highly customized video tutorials for each client to guide them through using these features effectively. While these tutorials have been highly effective, the interactive embedded tours introduce a scalable, dynamic alternative to these custom videos. With the new embedded tutorial solution, we aim to provide the same level of personalized guidance in a more efficient and sustainable way, allowing clients to familiarize themselves with Portal's features seamlessly and at their own pace.
Why ngx-ui-tour?
After researching different solutions, the ngx-ui-tour library became a natural choice due to its flexibility and ease of integration into Angular, the framework used for the application. It allowed me to create interactive tours with customizable tooltips, navigation controls, and transitions. With its ability to anchor steps to specific UI elements, ngx-ui-tour provided a seamless way to guide users through complex workflows without needing additional training materials.
Our Approach
We designed multiple tours to address key user journeys:
Login and Account Creation: New users are guided through the registration process, login, and initial setup, ensuring they can start exploring quickly.
Submission Dashboard: This tour highlights the dashboard’s layout, showcasing user submissions, search filters and the ability to download data, images and videos. Users learn how to track survey responses effectively.
Survey Creation: Creating surveys is one of Portal's core features. This tour explains step-by-step how to create a new survey, configure its questions/details and deploy it.
Implementation & Challenges
The implementation involved defining a series of steps for each tour. These steps are mapped to specific DOM elements, making it easy to guide users to important parts of the interface. Each step includes a tooltip with explanatory text, navigation controls, and clear instructions on how to proceed. The library’s event hooks were particularly helpful, allowing us to trigger additional actions, such as highlighting specific UI elements or dynamically adjusting the tour based on user roles.
I also used the browser's local and session storage to ensure that tours are shown only to first-time users. If a user had already completed or skipped a tour, the system would hide it for subsequent visits. This approach helped us avoid annoying returning users while ensuring that new users received the guidance they needed.
The core implementation involved defining "steps" for each tour. Each step targeted a specific DOM element, and the ngx-ui-tour library handled positioning and navigation. For example, the login tour included steps tied to the form fields and buttons, ensuring users understood the flow. Customization was straightforward for basic tooltips, and I could easily set properties like position and navigation labels.
However, when it came to modifying default templates, I encountered challenges. One requirement was to add a "Skip Tour" button to the tooltips. This wasn't natively supported, so I had to extend the library's template and logic. After diving into ngx-ui-tour's source code and exploring its API, I created a custom component that overrode the default tooltip behaviour. However this approach did not yield the desired functionality.
During development, I encountered another issue where the tour for the survey builder tables did not display correctly because the data in the tables is loaded asynchronously. As a result, the targeted elements were not available when the tour attempted to bind to them. This highlighted the need for additional logic to handle asynchronous rendering, which remains unresolved for now.
Future and continuous improvement efforts can focus on addressing such blockers, including resolving issues with asynchronous data and refining custom tour templates, to further enhance the user experience.
Results and Benefits
The interactive embedded tours are expected to dramatically improve the onboarding experience for new users by providing clear, step-by-step guidance through Portal's features. With the introduction of scalable embedded tutorials, we aim to streamline the process while maintaining the same level of support and clarity, especially for first time users. Users should be able to quickly grasp how to navigate the platform and utilize its tools effectively. By showcasing features like survey creation, data export, and the submission dashboard, we aim to increase user engagement and highlight the full value of Portal's offerings. Additionally, we expect a reduction in support requests for common issues, as the tours preemptively address key pain points.
Ultimately, we believe these tours will contribute to higher retention rates, greater feature adoption, and a more confident user base, making Poket a go-to solution for data collection and analysis.
Comments