Sometimes you just need a bit of customization, you want to tell your users what is the exact action to trigger your next steps. Here we give you the step by step to customize your buttons:
1. Check what is your Balloon number:
2. Go back to the main menu and go to Customize:
3. Follow this instructions:
Change Buttons (done/next)
Step 1: Try adding first the DONE option in the global CSS for only 1 balloon (ID), for example your ID 1000492710.
DONE for ID 1000492710 :
div#walkme-balloon-1000492710 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: 0 !important;
}
div#walkme-balloon-1000492710 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: "Sluiten" !important;
visibility: visible !important;
font-size: 10px !important;
}
Save the global CSS and play the step. Do you see “Sluiten” as text?
Yes? Great! Do the same for the other IDs.
No? Then try the NEXT option for ID 1000492710 :
1000493544
div#walkme-balloon-1000492710 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: 0 !important;
}
div#walkme-balloon-1000492710 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: "Sluiten" !important;
visibility: visible !important;
font-size: 10px !important;
}
Save the CSS and play the step. Do you see “Sluiten” as text?
Yes? Great! Do the same for the other IDs.
No? Let us know and we’ll have a meeting.
Here an image on where to add the Balloon ID:
