powering tour and activity businesses worldwide

Content Widgets

in Layout & Design

You can now post your tours on any website using a single line of JavaScript and/or custom css styling. The widget is very flexible and allows you display tours based on the following criteria:

  1. Specific tours (based on tour SKU).
  2. Tags (these are the tags that you assign to your tours)
  3. Smart (searches across all text based fields within the tour)

Widget Options

To install the default widget, copy and paste the following JavaScript code on your website or on your blog (remember to replace “yourdomain” with your actual Rezgo sub-domain:

<script type="text/javascript" src="http://yourdomain.rezgo.com/widget/javascript"></script>

This widget will display all your tours with default styling in a list similar to one on your default tour page.

  • show – The fields you want to display including image, details, name, location, and price
  • details_text – The label for the more details link (which leads to the tour details page)
  • key – This allows you to have multiple widgets on the same page. Set this to a numeric value that is unique for the widget. For example: 1,2,3, etc.
  • limit – The number of items to show per page. Default is 10 per page.
  • next_text – The label for the next page link.
  • prev_text – The label for the previous page link.
  • promo – The promo code you want to use when the customer clicks on the more details link.
  • ref – The referral code to use when the customer clicks on the more details link. This is useful for tracking referrals from partners, resellers, etc.

Styling Options

Each element in the widget has its own class or ID, which gives you the ability to control how each element is displayed using custom CSS styles. These styles can be customized for each widget on a page by using the following selectors …

  • .rezgo_widget – You can append a number to this class for each widget. For example if you have more than one widget, then use the key value and append it to the end. For example if a widget is key=1 then the class for that widget will be .rezgo_widget1.
  • .item – The container class for each tour displayed
  • .image – The tour thumbnail image container
  • .img_new – Class for thumbnails added in Rezgo version 6 or later
  • .img_old – Class for thumbnails added before Rezgo version 6
  • .tour_title – Tour name text class
  • .location – Location text class
  • .intro – Introductory text class
  • .price – Price text class
  • .btn-primary – Display class for the details button.
  • #widget-next – Display ID for the next page button.
  • #widget-prev – Display ID for the previous page button.

Remember to add your custom styles after the widget itself to successfully override the default styles.

Sample Widgets

Default widget set to 5 items per page.

<script type="text/javascript" src="http://sentiasinsects.rezgo.com/widget/javascript?key=1&limit=5"></script>

 

Default widget showing 3 items per page with tag “Adventure Tours”.

<script type="text/javascript" src="http://sentiasinsects.rezgo.com/widget/javascript?key=2&limit=3&t=tags&q=adventure+tours"></script>

 

Widget set to 3 items per page with a smart search for all items with the word adventure and display the next button with the label “more…”

<script type="text/javascript" src="http://sentiasinsects.rezgo.com/widget/javascript?key=3&limit=3&t=smart&q=adventure&next_text=more…&prev_text=…back"></script>

 

Widget set to show a specific item, in this case SKU:981, without price or details.

<script type="text/javascript" src="http://sentiasinsects.rezgo.com/widget/javascript?key=4&t=uid&q=981&hide=all&show=image,name,location"></script><style> .rezgo_widget4 .item { height: 100px; border: 0px; } </style>

 

We would love your feedback