Introduction
This article describes how to configure the Client Portal Branding in the PGM system. This is the first page that is seen by your customers, with your company's logo, chosen photo, and main and second color, which applies to all the tabs later. There is also the functionality for multi site branding.
Before you start
Multi client portal branding allows centres to have different logos and colour schemes for different centres. To access this, please contact support via our get support module, as this will need to be enabled on your site first.
Instruction
Creating single client portal branding:
Go to the PGM -> Settings -> Client Portal Branding
1. Logo Tab - please select:
A. Header Background Color - Choose the appropriate color for your header (in HEX format: #xxxxxx)
B. Logo - Prepare and upload your logo file (high resolution image, the image file type should be in the vector format: .jpg or .png, the max height is 60px and max width is 200px)
C. Logo size - Choose this setting to customize the size of your logo.
Please, note that this is the largest possible logo available for setting in our system.
2. Background Tab - please select:
A. Background Photo - Prepare and upload the file for your background photo in the JPG format, which should weigh less than 500kb, otherwise loading the first page of CP2 would take a long time. The ideal photo resolution format is 1980x1080x
B. Vertical Position - This setting let you adjust a Vertical Position for your photo
C. Horizontal Position - This setting let you adjust a Horizontal Position for your photo
3. Overlays Tab:
Left and Right Overlay - With this setting, you can customize the left and right side of the displayed panel. Choose the most suitable design for you which is displayed in the preview window.
4. Colors Tab - please select:
A. Primary Color - This setting lets you adjust the Login button color (in HEX format: #xxxxxx). The system immediately shows whether the selected color meets WCAG AA standards.
B. Secondary Color - This setting adjusts the font color on Join now! button (in HEX format: #xxxxxx). The system immediately shows whether the selected color meets WCAG AA standards.
C. Branding Theme - With this setting, you can adjust the Light or Dark background color of Login and Passwords buttons
5. Save your Client Portal Branding Application changes by clicking on the Save branding button
Creating multi client portal branding:
Go to the PGM -> Settings -> Client Portal Branding
1. To create a new variation, click the Add branding button.
Existing brandings can be edited by clicking the Edit icon in the grid row.
2. Create a Branding Name
3. Follow the steps from the single client portal branding above
4. Save your Client Portal Branding Application changes by clicking on the Save branding button
5. Click on the back arrow next to Client Portal Branding
6. Add additional branding by following the steps from the multi client portal branding above
7. Go to PGM -> Clubs -> List of Clubs
8. Click on the Edit button next to the Club name
9. In the drop down next to Client Portal Branding, select the Branding name for this club
10. Select Save
Editing multi client portal branding
Go to the PGM -> Settings -> Client Portal Branding
1. Click on the three dots next to one of the branding options, and select Edit
2. Follow the steps from the single client portal branding above to edit any tab
Deleting multi client portal branding
Go to the PGM -> Settings -> Client Portal Branding
1. Click on the three dots next to one of the branding options, and select Delete
2. A confirmation screen will pop up, asking you if you are sure you want to remove branding. Select Yes or No
Site Specific URL's:
If you would like to direct customers directly to a specific site, use the template below to discover the URL.
- Replace SITENAME with your site name
- Change club ID to the number of the individual site
Client portal:
https://SITENAME.perfectgym.com.au/ClientPortal2/#/Login?clubId=1
Reception tablet:
https://CLIENTNAME.perfectgym.com.au/ClientPortal2/?mode=tablet/#/Login?clubId=1
Note
Be patient, it could take a few minutes before your changes will upload on your Client Portal Application.
Please, have in mind that you can change it any time!
You are also able to change description that you see in the Client Portal by using the Custom Translation option. Go here to find more information.
Want some more? Please contact our Sales department to prepare an offer based on your club requirements.
Use Case Examples
Example 1: Setting the Default Corporate Identity
Goal: Establish the standard look for the main gym portal using official brand colors.
-
Settings:
IsDefaultBranding: True
Header Background Color: #FFFFFF (White)
Logo: Upload "Corporate_Logo.png"
Primary Color: #003366 (Navy Blue)
Theme: Light
Example 2: Creating a "Dark Mode" Evening Vibe
Goal: Create a sleek, dark-themed branding for a premium sub-brand or night classes.
-
Settings:
Branding Theme: Dark
Header Background Color: #000000 (Black)
Overlays: Dark with light text
Background Photo: Upload "Night_Gym_Interior.jpg"
Example 3: Seasonal Promotion (Summer Special)
Goal: temporarily update the look to match a summer marketing campaign.
-
Settings:
Background Photo: Upload "Summer_Beach_Workout.jpg"
Primary Color: #FF9900 (Orange)
Overlays: Transparent with dark text (to show off the sunny background)
Example 4: High Accessibility Mode
Goal: Ensure maximum readability for visually impaired users.
-
Settings:
Theme: Light
Overlays: Light with dark text (Solid, not transparent)
Primary/Secondary Colors: High contrast colors (e.g., Black and bright Yellow) validated by the WCAG checker.
Example 5: Minimalist Design
Goal: A clean interface with no distracting background image.
-
Settings:
Background Photo: [None] (Or a solid color image)
Overlays: Transparent with dark text
Logo Size: 50% (Smaller, subtle logo)
Theme: Light