Uengager Logo

Uengager Setup Guide

How to Set Up Interactive Guides for Web Applications or Websites?
Uengager » Setup Guide

How to Set Up an Interactive Guide?

Sign Up.

Sign up a new account with Uengager. Go to the registration page:

https://guide.uengager.com/register.action?language=en

You’ll be asked to provide some basic information for us to create your new account:

  • Email address – It can be your personal email or your work email.
  • Name – We want to know your name.
  • Company name – You may tell us your company name, or simply just type your first name.
  • Password – Enter a password. You’ll use this password to log into your new account.
  • Confirm password – Please confirm your password.

After completing the registration form, go to your mailbox. In the email, click on the link to activate your account.

Sign up now.

Sign-in.

Go to the login page and sign in to your Uengager account.

https://guide.uengager.com/login.action?language=en

Add the Code as a Bookmark.

Once you’ve signed in, the first screen/page you will see is this “codes” page.
uengager-copy-code-screen

To set up Uengager’s interactive guide, you will need to add two separate codes.

This is the first code.

This code has to be added to your default web browser’s bookmark.

Copy the code.

How to Create a Bookmark in Google Chrome Web Browser?

Assume you’re using Google’s Chrome as your default web browser.

Click on the Settings button while Chrome is open. The button is on the top right corner of Chrome (with 3 vertical dots).

google-chrome-settings-button

Click Bookmarks.

Click Bookmark Manager.

Click the Settings button on the top right corner. It’s the 3-dot button with blue background.

chrome-bookmark-settings-button

Click Add New Bookmark.

add-new-bookmark

Enter a name for your new bookmark.

Paste the code (you have copied) into the URL field.

Click Save.

Create a Simple Interactive Guide.

Not it’s time to create your first Uengager interactive guide.

While you’re looking at the Interactive Guides screen, click the Create New button.

uengager-create-new

Enter a name for your new interactive guide. You may name it “my-first-guide”.

Hover to the S button where it is next to your newly created interactive guide. The tip on the S button says “Start adding steps”.

uengager-create-new-3

Click the S button.

The S button will turn into the A button. When you hover the A button, it says “Add steps”.

uengager-create-new-4

Add Conditional Rule to Open Guide.

Now click on the C button next to your guide.

You’ll be taken to the Custom Configuration page where you can create a condition (or rule) for your guide to appear.

uengager-condition-1

Select “Open” in the “Guide runs rules” drop-down.

uengager-condition-2

Select “Open directly”, and click the “+” sign next to it.

Optionally, you can rename your button name. By default your button is named “Guide me”.

uengager-condition-3

Now the Open Directly rule has been selected. This means when users visit your page, the Interactive Guide button will be shown at the bottom of their screens.

Click Save.

Add the Code onto the Page.

The second code is for your page where you need your interactive guide to appear for your application or website users.

While you’re on the “Interactive Guides” page in your Uengager account, click the P button next to the guide that you’ve created.

uengager-code-bookmark

The code will pop up in the middle of your screen.

This code needs to be placed onto all the pages where you want this specific Uengager’s interactive guide to appear and work.

If you know you only have a single page (e.g. homepage) that will use the interactive guide, then the code only needs to be placed onto this one page.

If you are using the interactive guides on multiple pages on your website, then the best and simple solution is to place the code onto all the pages.

You can place this code at the footer section of your web pages.

For this example, we’re going to set up an interactive guide for a single page. So all you need is to place this code onto the footer of your page.

Create a Single Page Interactive Guide.

Let’s set up a 2-step interactive guide on a page.

Now open the web application’s page or the web page on Google Chome where you want to set up an interactive guide.

While on the page, go to your newly created bookmark and open it.

Now Uengager’s setup bar appears at the top of your screen.

uengager-adding-steps

Click the Add button.

A small screen will show up which offers you three drop-down boxes:

  • Guide Style: Text, Picture, Audio, Video
  • Display Position: Auto, Top, Bottom, Left, Right
  • Position of the Next Step: Current page, Other Page
uengager-adding-steps-2

For this example, we’re going to choose Text for Guide Style, Auto for Display Position, and Current Page for Position of the Next Step.

Click the Start button.

Move your mouse cursor over the page’s article subject line. The subject line (which is a text element) will be surrounded by Uengager’s blue block lines with a tip “Position Guide?”. Click on this tip to select the text element.

uengager-adding-steps-3

Now enter your text for the tip of the first step of your interactive guide.

Click Save.

uengager-adding-steps-4

Now go back to the top of your screen and click Add. This time you’re adding your second step to the interactive guide.

uengager-adding-steps

Scroll to the bottom of the page, and put the mouse cursor over the last line of text in the article. This text contains a hyperlink.

uengager-adding-steps-5

Click to select the text with the hyperlink.

Enter your text tip, and click Save.

uengager-adding-steps-6

Now go to the Interactive Guide page of your Uengager account. Refresh the page (by clicking the F5 button).

Hover the A button (which has a tip “Adding a guide”).

Click on the A button.

uengager-adding-steps-7

Now the A button has switched to S (with a tip “Start adding steps)”.

uengager-adding-steps-8

Try Interactive Guide on Your Page.

Congratulations! You’ve completed the setup of your first Uengager interactive guide.

Now go to your web page where you have set up the interactive guide.

You’ll see a button at the bottom of your screen. The button is where you start the Uengager interactive guide for the page.

Click the button.

uengager-test-page-1

You’ll be taken to step 1 of your guide.

Click Next to continue with the guide, or click Skip to stop.

uengager-test-page-2

Once you’ve clicked Next, you’ll be taken to step 2.

This specific guide has only two steps. Click Done to close the guide, or click Back to go back to step 1.

uengager-test-page-3

Congratulations again! This time you’ve tested your interactive guide, and it is working according to your plan.

Segmentation Setup.

In some cases, you only want people visiting your website from a certain traffic source (such as search engine, a specific page URL, or an ad with a certain tag) to be shown with the interactive guide.

This is what traffic segmentation or user segmentation is about.

What is a Condition for any Interactive Guide?

Uengager’s interactive guide offers conditions where you can set up rules for when exactly the guide should be triggered or should appear.

Below are the different types of conditions where you can create rules for your guide.

How to Add Conditions to an Interactive Guide?

Open

“Open directly” is the default rule. It is the recommended rule where people visiting your page will be shown the interactive guide button immediately.

“Open with button click” – This option hides the button in the beginning.

Cookie value

Your guide will only appear to users who has a specific cookie name and cookie value in their web browsers.

Browser

This rule allows you to show the interactive guide to people only use a certain browser.

For example: Chrome

Operating system

This rule lets you show the guide to users for a specific operating system.

For example: Windows

We know that people using Windows are usually using a desktop or laptop computer. This is a method to only let desktop/laptop users to see your guide but filter all other users.

Device type

With many people who may be using mobile devices, this rule lets you show the guide to users for a specific device type.

For example: Desktop

This is a method to only let wider-screen users (or desktop users) to see your guide but filter all other users.

URL

If you know the exact URL, enter it.

An example is:

www.example.com/category/page-1.html

The user has to come from exactly the URL above, and the guide will appear.

URL parameter

The user has to come from the above URL, where the URL parameter and value must be exactly what you have specified.

For example:

www.example.com?afid=mytest

Parameter = afid

Value = mytest

Domain

With the Domain rule, the guide will only appear to users who come through the exact domain name.

For example: example.com

Bookmark this Setup Guide Page.

You’ve successfully set up your first interactive guide. But later you may need to set up more interactive guides for your web applications or website. It may be difficult to remember all the setup steps.

The best practice is to bookmark this page, and you can always come back and refer to this Setup Guide.

15 Marketing Automation Strategies
To Increase Sales On Your Website

  1. How to Get People to Your Website?
  2. How to Get People to “Buy” from Your Website for the First Time?
  3. How to Get Customers to Buy for a Second (or More) Time(s)?
marketing-automation-guide

Get the Complete Guide as a PDF Document

It'll only take 1 minute to register. Try Uengager now!

Copyright 2018-2019 GetUEngager.com

Office address: Xlab B1 Tower B TusPark, Haidian District, Beijing, China