The ability to create product tours on any kind of application (online/offline) is one of the core component of Anakage platform and it differentiates it from our competitors. For online product tours there are many open source libraries available. One of them is Hopscotch , a framework by Linkedin 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.

Creating tour JSON object needs lot of experimentation –

However developers has to create tour JSON object manually and use it with hopscotch linkedin library to use the product tours for their website. Creating tour for hopscotch linkedin needs development effort and some knowledge of various techniques to identify html elements. Anakage with its graphical hopscotch linkedin recorder makes this process simple.

What is Anakage Hopscotch Linkedin Recorder?

This is a graphical way of creating hopscotch tour content js files. It makes easy to add product tours to your web pages. It is an open source and free to use chrome extension.

What are  benefits of Anakage Hopscotch Linkedin Recorder?

1 – No coding required to create tour js files. Do it through Anakage Hopscotch Recorder extension on chrome

2 – Select any theme at the start of tour creation. Right now we have provided one more theme apart from default hopscotch theme. But you can browse through the code to understand how to add more themes.

3 – Add all the steps faster. Keep clicking the page elements and steps will be auto populated. Change the title, description and direction easily through dialogs

4 – Test the tour through graphical recorder to see how they will look in real time.

5 – Export the tour steps when you are done. Follow normal hopscotch instructions for using this js file in your projects.

How to use Anakage Hopscotch Linkedin Recorder?

1 – Install “Anakage Hopscotch Recorder” to Chrome browser. You can download it from here.

2 – Drag the unzipped folder to the chrome extension window. Make sure that chrome extension developer mode must be turned on.

3 – You can see the extension icon either in chrome menu or chrome toolbar.

4 – Select icon and click to “Record” button.

5 – Select theme from the drop-down.

6 – Click “Start” button to start creating the tour.

7 – Start moving the mouse, web page elements will get highlighted. Click on the element for which you want to add a step. A confirmation dialog will appear where you can specify title, description, placement and “Next Step on target click” which specifies if tour should move ahead when you click the element. Click on Submit button to finalize this step and add it to list.

8 – Step list window will appear on the right side displaying the added steps to your tour with title and description.

9 – To test the tour click third button. You can see how tour will play in real time.

10 – To export tour content js click on 4th button. It will open a new tab in chrome with instructions on how to use this js file in your projects.

We are releasing Anakage Hopscotch LinkedIn Recorder under Apache 2.0 license. Remember this is not a fully fledged production grade application. To use it in real environment please test and use your judgement. Online tours are not our core offering, we developed Anakage Hopscotch Recorder” during one of our internal hackathons. Play with this repository and contribute so that others can benefit from it. If you want any help please leave a comment here or fill out this form. We will make sure to reply.

Read More:

AI, ML in Service Desk Automation.