Skip to main content

Build your first Welcome Message


Why Welcome message?

Welcome message has a great impact on how users perceive your application - you can set up a very friendly and human tone of conversation. On top of that - it is really easy to create one with Usetiful!

Benefits:
  • Introduce your product from human perspective and let users know you appreciate them
  • Activate your users with call-to-action 
  • Get your Usetiful ready for more complex opportunities

Build the modal

  1. In the Overview menu, click on "Add tour"

  2. Tour name - Give your Welcome message a name so you can find it later

  3. Let's keep it simple - page targeting should remain "All pages", trigger should remain to "Launch automatically". You can change these settings anytime later. Click "Continue".

  4. Usetiful creates the first example modal for you. Click inside of the modal and update the content! Pro tip: Include pictures or video!


Buttons - your call to action

Usetiful allows you to set up actionable buttons. These can lead customers to different product tours, but also to specific page.

  1. Within the content editor, click on icon "Edit step"

  2.  Set the type to "Modal"

  3. In the section Buttons, click "Add Button". 

  4. Choose type "Go to". This button will redirect user to any page you choose.

  5. Incorporate the button into your overall welcome experience

Install Usetiful

Once you are satisfied with your Welcome message it is time to install it to your webpage.

  1. In the Overview menu, click on "Install to publish"

  2. Click "Copy to clipboard" to copy the code

  3. Paste the code to your webpage, at the end, just before </body> HTML tag.

  4. In the Overview menu, check whether the Welcome message is set as Published. If not, click Publish.


Well done!
Related:

Popular posts from this blog

Create product tours with Usetiful

Read more

Alternatives to Shepherd: Which One Is Right for You?

  Shepherd is a popular open-source tool for building product tours. However, there are better options to meet the demands of modern onboarding. Here are some great alternatives that can help boost user adoption. What is Shepherd? Shepherd is a JavaScript library. It was built to help onboard new users with product walkthroughs. It's a flexible tool that allows you to drop product tours into your app using popular languages like: Angular Ember ES Modules Vue.js  Javascript Shepherd comes with a few default themes, but its primary selling point is that it allows you to customize your tours.  The problems with Shepherd as an onboarding tool We're not here to rip Shepherd. It's a good tool that does what it sets out to do. However, it falls short of a great modern onboarding tool for several reasons. #1. Limited accessibility Shepherd is relatively easy to use if you have good technical knowledge. However, you're out of luck if you don't know how to code. In an era whe...
Read more

Select Element on Your Page

  To associate tour steps (pointers) with specific elements on your site, you need to hook to the selectors of elements. Selectors are used to "find" the HTML elements on your site. It is not difficult to find out the selector of a specific page element. The easiest way is to use our Chrome extension . Usetiful for Chrome extension (Recommended) 1. We recommend you to first install  the extension  - it enables you to preview product tours directly on your page without embedding the code. When on the page, it allows you to get the element selector on just one click.   2. Inside the tour editor, the " Element"  field require you to enter the selector of the HTML element on your site. Click on the  "Select element"  action on the right side of the field.  The following dialog will appear if the Usetiful browser extension is enabled. 3. Enter the address of your web page and click "Open page" 4. To select the...
Read more