Post by Brian Ordonez on May 2, 2015 20:40:54 GMT -8
- Add tours to your forum through the use of tooltips
- Point the tour at specific elements on the page
- Highlight certain sections of the forum
- Individual tour items can be used in multiple tours simultaneously
Installation: Adding Landmarks
All of your tour stops are configured in the Tour Landmarks tab of the plugin.
The ID field should be a unique ID for the current landmark. It cannot be shared with any of your other landmarks.
The CSS Selector field determines which element should be targeted to be used as the landmark. If the CSS selector you specify matches multiple elements the tour will use the first element matched. You can learn more about how to use CSS selectors here.
The Parent Selector field is completely optional. You can specify the tag, class, or ID of one of the parents of the element targeted by the CSS Selector field to highlight it instead of the element. This is useful if you're targeting a small element as you can instead highlight a larger element around it for greater visibility. Please note that table rows and cells cannot be highlighted. However, you can highlight an entire table or the elements inside of a table cell.
The Landmark URL field is used to redirect a user to the URL you specify when the current landmark is reached in the tour. Alternatively, if the current landmark is the first landmark on the tour this field will instead be used to determine which URL the tour is restricted to starting on. You can also use relative paths in this field. For example, if your forum's index page is on http://your-forum.proboards.com/forum you can redirect to it by using /forum instead of the full URL.
The Tooltip Position dropdown determines which side of the landmark the tour info will show on by default. If the browser runs out of room to display the tour info it will move it to the next available side of the landmark instead.
The Content section is where you'll specify the text accompanying the landmark. HTML can be used in this section.
Installation: Adding Tours
In the Tours tab of the plugin, specify a unique ID for your tour in the Tour ID field. This ID must be different from the rest of your tours. This is what you'll use in your forum's URL to start a tour.
The Landmark IDs field will contain a comma-separated list of each landmark you want to include in this tour. Simply list any of the landmark IDs you specified in the Tour Landmarks tab, separating each with a comma. The tour will show them in the order you've listed them.
The Clickable option determines whether or not the page can be clicked during the tour. If the page is clickable and the user clicks on a link on the page that redirects them the tour will end. Having a non-clickable page means that the user cannot accidentally wander off from the tour unless they specifically choose to stop the tour.
The Autoplay option lets you add an autoplay button to the tour. When the user clicks the autoplay button it will make the tour navigate to the next landmark automatically after the amount of seconds you specify in the Settings tab.
How to Use
Once you've finished creating your tour you can use the tour ID you specified in the Tours tab and place it in your forum URL to start the tour. In the example below I'll be using home as my tour ID.
If you want to start a tour on a specific page you'll add ?tour=home to the end of the URL like so:
If the page you want to start the tour on already has a question mark (?) in the URL you'll need to use an ampersand (&) instead of a question mark:
You can add this to the end of pretty much any link's URL, but remember that the tour will attempt to start on the URL you added it to.