One of Waitwhile's newest and most exciting features is the ability to create Custom User Roles which allows designating permissions levels to restrict access and actions for different users. However, what if you want to restrict access to a specific settings page or area that can't be achieved via User Permissions? In these cases when you want to get a bit more granular, CSS can be used to hide certain parts of the Waitwhile platform from all non-Owner users.
The *Custom "App Stylesheet"
Every navigation item and settings area has its own distinct identification property that can be used to hide it with CSS. We're going to outline the properties for all of the Main Navigation Icons, Settings Navigation Links, Setting Pages, and a few Buttons/Toggles in which we most frequently receive requests to have hidden.
If you don't already happen to be savvy with CSS or know your way around the browser console or Developer tools, don't fret! This is the only small bit of code you will need to use:
{ display: none !important }
How To Steps
Identify the settings or settings areas that you want to be hidden from the list below.
Use a document or notes tool to copy/paste the CSS properties so that you can then string them together in a comma separated list (you may want to break them up into related groups if you're trying to hide a lot of them)
Add the code snippet (from above) right after the comma separated list
Example:
#settings-nav-saved-replies, saved-replies, #settings-nav-roles, roles, #enable-waitlist-toggle { display: none !important }Copy this from wherever you constructed it (Google Doc, Notes, etc) and paste it into the App Stylesheet area on the Theme Settings Page.
CSS Properties
Main Navigation Icons - Will hide the main navigation icons (ie. Dashboard, Capacity Management, Analytics, etc)
Settings Navigation Links - Will hide the settings navigation links (ie. General, Join Waitlist, etc)
Settings Pages - Will hide the content of an entire settings page so that even if someone were to manually type in the URL for a page (in which the Navigation Link was hidden), they wouldn't be able to access the settings.
Buttons and Toggles - Will hide specific toggles or buttons within a specific settings area, ie. The "Add Resource" button on the Resources Settings page.
If you are looking to hide a specific Settings Area within a Settings Page, or some other button or setting that we have not provided a CSS property for, please reach out to Support for assistance.
Main Navigation Icons
| CSS Property |
Waitlist Icon | #nav-waitlist |
Serving Icon | #nav-serving |
Bookings Icon | #nav-bookings |
Messages Icon | #nav-messages |
Capacity Management Icon | #nav-capacity-management |
Customers Icon | #nav-customers |
Analytics Icon | #nav-analytics |
Dashboard Icon | #nav-dashboard |
Settings Icon | #nav-settings |
Settings Navigation Links
| CSS Property |
Location | #settings-nav-location |
General | #settings-nav-general |
Waitlist | #settings-nav-waitlist |
Bookings | #settings-nav-bookings |
Serving | #settings-nav-serving |
Services | #settings-nav-services |
Customers | #settings-nav-customers |
Input Fields | #settings-nav-input-fields |
Status Tags | #settings-nav-status-tags |
Public | #settings-nav-location |
Join waitlist | #settings-nav-join-waitlist |
Display waitlist | #settings-nav-status-tags |
Online booking | #settings-nav-online-booking |
Public locations | #settings-nav-locations-overview |
Arrivals | #settings-nav-arrivals |
Messages | #settings-nav-messages |
Waitlist messages | #settings-nav-waitlist-messages |
Booking messages | #settings-nav-booking-messages |
Saved replies | #settings-nav-saved-replies |
Team notifications | #settings-nav-team-notifications |
Team | #settings-nav-team |
Users | #settings-nav-users |
Roles | #settings-nav-roles |
Resources | #settings-nav-resources |
Styling |
|
Theme | #settings-nav-styling |
Localization | #settings-nav-localization |
Developers |
|
Integrations | #settings-nav-integrations |
API & Webhooks | #settings-nav-apiandwebhooks |
Settings Pages
| CSS Property |
General Settings Page | settings-general |
Waitlist Settings Page | settings-waitlist |
Booking Settings Page | booking |
Serving Settings Page | settings-serving |
Services Settings Page | services-settings |
Input Fields Settings Page | input-fields |
Status Tags Settings Page | status-tags |
Join Waitlist Settings Page | join-waitlist |
Display Waitlist Settings Page | display-waitlist |
Online Booking Settings Page | online-booking |
Public Locations Settings Page | public-locations |
Arrivals Settings Page | arrivals |
Waitlist Messages Settings Page | waitlist-messages |
Team Notifications Settings Page | team-notifications |
Booking messages Settings Page | booking-messages |
User Settings Page | users |
Roles Settings Page | roles |
Resources Settings Page | resources |
Buttons and Toggles
Settings or Element to be hidden | CSS Property |
Locations Dropdown > Add Location | .create-new-location |
Dashboard > New Location | dashboard .submit-btn |
Customers Export Button | .export-button |
Waitlist Open/Closed Toggle | .lock-container #dropdown-basic |
SMS Chat Area | #visitChatArea |
Add service button | .open-new-service-button |
Add Resource Button | resources #open-new-service-button |
Resources Away Toggle | .set-as-away |
Input Field Edit Button | #settings-input-fields.edit-button |
Invite Users Button | users.open-new-service-button |
Edit Users Button | #settings-users.edit-button |
Waitlist Enable/Disable Toggle | #enable-waitlist-toggle |
Bookings Enable/Disable Toggle | #enable-bookings-toggle |
*The Custom App Stylesheet is only available to Business and Enterprise level plans