New Vehicle Configurator Widget Quick Start



Get Widget Code

To get started, just use the configurator to get code to add to your site.

Settings:


How to Embed Widget

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

Example scenario:

  1. Insert the empty div to your page:

    <div id="nvcwidget"></div>
  2. Add the following JavaScript snippet to your page:

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

Widget Custom Events

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


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

(function(){

    // create 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.');
    });

}());

event_name - 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.


Events List

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.