The TMV® Widget allows consumers to get an idea of how much a new car costs and how much an old car could be traded in for at the dealership. The TMV® price shown is always based on the base style of the vehicle selected. Options and colors adjustments aren’t taken into consideration.

You can use the widget configurator below to customize the layout and style of the widget, and grab a small snippet of code to insert into your HTML pages to implement the widget.

 
ATTRIBUTES
  • Vhicle API Key - the Key for Vehicle API registered on Edmunds Developer Portal
  • Theme - the theme for the Widget. Options: ‘Theme 1’, ‘Theme 2’, ‘Theme 3’.
  • Color Scheme - the color schemefor the Widget. Option: ‘Light’, ‘Dark’.
  • Layout - sets the layout of the Widget. Options: ‘Vertical’, ‘Horizontal’.
  • Width - sets the width of the Widget.
  • Include Border - inlude/exclude border in the Widget.
  • Border Radius - sets the size of the Border Radius.
  • Included Makes - the set of Makes to display in Makes dropdown.
  • Show vehicled - specifies what type of vehicles to display on widget. Options: ‘All’ - both new and used cars, NEW - only new cars, USED - only used cars.
  • Default Zip Code - the zip code to display by default in ZIP field.
  • Price to display - the set of prices to display. Depends from Show vehicles.

    • All or NEW - Options: ‘invoice, TMV and MSRP’, ‘Invoice and TMV’, ‘TMV only’.

    • USED - Options: ‘Tradein, PrivatePArty and Dealer Retail’, ‘Tradein and Dealer Retail’, ‘Dealer Retail only’.

  • Get Code - Instructions to embed TMV Widget on your page.

To embed the TMV Widget in your page, follow the instructions from Get Code popup.

Example scenario:

  1. Add the following JavaScript files to your page. It's preferable to add them at the bottom of your page for best page performance:

    <script src="http://tmv.herokuapp.com/js/edm/sdk.js"></script>
    <script src="http://tmv.herokuapp.com/js/edm/tmvwidget.js"></script>
  2. Create new instance of the Widget:

    var widget = new EDM.TMV('vc7cfrppxszkhbtu4zhy3gvd', {root: 'tmvwidget', baseClass: 'tmvwidget'});
  3. Widget initialisation:

    widget.init({"includedMakes":"acura,aston-martin,audi","price":"tmv-invoice-msrp","showVehicles":"ALL","zip":"90010"});
  4. Widget rendering:

    widget.render();
  5. Add the CSS files to your page. It's preferable to add them at the top of your page within the head tag:

    <link rel="stylesheet" href="http://tmv.herokuapp.com/css/simple-light.css">
    <style>
    .tmvwidget{-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;border-width:1px;width:248px;}.tmvwidget .tmvwidget-header{-webkit-border-top-right-radius:5px;-moz-border-radius-topright:5px;border-top-right-radius:5px;-webkit-border-top-left-radius:5px;-moz-border-radius-topleft:5px;border-top-left-radius:5px;}
    </style>

The TMV widget provides the following methods for working with custom events:


on() - Binds a callback function to an object. The callback will be invoked whenever the event is fired. (More details)

// External usage example:
widget.on('change:make', function(makeId) {
    // this code is executed when the change event is fired by the widget
});

// Internal usage example:
this.on('change:make', function(makeId) {
    // this code is executed when the change event is fired by the widget
});

off() - Removes a previously-bound callback function from an object. If no event name is specified, all callbacks will be removed. (More details)

// External usage example:
widget.off('change:make');

// Internal usage example:
this.off('change:make');

trigger() - Trigger callbacks for the given event. Subsequent arguments to trigger will be passed along to the event callbacks. (More details)

this.trigger('change:make', makeId);

Events

You can read the entire list of events here.