TrueFrame Widgets

Integrate TrueFrame reports seamlessly into your website.

Installation

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>
It's important to place this script right before the closing </body> tag, otherwise initial content may not be loaded correctly.

After including the above script on your webpage, you can start to add widgets - see below for available widget types.

Search Results Widget

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

Vehicle Display Page Widget

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

Widget Options

All options begin with the data-tf prefix. Any attribute without this prefix will be ignored.
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.

Implementation Examples

The below examples are merely pseudocode and should not be copied as-is.

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']);
}

<div>
{
this.vehicles.map(vehicle => {
return <div data-tf-type="tf360srp" data-tf-vin=`${vehicle.vin}`><div>
});
}
</div>
<div *ngFor="let vehicle of vehicles">
<div data-tf-type="tf360srp" data-tf-vin={vehicle.vin}><div>
</div>

Contact

Support Jim Nassar 754-301-2314 frank@trueframe.com
Brand Partnership Frank Lynch 754-301-2317 frank@trueframe.com

FAQ