All Collections
User Management & Permissions
Permissions & Access
How to Restrict Settings Access for Users Using CSS
How to Restrict Settings Access for Users Using CSS

Add CSS to the Custom App Stylesheet to hide areas of the Waitwhile interface

Lindsey Gagnon avatar
Written by Lindsey Gagnon
Updated over a week ago

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

Related Articles:

Did this answer your question?