Help Center
Welcome to the WalkMe Help Center

Please login in order to continue:

Work flows better with WalkMe
Work flows better with WalkMe.

CSS

Last Updated September 10, 2024

Brief Overview

Cascading Style Sheets (CSS) allow you to customize the look and feel of your WalkMe content, including the layout, colors, and fonts.

The CSS feature in WalkMe allows for customization of certain content types, including Smart Walk-Thru steps, Surveys, and the WalkMe Menu.

🎓 Digital Adoption Institute

Get Stylin' with CSS Webinar

Use Cases

CSS use cases include the following:

  • Insert an image or logo in a balloon
  • Change the width of or remove arrows from a balloon
  • Change the text of a Next button

How It Works

CSS is a style sheet language used for describing the formatting of a document written in a markup language. When writing CSS, you will need to refer to the different components, or elements of your WalkMe content.

Each WalkMe item includes a number of components (elements) that can be customized with CSS.

For example, you can target the title section of a balloon by using this class:

  • .walkme-custom-balloon-title
Best practice

Global vs. local rules

CSS can be applied globally or locally. Using the local CSS Console makes it easy to customize an individual WalkMe item. If you are customizing on the global level, you must enter the ID of the WalkMe item.

Local level example: .walkme-custom-balloon-title

Global level example: #walkme-balloon-XXXXXXX.walkme-custom-balloon-title

Edit local CSS

Local CSS overrides all other designs.
  1. Open the item settings menu
  2. Go to the Interaction tab
  3. Click Edit CSS
  4. Enter the custom CSS in the CSS Console
  5. Click Save
In case of an error, a validation message will appear after you click Save.
Error messages are also available for HTML upon request. Please reach out to your Customer Success Manager or WalkMe contact to have this enabled.

Edit global CSS

  1. Click Edit global CSS in the WalkMe Editor settings menu
  2. Enter the custom CSS in the CSS editor
  3. Click Save
  4. Click Publish settings

Find & replace shortcuts

You can use the following keyboard shortcuts (Windows / Mac) to find and replace in the CSS Console:

  • Find: Ctrl-F / Cmd-F (press enter to find next, Shift-Enter to find previous)
  • Replace: Ctrl-R / Cmd-R
  • Jump to line: Ctrl-J / Cmd-J

Watch a quick demo below:

Find WalkMe ID

  1. Hover over the item in the editor
  2. Click the Options menu
  3. Click Copy ID

Using !Important

By default, the WalkMe theme design overrides any other design changes.

In order for CSS to be applied, the CSS rule must contain “!important” to ensure that it overrides the default styling.

Example:

#walkme-balloon-1760356.walkme-custom-balloon-title {

color: #000 !important;

}

Most Common CSS Customizations

Smart Walk-Thrus

CSS for Smart Walk-Thrus

How to Change Text in “Next/Done” Buttons

Surveys

CSS for Surveys

WalkMe Menu

CSS for WalkMe Menu

ActionBot

How to Change the ActionBot Custom Style (CSS)

Classic ShoutOuts

CSS for Classic ShoutOuts

General WalkMe

Change the global WalkMe font

#walkme-menu *,
#walkme-player *,
.walkme-custom-balloon-outer-div *,
.wm-shoutout *,
.walkme-survey-balloon *,
.walkme-tooltip-outer-div *,
.walkme-custom-launcher-outer-div,
.walkme-icon-image-div.walkme-launcher-image-div * {
font-family: "Roboto",Tahoma,Arial,Verdana,sans-serif !important; /* Add desired Font-Family rule  here*/
}
The font-family rule must be coded on every page that WalkMe is implemented on or WalkMe will not be able to pull and render the font correctly.

Launchers

Change the font

.walkme-icon-image-div.walkme-launcher-image-div {
font-family: /*your font here*/ !important;
}

SmartTips

Change the font

.walkme-tooltip-content-wrapper .walkme-tooltip-content {
font-family: /*your font here*/ !important;
}

Hide tooltips

.walkme-tooltip-smarttip-XXXXX {
Display: none !important;
}
.div.walkme-custom-tooltip-arrow-top.walkme-custom-tooltip-item-XXXXX {
Display: none !important;
}

Technical Information

  • Local CSS always overrides global CSS
  • Adding CSS to your WalkMe content may also affect CSS on the site where the content is being viewed
  • If proper indentation and whitespaces aren't added to the Global CSS, it won't be published or viewable in Play mode, but will remain visible in Preview mode
  • The best practice is to format code in a Integrated Develop Environment (IDE), such as Visual Studio Code or Sublime, and first test in the Flow Tracker
  • For CSS changes to take effect, you need to perform a Settings publish

How to Publish Global Settings

  • When changing text using CSS, keep in mind that this may override any translations

Text & Multi-Language

  • The following terms are not supported and may cause errors:
    • @import
    • expression
    • javascript
    • -moz-binding
    • -o-link
    • behavior
  • Only Classic ShoutOuts support CSS
  • CSS cannot affect shadow Dom elements

Was this article helpful?

Thanks for your feedback!

Be part of something bigger.

Engage with peers, ask questions, share ideas

Ask the Community
×