6. Customization
Learn about ways the Loyalty Microsite can be customized including colours, logos, layout options, and ancillary content like welcome and terms pages.
About Loyalty Microsite customization
The Loyalty Microsite has been designed in such a way that it can be themed and configured to match your existing brand guidelines to ensure your customers have a consistent and recognisable experience.
This article outlines the customization options available in the Loyalty Microsite.
Navigation
The navigation bar sits at the top of the microsite, and has the following options:
Site logo: choose whether to show a site logo. If no logo is required, simply upload a 1px transparent PNG
Navigation visibility: choose to show navigation text and icons, text only, or no navigation
Navigation style: choose to invert the default state and show the logo on the left and navi on the right
Font
You can optionally specify a custom font to be used across your microsite.
You can specify one font to cover the whole microsite. For example:
Arial (All text)
Or, you can specify 2 different fonts - differentiated by the weight used on the microsite. For example:
Arial Extra-Bold (All bold-weighted text), Comic Sans Regular (All normal-weighted text)
If you have an especially stylised brand font, we suggest using it for the bold text only and using system default for normal text.
Colours
You can optionally specify a custom colour scheme to be used across your microsite.
In some areas, colours are automatically set based on contrast with, or shades of, the specified colour. This includes but is not limited to:
Text used for reward name on reward thumbnails (background primary)
Text used for reward name and subtitle on reward view page (background accent)
T&C box background colour
Hover states
Page Background
Page Text
Primary
Accent
Surface Background
Surface Text
Page Button Background
Page Button Text
Error
In the example provided in the images, the following colours are set:
Page BG: #f5f8fa
Page Text: #222425
Primary: #285E80
Accent: #48a9e5
Surface BG: #ffffff
Surface Text: #3c3c3c
Page Button BG: #285e80
Page Button Text: #ffffff
Miscellaneous theme options
Reward thumbnail
Reward thumbnails are shown on your microsite homepage in the rewards list, and in reward category views. They feature a 1px stroke and a small banner at the top with the reward name (the 'item decoration'), and (if applicable) the reward cost or incentive. You can choose to:
Hide the stroke and banner (the 'item decoration' - presenting the bare reward artwork only at a 1:1 ratio)
Hide the cost
This allows you to have greater flexibility over the appearance of your microsite, as you can embed the reward name and cost into the imagery itself using custom fonts and styles etc. Just make sure you consider the bleed area required per Reward artwork guidelines.
Homescreen icon
The homescreen icon appears when the microsite is deployed in standalone mode and a user adds the microsite to bookmarks or their smartphone home screen.
Favicon
The favicon appears in the address/tab bar.
The following options are available for the Loyalty Microsite:
Welcome heading
Enable a welcome heading on your microsite, which appears to logged out users only at the top of the rewards list.
In the screenshot below, the welcome heading is the text reading 'Welcome to Restaurant Demo! Earn points when you shop with us and get amazing rewards! Learn more'. The link Learn more leads to your Welcome page.
This text can be customised. The Learn more link destination cannot be changed, but it can be removed if required.
Reward search bar
Enable a reward search bar above your rewards list.
Hide uncategorised rewards on homepage
Uncategorised rewards appear at the top of your rewards list by default. You can choose instead to hide rewards which do not belong to a reward category from the microsite homepage. These rewards will still be visible in search results if you have reward search enabled.
Hide reward cost on homepage
Hide the cost of a reward from its thumbnail on the microsite homepage.
Reward QR code
Show a QR code with timer for voucher-type rewards on the reward redemption screen.
Search engine indexing
Include or exclude the microsite from search engine indexing.
Google tag manager ID
Specify a Google Tag Manager ID for analytics purposes. This will also result in a cookie accept/decline overlay appearing at the bottom of your microsite.
When giving a GTM ID the following behaviour will be enabled:
Standard page-view tracking
loginevent with auser_idpropertynew_user_registeredeventoffer_redeemedevent with following properties:user_id,offer_id,offer_name
Microsite lock
Lock the microsite to a specific user audience. Users in the specified audience will see a page telling them they do not have access to the microsite.
Receipt advice image
The receipt advice image shows when a user selects 'Scan a Receipt' at the bottom of the page.
A default image is provided, however if required you can optionally specify your own image.
Multi-page receipt uploads
Enabling multipage uploads allows your end-users to upload multiple images/files per receipt claim, handy for long or double sided receipts.
Users must still only submit one actual receipt per claim and not utilise this feature to batch upload multiple receipts.
Hide receipt upload
Hide receipt uploading functionality from a specific audience.
Show points as currency
Show a user's points balance, and reward costs, as a currency with a custom multiplier. For example, show 100 points as $1.00.
Hide reward available until text
If a 'reward available until' date is specified in a reward's availability settings, this will be hidden from the reward view page.
You can optionally utilise a Welcome Page on your microsite.
The Welcome Page is an opportunity to explain and promote your rewards programme to users. The content of the page is up to you to decide but the structure should conform to the standard building blocks we provide.
The welcome page is shown as part of the User flow you select, but can also be accessed at anytime at micrositeurl.com/welcome. You can see an example welcome page here: https://explorer.web.wlloyalty.net/welcome
User flow
You can choose one of the following options for your Welcome Page user flow:
No welcome page
No welcome page is utilised as part of the microsite user flow
Show the welcome page after a user completes registration
The microsite rewards list (the homepage) is visible to all users whether logged in or out, and users only see the welcome page after login
Show the welcome page when a user is not logged in
The microsite rewards list (the homepage) is only visible to logged in users. Logged out users are shown the welcome page only and must register or login to access the microsite rewards list.
Welcome page CTA
The welcome page features a call to action button at the bottom.
You can choose one of the following options for where a user lands after pressing this CTA:
Navigate to homepage
The user will be taken to the homepage in a logged out state (not compatible with the Show the welcome page when a user is not logged in user flow)
Navigate to registration
The user will be taken to the registration form (not compatible with the Show the welcome page after a user completes registration user flow)
Navigate to login
The user will be taken to the login form (not compatible with the Show the welcome page after a user completes registration user flow)
The Welcome page also appears when users press ‘Help’ or ‘Learn more’ in the user summary banners.
Welcome page structure
The simplest structure is a title combined with any number of paragraphs and headings. You can also provide a "hero image" which will be shown as a banner along the top of the page as shown in wireframes below.
You can add content to the /terms and /privacy pages. Send your terms and/or privacy policy to WLL Support who will add this to your microsite on your behalf.
Last updated
Was this helpful?