Waitwhile allows you to personalize your public-facing pages, such as booking or waitlist pages, by applying custom CSS. This advanced feature helps ensure your pages align with your brand identity and deliver a professional, on-brand experience to customers.
You can add CSS to the Public Page Stylesheet to alter the look and feel of your public pages. Below we will highlight a few basic style changes that can be made using CSS, such as altering the background color and button colors
Note: It’s recommended that you first try the normal theming settings before starting to use css.
Different background color on different steps
Each page or step in the registration experience has a separate class name attached to its body that can be used to apply css on specific styling to an individual page, e.g wwpp-step-welcome (Welcome page), wwpp-step-services (Service selection page if all services are on the same step), wwpp-step-details (Customer details page). If unsure which is relevant to your step you can use browser dev tools (e.g F12 in Google Chrome) to find it.
Examples:
You want to change the background color on the resource selection page to blue, and the Customer details page to red. You would use the following css:
}.wwpp-step-resources {
background-color: blue;
.wwpp-step-details {
background-color: red;
}
The status page has its own classname wwpp-status-page, so if you wanted to make the statuspage background be green you’d add:
.wwpp-status-page {
background-color: green;
}
Button Colors
All buttons (and most button-like elements) use the class name wwpp-button, and the primary buttons also have wwpp-primary-button.
Examples:
You want to change all primary buttons to be red with green text you would use:
body .wwpp-primary-button {
background-color: red;
border-color: red;
color: green;
}Note: This above can be done using the custom design > theming options within the settings, so this is primarily for educational purposes only.
You can also combined the above with the specific step class names. For example, if you wanted the create a VISIT button on the Customer details page and you wanted the button to be black with white text you could use:
body .wwpp-step-details .wwpp-primary-button {
background-color: black;
border-color: black;
color: white;
}
Commonly requested CSS
Hide messages button and popup on status page
.wwpp-show-messages-button-wrapper {
display: none;
}
.wwpp-messages-popup {
display: none !important;
}
General recommendations
We strongly recommend always using class names with the “wwpp-” prefix as anchor selectors. These class names are considered stable and are unlikely to change.
On the other hand, avoid using class names including randomly generated strings, such as “kfRNjz” or “Field-styles__StyledLabel-sc-a06d3b09-0”. These are automatically generated and are subject to frequent changes, which could disrupt your implementation.
Note: The Public Page Stylesheet is only available on Enterprise level plans
Have additional questions or need assistance? Reach out to us via chat or at support@waitwhile.com.