How to Change Text in “Next/Done” Buttons
Request
I want a way to change the text in the “next”, “back”, or “done” buttons on my steps.
Solution
Changing the button text for steps can currently be accomplished using CSS.
First, you must locate the step ID by doing the following:
- Click on the step you want to update
- Go to the Notes tab
- Scroll to find the ID next to, “For CSS Adjustments, use balloon ID”
- Copy this ID and paste it in place of “xxxxxx” in the CSS solutions provided below
Change the Text of the Next button
Copy and paste both code blocks below into your Global CSS tab in the Editor → Customize → CSS.
Replace the words “new text” with your preferred text.
div#walkme-balloon-XXXXXXX button.walkme-custom-balloon-button.walkme-custom-balloon-normal-button.walkme-custom-balloon-next-button.walkme-action-next.walkme-click-and-hover span.walkme-custom-balloon-button-text {
font-size:0px !important;
}
div#walkme-balloon-xxxxxxx button.walkme-custom-balloon-button.walkme-custom-balloon-normal-button.walkme-custom-balloon-next-button.walkme-action-next.walkme-click-and-hover span.walkme-custom-balloon-button-text::before {
content: "new text" !important;
visibility: visible !important;
font-size: 12px !important;
}
Change the Text for the Back Button
Copy and paste both code blocks below into your Global CSS tab in the Editor → Customize → CSS.
Replace the words “new text” with your preferred text.
div#walkme-balloon-XXXXXXX button.walkme-custom-balloon-button.walkme-custom-balloon-normal-button.walkme-custom-balloon-back-button.walkme-action-back.walkme-click-and-hover span.walkme-custom-balloon-button-text {
font-size: 0px
!important;
}
div#walkme-balloon-xxxxxxx button.walkme-custom-balloon-button.walkme-custom-balloon-weak-button.walkme-custom-balloon-back-button.walkme-action-back.walkme-click-and-hover span.walkme-custom-balloon-button-text::before {
content: "new text" !important;
visibility: visible !important;
font-size: 12px !important;
}
Change the Text for the Done Button
Copy and paste both code blocks below into your Global CSS tab in the Editor → Customize → CSS.
Replace the words “new text” with your preferred text.
div#walkme-balloon-xxxxxxx
button.walkme-custom-balloon-button.walkme-custom-balloon-normal-button.walkme-custom-balloon-done-button.walkme-action-done.walkme-click-and-hover span.walkme-custom-balloon-button-text {
font-size: 0px !important;
}
div#walkme-balloon-xxxxxxx
button.walkme-custom-balloon-button.walkme-custom-balloon-normal-button.walkme-custom-balloon-done-button.walkme-action-done.walkme-click-and-hover span.walkme-custom-balloon-button-text::before {
content: "new text" !important;
visibility: visible !important;
font-size: 12px !important;
}