Branding & Customisation Options

You can customise how the enrolment app looks and behaves by using URL parameters. These parameters allow you to control:

• How the app is branded (colours, fonts, background)

• Which programs or courses are shown

• Which filters and view options are visible to users

URL parameters are small pieces of text added to the end of a URL that change how the page is displayed when it loads.

The example of standard enrolment app URL is https://nhs.clevero.co/neighbourhood-house-demo-account. The category filter is shown (default).

If we add the hideFilter=true parameter to the url, the category filter is hidden.

Applying More Than One Parameter

You can apply multiple parameters to a single URL by separating them with an ampersand (&). 

For example: https://nhs.clevero.co/neighbourhood-house-demo-account?hideFilter=true&hideDateRange=true 

This hides both the category filter and the date range filter.

⚠️ Important:

• Only use one ? at the start of the parameters

• Use & to add additional parameters

• You can add as many parameters as needed to achieve the desired layout and behaviour

Where Can I Apply Parameters?

Parameters can be applied to:

• The main program listing page

• Individual program or course pages

For Example: https://nhs.clevero.co/neighbourhood-house-demo-account/view/course/163611?bg=%23207332 

This loads the Zumba course (ID 163611) with a green background (#207332).

ℹ️ Note:

If branding parameters (such as colours or fonts) are applied on the main program listing page, they will automatically carry over to any program pages the user visits during the same session.

⚠️ Important:

URL parameters are case sensitive

• hideFilter ✔ works

• HideFilter ✖ does not work
  
  

➡️ What’s Next?

A wide range of parameters is available to support different use cases. Continue reading to explore the full list of branding, filtering, and display options.

2. Branding Options

Primary Colour

Applies the specified hex code as the primary colour. The primary colour is used as the main accent colour throughout the app.

Syntax

?p=%23{hex code without "#"}

• Default value: #1976d2

• Default behaviour: Uses the default primary colour.

Example

?p=%23207332

Where 207332 is the chosen hex code.

Secondary Colour

Applies the specified hex code as the secondary colour, commonly used for elements such as buttons.

Syntax

?s=%23{hex code without "#"}

• Default value: #9c27b0

• Default behaviour: Uses the default secondary colour.

Example

?s=%230c034a

Where 0c034a is the chosen hex code.

Background Colour

Applies the specified hex code as the background colour of the app.

Syntax

?bg=%23{hex code without "#"}

• Default value: #ffffff

• Default behaviour: Uses the default background colour.

Example

?bg=%23FFFAFA

Where FFFAFA is the chosen hex code.

Font Family

Applies a Google Font to the app. You can view available fonts at Google Fonts.

Syntax

?ff={font name}

• Default value: Poppins

• Default behaviour: Uses the default font.

Example

?ff=Dancing Script&ff=Montserrat

In this example, Montserrat is used as a fallback font if Dancing Script is unavailable.

ℹ️ Notes

• Font names are case sensitive. For example, ?ff=dancing script will not work.

• The font used in the Short Description and Long Description fields can be set directly within the rich text editor for each course or program.

3. Filtering Options

Category IDs

Filters programs and sessions to show only those that match the specified category IDs.

Syntax

?categoryId={id}

• Default value: null

• Default behaviour: Shows all courses and sessions.

Example

// Single category

?categoryId=175168

// Multiple categories

?categoryId=175168&categoryId=182456

To find a Category ID:

• Go to House Admin → Program Setup → Categories

• Copy the ID from the category header

Days Starting Today

Filters programs to only show those with sessions occurring within the next X days.

Syntax

?daysStartingToday={number}

Example

?daysStartingToday=7

This shows programs with sessions happening within the next 7 days.

Term

Sets the date range filter based on a specific term’s start and end dates.

Syntax

?term={term name}

Default value: null

Example

?term=2023 Term 3

The value must match the Name field of the term exactly.

4. View and Hide / Show Options

View Mode

Sets the default view mode for the program listing page.

Syntax

?viewMode={list | tile | calendar}

• Default value: null

• Available values: list, tile, calendar

• Default behaviour: Displays the tile (grid) view.

Example

?viewMode=calendar

Hide Filter

Shows or hides the category dropdown filter.

Syntax

?hideFilter={boolean}

• Default value: false

• Available values: true, false

• Default behaviour: Shows the category filter.

Example

?hideFilter=true

Hide Date Range

Shows or hides the date range filter.

Syntax

?hideDateRange={boolean}

• Default value: false

• Available values: true, false

• Default behaviour: Shows the date range filter.

Example

?hideDateRange=true