Branding your White Label account

book reader icon
3 Minutes
facebook logo gray
linkedin logo gray
mail logo gray

Using your own domain is probably to the main reason why a company goes for a White Label account. However, there are many more powerful features offered in this plan.

How to brand your White Label account

1. Go to the Branding section of your white label account

First, go to the Branding section of your White Label account where all these settings can be managed. You can start by giving the platform your own name.

Branding

White Label Name

Set White Label Name
Branding section with White Label Name input

2. Set the look and feel of your account using CSS and JS

Add your logo, favicon and use your own colors.

Branding

Colors

Input for custom colors

3. Set the colors for the Wallet Passes

You can make adjustments to your wallet's appearance, specifically pertaining to the font and background color

Branding

Wallet Pass Colors

Input for custom Wallet Pass colors

After you click the change color button, a popup will appear. Please decide whether you would like to apply the color changes to Wallet Passes that will be generated from now on or whether you would also like to override the colors of all existing Wallet Passes. Please note that after you press the Save button, the changes take effect immediately and cannot be undone.

Wallet Pass Colors Popup
Wallet Pass Colors Popup

4. Use your own production subdomain

You can change the subdomain from your White Label account to your own domain e.g. qr.your-company-domain.com. Learn more in how to setup your own domain

Branding

Production Domain

Set Production Domain
Input for custom domain

5. Use your own subdomain for the extra users of the White Label account (optional)

The extra users of your White Label accounts can also use their own subdomain. This can be useful for agencies that set up user accounts for their customers that should run under their own domain.

User Sara

Production Domain

Set User Domain
User's production subdomain setup

6. Use your own domain for the QR Code Short URL (optional)

Use a different or a shorter domain instead of your production domain to create simpler and easier to read QR Codes e.g. qr.vc. Learn more how to setup a root domain.

Branding

Custom Short Domain

Set Custom Short Domain
Input for custom domainshort

7. Use your own domain for the email notifications (optional)

You can also use your domain to send the E-Mail notifications for scans, lead forms, vouchers, etc. This only applies to the main domain of the account, extra users will use the same domain as the admin.

Branding

Custom E-Mail Domain

Set Custom E-Mail Domain
Input for custom e-mail domain

8. Regional settings - Custom languages

Brand your platform with your own customized language on top of your selected base language. Translate specific text blocks into your regional languages and assign your created custom language packs to a user.

Branding

Custom Language Pack

Input for custom language pack

CSS Hacks

Brand your White Label Instance with your own CSS or JS code which will be injected within the <head> tag of all the pages of your White Label account. You can include your own chat widget and much more.

Colors

Use a custom color.

body{background-color: #cde;}

Fonts

Use a custom font from Google Fonts.

@import 'https://fonts.googleapis.com/css?family=Source+Sans+Pro';
body{font-family: 'Source Sans Pro', sans-serif;}

Icons

Replace the user icon in the menu with a custom base64 image.

.admin-user{background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAAA3NCSVQICAjb4U/gAAAACXBIWXMAAAsTAAALEwEAmpwYAAABvFBMVEUAAACt1q2m17Cn26+q1LKs1ays2ayr1rGp2K+p1q6q2bCfyqap2LCp16+p2K+q2LCp17Co2LCp2K+p16+o2K6q2LCo16+q17Co2K+p17Co1q6q2LCq2K6o2LCq1rCo2K6o2LCq2K6n2K2o2K6q2LCo2K6o1rCq1rCbu6GgzKWm1Kyo1q5gnL5jpMdjpsxkp81lqtFmqcxnpcJnp8Vnp8tnqs5nq85nrdRnrdVoq89orNJpq8trnLRsqb5tq8VtrMVvqchxrb9yp69yrLx2o7V2q654q8N5qqR5r8h5sMt6sbZ7q6R9qr19tbqBsqeCo4eFtKSGr5iIt8qIuauJssKJvrWNtJKPt8WRuJaSwaqXv5yYtZ+Yw6GYw6WZwZ6bxaCbxaGcv6KdyKOexaKfvKWfyqWhzaeiz6yjzKmj0Kqj0Kyj0a6k0Kqlw76l0aqm06ynza6n0ayn1K2n1a2o1a6o1q+p1q+p16+q2LCtyLWuzrSuzrWvyLez0Luz0bu407+508C71sS+2NXB29jD2MvD2svF3c3G39vH3tjH39vJ39LK4tzO5NjQ5d7X6+DX7OPY7OPZ7ePb7+Xc8Oa65Fc8AAAALHRSTlMAGRodHh8iUldZXnBxdHd4e5+kp6ustLW6vN7f5ebw8vP09fX6+/z9/v7+/pMxHZMAAAFbSURBVBgZBcFNThNhAADQ932dtsOktKVpKYaEjTvxECYkGhduMC64AuE4nsGYKGHpwjO4MjEuXCDqYkr5U/o3M0x9LwBa2UbStqwW8xIIoNUbvawaScTZ9K6CANnO6/NJGQZ7m/A+XyCge7z+eg2tp13w9p5IduziGsKw0VxWOElJtB4xhfRFh+3pTcb490PUfcMDFgcdGG6WHPXE1hgbGPeB3l8MGzF7ha2SLqBd4DCLG7C7V1gCygBZTCDsjFbnBXDVgiS24eb7XTv59AB3f/qQRih+LEgnH2fk30YR6mSJnzPYfZYxbt6CVayoJtB/nsFgdA9VXJAXqA4SYHNQYh7nZ/4FPE4B+jNO50k5Vddry30AzUGRTOuG8mK/09/qPgkAivsPl+tElW8jDwA0P+e1gM4Jl2EB4MuvGQHS8REA3uUrBNDoDQ8Bp9PbNQRAI8uStF5V83kN/Afai3sy4mNhxAAAAABJRU5ErkJggg==')}

If you want to replace inlined CSS you might have to use the !important keyword e.g.

body{background-color: #cde !important;}

Logos

I want to replace the logo on the account of one of my users.

With custom domain 

If your user has his own subdomain, you only need to upload your logo to the media section on your customer's account and add this fragment to your branding section.

Please note that for users without a custom domain, it is not possible to customize the logo of the login page.

body[domain="my-subdomain-com"] .branding-logo a img {
    content: url(https://my.subdomain.com/l/media?xxxxxxxxxx&fullsize=1);
}

Without custom domain

If your user does not have his own subdomain, you only need to upload your logo to the media section on your customer's account and add this fragment to  your branding section.

body[domain="username"] .branding-logo a img {
    content: url(https://your.subdomain.com/l/media?xxxxxxxxxx&fullsize=1);
}

More CSS resources can be found at W3 Schools or in our CSS & HTML Guide

Last update 9 months ago