1. Launch the LOU Builder & start a project

Look for the LOU Chrome extension icon to the right of your search bar. You must be using a Google Chrome web browser to access the LOU Builder. If you haven't installed the extension yet, you can install it here.

lou-builder-icon

Create a new Project by giving it a name like “Onboarding Tours” and selecting a theme color. This will be the color of your tours so be sure to pick one that stands out nicely while complementing your platform.

create-a-project

2. Create a tour or start from a template

To start from a template, click the down arrow next to the ‘create tour’ button and then choose which template you want to use. Templates are meant to provide inspiration and a head start.

To create a tour click ‘create tour’ and give your tour a title and description. 

If you choose to have the tour appear in the help widget the title and description is what the user will see before choosing to start the tour. If you choose to have a tour start automatically the user will not see the title and description. Instead it will start with the first step. 

Choose a step type for the first step of your tour from the following 3 options:

highlight-step

Highlight: a highlight step highlights your chosen element in the blinking color of your choice and presents a text box where you can provide your user with more information. We recommend using this step type to highlight large sections of your platform or draw attention to blinking buttons.

tooltip-step

Tooltip: a tooltip step places a text box that points to and sits next to the element of your choice. We recommend using tooltips to point users in the right direction or announce new feature releases.

modal-step

Modal: a modal step makes a large text-box pop up in the middle of the user’s screen while dimming the platform behind it. We recommend using modals to welcome users to your platform or for making very important announcements.

If you created a tooltip or highlight step, next you need to position the step next to the element it’s referring to. To do this, select ‘position step’, and then hover your mouse over the element you want to select & click.

build-step

Give each step a title and description. A title will auto populate but you can change it.

edit-step

Then, click the grey ‘+’ to add video or images to a step.

Lastly, confirm changes to the step by clicking the check mark in the lower left hand corner.

Click ‘new step’ and repeat until you’ve finished building your tour!

3.  Select where you want the tour to appear

First choose if you’d like the tour to start automatically or appear in the help widget.

Next choose when you want the tour to be available by entering the URL that you would like the tour to start automatically on or to be available in the help widget only when a user is on a specific URL.

If you’d like the tour to be available on many pages insert an asterisk * which acts as a wildcard.

For example if I only wanted a tour to be available on the product page of the LOU website I would enter https://www.louassist.com/product/engage as the URL rule. But if I wanted the tour to be available on every page of my website, I would enter https://www.louassist.com* as the URL rule.

help-widget

Lastly choose who should see this tour:

Go to the dashboard (https://dashboard.louassist.com/segments) to set up your segments. You can add this later if you’d like to start with tours that are available to all users. 

Once you have your segments set up they will appear as options in the last step of the build process, and simply click which segment of users you want the tour to be available for. Some commonly used tours are ‘admin users’, ‘regular users’, ‘freemium users’, ‘paid users’.

Once you’ve selected your segment or chosen ‘all users’, click save.

4. Go Live

Before publishing your tour live, click ‘preview’ to see how your tour will appear for users and make sure it appears exactly as you’d like.

Once you've confirmed the tour is ready to be published, toggle the switch to the right to launch it on your platform!

publish-tour

For more information check out LOU Best Practices or shoot our team an email with any questions you have (contact@louassist.com). 

Happy building!

Published on June 30th, 2020