Customer Portal Branding & Style Customization

Schedule a call

Schedule a call

Customer Portal Branding & Style Customization

Customer Portal Branding and Style Customization overview

Your OctopusPro Customer Portal is a customer-facing booking and self-service experience. Customizing its branding improves trust, creates a consistent customer experience across your website and portal, and can increase online booking conversions.

From Settings > Customer Portal > Branding & Style, you can customize your portal’s visual identity including logos, favicon, homepage background images, header styling, link colors, and button styling.

Best practices before you start

  • Use high contrast (especially for header links and buttons) to keep text readable on desktop and mobile.
  • Optimize images for fast loading (compressed JPG/PNG).
  • Preview on mobile after changes (background images may crop differently on smaller screens).
  • Consider white-labelling your portal URL for a more branded experience: Customer Portal URL White Labelling and Customization.

Table of contents

Set a favicon (browser tab icon)

A favicon is the small icon shown in browser tabs, bookmarks, and saved shortcuts. It helps customers identify your portal when they have multiple tabs open and strengthens branding.

To set your portal favicon:

  1. Go to Settings > Customer Portal > Branding & Style.
  2. Upload your icon under Favicon.
  3. Click Save and refresh the portal (favicons may be cached by your browser).

Favicon upload field in Customer Portal settings

Example of favicon shown on the portal in a browser tab

Favicon tips:

  • Use a simple square icon (often your logo mark works best).
  • Because favicons are small, avoid detailed artwork.
  • If you need to generate multiple favicon sizes quickly, you can use: RealFaviconGenerator.

The homepage logo appears at the top center of your portal homepage (landing page). This is separate from the header logo used on categories and service pages.

To upload a homepage logo:

  1. Go to Settings > Customer Portal > Branding & Style.
  2. Upload your logo under Homepage logo.
  3. Click Save and preview your portal homepage.

Recommended max homepage logo width: 450px

Homepage logo and background image settings

Set a homepage background image or background gallery

You can display either:

  • Background image: one static image on the portal homepage, or
  • Background gallery: multiple images that automatically fade/transition.

To set a background image or gallery:

  1. Go to Settings > Customer Portal > Branding & Style.
  2. Upload a single image under Background image, or upload multiple images under Background gallery.
  3. Click Save and preview your portal homepage.

Note: The minimum recommended size is at least 1024px wide.

Important: If you upload images to the background gallery, the single background image is typically used only when the gallery is empty.

Background image and background gallery fields

Optional: enable a dark overlay on the homepage background

If your background is bright or busy, enable the dark overlay to improve text readability (welcome text, intro text, and search/booking elements).

  1. Go to Settings > Customer Portal > Branding & Style.
  2. Enable Display a dark layer over background image?
  3. Click Save and preview the homepage.

Dark overlay toggle for portal homepage background

Example portal homepage with dark overlay enabled

Add welcome text and intro text on the homepage

Your welcome message is the first thing customers see. Use it to communicate what you do, who you serve, and what the customer should do next.

To add homepage text:

  1. Go to Settings > Customer Portal > Branding & Style.
  2. Enter your Homepage welcome text (headline).
  3. Enter the Text to display under the welcome text (supporting message / CTA).
  4. Click Save and preview the portal homepage.

Homepage welcome text and intro text fields

Portal homepage showing welcome and intro text

Examples

  • Home services: “Book a licensed technician in minutes” / “Choose a service, pick a time, and we’ll confirm instantly.”
  • Automotive: “Trusted repairs, fast turnaround” / “Schedule your service now and get back on the road.”
  • Wellness: “In-home appointments that fit your schedule” / “Book ahead or same-day—appointments take seconds.”

Customer Portal header (navigation)

A header is visible on your categories and service pages. You can brand it with your logo and colors so navigation feels consistent and professional.

Example of customer portal header on categories page

This logo appears in the top left of the portal header on categories and service pages.

  1. Go to Settings > Customer Portal > Branding & Style.
  2. Upload your logo under Header logo.
  3. Click Save and refresh your portal.

Recommended max header logo width: 300px

Header logo upload field

Header logo displayed on portal header

Set the header background color

Choose a header background that matches your brand and keeps header links readable.

  1. Go to Settings > Customer Portal > Branding & Style.
  2. Select Header background color.
  3. Click Save and preview category/service pages.

Header background color picker

Example of header background color applied

These settings control navigation link colors in the portal header (and help customers clearly identify clickable items).

Header link text color

  1. Go to Settings > Customer Portal > Branding & Style.
  2. Set Header links text color.
  3. Click Save and check contrast on category/service pages.

Header links text color picker

Header link hover color

  1. Set Header links text hover color.
  2. Pick a different color from the normal link color so hover feedback is clear.
  3. Click Save and test by hovering over header links.

Header links hover color picker

Header links shown in portal header and breadcrumbs

This controls the color of link text across your portal internal pages (for example: category links, service links, breadcrumbs, and other clickable text links).

  1. Go to Settings > Customer Portal > Branding & Style.
  2. Set Link text color in internal pages.
  3. Click Save and review multiple portal pages for readability.

Internal link text color setting

Set portal buttons & arrows color

This setting controls action buttons and arrow UI elements across your portal (including key steps in the booking flow).

  1. Go to Settings > Customer Portal > Branding & Style.
  2. Set Buttons and arrows color.
  3. Click Save and test a booking flow to confirm button text remains readable.

Buttons and arrows color setting

Example booking UI showing styled buttons

Customize and embed the Book Now button

The Book Now button is designed to be embedded on your website. When clicked, it opens the booking flow (typically in a popup), allowing customers to start booking directly from your site.

For a full guide on enabling online bookings through your website, see: Enable Online Bookings Through Your Website.

To customize the Book Now button style:

  1. Go to Settings > Customer Portal > Branding & Style.
  2. Scroll to the Book now button section.
  3. Customize the button (background color, border color/style/width, border radius, width/height, font size/weight, text color, and button text).
  4. Click Save.

Book now button styling options

Book now button width, font, and text settings

To copy the Book Now embed code:

  1. Go to Settings > Services Settings > Services.
  2. Find the service you want to embed and click the Embed icon.
  3. Open the Book now button tab.
  4. Click Copy to clipboard, then paste the code into your website HTML.

Services list showing Embed option

Book now embed code modal with Copy to clipboard

Common use cases:

  • Add a “Book Now” CTA on your homepage hero section.
  • Embed a button on each service page (one per service).
  • Add a booking CTA to your contact page or footer.

Customize and embed the Gift Voucher button

The Gift Voucher button can be embedded on your website so customers can purchase gift vouchers directly through your portal.

To customize the Gift Voucher button style:

  1. Go to Settings > Customer Portal > Branding & Style.
  2. Scroll to the Gift Voucher button section.
  3. Customize the button styling (background, border, radius, size, font styling, and button text).
  4. Click Save.

Gift voucher button styling options

Gift voucher button sizing and font settings

To copy the Gift Voucher embed code:

  1. Go to Settings > Services Settings > Services.
  2. Click the Embed icon for the relevant service.
  3. Open the Gift card button tab.
  4. Click Copy to clipboard and paste the code into your website.

Services list showing embed icon used to generate gift voucher button code

Gift card embed code modal with Copy to clipboard

Customize the Login & Registration page

You can brand the login and registration pages by setting a background image or color and adding a logo. This screen may be used by customers, fieldworkers, and admin users depending on how they access your portal.

To customize the login page:

  1. Go to Settings > Customer Portal > Branding & Style.
  2. Scroll to Login & Registration.
  3. Upload your Logo and configure background options (if available in your account).
  4. Click Save, then preview in an incognito/private window to avoid cached assets.

Login and Registration branding section

Example of branded customer portal login page

Troubleshooting

  • Branding changes don’t show: hard refresh (Ctrl/Cmd + Shift + R) or open the portal in an incognito/private window.
  • Favicon didn’t update: browsers often cache favicons longer—try a different browser or clear cache.
  • Welcome text is hard to read: enable the dark overlay and/or choose higher-contrast colors.
  • Buttons don’t look right on mobile: reduce button width and test again (responsive layouts can wrap elements).

Optional enhancement: you can embed YouTube videos on your portal homepage (welcome video, testimonials, or how-it-works). Embed YouTube Videos on Your Customer Portal Homepage.

To stay updated, please subscribe to our YouTube channel.

Scroll to top