Implementing a Referral Button

A Referral Button is a button you can drop in your experience with a few lines of code to link to a Referral Page, while passing along additional information to kick-start the onboarding process.

Technical Skill Required

Low. Simply copy and paste the JavaScript below to get the standard button working. More effort is required to populate the variables with information about your customer.

Setup

Once a Referral Page has been implemented, the basic steps are:

Include the JavaScript library on the page.
Add the button.

Then optionally:

Pass along data about the customer to expedite their FundThrough onboarding (recommended).
(If you implemented a Referral Page:) Modify the page to handle the data provided.
Test the button to make sure it’s passing along all the information.
Style the button to match your look and feel.

1. Add the Button

Include the JavaScript library on the page:

				
					<script src="https://partnerstatic-staging.fundthrough.com/index-0.0.10.js"></script>

Add the button and assign it the following class:

				
					<button class="ft-referral-button">Get Paid Faster</button>

Enable the button:

				
					FTPayMeNow.enableReferralButton();

That will give you a basic button.

2. Pass Data to the Referral Page

Provide data via the button by adding data parameters.

The minimum required: name, last-name, email and phone

				
					<button class="ft-referral-button" 
            data-url="https://YOURPAGEURL/" 
            data-partner="spice"
            data-name="John"
            data-last-name="Doe"
            data-company-name="Your Customer Inc."
            data-email="johndoe@yourcustomer.inc"
            data-password="Pass123"
            data-phone="647-123-4567"
            data-address-street="123 Avenue"
            data-address-street-two="apt 123"
            data-address-province="Ontario"
            data-address-city="Toronto"
            data-address-postal-code="X0X0X0"
            data-address-country="CA"
        >Get Paid Faster</button>

Modify Your Referral Page

If the Referral Page has a Contact Form

If you implemented your own Referral Page, and you have a contact form on it, you can modify the page to populate the form with the data provided.

				
					document.addEventListener('DOMContentLoaded',() => {
        var params = new URLSearchParams(window.location.search);
        if (params.get("user_data") !== null) {
            userData = JSON.parse(atob(params.get("user_data")));
            // Pre-populate form fields with provided data
            document.getElementById("form-field-given_name").value = userData.name;
            document.getElementById("form-field-last_name").value = userData.last_name;
            document.getElementById("form-field-company_name").value = userData.company_name;
            document.getElementById("form-field-email").value = userData.email;
            document.getElementById("form-field-phone").value = userData.phone;
        }
    }

If the Referral Page does not have a Contact Form

If you implemented your own Referral Page, and you don’t have a form, you can simply pass along the provided data to FundThrough’s onboarding:

				
					var form = document.getElementById('SIGNUPFORMID');
form.addEventListener('submit', handleRedirect);
function handleRedirect(el) {
    var params = new URLSearchParams(window.location.search);
    window.location.replace('https://invoices.fundthrough.com/signup?user_data=${params.get("user_data")}&partner=PARTNERNAME');
}

ON THIS PAGE