With Usetiful you can configure the Usetiful button's look and feel directly using Themes.


If you wish to create your own custom button to run your tour, you can follow these steps:


1) Design the custom button

  1. Go to Button Generator and set up the style of your new button
  2. Choose class "UsetifulButton"
  3. Click on "Get code". Paste the result code inside of your webpage.


2) Connect Usetiful to the custom button

  1. In the first step of your tour, set the Trigger. Element value is [class="UsetifulButton"], element event is "User clicks on element"
  2. Now, whenever a user clicks on the custom button, the given tour will show up.


Notes:

  • You can control whether your tour will show every time user clicks on the button, or only first time for any user. This is set up in the Settings using toggle "Show to each user just once"
  • If you have multiple custom buttons on your site and wish to target different tours, each button needs to have unique class name
  • You can find more about targeting elements using class here