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. Available on Go Paperless and above.
View setting
➡️ Profile icon > Settings > Branding > Self service branding > View
Self Service Branding
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.
Logos
Company logo
Uploading a logo and an ICO file are small but significant steps in enhancing the portal's usability, branding, and overall professionalism. This is a requried setting to update the branding settings.
➡️ Your company logo
Click 'Browse file' or drag and drop the file from a location on your computer.
Uploaded images must be in .jpg, .jpeg, .png, or .gif format
Recommended dimensions of 500 x 300 pixels.
The logo will be previewed in the portals on the right.
Once a logo has been added, you can crop the image
or remove it
using the icons now showing in the top right corner.
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.
➡️ Your company favicon
Click 'Browse file' or drag and drop the file from a location on your computer.
Uploaded images must be in .jpg, .jpeg, .png, or .ico format
Recommended dimensions 50x50 pixels or 32x32 pixels.
Example
The favicon is the Commusoft logo:
Text 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.
Primary text colour
The colour for all the main text throught your portals.
➡️ Primary text colour
Choose a colour for the Primary text
Click anywhere on the colour field to open the colour selector.
There are four ways to choose the colour
Enter a hex code
Use the hue bar and tone selector
Use the eyedropper to pick a colour from an image or web page.
Use a Saved colour
Set the colour.
Click the % field.
Set the Opacity level.
Click Apply to save.
Secondary button colour
Used for sub headings and accent text.
➡️ Secondary button colour
Set the colour.
Set the Opacity level.
Click Apply to save.
Table/sections
The Invoice portal is a good preview to have up to see the colour effects of these settings.
➡️ Title bar background colour
Set the colour.
Set the Opacity level.
Click Apply to save.
➡️ Title bar font colour
Set the colour.
Set the Opacity level.
Click Apply to save.
➡️ Title bar secondary font colour
Set the colour.
Set the Opacity level.
Click Apply to save.
Forms
➡️ Input highlight
Set the colour.
Set the Opacity level.
Click Apply to save.
➡️ Button colour
Set the colour.
Set the Opacity level.
Click Apply to save.
➡️ Button stroke
Not currently used
➡️ Button font colour
Set the colour.
Set the Opacity level.
Click Apply to save.
➡️ Negative button colour
Set the colour.
Set the Opacity level.
Click Apply to save.
➡️ Secondary button colour
Set the colour.
Set the Opacity level.
Click Apply to save.
➡️ Secondary button stroke
Not currently used
➡️ Secondary button font colour
Not currently used
➡️ Negative button font colour
Not currently used
Maps
➡️ Map highlight colour
Set the colour.
Set the Opacity level.
Click Apply to save.
Contact button
➡️ Contact button colour
Not currently used
➡️ Contact button font colour
Not currently used
➡️ Contact button stroke
Not currently used
Progress bar
➡️ Circle colour
Set the colour.
Set the Opacity level.
Click Apply to save.
➡️ Highlighted circle colour
Set the colour.
Set the Opacity level.
Click Apply to save.
➡️ Circle check/tick colour
Set the colour.
Set the Opacity level.
Click Apply to save.
➡️ Circle font colour
Set the colour.
Set the Opacity level.
Click Apply to save.
➡️ Highlighted circle font colour
Set the colour.
Set the Opacity level.
Click Apply to save.
Saving your branding
After setting your Self service branding, click Save to ensure all changes made are applied to the live portals.
You can also Reset to default at any time to instantly remove the set branding and the colours will revert to the Commusoft set defaults.
Self service branding does not apply to the Website booking portal, Legacy booking portal or Customer portal
Thumbs up button and Negative button colour; thumbs down button, are currently used in the After sales care portal only.
Next steps
Once you've set up your branding colours, we recommend setting up the individual portal settings.