EconoLease French Header
Calculatrice
Connexion
Appliquez

embed our Calculator

To integrate EconoLease calculator on your site, you need to add jQuery/CSS, write HTML code and initialize the calculator.

Setting up your HTML

Create a  <div> tag on page where you want to display the calculator.

 
				
					<div id="econolease_calculator"></div>

Add Styles (optional)

Include styles in the head section or styles can be added just before the opening div(shown above). These styles are completely optional, but helpful for mobile responsiveness of the calculator. You can modify these styles according to your needs.

				
					<style>
    .embed-container {
    position: relative; padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
    }

    .embed-container iframe,
    .embed-container object,
    .embed-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    }
</style>

Add Scripts

Include jQuery and EconoLease calculator script before closing body tag. If you are already using jQuery on your website, then you don’t need to include it again.

				
					<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://apps.econolease.com/js/jquery.efs-calculator.min.js"></script>

Usage

				
					<script>
$('#econolease_calculator').efs({
 lease: true,
 rental: true,
 loan: true,
 init: 'lease',
 lang: 'en-ca',
 apply: true,
 color: 'blue',
 pricing_breakdown: true,
 layout: 'vertical'
});
</script>

Usage

Default Description
lease false Set to true to turn on the lease calculator.
rental false Set to true to turn on the rental calculator.
loan false Set to true to turn on the loan calculator.
init If you have multiple calculators enabled, then set init to either lease, rental or loan to set that calculator as active by default.
lang en-ca Set language to en-ca for English and fr-ca for French version of calculator.
color blue Use hex color codes to set theme color of the calculator, e.g., 000000 for black; FF0000 for red; 00FF00 for green; etc.
logo logo: { src: '' } Pass absolute URL path of your logo as a src to display your logo on the calculator.
apply false Set to true to enable the apply button on the calculator to allow your customers to apply for a lease with us.
pricing_breakdown false Set to true to display the pricing breakdown.
layout vertical If you have “pricing breakdown” enabled, then you have option to use vertical or horizontal layouts.

Need assistance in setting up the calculator? Please contact us.