Walkthroughs / How to: create a welcome message

How to: create a welcome message

Welcoming users with Inline Manual is simple. In just a few minutes, you can create a warm, personalized message to greet your new users and let them know how much you appreciate they chose your product. We believe that the welcome message is one of the most critical parts of the onboarding. Yes, first impressions do matter - you have a few minutes to grab users attention and make them fall in love with your tool. You want to make your users feel happy and excited about using your product.

In this article, we will create a welcome message, just like the one above.

We casually greet a user and give him the option to start an onboarding guide. If the user doesn't want to do it, he can close the window with the "x" button. Speaking more technically, it is a one-step walkthrough with a custom button linking to a specific topic.

Let's create it!

Creating a walkthrough

We will work with the authoring tool to add and edit the content of our walkthrough. If you haven't installed it already, please click here to add the authoring tool as a Chrome extension.

Each walkthrough consists of steps. You can build a one-step walkthrough, or create an interactive, step-by-step guide. In our case, we will create a one-step walkthrough. The process consists of 2 parts: building a topic (walkthrough) and adding steps to it.

In this article, we won't describe in details how to create a walkthrough. We explained it here.

To create a walkthrough:

  1. Go to your application and enable the Inline Manual Authoring tool in your browser.
  2. Choose or create a site you want to build a welcome message for.
  3. Select Walkthrough as a topic type.
  4. Set the visibility in the widget to Hidden.
  5. Confirm by clicking Create topic.

Creating a step with a custom button

For a welcome message, we need to add one step to our walkthrough. We won't cover all of the functionalities of the Step Options Panel. To find out more about how you can configure your steps, take a look at this article.

To add a step:

  1. To add a step, click + Create one.
  2. You will see the Step Options Panel in the authoring tool and the preview of the step - the small popover in the middle of the screen. Start with selecting a step template - “Top Image and text”. Do this before you start creating your content.

  1. Use the editor to provide a step name, and your content: text, links, tables, images, videos or a slideshow.

Tip: With Tokens, you can add a personal touch to your walkthroughs and content created within Inline Manual. For example, you can greet your users with their first name: "Hi {{first_name}}!" See how to use tokens in your content in this article.

  1. Continue with disabling control buttons such as next, previous or end buttons. Click Progress to hide the indication of 1/1.

  1. Now, let's add a custom button. Click the custom button link in the WYSIWYG editor.

  1. Next, configure the button. Add text such as "Great, show me more" and select the action: Link to topic. Then choose the topic you want to launch when a user clicks the button.

Note that you first have to create a topic you want to link a button to. We recommend making a step-by-step guide to provide your new users with an overview of your tool.

Tip: You can also add a second custom button with text such as "Not now" or "OK! Got it" so the user can confirm he saw the message and close the window. To do that, create a new custom button but select Deactivate topic instead of Link to topic. You can also make your custom buttons (with a little HTML knowledge) that can link to external pages, e.g. create your users sign up for a webinar or update their profile.

  1. If you want to, you can darken the popover area with the backdrop feature. The cover locks down the click-through tour, so your users won't get lost or distracted. You can adjust the colour, opacity, and padding.

Well done! You've just created a welcome message!

Control who can see the message

What's next? You can show this welcome message to all of your users by making it visible in the widget. However, you can also show the message only to new users or just to returning users. Your choice!

To learn more about creating segments and auto-launching messages, take a look at this article.

How to: manage steps (the Step options panel)
How to: create custom buttons
How to: create custom step templates
How to: add tokens