Creating a Mini Menu

The Eddie's Team would like a Mini Menu added to the Cart page so users can easily access the following pages in a light box while placing their order:

• Shipping & Returns
• Store Policy
• FAQ

They'd like the SmartTip to say "Need Help?" They're hoping to prevent users from reaching out with questions regarding the above items after placing their order. See the image above for where they want the Mini Menu on their site.

The figure shows an example on how to design a SmartTip to act as a Mini Menu.

To complete this exercise, we'll first need to create the required Resources so we can link to them in our Mini Menu:

• Shipping & Returns - https://www.eddiesdepot.com/shipping-and-returns
• Store Policy - https://www.eddiesdepot.com/store-policy
• FAQ- https://www.eddiesdepot.com/faq

Each of these should open in a light box so the user does not need to navigate away from the cart page.

The figure shows the step to create the Resources.

Set the position to Inner so it lines up with the lines of the site.

In the Arrange tab, enable Arrange Layer Order (Z-index) so the SmartTip does not appear on top of/above the navigation bar at the top of the site.

Watch the video to know more. Note that the video doesn't support audio.

From the Interaction tab, click Change Icon, then click the Add New button in the bottom left.

You can use the styling tips below as a guide when creating your Custom Design.

• Text: #ffffff
• Background: #ff5f42
• Border & Shadow: No Fill

• Background: #ff7f68
• Other settings: Same as Default state

Same as Default state

• Corner Radius: 0
• Other settings: Up to you!

After creating the Custom Design, you may find that you need to update the position of the SmartTip on the site.

The figure shows the step to Create a Custom Design.

From the Interaction tab, click Rich text editor at the top right of the SmartTip text box.

Enter the following text, and add a return between each to place them each on their own line in the balloon:

• Shipping & Returns
• Store Policy
• FAQ

Highlight each line of text, then click the Link to WalkMe Item icon and link the text to the appropriate Resource we created in Step 1. Repeat for each line.

Then, utilizing the skills you learned in the previous Rich Text Editor lesson, you can further adjust the mini menu. You can add a title such as "Quick Access" to the top, bullet points, etc.

The figure shows how to use the Rich Text Editor to Create a Mini Menu.

To Test out our Mini Menu, select the Smart Tip along with all the Resources (this will allow us to test all the links to make sure they are working), and click Preview.

The first thing we notice is that the SmartTip tooltip is cut off at the top, and the second thing we notice is that when we move to another page and return to the Cart page, our SmartTip is no longer appearing.

To fix the first issue, go to the Appearance tab, and in the Position>Tooltip position section, choose Select preferred position and position the tooltip to the left instead.

To fix the second issue, go to the Selected Element tab, and under Element's Behavior, select Appears after page load and then stays visible. This fixes the issue because the element we chose on the cart page does not load until after the page fully loads. If you use the "Automatic" option, WalkMe will optimize itself over time and learn the correct setting to implement.

Watch the video to know more. Note that the video doesn't support audio.

You've just created your first Mini Menu.

Watch the video to know more. Note that the video doesn't support audio.

In the following workbook, you will build upon what you learned in Builder I and incorporate the new tools you learned in the last few lessons.

Continue on to the next two slides to understand two different scenarios that the KLAW team would like your help with.

Watch the video to know more. Note that the video doesn't support audio.

For the first request, we'll revisit the Create Team Account page from the SmartTips Activity in Builder I.

The KLAW team would like validation added to both the email and phone number fields in order to improve data integrity when creating accounts. They don't want any icons next to the fields, just an alert to tell the user to fix the email or phone number if there is an error.

For their second request, the KLAW team would like a sort of "quick access" tab for users to easily start the following Smart Walk-Thrus from the individual Document page:

• Request Signature for Document.
• Change Signature.
• Send a Document (this Smart Walk-Thru has not yet been created, so a placeholder can be created and linked to for the purpose of the activity).

Like the Change Signature Launcher that was created in Builder I, the SmartTip design should also match and fit well with the site.

The figure shows the step to create a Mini Menu.

Now that you have all the resources and guidance needed for building, go ahead and log into your Editor and the KLAW site to start building!

The video will review how to create the two Validation SmartTips for the Create Team Account form.

Watch the video to know more. Note that the video doesn't support audio.

The video will review how to create the Mini Menu and Launcher on the Document page.

Watch the video to know more. Note that the video doesn't support audio.