This website uses necessary cookies to ensure that our website is ideally usable. We do not use cookies that process personal data without your prior consent. Read our Cookie Policy

How to add, remove or rearrange elements of my White Label account?

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

As administrator of a White Label account, you can fine-tune the look and feel of your instance from their Branding section by simply setting up some options and adding CSS code.

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.

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.

Inject Custom Code

Footer

Apply footer
Footer script injection section

Script examples

The following examples can be added and adjusted to match your needs:

Add an option to your users sidebar menu

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>");  
});

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>");
  });

Replace logo of extra user

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 of your account and add the following code to the Branding > Inject custom code > Header section.

<style>
.user-[username] .branding-logo a img {
    content: url(https://qrtracker.splashprinting.co.uk/l/media?f=ce679cb3feec6acbddb537bdab16a679&fullsize=1
);
}
</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.

#content {
  	/* Eliminates the minimum height of the content section*/
    min-height: unset;
}

IDEA: The "About me" field of the business card can be used to add some context to the landing page.

Move the call-2-action buttons to the top of your business card

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>
Last update 10 months ago