Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Excerpt

A majority of online sales are now done using a mobile device. PeakProtect's brand-new mobile-responsive look & feel is there to provide a great first impression, regardless of the device.

Solution 

The refreshed design offers a modern and user-friendly waiting page layout. As a white label solution the page can of course be personalized to perfectly align with your brand's identity. You can customize the logo, background, colors and labels.

Getting Started

To apply the new design, please contact customer support and create a new service ticket to apply the new template.

New clock:

Configuration

Image Removed

If you want to change the clock colors you have to go to

Colors

Clock colors can be customized in the branding-resources.js and you will find these variables: file.

Changing them you will be able to see the changes.

New 'wait' screen

Image Removed

To change the colors go to the branding.css and you will see some variables for the colors, the one that affects the spinner is --main-color, by changing it you will see the changes. In case you don't want to use that variable you can easily change it by going to the .dot class and changing the background:

Image Removed

Change the logo

To change the default logo go to the branding.css and change the background image. You can add yours in the resources folder and use it as it is done in line 2 of the screenshot.

Image Removed

Change the footer

To change the default footer, go to branding.css and change the background by adding the image in the resources folder and using it in the class: 

Image Removed

Zip download

View filenamedefault-v8.2.zipheight250Other colors can be customized in the branding.css file.
The spinner uses the "--main-color" variable but this can be overridden in the background attribute of the .dot class.

Image Added

The logo can be customized by changing the background-image attribute of the #logo selector in the branding.css.

Image Added

The footer can be customized by changing the background attribute of the #footer selector in the branding.css.

Image Added