Embedding a widget is simple: just place the following script tag right before the closing </body> tag:
<script src="https://wow.trueframe.com/build/widget.min.js"></script>
After including the above script on your webpage, you can start to add widgets - see below for available widget types.
To be used on the search results page. Place the below markup in the location you want within each vehicle container. Be sure to set the VIN accordingly.
<div data-tf-vin="ENTER VIN HERE" data-tf-type="tf360srp"></div>
Below is how the widget will look
To be used on the vehicle display page; will show summary for the inspection on hover. Place the below markup in the location you want on the vehicle display page. Be sure to set the VIN accordingly.
<div data-tf-vin="ENTER VIN HERE" data-tf-type="tf360"></div>
Below is how the widget will look
Identifier | Required | Description |
---|---|---|
data-tf-vin | Yes |
The VIN that will be checked. |
data-tf-type | Yes |
The desired widget type to be returned. |
data-tf-popup | No |
When specified, the vehicle report will open in a new window, rather than a new tab. |
If using a rendering library like React, or framework like Angular, one way to prevent redundant requests during the rendering process is to conditionally hide a component, rather than conditionally rendering it. This way, the script doesn't have to make redundant requests for the same set of VINs, e.g. a user browsing the search results page clicks a vehicle, then returns to the search results page.
At a minimum, the script will attempt to batch VINs together to keep the number of requests small.
foreach($vehicles as $vehicle) {
echo sprintf('<div> data-tf-type="tf360srp" data-tf-vin="%s"></div>', $vehicle['vin']);
}
Support | Jim Nassar | 754-301-2314 | frank@trueframe.com |
Brand Partnership | Frank Lynch | 754-301-2317 | frank@trueframe.com |