Deutsch
English
Español
Português
ItalianoBranding your White Label account
- How to brand your White Label account
- 1. Go to the Branding section of your white label account
- 2. Set the look and feel of your account using CSS and JS
- 3. Use your own production subdomain
- 4. Use your own subdomain for the extra users of the White Label account (optional)
- 5. Use your own domain for the QR Code Short URL (optional)
- 6. Use your own domain for the email notifications (optional)
- 7. Regional settings - Custom languages
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.
2. Set the look and feel of your account using CSS and JS
Add your logo, favicon and use your own colors.
Branding
Colors
3. 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
4. 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.
5. 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.
6. 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.
7. 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.
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
