To integrate Econolease calculator on your site, you need to add jQuery/CSS, write HTML code and initialize the calculator.
Create a <div> tag on page where you want to display the calculator.
<div id="econolease_calculator"></div>
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>
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>
<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>
| 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.