Sign in Talk to us Free trial
Free trial

Design and software studio
Colour

Branding settings

Set your business name, logo and two colours so the console, the customer tracking page and the booking form look like your business.

For
OwnerAdministrator
Hosting
Any hosting
Devices
Web browser
Business
All businesses

Checked against Pop Street Dispatch 0.1.0

The Branding section holds the name, logo and colours your customers and your staff see. You will be able to set them once and have the console header, the sign-in page, the customer tracking page and the booking form follow.

Before you start #

You need the owner or manager role. Have your logo ready as a PNG or an SVG file of 256 KB or less.

Steps #

  1. Open Business settings and select Branding. The form shows what is saved now.
  2. Type the Business name. It appears in the console header, on the sign-in page, on the tracking page and on the booking form.
  3. Choose the Logo: a PNG or an SVG file up to 256 KB. Select Remove logo to go back to no logo.
  4. Type the Main colour and the Accent colour as # and six characters, for example #1f4e8c, or pick them with the colour swatch next to each field.
  5. Read the line under each colour. When white or black text reads better on that colour, it says "Text on this colour is shown in black" (or white) with the contrast ratio. You never choose the text colour.
  6. Check the Preview panel, which shows your logo, your name and both colours on buttons.
  7. Select Save branding. The page shows "Branding saved." and the console takes the new look at once.
Technical details
  • The form reads and writes /settings/branding. Colours and the name are stored in business settings; the logo is stored in its own table, one row for each business.
  • The text colour on each brand colour is white or black, whichever gives the higher WCAG contrast ratio. One of the two always reaches 4.5 to 1 (AA for normal text).
  • A logo is shown only as a picture. An SVG that holds scripts, event handlers, links to other files or embedded images is refused when you save it.
  • The tracking page (/track/:token) and the booking form (/book/:token) carry the same name, colours and logo, so they work without a sign-in.
  • The sign-in page shows the look last used on the same device.

If something goes wrong #

  • "Use a colour like #1f4e8c." means a colour field does not hold three or six hexadecimal characters after the #.
  • "Choose a PNG or an SVG file." means the file type is something else. Export the logo again as PNG or SVG.
  • "That file is larger than 256 KB." means the logo is too large. Save a smaller copy.
  • The page says only owners and managers can open settings: your role is neither owner nor manager.