other widgets and apps

The New Vehicle Configurator Widget

/ Setup
Widgets and apps  
 
ATTRIBUTES

  • Vhicle API Key - the Key for Vehicle API registered on Edmunds Developer Portal

  • Dealer API Key - the Key for Dealer 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’..

  • Width - sets the width of the Widget.

  • Include Border - include/exclude border in the Widget.

  • Border Radius - sets the size of the Border Radius.

  • Tabs to display - configures tabs to display.

  • Included Makes - the set of Makes to display in Makes dropdown.

  • Default Zip Code - the zip code to display by default in ZIP field.

  • Dealer Keywords - keywords by which we filter the list of dealers to show only the ones whose title matches one of the keywords.

  • Get Code - instructions to embed Vehicle Widget on your page.

To embed Vehicle Widget on your page just follow the instructions from Get Code popup.

Example scenario:

  1. You need an empty div on your page to house the widget:

    <div class="nvcwidget"></div>

  2. Add the following JavaScript snippet to your page. It's preferably to add at the bottom of your page for best page performance:

    <script type="text/javascript" src="http://widgets.edmunds.com/loader.js"></script>
<script type="text/javascript">
(function(){
    var widget = EDM.createWidget({
        "type": "nvc",
        "renderTo": "nvcwidget",
        "debug": true,
        "style": {
            "width": 250,
            "height": 890,
            "theme": "simple",
            "color": "light",
            "border": "1px",
            "borderRadius": "5px"
        },
        "options": {
            "vehicleApiKey": "axr2rtmnj63qsth3ume3tv5f",
            "dealerApiKey": "axr2rtmnj63qsth3ume3tv5f",
            "includedMakes": "bmw",
            "dealerKeywords": "",
            "zipCode": "10001",
            "tabs": {
                "tab1": "Configure",
                "tab2": "TMV®",
                "tab3": "Price Quotes"
            }
        }
    });
}());
</script>

New Vehicle Configurator Widget provides the next method for subscription to the widget events:


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

(function(){

    // create an instance of the widget
    var widget = EDM.createWidget(/* configured options here */);

    // subscribe to the event
    widget.on('vehicle.make.select', function(makeId, makeName) {
        console.log(makeName + ' was selected.');
    });

}());

vehicle.make.select - this is one event of the widget. All list of events is below.

This method is very useful if you would use Google Analytics or another tracking system for the widget. For example:

// subscribe to the event
widget.on('vehicle.make.select', function(makeId, makeName) {
    _gaq.push(['_trackEvent', 'Edmunds NVC Widget', 'Select a Make', makeName]);
});

Where _gaq is an instance of Google Analytics in your page.

LIST OF EVENTS
Event Callback Params Description
vehicle.make.select makeId makeName This event is fired when vehicle make is selected.
vehicle.model.select modelId modelName This event is fired when vehicle model is selected.
vehicle.year.select yearId yearName This event is fired when vehicle year is selected.
vehicle.style.select styleId styleName This event is fired when vehicle style is selected.
vehicle.feature.select featureId This event is fired when vehicle feature is selected.
vehicle.feature.deselect featureId This event is fired when vehicle feature is unselected.
dealer.select dealerId This event is fired when dealer is selected.
dealer.deselect dealerId This event is fired when dealer is unselected.
zip.update zipCode This event is fired when zip on the first tab is changed.
ziplocation.update zipCode This event is fired when zip on the second tab is changed.
zipmi.update zipCode radius This event is fired when zip on the third tab is changed.
successdialogbtn.click Has no params This event is fired when button in the success dialog is clicked.
tab1.click Has no params This event is fired when first tab is clicked.
tab2.click Has no params This event is fired when second tab is clicked.
tab3.click Has no params This event is fired when third tab is clicked.
nextbtn1.click Has no params This event is fired when next button on the first tab is clicked.
nextbtn2.click Has no params This event is fired when next button on the second tab is clicked.
submitbtn.click Has no params This event is fired when submit button on the third tab is clicked.