How to Change Text in “Next/Done” Buttons

Request

I want to change the text in the Next, Back, or Done buttons on my steps.

Solution

Changing the button text for steps can be accomplished using CSS. 

CSS

Find step ID

First, you need to locate the Smart Walk-Thru step ID by following these steps: 

1. In the editor, open your Smart Walk-Thru
2. Click on the step you want to update
3. In the header, select Copy next to the step ID
   
4. Paste the ID in place of “XXXXX” in the CSS solutions provided in this article

Edit global CSS

1. In the editor, click Settings
2. Select Edit global CSS
   
   
3. Enter the custom CSS in the CSS editor
   
4. Click Save
5. Click Publish settings

Change the Next button text

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 Back button text

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 Done button text

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;

}