Getting Started

As you read this page, we assume your account representative has already activated the domain from which you will send traffic in the system and provided you with the Whitelabel token.

The AVICA Whitelabel system is built on the financeServiceIo javascript object. The financeServiceIo client makes it easy to track essential measures on your website and render forms (loan applications).

info

To get started with the Finance Service Io Javascript client, you need to collect the Whitelabel token and your unique publisher id from the AVICA platform.

If your site is built with WordPress, we have made it easy to set up a Whitelabel using a plugin. Read here. Continue reading if you want a better understanding of how the technical aspects of the javascript client work.

Installation

Put the code snippet below in the header of your web page just before the </head> tag. The script loads asynchronously and will, therefore, not impact the load time of your website.

Remember to replace WHITELABEL-TOKEN with the corresponding token that you can get from the AVICA interface. Also, find your pubid and replace PUBLISHER-ID with it. This will not be needed in the future, but for compatibility, this is needed for now.

<script type='text/javascript'>
    (function(i,c,f,o,n,e)
    {i.financeServiceIo||(i.financeServiceIo=function(){
    financeServiceIo.queue.push(arguments)},financeServiceIo.queue=[],
    financeServiceIo.push=financeServiceIo,e=c.createElement(f),e.src=o,
    e.async=!0,n=c.getElementsByTagName(f)[0],n.parentNode.insertBefore(e,n))
    })(window,document,"script","https://tags.financeservice.io/main/main.min.js");                     

    financeServiceIo('init', 'WHITELABEL-TOKEN');
    financeServiceIo('setTrackingDefault', 'pubid', PUBLISHER-ID);
</script>

Tracking variables

The following tracking variables can be used in the URL to attribute and analyse your traffic and conversions.

pubid, pubidsub1, pubidsub2, pubidsub3, pubidsub4, pubidsub5 and pubid_reference

You can set default values for each of them the same way you defined the pubid default in the installation snippet. The defaults will only be used if the parameters are not present in the URL.

Render forms

Using the financeServiceIo client, you can render loan applications as iframes on your website. There are two ways to show forms on your website: programmatically or through a special HTML attribute with the form token.

Programmatically inserting the loan application gives you more control over when the form will load so that you can do it based on user behaviour, e.g. the user clicking on a button on the website. In most cases, the most straightforward integration will be through the use of HTML attributes described below.

HTML attributes

Adding the data-financeserviceio-form attribute to a DOM element will let the financeServiceIo client recognise that you want an iframe to be loaded inside the element. The attribute value should be the form token received from the AVICA system.

<div data-financeserviceio-form=''></div>

Programmatically

You can also use the financeServiceIo javascript client to render forms using a query selector as the target. Replace the #form-script query selector with your own target query. The prefill parameter is an object with field names as the key and values as prefill parameter. With this you can fill data into the form that you have already collected in the user journey e.g. through a page on your website.

The prefill object is optional.

<script>
financeServiceIo('renderForm', 'FORM TOKEN HERE', 'QUERY SELECTOR HERE', PREFILL);
</script>

Example

Will render a form with token yl5spR1faypqzYZjsroW in an HTML element with class .loan-application that is wrapped in a parent div element called #wrapper.

<script>
financeServiceIo('renderForm', 'yl5spR1faypqzYZjsroW', '#wrapper .loan-application', {
    amount: 150000,
    firstname: 'Jane',
    lastname: 'Doe',
    email: 'financeservice@example.com'
});
</script>

Common fields to prefill are: purpose, amount, firstname, lastname, email, phone. Reach out to your account manager for a comprehensive list of fields that are allowed to be prefilled.

Full Example

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        
        <title>financeServiceIo Demo</title>
    
        <script type='text/javascript'>
            (function(i,c,f,o,n,e)
            {i.financeServiceIo||(i.financeServiceIo=function(){
            financeServiceIo.queue.push(arguments)},financeServiceIo.queue=[],
            financeServiceIo.push=financeServiceIo,e=c.createElement(f),e.src=o,
            e.async=!0,n=c.getElementsByTagName(f)[0],n.parentNode.insertBefore(e,n))
            })(window,document,"script","https://tags.financeservice.io/main/main.min.js");         
            financeServiceIo('init', 'IUzXtCy8od8SSkr9MhC9');
        </script>    
    </head>  
    <body>
        <div id="wrapper">
            
            <h1>Hello World</h1>
            <p>Apply for a loan using the form below</p>
            
            <hr/>
            
            <div data-financeserviceio-form='tHtjH9roAnn7WEFHA3mo'></div>
        </div>
    </body>
</html>