1. Home
  2. Troubleshooting
  3. Building
  4. Smart Walk-Thrus
  5. Change text in “next/done” buttons

Change text in “next/done” buttons

Updated on January 11, 2021 Download PDFDownload as PDF
Download PDF

Question

I want a way to change the text in the “next”, “back”, or “done” buttons on my steps! 

Answer

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

First, you must locate the step ID by doing the following: 

  1. Open the Step Options (you can do so by clicking on it from the flow)
  2. Navigate to Notes
  3. Scroll to find the ID next to “For CSS Adjustments, use balloon ID”
  4. Copy this ID and paste it in place of “xxxxxx” below
    1. If you would like to do this for multiple steps, you will need to add separate CSS for each step

 

Change the Text of the Next button

Copy and paste the 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 the 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-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 the 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;

}

 

Important!

After adding the relevant CSS to your CSS tab, you must republish the relevant Smart Walk-Thrus for the changes to go into effect.

Was this article helpful?

Related Articles

< Back