Documentation

Widget Documentation

Introduction

Putting Oodle widgets on your site is very simple:
  1. Choose the widget you want.
  2. Grab the "starter code" for that widget.
  3. Customize the widget by editing the starter code. Set widget parameters to get the UI and results that you want.
  4. Copy-and-paste that completed widget code onto your site.

Available Widgets

300x250 HTML - Medium Rectangle

Starter Code: 

<script type="text/javascript" src="https://i.oodleimg.com/js/widget/publisher/widget.js"></script>
<script type="text/javascript">
var opw = new OodlePublisherWidget('300','250','design','medrecthoriz');
opw.param['key'] = 'TEST';
opw.param['region'] = 'usa';
opw.render();
</script>

Required Widget Parameters

There are only two parameters that are required:

key

Required. The API key assigned to you by Oodle. It must be specified in every widget.
region
Required. A region is a metro area or an entire country. Each Oodle region has a unique string.

Possible values:
See the current list on the Regions List page.

UI Parameters

There are many parameters available to change the look and feel of the widgets:

fallback_img_src

the full SRC of a fallback image to display if there are no listings
• e.g. "http://www.foo.com/image/nolistings.gif"
fallback_img_link
where should a click on the fallback img take the user
• e.g. "http://www.foo.com"
font_family
what font should be used in the widget?
• e.g. "Arial"
footer_title
text to be displayed in the footer
• e.g. "Check out Foo.com for more!"
header_bg_color
hex value for the background color of widget header
• e.g. "#5688AD"
header_font_color
hex value for the color of the font in the widget header
• e.g. "#FFFFFF"
header_link
where should text in the header link to?
• e.g. "http://www.foo.com"
header_title
text to be displayed in the header
• e.g. "Stuff For Sale At Foo.com"
listing_bg_color
hex value for background color of each listing
• e.g. "#FFFFFF"
listing_contrast_font_color
hex value for contrast color in each listing
• e.g. "#AE3C3C"
listing_divider_color
hex value for color of borders around each listing
• e.g. "#DDDDDD"
listing_font_color
hex value for color of text in each listing
• e.g. "#000000"
listing_link_color
hex value for color of links in each listing
• e.g. "#0000FF"

Search Parameters

To specify which search results show up in the widget, use the parameter names and values on the "listings" method on our Oodle API.

For example, to get all Hondas within 5 miles of zip code 94401, you would set these parameters:
  • region = usa
  • location = 94401
  • radius = 5
  • category = vehicle/car
  • attributes = make_honda
In the widget, it would look like this: 

var opw = new OodlePublisherWidget('300', '250', design','medrecthoriz');
opw.param['key'] = 'TEST';
opw.param['region'] = 'usa';
opw.param['location'] = '94401';
opw.param['radius'] = '5';
opw.param['category'] = 'vehicle/car';
opw.param['attributes'] = 'make_honda';
opw.render();