Brief Overview

Whether you are using TeachMe for your employees internally or helping your external users have the best experience with your website or product, they'll need to be able to access TeachMe.

In this article, we will review how to launch your TeachMe experience via the WalkMe Menu. The Menu is a great place to store your most important items, including your TeachMe courses. Your users will have easy access to the training they need when they need it.

Don't have a menu yet? No worries! It's simple. Just check out this article on the Menu Organizer. 

How it Works

You can open TeachMe from the WalkMe Menu in three ways:

1. Add a launcher to the Menu footer
   Use this option if you want a dedicated button in the Menu that opens TeachMe.
2. Add a Smart Walk-Thru to the Menu
   Use this option if you want TeachMe to appear as an item in the Menu list.
3. Use the TeachMe Player API
   Use this option if you have a developer and need more control over when TeachMe opens.

Options 1 and 2 use jQuery selectors. We provide the exact selectors you need in the steps below.

Add Launcher to Menu Footer

If the Launcher is your choice, we recommend adding it to the footer of the Menu. This is typically the area with the most space. That said, should you like to add your Launcher to a different part of the menu, you can search for the jQuery snippet and replace the one below. 

To add a Launcher to the Menu:

Step 1: Create a Launcher

1. From the Editor, create a Launcher via the big blue + icon.
2. Capture anything on the site (we'll change the location later).
3. Click Save.

Launchers: Getting Started Guide

Step 2: Insert jQuery

1. In the Editor, click on the Launcher to open the Launcher Options screen. 
2. Go to Interaction > Action.
3. Select Open Courses Menu from the dropdown.
4. In the Launcher Options page, go to the Selected Element tab.
5. Under Element's Behavior, select Appears and disappears as a result of user action
6. Under Define how to identify the element, select jQuery Selector.

In the jQuery selector field: Type:  #walkme-footer (if you want it in a different place in the menu, add the jQuery here).

Step 3: Change Launcher Setting Appearance

1. Go to Appearance > Position.
2. Under Launcher Setting, select Inner and the left arrow (This will place the Launcher on the bottom left corner of the menu).

Step 4: Change Z-Index

1. Still in the Appearance tab, go to Arrange Layer Order.
2. Toggle Z Index ON.
3. Under Define Z index value manually, type 2147483647.
4. Click Save.

Done! 

Whenever you're ready, publish this launcher and the launcher will appear on the Menu. To customize your launcher, go to the Launchers article.

Add Smart Walk-Thru with Auto-Step

Perhaps having a separate button on the Menu isn't quite your style. Maybe you'd like to add your TeachMe experience into the list of other items on the Menu. In this case, you'll create a super simple Smart Walk-Thru with an Auto-Step that opens the Course Menu (Yup! It's just one step). Let's get started.

To add a Smart Walk-Thru Auto Step:

Step 1: Create a Smart Walk-Thru

1. From the Editor, create a Smart Walk-Thru via the big blue + icon.
2. Start your Smart Walk-Thru by clicking the orange + and selecting Auto Step.
3. Select any element (we'll change the location later).
4. In the Action dropdown, leave Click as selected.
5. Click Done.

Step 2: Step 2: Insert jQuery

1. Back in the Editor, click the Auto Step you created.
2. Go to the Selected Element tab.
3. Under Define how to identify the element, select jQuery Selector.
4. In the JQuery selector: Type: #walkme-player-panel (This opens the Menu instead of clicking the random element you selected).
5. Click Done.

Step 3: Add Smart WalkThru to Menu Organizer

1. Navigate to the Menu Organizer in the WalkMe Console: console.walkme.com/menu
2. In the Item List, locate your new Smart Walk Thru and drag it to the desired location in the Menu.
3. Click Save.

Done!

Learn more about Smart Walk-Thrus and AutoSteps in this article.

Open TeachMe with the TeachMe Player API

Developers can open TeachMe with custom JavaScript. Use this option when the Editor options don't cover the behavior you need.

To open TeachMe, call this command:

TeachMePlayerAPI.toggleMenu()

The command toggles the TeachMe Menu. It opens TeachMe if it's closed and closes it if it's open.