Estimator Tool

Updated on 17 Oct 2024
3 Minutes to read

Dark
Light

Article summary

Did you find this summary helpful?

Thank you for your feedback

Get an Estimate as As You Shop

⚠️ Note that the Estimator Tool (also referred to as pre-qual in some of the below documentation) is not available by default. Please contact your account manager to inquire about this feature and for any relevant configuration or modal customizations.

The Estimator Tool allows your customers to obtain an estimate of their available credit with Uplift to increase their confidence of being able to purchase what matters most to them. Integrating it into your platform is easy and raises customer visibility for this new payment option.

Insert an HTML node with the data-up-prequal attribute on the desired page, view the example below.

<div style="display: none" data-up-prequal>
   //HTML Markup for the merchant specific widget detailing Uplift and Prequalification
   //Clicking this widget will launch Uplift Prequalification Modal and application 
</div>

In order to increase visibility of this feature and direct your customers, you can implement widgets/banners like the ones below.

Additional features - prequal - banner 1

📘 Important items to note

Estimator Tool widgets are only available on non-payment pages.
The Estimator Tool HTML node should be included in the DOM before you load and initialize the Uplift library; however, it will be hidden until it is ready to be displayed to your customers.

Next, load and initialize the Uplift Payments library (only if you haven’t done so already) on the current page as shown below, substituting they keys listed in the REPLACE comment and UP code as per requirements.

(function (u, p, l, i, f, t, o, b, j) { u['UpLiftPlatformObject'] = f; u[f] = u[f] || function () { (u[f].q = u[f].q || []).push(arguments) }, u[f].l = 1 * new Date(); b = p.createElement(l), j = p.getElementsByTagName(l)[0]; b.async = 1; b.src = i + '?upcode=' + t; j.parentNode.insertBefore(b, j); o = u.location.host.match(/[\w-]+\.\w{2,3}(:\d+)?$/); if (o) o = o[0]; u[f]('create', t, o) })(window, document, 'script', 'https://tag.uplift.com/external/up.js', 'up', 'UP-XXXXXXXX-XX');

// initializing the library
function initPayMonthly() {
  window.console.log("Initializing Uplift Payments...");
  window.Uplift.Payments.init({
    // REPLACE: locale, currency, and channel values should be replaced
    locale: "en-US", // "en-CA", "fr-CA"
    currency: "USD", // "CAD"
    checkout: false,
    channel: "desktop"
  });
}

Then, define the window.upReady function, it should contain your integration logic and it will be executed when up.js is loaded in the browser.

⚠️ Unlike all other nodes, such as pricing nodes and and the up-pay-monthly-container in checkout where our library (Payments.js) handles when a node shows and when it does not, the pre-qual node needs to be shown manually by the developer.

window.upReady = function() { 
    // Call initPayMonthly
    initPayMonthly(); 
    // Call Uplift.Payments.load
    window.Uplift.Payments.load(); 
    // Show the node that will trigger Uplift's Pre-qual modal
    document.querySelector("[data-up-prequal]").style.display = "block"
}

📘 In case the page does not have from prices, the function can be executed without parameters: window.Uplift.Payments.load();.
If the page contains From Pricing Nodes, it is necessary to execute the function with the Order Object Information as parameter: window.Uplift.Payments.load(orderInfo);

Test if the Estimator Tool integration worked by clicking on the element with the data-up-prequal attribute, this should display a modal similar to the one shown below.

Additional features - prequal - modal

Please reach out to your account manager to configure the language in the modal to best fit your needs.

Callback when the user is done with the Estimator Tool

Partners can add a callback to action off once the customer has completed the estimator tool and clicks on the button on the final page.

Additional features - prequal - qualified button

Inside window.Uplift.Payments.init, pass a function called onUserActionCallback.

// callback when the user is done with the Estimator Tool
function onUserActionCallback(data) {
  window.console.log('onUserActionCallback: ', data);
}
// initializing the library
function initPayMonthly() {
  window.console.log("Initializing Uplift Payments...");
  window.Uplift.Payments.init({
    locale: "en-US",
    currency: "USD",
    checkout: false,
    channel: "desktop",
    onUserActionCallback
  });
}

The data received by this callback will be {action: "continue-shopping"} to indicate the user has clicked the button on the final page of the tool.

Estimation Outcome

Uplift is unable to provide any additional information regarding the outcome of the estimation due to the confidentiality of the information.

Was this article helpful?

What's Next

Promotional Financing

Table of contents