How to Change Text in “Next/Done” Buttons

Last Updated November 28, 2023

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: 

  1. Click on the step you want to update
  2. Go to the Notes tab
  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” in the CSS solutions provided below

Note

  • This article covers the Global CSS settings (not the local ones for each step)
  • If you would like to make changes for multiple steps, you will need to add separate CSS for each step
  • If any local CSS is already in use it may override the global CSS solution provided below
  • Learn more about CSS

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-xxxxxxxbutton.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-xxxxxxxbutton.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;

}

Note

After adding the CSS, you must republish the Smart Walk-Thru for the changes to go into effect.

Was this article helpful?

Thanks for your feedback!

Be part of something bigger.

Engage with peers, ask questions, share ideas

Ask the Community
×

Select account type

Close
< Back

Mobile account login

< Back