fbpx

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

DefaultDescription
leasefalseSet to true to turn on the lease calculator.
rentalfalseSet to true to turn on the rental calculator.
loanfalseSet to true to turn on the loan calculator.
initIf you have multiple calculators enabled, then set init to either lease, rental or loan to set that calculator as active by default.
langen-caSet language to en-ca for English and fr-ca for French version of calculator.
colorblueUse hex color codes to set theme color of the calculator, e.g., 000000 for black; FF0000 for red; 00FF00 for green; etc.
logologo: { src: '' }Pass absolute URL path of your logo as a src to display your logo on the calculator.
applyfalseSet to true to enable the apply button on the calculator to allow your customers to apply for a lease with us.
pricing_breakdownfalseSet to true to display the pricing breakdown.
layoutverticalIf 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.