Advanced tutorial - We only offer first level support on how to use the platform and its functionalities. Custom design, custom coding and third party integrations are not included in any of our plans.
CSS injection in your White Label account
You can embed you own CSS rules to fine-tune the look and feel of your White Label account Inject Custom Code > Header of your Branding section.
Header CSS injection section
Examples of CSS rules
Hide elements of the user interface for a specific user/s
You can hide elements/options for a specific user of your White Label instance via CSS. You need to target the element and add to the rule the class ".user-{username-in-lowercase}".
The example below would hide the option "Multi-country QR Code" for the user "John Doe".
<style>.user-john_doe #qr-menu-multi {display:none;}</style>
.user-john_doe #qr-menu-multi {
display:none;
}
</style>You can use your customer's logo on an extra account of a White Label plan. You only need to upload the image file to the Media section, copy the image URL and add the following code to the Branding > Inject custom code > Header section.
<style>.user-***usernamehere*** .branding-logo a img {
content: url(https://qr.yoursubdomain.com/l/media?f=ce679cb3feec6acbddb537bdab16a679&fullsize=14);}
</style>Resize the content section of a business card
You may want to use a business card only to display a set of call-2-action buttons. In this case, if you are not adding any content, that area will appear empty and it will take too much space.
You can adjust the minimum height of the content block by adding the following CSS rule on your Business Card > Branding section or use it in a CSS template.
<style>
#content {
/* Eliminates the minimum height of the content section*/
min-height: unset;
}
</style>IDEA: The "About me" field of the business card can be used to add some context to the landing page. You can also use
JS Code injection in your White Label account
If you want to go one step further and add your own contents and functionalities to your instance you can embed you own JS or jQuery scripts on the Inject Custom Code > Footer of your Branding section.
Script examples
The following examples can be added and adjusted to match your needs:
The following code will add a link to the sidebar of the users of your White Label account
$(document).ready(function(){
$("body[id^='uuser-'] div.menu ul.sub-menu").append(
"<li class='li-menu-extra'>
<a class='gray' href='https://google.com'>
<span class='qr-api-user'>My link</span>
</a>
</li>");
});Add a link to your users top bar
The following code will add a link to the top bar of the users of your White Label account.
$(document).ready(function(){
$("body[id^='uuser-'] a.account").after(
"<a href='https://google.com'>My link</a>");
});The following code will add a link at the beginning of the footer of the users of your White Label account.
$(document).ready(function(){
$("body[id^='uuser-'] #footer p.privacy").prepend(
"<a href='https://google.com'>My link</a>");
});The following code will add a link at the end of the footer of the users of your White Label account.
$(document).ready(function(){
$("body[id^='uuser-'] #footer p.privacy").append(
"<a href='https://google.com'>My link</a>");
});You can add the following code on the Branding > Custom Landing Page Footer to change the order of the elements of your business card. Only available on White Label plans.
<script>
$(".businesscard-container #footer").insertBefore(".businesscard-container #main");
</script>
<style>
#footer {margin:unset;
padding:5px 0;}
</style>When you login as an admin of a White Label account, our livechat widget will show at the bottom-right of the screen to provide first level support. You can easily hide/disable this widget entering the following JS code
<script>
window.Tawk_API.onLoad = function(){
window.Tawk_API.hideWidget();
};
</script>