Search Form Demo Pages A collection of useful examples you can play with
API Usage Example: Custom Links in Search Result
The working example below shows a widget with custom links in search results. It is used to integrate widget with your website. Please see documentation to see different options of usage.
Custom Header
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.registerUserLinks({
replaceTrim: {
href: 'http://www.wheel-size.com/size/{{ make.slug }}/{{ model.slug }}/{{ year.slug }}/',
title: '{{ trim }}'
},
beforeTrim: {
href: 'http://www.wheel-size.com/size/{{ make.slug }}/{{ model.slug }}/{{ year.slug }}/',
icon: 'plus',
title: '{{ make.title }} {{ model.title }} {{ year.title }} on wheel-size.com'
},
afterTrim: {
href: 'http://www.wheel-size.com/size/{{ make.slug }}/{{ model.slug }}/{{ year.slug }}/',
icon: 'plus',
title: '{{ make.title }} {{ model.title }} {{ year.title }} on wheel-size.com'
},
afterTire: {
href: 'http://www.example.com/?rim_diameter={{ rim_diameter }}&tire_sapect_ratio={{ tire_aspect_ratio }}&tire_width={{ tire_width }}',
icon: 'plus',
title: 'Example with GET Parameters in URL'
},
beforeTire: {
href: 'http://www.example.com/?rim_diameter={{ rim_diameter }}&tire_sapect_ratio={{ tire_aspect_ratio }}&tire_width={{ tire_width }}',
icon: 'plus',
title: 'Example with GET Parameters in URL'
},
replaceTire: {
href: 'http://www.example.com/?rim_diameter={{ rim_diameter }}&tire_sapect_ratio={{ tire_aspect_ratio }}&tire_width={{ tire_width }}/',
title: 'Tire {{ tire }} on wheel-size.com'
},
replaceRim: {
href: 'http://www.example.com/?rim_diameter={{ rim_diameter }}&rim_offset={{ rim_offset }}&rim_width={{ rim_width }}',
title: 'Rim for {{ make.title}} {{ model.title }} {{ trim}} is {{ rim }}'
},
beforeRim: {
href: 'http://www.example.com/?rim_diameter={{ rim_diameter }}&rim_offset={{ rim_offset }}&rim_width={{ rim_width }}',
icon: 'minus',
title: '{{ rim }}'
},
afterRim: {
href: 'http://www.example.com/?rim_diameter={{ rim_diameter }}&rim_offset={{ rim_offset }}&rim_width={{ rim_width }}',
icon: 'pencil',
title: 'Rim for {{ make.title}} {{ model.title }} {{ trim}} is {{ rim }}'
},
afterBoltPattern: {
href: 'http://www.example.com/?bolt_pattern={{ bolt_pattern }}',
icon: 'plus',
title: 'Bolt pattern for {{ make.title }} {{ trim }} {{ year.title }} is {{ bolt_pattern }}'
},
beforeBoltPattern: {
href: 'http://www.example.com/?bolt_pattern={{ bolt_pattern }}',
text: 'on site',
title: 'Bolt pattern for {{ make.title }} {{ trim }} {{ year.title }} is {{ bolt_pattern }}'
},
replaceBoltPattern: {
href: 'http://www.example.com/?bolt_pattern={{ bolt_pattern }}',
title: 'Bolt pattern for {{ make.title }} {{ trim }} {{ year.title }} is {{ bolt_pattern }}'
},
beforeThd: {
href: 'http://www.example.com/?thread-size={{ thd }}',
icon: 'pencil',
title: 'Thread size for {{ make.title }} {{ trim }} {{ year.title }} is {{ thd }}'
},
afterThd: {
href: 'http://www.example.com/?thread-size={{ thd }}',
text: 'on site',
title: 'Thread size for {{ make.title }} {{ trim }} {{ year.title }} is {{ thd }}'
},
replaceThd: {
href: 'http://www.example.com/?thread-size={{ thd }}',
title: 'Thread size for {{ make.title }} {{ trim }} {{ year.title }} is {{ thd }}'
},
beforeCb: {
href: 'http://www.example.com/?cb={{ cb }}',
icon: 'envelope',
title: 'Center bore for {{ make.title }} {{ trim }} {{ year.title }} is {{ cb }}'
},
afterCb: {
href: 'http://www.example.com/?cb={{ cb }}',
text: 'on site',
title: 'Center bore for {{ make.title }} {{ trim }} {{ year.title }} is {{ cb }}'
},
replaceCb: {
href: 'http://www.example.com/?cb={{ cb }}',
title: 'Center bore for {{ make.title }} {{ trim }} {{ year.title }} is {{ cb }}'
}
});
</script>