How to Customize Old TeachMe UI

Last Updated April 26, 2022

Download as PDF

Brief Overview

TeachMe is an app that lets you package your WalkMe experiences into learning modules and courses. With TeachMe you can create multiple courses for your users and structure them down a learning path. Our current TeachMe UI (AKA New TeachMe) has a streamlined learner experience making accessing courses simple and quick! That said, our Old TeachMe UI is still available for now for those that want that extra control on the user experience.

So what is this article about?

Although the Old TeachMe is being phased out, it is still in-use and we want to make sure that you have the support you need to create the courses you want.

The Old TeachMe UI currently has more customization options to better cater your courses to your organization's brand (though this will change soon!). This article details commonly used customizations that you can use to make your TeachMe look more like you.

How It Works

Not all customizations can be done on your end, so if there is a customization that you need or is not listed here, reach out to your Customer Success Manager.

Below find commonly used customization for the Old TeachMe UI.

Hide TeachMe "WalkMe Education Center" Bar

When TeachMe is published a TeachMe sidebar will automatically appear on the website's page.                                                                                                                           

The sidebar is an overlay, which often covers content on the page (and we can't have that, can we?).

To hide the sidebar:

1. Go to the WalkMe editor > Customize > CSS.
2. Type in the CSS:
   

   #walkme-player-panel{display: none !important;}

3. Click Save.

Done.

Create a Launcher to Open TeachMe Menu

If the TeachMe sidebar is hidden (see above) then a launcher must be created in order for users to access TeachMe content. This is done just like any other launcher and can be placed in a couple of places:

To add a TeachMe launcher on your page:

1. Follow Create a Launcher instructions in Launchers: Getting Started Guide.
   1. In step 4: choose your action - select Open TeachMe Course Menu.
2. Done.

Re-Open TeachMe after a resource is completed

If a resource is a part of your TeachMe lesson, once the resource has been viewed and exited, the TeachMe course menu will automatically re-open.

If the menu is not opening automatically after a Resource is closed, there is a bug. Contact Support.

Re-open TeachMe after a SWT or WT is completed

If a Walk-Thru or Smart Walk-Thru is used as part of your TeachMe course, you can request the TeachMe course menu to re-open after the Walk-Thru is completed. Contact Support.

Note: This is a global setting that will be applied to all WT and SWTs started from the TeachMe menu.

Changing the Logo, mini-logo, and top separation bar at the top of the TeachMe Menu

By default, the old TeachMe player displays the WalkMe logo and a separation bar (seen below). You can change this and add your own logo. Note: In our New TeachMe, this is not an issue.

To change the logo:

1. Go to the WalkMe editor > Customize > CSS.
2. Type in the CSS:

     3. Replace the hosted image linked.

4. Click Save.

Done.

To remove the top separation bar:

1. Go to the WalkMe editor > Customize > CSS.
2. Type in the CSS:
   

3. Click Save.

Done.

To remove mini WalkMe logo:

1. Go to the WalkMe editor > Customize > CSS.
2. Type in the CSS:

     3. Click Save.

Done.

Change Course Image

By default, TeachMe courses display WalkMe images throughout all of your courses.

You can either change:

1. The image of one course; or
2. The default image of all courses.

Note: In the new TeachMe, this is as easy as 1, 2, 3.

To change a single course image:

1. Go to the WalkMe editor > Customize > CSS.
2. Type in the CSS:

3. Replace the ####### with the ID of the selected course.
4. Insert the image link.
5. Click Save.

Done.

To change all course images to a single image: 

1. Go to the WalkMe editor > Customize > CSS.
2. Type in the CSS:

3. Insert the image link.
4. Click Save.

Done.

Change the Progress Bar Color

As a learner is progressing in their course, a yellow progress bar will appear. You can change the color to match your brand.

To change the progress bar color: 

1. Go to the WalkMe editor > Customize > CSS.
2. Type in the CSS:

3. Replace the hex code.
4. Click Save.

  Done.

Grey Out Completed Courses Instead of Strike Out

By default, when a learner has completed a course, TeachMe will strike out the course. You can change this to grey out the course instead.

To remove the strike and grey out:

1. Go to the WalkMe editor > Customize > CSS.
2. Type in the CSS:

• Alternatively, you can replace the hex code (in blue) with whatever color you'd like to indicate the course is complete.

3. Click Save.

Done.