Tell the widget what car make/model/year you’re interested in and it will tell you all that Edmunds.com knows about it including its car rating grade, consumer reviews, Edmunds.com Editorial review, Road Test articles, dealers selling it in the area, etc.

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
  • API Key - the Key for API registered on Edmunds Developer Portal
  • Width - sets the width of the Widget.
  • Default Zip Code - the zip code to display by default in ZIP field.
  • Get Code - Instructions to embed at a Glance Widget on your page.

To embed at a Glance 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="atglancewidget"></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-glance.js"></script>
    <script type="text/javascript">
    (function(){
        var widget = EDM.createWidget({
        "type": "glance",
        "renderTo": "atglancewidget",
        "style": {
            "width": "250",
            "height": "630"
        },
        "scripts": [
            "/libs/requirejs/require.js\" data-main=\"http://widgets.edmunds.com/glance/js/main.js"
        ],
        "options": {
            "apiKey": "axr2rtmnj63qsth3ume3tv5f",
            "make": "acura",
            "model": "ilx",
            "year": "2016",
            "submodel": null,
            "zipCode": "12345",
            "tabsList": [
                "rating-tab",
                "edmunds-says-tab",
                "consumer-reviews-tab",
                "tco-tab",
                "photos-tab"
            ]
        }
    });
    }());
    </script>

At a Glance 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 instance of the widget
    var widget = EDM.createWidget(/* configured options here */);

    // subscribe to the event
    widget.on('vehicle.style.select', function(styleId, styleName) {
        console.log(styleName + ' was selected.');
    });

}());
                

vehicle.style.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.style.select', function(styleId, styleName) {
    _gaq.push(['_trackEvent', 'Edmunds At Glance Widget', 'Select a Style', styleName]);
});
                    

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

LIST OF EVENTS
Event Callback Params Description
vehicle.style.select styleId styleName This event is fired when vehicle style is selected.
zip.update zipCode This event is fired when zip code is updated.
tab.click tabName This event is fired when navigation tab is clicked.
photos.type.click photosType This event is fired when photos type is changed.
next.review.click Has no params This event is fired when next navigation button on the Consumer Reviews tab is clicked.
prev.review.click Has no params This event is fired when previous navigation button on the Consumer Reviews tab is clicked.
list.review.click Has no params This event is fired when full list of reviews button on the Consumer Reviews tab is clicked.