PHPackages intelogie/hopscotch - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. intelogie/hopscotch ActiveLibrary intelogie/hopscotch =================== 0219JavaScript Since Nov 7Pushed 8y ago1 watchersCompare [ Source](https://github.com/INTELOGIE/hopscotch)[ Packagist](https://packagist.org/packages/intelogie/hopscotch)[ RSS](/packages/intelogie-hopscotch/feed)WikiDiscussions master Synced 2d ago READMEChangelogDependenciesVersions (1)Used By (0) [![Example Hopscotch tour](/demo/img/screenshot.png)](/demo/img/screenshot.png) Hopscotch [![Build Status](https://camo.githubusercontent.com/094d5564f9a94af604101d9340bbdc88dfef1492ee265793c5825585e7e94f69/68747470733a2f2f6170692e7472617669732d63692e6f72672f6c696e6b6564696e2f686f7073636f7463682e706e67)](http://travis-ci.org/linkedin/hopscotch) ========================================================================================================================================================================================================================================================================== [](#hopscotch-) Hopscotch is a framework to make it easy for developers to add product tours to their pages. Hopscotch accepts a tour JSON object as input and provides an API for the developer to control rendering the tour display and managing the tour progress. To learn more about Hopscotch and the API, check out [linkedin.github.io/hopscotch](http://linkedin.github.io/hopscotch/). What's Here? ------------ [](#whats-here) - `/archives` contains .zip and .tar.gz files of prior and current distributions of Hopscotch. - `/demo` has a simple demo page with a Hopscotch tour. Much of the content duplicates what's on the github.io page. - `/dist` includes compiled files for the current version of Hopscotch. This folder gets zipped up into an archive when a new release is published. - `/src` contains source files for Hopscotch, including JavaScript and Less. If you're making changes to contribute back to the core repository, this is where you'll want to make them. - `/test` is our testing suite for the core framework, written using Jasmine. How do I get started with Hopscotch? ------------------------------------ [](#how-do-i-get-started-with-hopscotch) The Hopscotch files included in `/dist` is a good starting point for working with Hopscotch. Out of the box, Hopscotch includes the core JavaScript for running and interacting with tours, a default template for rendering bubbles, and a default CSS file to provide a basic look and feel for your tours. To get started, simply include these files on your page, then use the Hopscotch API to start a tour. While Hopscotch will use YUI or jQuery if they're present, they're not required. Check out [linkedin.github.io/hopscotch](http://linkedin.github.io/hopscotch/) for usage examples and a live sample tour. If you'd like to tweak some of the default assets included with Hopscotch to best suit your project's needs, read on for details about how to modify and rebuild a custom version of Hopscotch. How do I build Hopscotch? ------------------------- [](#how-do-i-build-hopscotch) Hopscotch is built using Grunt.js. [Learn more about how to get started with Grunt](http://gruntjs.com/getting-started). Running `grunt` will build Hopscotch (publishing artifacts to `/tmp`) and run the test suite against the newly built artifacts. How do I test Hopscotch? ------------------------ [](#how-do-i-test-hopscotch) Testing is done as part of the build process using the [Jasmine testing framework](http://jasmine.github.io/edge/introduction.html). You can run `grunt test` to verify changes. Continuous integration is run against every pull request using [Travis CI](https://travis-ci.org/). Please verify your changes against the test suite before submitting a pull request! We also recommend adding new tests for any new features or bugfixes as feasible. How do I tweak Hopscotch to meet my project's requirements? ----------------------------------------------------------- [](#how-do-i-tweak-hopscotch-to-meet-my-projects-requirements) Depending on your use case, you might want to modify and/or rebuild some of the basic components included with Hopscotch. Some moddable options include... - CSS tweaks: The Hopscotch stylesheet is written in and compiled using [LESS](http://lesscss.org/). If you make changes to your local copy of these stylesheets, they'll be recompiled when building Hopscotch. - Bubble markup: The internal markup for Hopscotch bubbles are rendered using templates. See the README.md file in `/src/tl` for details. Any templates in `/src/tl` will be compiled into JavaScript using JST when building Hopscotch and included at the bottom of Hopscotch.js. - Callbacks & Page Interactivity: See [linkedin.github.io/hopscotch](http://linkedin.github.io/hopscotch/) for details about the Hopscotch API and what tour/callout events you can register events with. Use callbacks to integrate Hopscotch with other libraries and/or presentational elements you might have on your page. I want to contribute! How can I help? ------------------------------------- [](#i-want-to-contribute-how-can-i-help) > Note: We're currently in the midst of refactoring Hopscotch into a newer module-based format that should help make readability and maintenance a lot easier. While this work is in progress, we'll be halting changes to the master branch of Hopscotch, apart from major maintenance fixes. Please feel free to continue submitting bug reports, though do keep in mind that they not be addressed in the current iteration of the library. Thanks! See CONTRIBUTING.md for details on how to contribute back to the public Hopscotch repository on GitHub. ### Health Score 23 — LowBetter than 27% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity11 Limited adoption so far Community19 Small or concentrated contributor base Maturity41 Maturing project, gaining track record Bus Factor2 2 contributors hold 50%+ of commits How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Community Maintainers ![](https://www.gravatar.com/avatar/8cd960536c07e255b2e6f7e55c03c6d09274b215ccceaccc38926ffe03e098a7?d=identicon)[bgauthier](/maintainers/bgauthier) --- Top Contributors [![kate2753](https://avatars.githubusercontent.com/u/3639923?v=4)](https://github.com/kate2753 "kate2753 (52 commits)")[![timlindvall](https://avatars.githubusercontent.com/u/3336359?v=4)](https://github.com/timlindvall "timlindvall (27 commits)")[![stebunovd](https://avatars.githubusercontent.com/u/1415093?v=4)](https://github.com/stebunovd "stebunovd (4 commits)")[![ykka](https://avatars.githubusercontent.com/u/1130636?v=4)](https://github.com/ykka "ykka (3 commits)")[![sontan](https://avatars.githubusercontent.com/u/68560?v=4)](https://github.com/sontan "sontan (3 commits)")[![kkirsche](https://avatars.githubusercontent.com/u/947110?v=4)](https://github.com/kkirsche "kkirsche (2 commits)")[![gnatok](https://avatars.githubusercontent.com/u/1182933?v=4)](https://github.com/gnatok "gnatok (2 commits)")[![bgauthier](https://avatars.githubusercontent.com/u/1789355?v=4)](https://github.com/bgauthier "bgauthier (2 commits)")[![joehalliwell](https://avatars.githubusercontent.com/u/8868?v=4)](https://github.com/joehalliwell "joehalliwell (2 commits)")[![gkoo](https://avatars.githubusercontent.com/u/665970?v=4)](https://github.com/gkoo "gkoo (2 commits)")[![yeah](https://avatars.githubusercontent.com/u/2181?v=4)](https://github.com/yeah "yeah (2 commits)")[![eoneill](https://avatars.githubusercontent.com/u/552715?v=4)](https://github.com/eoneill "eoneill (2 commits)")[![leedavidr](https://avatars.githubusercontent.com/u/2983868?v=4)](https://github.com/leedavidr "leedavidr (1 commits)")[![Benjamin-Dobell](https://avatars.githubusercontent.com/u/482276?v=4)](https://github.com/Benjamin-Dobell "Benjamin-Dobell (1 commits)")[![joshjordan](https://avatars.githubusercontent.com/u/521674?v=4)](https://github.com/joshjordan "joshjordan (1 commits)")[![kemaldaggen](https://avatars.githubusercontent.com/u/2697501?v=4)](https://github.com/kemaldaggen "kemaldaggen (1 commits)")[![KlavierCat](https://avatars.githubusercontent.com/u/5871704?v=4)](https://github.com/KlavierCat "KlavierCat (1 commits)")[![affka](https://avatars.githubusercontent.com/u/2149317?v=4)](https://github.com/affka "affka (1 commits)")[![leom](https://avatars.githubusercontent.com/u/976508?v=4)](https://github.com/leom "leom (1 commits)")[![marc-hughes](https://avatars.githubusercontent.com/u/333265?v=4)](https://github.com/marc-hughes "marc-hughes (1 commits)") ### Embed Badge ![Health badge](/badges/intelogie-hopscotch/health.svg) ``` [![Health](https://phpackages.com/badges/intelogie-hopscotch/health.svg)](https://phpackages.com/packages/intelogie-hopscotch) ``` PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)