Ng Joyride

screenshot of Ng Joyride

Angular Joyride Directive for creating custom introductions to websites

Overview

ng-joyride is an Angular directive designed to offer a seamless "joyride" experience for users on your website. Similar to the original jQuery Joyride, this innovative tool enhances user guidance by creating interactive tours, which significantly improve user engagement. The flexibility and ease of integration make it an attractive option for developers looking to provide an intuitive onboarding experience.

With ng-joyride, implementing guided tours becomes straightforward. It allows you to control the joyride's progression through simple scope variables and offers various event hooks for customization. Whether you're looking to showcase features or assist new users in navigating your site, ng-joyride delivers a compelling solution.

Features

  • Easy Integration: Installable via Bower, ng-joyride can be quickly added to your existing Angular project with minimal configuration needed.
  • Dynamic Control: Start the joyride experience from anywhere in your app by binding the scope variable startJoyRide to control the flow.
  • Event Binding: The directive supports specific event bindings like joyride:prev, joyride:next, and joyride:exit, enabling finer control over user interactions.
  • Customizable Steps: You can define multiple joyride steps with different types, allowing you to tailor the information presented to users effectively.
  • Flexible Functionality: Utilize various joyride-element types, including titles, elements, and functions, to enhance the tour's interactivity.
  • Hooks for Custom Actions: Implement custom actions using on-finish and on-skip attributes, allowing for specific behaviors after the joyride ends or is skipped.
  • Cross-Page Tours: Easily configure joyrides that span multiple pages using the $location.path method to maintain a cohesive user experience.