If it is absolutely necessary, you must properly escape the input, as always.

It is highly recommended to never show user-generated content in a Hopscotch tour. However, it also allows the inclusion of malicious script injections when used improperly. This allows the inclusion of very basic markup like links and lists. IMPORTANT - title and content are set using element.innerHTML. This is an example of a tour defined with only basic steps.Ĭontent: 'Use the links here to get around on our site!'Ĭontent: 'Upload a profile picture here.'Ĭontent: 'Messages from other users will appear here.' Note that title and content are both optional only because you can choose to have a step with only a title, only content, or both title and content. The step options below are the most basic options. The simplest tour consists of just an id string and an array of one or more steps. The tour id is simply a unique identifier string. That's all there is to it! Defining a TourĪ Hopscotch tour consists of a tour id, an array of tour steps defined as JSON objects, and a number of tour-specific options. Target: document.querySelector('#content p'), Then in your my_first_tour.js file, define and start your tour.Ĭontent: 'This is the header of my page.',Ĭontent: 'Here is where I put my content.',

This will load the hopscotch object into the global window object for you. To get started using the Hopscotch framework, simply include hopscotch.css and hopscotch.js on your page. Create single instance callouts for those times when one is enough.

Choose where smoothscroll goes