Starting tours on element click

This is a Boost feature and currently not enabled by default. Contact us if you'd like to try it!

It's possible to set your tour to start when an element on your page is clicked. Perhaps you have some button in your page that you want to use.

All you need to do is to target the page element you want - with a CSS selector. A selector can look like this, for example: #quick-actions > li:nth-child(1).
 

Targeting the trigger element 
The easiest way to find the CSS selector of an HTML element is with our editor, also described in this article.
The editor section that you will need for this step is the very first one, Targeting. 

Clicking on the Change button will open up an interface which shows borders around your elements when you hover over them, and previews their CSS selectors. It might look something like this:

Clicking the currently highlighted element will select it as the target. Next, click the Refine button, and you'll be able to see the full of name of the CSS selector that you just targeted. Don't forget to save this change, but don't publish it yet.

Setting the tour to start when the element is clicked

It is this very selector you have to input in the administration of your tour to set this element as the tour's trigger. Simply copy it, and paste it into the CSS selector text area, under Tour trigger > On Element Clicked.

Save and publish your changes. Next, go back to your editor, and publish the changes there as well, and your trigger should be set up. 

This order is important, because publishing changes made in the editor before the ones in the administration might cause conflicting versions of your tour and overwrite or reverse the administration settings you set. Also note that you don't have to use the same selector or page element to start the tour that the first step of the tour is attached to. This was just the simpliest way to explain the feature.