Toyota

Add these dependencies to the head of your page.

<head>
    ...
    <link href="https://leasetools.toyota.nl/toyota/style.css" rel="stylesheet">
    <script src="https://leasetools.toyota.nl/toyota/main.js" type="text/javascript" defer></script>
</head>

Then add a LeaseTool component <div> with some configuration as described below somewhere in your page.

Faceting overview

demo

The basic LeaseTool component renders a Faceting overview.

<div data-component="LeaseTool"></div>
With dealer subset

demo

Add a data-prop-dealers attribute for dealers to only show a subset of dealers in the contact from.

<div data-component="LeaseTool" data-prop-dealers="108310,107710"></div>

Faceting for 1 model

demo

To create a model specific Lease Tool page, add 3 attributes.

<div data-component="LeaseTool"
    data-prop-model="aygo-x"
    data-prop-overview-url="https://www.toyota.nl/private-lease/index.json"
    data-prop-model-url="https://www.toyota.nl/private-lease/%model%.json"></div>