Smart Walk-Thrus

Updated on October 30, 2017
Download PDF

Smart Walk-Thrus simplify the user experience by providing on-screen guidance at the moment of need so that your customers can complete any task successfully.

 

This article is about Smart Walk-Thrus. For Walk-Thru users, read this articleWhat’s the difference between Walk-Thru and Smart Walk-Thrus?

The Short Version

The Smart Walk-Thrus App allows you to create tip balloons on your site to help users through any online process. Just like a GPS takes you from start to finish where you want to go, a Smart Walk-Thru will take your user through an online process with interactive step-by-step guidance.

Here are a few more examples of how Smart Walk-Thrus can be used:

  • Feature Adoption: Shorten the time it takes customers to adopt a new software, boosting customer experience and loyalty
  • Onboarding and Training: Onboard and train employees faster by providing immediate and relevant guidance on screen. Smart Walk-Thrus allow users to learn as they work so no time is wasted
  • Support: Provide self-service support to customers with engaging and simple guidance for an effortless and personalized online experience

Depending on your user’s needs, configure the Smart Walk-Thru to start when the user click a Launcher, searches in the Player Menu, clicks a Task in the tasklist, opens a Permalink, clicks the action button in a ShoutOut or configure it to start automatically. Read more.

Smart Walk-Thru Components

In the WalkMe Editor, the Smart Walk-Thru is displayed in a clear and intuitive Map. The Map uses icons and symbols to represent different types of steps and logic.

Smart Walk-Thrus are made of Steps, Flow Steps, and Popups:

  • Steps appear as tip balloons on the screen giving users directions through a process. In the Smart Walk-Thru map, steps appear as blue balloons. Steps point to an element on the screen and give a main direction; for example, “Enter text in this field” or “Click this button.” Each step also has a trigger – the action which will cause the step to proceed to the next step; for example, when the user enters text into the associated element or clicks a button.
  • Flow Steps function behind-the-scenes to alter the flow of the Smart Walk-Thru; for example, they can split the Smart Walk-Thru into different paths, wait for a certain condition before continuing, or handle errors. Flow Steps appear as orange icons in the Smart Walk-Thru map. Read more
  • Popups are used to draw your user’s attention to featured text. Unlike regular step balloons, Popups are not attached to an element but appear in the center of the page. Popups can be placed anywhere within a Smart Walk-Thru. Read more

Expand below for a breakdown of each icon that might appear in a Smart Walk-Thru Map.

Create a Smart Walk-Thru

    1. Go to the Smart Walk-Thru App
    2. Click the Add New button
    3. Give your Smart Walk-Thru a Name and click Continue
    4. Hover over the + icon and click Step: A “step” is represented visually on the page with a tip balloon overlaid on the screen.
    5. Capture the step: After clicking Add Step, the WalkMe Editor will minimize and you will be in Capture Mode. Capture Mode allows you to select an element for your step. Click on the element highlighted by a blue box to select it. Read more
    6. Configure the Step Balloon: Once the element has been selected, WalkMe will autocomplete details such as title and trigger based on the element. To manually change these, click the advanced tab at the bottom of the balloon: Step Name: This appears inside the balloon and provides the user with instructions
      1. Step Note: This note will appear in the Editor and will only be visible by other WalkMe Builders (not your end user)
      2. Triggers: Triggers are the actions that activate the next step
      3. Step Position: Move the position of the balloon
      4. Element Grade: The element grade tells you the strength of the element.
    7. Continue adding steps: Once the first step has been configured, click “Next Step” to return to Capture Mode. To navigate to a different page, use the toggle in the Editor (or the Control key keyboard shortcut) to switch in Navigate mode. This will allow you to move around to different pages and click buttons on screen without capturing them as elements. Once you’ve found the element, use the toggle or the control key to put the Editor back in Capture Mode. Then, configure your next step.
    8. Click Done! Click Done! When you click done, the WalkMe Editor will reopen and you will see all the steps you just created Steps will appear as blue balloon icons in the step list. When you hover over the balloon, you will be able to play the Smart Walk-Thru starting from that step, view a screenshot, duplicate, delete, or add a Start Point or Peer Step.

Modify a Step

After creating a step, hover over it to play the Smart Walk-Thru starting from that step, view a screenshot, duplicate, delete, or add a Start Point or Peer Step.

To modify a step or popup step after creating it, click on it to open the Step Options Menu. Here, you can change the balloon position, title, text, and triggers in the Interaction tab. In the other tabs, you can further modify AppearancePrecision, or add a Note.

 

Step Interaction

In the Interaction tab, you can modify text, balloon position, and triggers.

 

Design Options

There are two ways to change the design of your balloon. The first is to select a premade design from our Design Gallery. The second, is to take complete control of the design of your balloon by using CSS.

Clicking Change Design in the top right of the Interaction tab opens the Design Gallery. The Design Gallery lets you select a design for your specific balloon. You can even, set it on the Global level from the Settings tab.

Edit advanced templates and make then your own by using our CSS Customization console. Local CSS will override any CSS that is on the global level.

 

WYSIWYG Editor:

The What you see is what you get Editor (WYSIWYG) allows you to easily change the look and content of your balloon and see the results instantly.

Tools in WYSIWYG Editor:

  • Font Size
  • Bold
  • Italic
  • Underline
  • Font Color
  • Text Alignment
  • Add Link: Add a URL hyperlink
  • Add Bulleted List: Add bullet points to a list of items in the text of the balloon
  • Add Smart Walk-Thru Link: Creates a link that launches another Smart Walk-Thru. This link will stop the current Smart Walk-Thru and launch the linked one. In order to link a Smart Walk-Thru, it must have already been created and have a Walk-Thru ID.
  • Add Image: Enter image URL. Images that WalkMe uses for customers are stored in Amazon S3 servers. Enter Width and Height if needed.
  • Add Video: Enter video URL into the corresponding video platform. Videos can be played from any platform as long as they are in MP4 format using an iFrame (see BBCode in table below). Enter Width and Height if needed.
  • Add iFrame: Load a webpage in a frame
  • Add Dynamic Text: Add dynamic text such as a user’s actual name in a balloon
  • BBCode: Format the text using BBcode. See Examples below.
    Feature BBCode
    Align Text in the center [div style=”text-align:center”]text[/div]
    Strike through [s]text[/s]
    Tables [table]{rows}[/table]
    Table rows [tr]{cells}[/tr]
    Table content cells Heading cell: [th]{content}[/th]
    Content cell: [td]{content}[/td]
    Link to email [url=mailto:name@company.com]name@company.com[/url]
  • From the Preview Balloon Edit
    • Title: Edit the main instruction for the user
    • Text: Include additional instructions or details for the step if desired

Position:

Change where the step balloon appears in relation to the element selected (Further customize position in the Appearance tab). Modify the position further by changing the pixel placement up/down and left/right.

Step Triggers:

Determine what action will move the Smart Walk-Thru onto the next step. Triggers drive the guidance forward and make it interactive.

  • Click: User clicks the element
  • Next: User clicks a Next button on the balloon. Others triggers can be combined with Next by pressing Control on a PC (or Command on a Mac) and selecting the second trigger
  • Type: The user enters text into the selected text field
  • Hover: User hovers over the element
  • Delay: The next step will play automatically after a set number of seconds
  • Refresh: The next step will play upon page refresh
  • Custom Trigger: Create a rule that will tell WalkMe when to continue to the following step. Note that you can use this trigger type in order to add additional elements on the screen that can trigger the step
  • Drop-Down Menu Triggers: The following triggers only appear as options when a drop down menu element is selected:
    • Select Any: Any item in a drop down menu is selected
    • Select Specific: A specific drop down item is selected

Was this article helpful?

Related Articles