Wheel-Size Services

The working example below shows widget API in use:

Widget Code (please note that uuid parameter should be different for your own widget ):

<div>
    <h3 class="title-divider">
        <span>Custom <span class="de-em">Header</span></span>
    </h3>
    <div id="ws-widget"></div>
</div>
<script src="//services.wheel-size.com/code/ws-widget.js"></script>
<script>
  var widget = WheelSizeWidgets.create('#ws-widget', {
    uuid: '58d5fc75790440cf9c015bd7b257013d',
    width: '600'
  });
widget.on('ready:window', function(e) {
    $( "<p>Widget is loaded</p>" ).appendTo($( "#action-log" ));
});
widget.on('activate:search_by_model', function(e) {
    $( "#action-log" ).html("<p>Tab <b>by Vehicle</b> has been activated</p>");
});
widget.on('activate:search_by_tire', function(e) {
    $( "#action-log" ).html("<p>Tab <b>by Tire Size</b> has been activated</p>");
});
widget.on('activate:search_by_rim', function(e) {
    $( "#action-log" ).html("<p>Tab <b>by Rim Size</b> has been activated</p>");
});
widget.on('load:search_by_model', function(e) {
    $( "#action-log" ).html("<p><b>Result:</b></br />"+JSON.stringify(e.data.result, null, 4)+"</p>");
});
widget.on('change:make', function(e) {
    $( "#action-log" ).html("<p>Chosen Make: <b>"+e.data.value.title+"</b></p>");
});
widget.on('change:year', function(e) {
    $( "#action-log" ).html("<p>Chosen Year: <b>"+e.data.value.title+"</b></p>");
});
widget.on('change:model', function(e) {
    $( "#action-log" ).html("<p>Chosen Model: <b>"+e.data.value.title+"</b></p>");
});
widget.on('change:tire_width', function(e) {
    $( "#action-log" ).html("<p>Chosen Tire Width: <b>"+e.data.value.title+"</b></p>");
});
widget.on('change:aspect_ratio', function(e) {
    $( "#action-log" ).html("<p>Chosen Aspect Ratio: <b>"+e.data.value.title+"</b></p>");
});
widget.on('change:rim_diameter', function(e) {
    $( "#action-log" ).html("<p>Chosen Rim Diameter: <b>"+e.data.value.title+"</b></p>");
});
widget.on('change:rim_width', function(e) {
    $( "#action-log" ).html("<p>Chosen Rim Width: <b>"+e.data.value.title+"</b></p>");
});
widget.on('change:bolt_pattern', function(e) {
    $( "#action-log" ).html("<p>Chosen Bolt Pattern: <b>"+e.data.value.title+"</b></p>");
});
</script>