Configure how the pages look across all self service tools for consistent branding colours throughout your self service tools by adding a logo and setting your preferred colours for text, tables and forms.
Provide a consistent self service journey to your customers from job booking through to payment. Branding is significant for marketing your business, providing a connection with your customers and differentiating yourself from competitors.
View setting
➡️ Profile icon > Settings > Branding > Self service branding > View
On the left side of the screen, you'll see the options for the settings and on the right side, you will find a preview of the portals so you can view changes as they are made.
The portal being previewed can be changed so you can be sure you're happy with how they are displayed before sending them to your customers.
➡️ Select portal > Select from dropdown
By default, branding colours are set to the Commusoft branding colours to ensure the portals can be used if no custom colours are set.
All names, locations and information displayed in the preview portals are placeholders.
Upload images
Uploading a logo and an ICO file are small but significant steps in enhancing the portal's usability, branding, and overall professionalism.
Your company logo
To upload your logo, click 'Browse file' or drag and drop the file from a location on your computer.
The logo will be previewed in the portals on the right.
Uploaded images must be in .jpg, .jpeg, .png, or .gif format, with recommended dimensions of 500 x 300 pixels.
Once a logo has been added, you can crop the image or remove it
using the icons now showing in the top right corner.
Your company favicon
A favicon, short for "favourite icon," is a small, iconic image associated with a website. This is displayed in the browser tab for the webpage currently being viewed.
In this example you can see the favicon is the Commusoft logo:
Uploaded images must be in .jpg, .jpeg, .png, or .ico format, with recommended dimensions 50x50 pixels or 32x32 pixels.
Set branding colours
Using colour hex codes, you can set your branding colours for various areas of the portals. Not all fields are used in all portals, so be sure to take a look through the portal options available to see what has changed.
Each field will display a swatch of the set colour, the hex code and the opacity percentage.
Click anywhere on the field to open the colour selector and find a variety of ways to add your branding colours.
Manual selection: Change the colour with the hue selector bar, then set the tone using the larger colour panel.
Eyedropper tool: Pick out a colour from an open page/image. To use this method, you will need to have the page/image you wish to pick the colour from open in another window.
Hex code: If you already have your branding colour hex codes, add them to the field by typing or copy/paste the code.
Opacity: Change the opacity of the colour using the % field. Click in to type your desired opacity.
Once you've made a change, click Apply to set the colour and check the preview to see how it looks. This colour will also be added to recently used colours for quick selection on other fields.
Secondary button colour (thumbs up button) and Negative button colour (thumbs down button) are currently used in the After sales care portal only.
Some of the fields in the list are not currently in use:
- Forms: Button stroke, Secondary button stroke, Secondary button font colour, Negative button font colour.
-
Contact button: All fields.
Self service branding does not apply to the Website booking portal, Legacy booking portal or Customer portal.
Once you've set up your branding colours, we recommend setting up the individual portal settings.
📘️ Invoice portal settings
📘️ Statement portal settings
📘️ Rebook portal settings
📘️ Job booking portal settings
📘️ Service reminder portal settings
📘️ After sales care portal settings
📘️ On our way portal settings