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
When entering custom CSS, WalkMe displays auto-complete options for selectors, properties, and values
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
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
