Vince Lambardi once said “It takes months to find customers and seconds to lose one.” Your first impression is huge in retaining users and ensuring the success of your web app or website. What you incldue in your onboarding tour will cement your first impression and pave the way for your customers first interactions. We’d like to walk you through creating your first tour with IntroKit.io – a tool we made to build and launch user onboarding experiences. 

Creating your tour starts with defining what it is you are trying to accomplish. A good tour is tailored to who you’re teaching. What segment of your users are you hoping to engage? What steps, features, or processes are most critical for them to understand? When you’ve identified these decide what parts fit into your main tour, and which should go in a secondary tour. A good tour creates a story, so try to limit each tour to a single process or a simplified overview of processes. 

When you have identified the processes you want to cover in your tour you need to outline the steps for each. Break the pieces down into simple steps, noting how each step is accomplished. At this stage it would be helpful to note buttons, links, or other interactive elements that your users will use to complete their task. You can also begin writing the instructions you want included in your tour. The simpler you make each step the better the odds your user will understand and progress.

It’s time to create your tour. You’ll have to make sure your IntroKit.io account is setup. If you’d like a walk through of how to create your account you can read more here. To keep this article snappy we’ll skip that setup process for now.

Start by creating a new tour from your account dashboard. This will open a window that will give you all the pieces you need to define your own walkthrough without having to write the code. You can customize your tour with your brand colors or let the app select a primary color from your site. 

In the steps section create your first step. This is where the outline you made from earlier will come in handy. A “step” has four customizable parameters, Navigation, Clicks, Highlight Targeting, and Media. 

The navigation section allows you to select a page url where your highlighted element is located. This is a more advanced feature used in multi-page tours, where actions occur on different pages. Most tours won’t need to edit this.

The clicks section allow you to simulate clicks. If your website feature is hidden inside of a dropdown, or you want to show a button inside of a menu item you can simulate clicks to have the tour magically navigate your website. Use this to expand menus, dropdown fields, accordions, and modals.

The highlight targeting section is how IntroKit.io knows what element to highlight for your users. The element you select will be highlighted with a bright white background during your tour. There are three ways to select your element. The most flexible is to select by CSS Class. (We’ll show you how to add this in another article). When you can’t edit your site or apps code Selection by Element ID and HTML content are also available.

The final piece is the media itself. For each step in your tour you can include a title and body text. This is what is shown to your customer and will explain the step they are on. If you want to get fancy you can include HTML in the body section, but for applications plain text will work best.

When you’ve added all the steps needed to communicate your process you’re ready to save and connect your site to IntroKit.io. Connecting your site is done in two phases: tagging your elements, and including your script.

To tag your elements you’ll need to know the selection method you used when defining each step. If you used the ID or Class selection method you’ll need to add those CSS tags to your HTML. You’ll want each of these to be unique. 

When you’re sure each item is tagged correctly you’re ready to include your  script tag in your page headers. If your tour showcases multiple pages you’ll want to include your script tag on each page. When you first created your tour you probably saw the option to tag a “start” button for your tour, or add a button to your pgae. It is recommended that you use the tagging method if you plan on having multiple tours on a page. Add the CSS class to the button that starts your tour and when your header script is included in your header your tour is live! Test it out to make sure you got all your elements tagged correctly and in the right order. If one of your elements is tagged incorrectly and IntroKit.io can’t find it the tour will continue normally, but the relevent item won’t be highlighted or scrolled to. 

There’s lots of other ways you can use IntroKit tours in your digital products. Sign up for an account here to begin creating your own tours today.

Please let us know if you have any questions or need clarification in the comments below. We also appreciate any suggestions you may have for new features or process improvements. Thanks for reading!