Smart Walk-Thrus

Design Options

There are two ways to change the design of your balloon.

1. The first is to select a pre-made design from our Design Gallery.
2. 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 also set it at the global level from the Walk-Thru's Settings page.

Edit advanced templates and make then your own by using our HTML/CSS Customization console.

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 to a Smart Walk-Thru, the linked-to Smart Walk-Thru must have already been created and have a Walk-Thru ID
• Add Image:
  • Adding a new image can be done by uploading an image from your computer, or inserting its URL (in which case, the image must be hosted online before it can be inserted);
  • Supported file types include JPG, JPEG, PNG, GIF;
  • The maximum file size is 500KB;
  • Uploaded images are hosted on a dedicated bucket in Amazon S3;
  • Image width and height from URL are adjusted automatically to the Balloon or ShoutOut size automatically, keeping the original image aspect ratio;
  • You can adjust the image's width and height if needed by double-clicking on the image to edit;
  • You can use "Lock Aspect Ratio" to lock the aspect ratio so that it remains in the same ratio when resized;
  • You can remove the image by clicking on the trashcan icon next to the image URL, or by deleting it using backspace or delete while editing the text in the text editor;
  • BBCode format: [img]img_URL[/img];
  • BBCode format with width and height: [img=widthxheight]img_URL[/img] (e.g., [img=40x24]img_URL[/img].
  • 
• Add Video: Enter a 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 the 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, you can edit the following:
  • 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.

Align to text

By enabling this feature, the Smart Walk-Thru balloon will point to the center of the text inside the element, even if the text inside the element is not aligned to both sides.

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: The next step will play once the user clicks the element
• Next: The next step will play once the user clicks the Next button on the balloon
  • Pro-Tip: Other triggers can be combined with Next by pressing Ctrl on a PC keyboard (or Command on a Mac keyboard) and selecting the second trigger
• Type: The next step will play once the user enters text into the selected text field
• Hover: The next step will play once the 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 move to the next Step
  • Pro-Tip: 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: The next step will play once any item in a drop down menu is selected
  • Select Specific: The next step will play once a specific drop down item is selected

The Structure of the File

Each page of the file shows a Smart Walk-Thru step over a screenshot of the app page on which the step was captured. Each step is situated next to its selected element.

Additional features of the page structure include the following:

1. The step's chronological number
2. The step's label
3. The step's creation date and time
4. The URL location where the screenshot was captured