powering tour and activity businesses worldwide

Add Your Tours To Any Site Using Widgets

You can now post your tours on any website using a single line of javascript and/or custom css styling (if you’re feeling adventuresome). 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 follow 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, duration, 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.
  • page – The number of items to show per page
  • next_text – The label for the next page link (when pagination is enabled).
  • prev_text – The label for the previous page link (when pagination is enabled).
  • limit – Limits the number of items to display. This is a number such as 1,2,3,4,5 etc.
  • 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 item in the widget is controlled by its own class which means you have the ability to control how each item is displayed using a custom stylesheet.  This stylesheet can be customized for each widget on a page by using the following structure:

  • #rezgo_widget – 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 item displayed
  • #image – The tour thumbnail image class
  • #tour_title – Tour name text class
  • #duration – Duration text class
  • #location – Location text class
  • #intro – Introductory text class
  • #price – Price text class
  • #btn_details – Display class for the details button.
  • #next_btn – Display class for the Next page button.
  • #prev_btn – Display class for the Previous page button.

Sample Widgets

Default widget set to 2 items per page

<script type=”text/javascript” src=”http://amsterdamcitytours.rezgo.com/widget/javascript?key=1&page=2″></script>

Default widget showing 3 items per page with tag “Airport Transfers”.

<script type=”text/javascript” src=”http://amsterdamcitytours.rezgo.com/widget/javascript?key=2&limit=3&t=tag&q=airport+transfers”></script>

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

<script type=”text/javascript” src=”http://amsterdamcitytours.rezgo.com/widget/javascript?key=3&page=2&t=smart&q=cruise&next_text=more…&prev_text=…back”></script>

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

<style> #rezgo_widget5 #item { height: 100px; border: 0px; } </style> <script type=”text/javascript” src=”http://amsterdamcitytours.rezgo.com/widget/javascript?key=4&t=uid&q=3490&hide=all&show=image,name,duration,location”></script>

Widget set to show a specific item, in this case SKU: 3490, with price, name, and large thumbnail

<style>
#rezgo_widget5 #item {
border: 0px;
}
#rezgo_widget5 #item #image img {
height: 120px;
width: 120px;
border: 0px;
}
#rezgo_widget5 #item #price {
color: #FFCC00;
font-size: 20px;
}
#rezgo_widget5 #item #tour_title {
color: #666666;
font-size: 16px;
font-weight: bold;
}
</style>

<script type=”text/javascript” src=”http://amsterdamcitytours.rezgo.com/widget/javascript?key=5&t=uid&q=3490&hide=all&show=image,name,starting”></script>

These are just some examples of how the widgets may be formatted to suite your site and display purposes. As you build them out, feel free to share them with the us and we’ll feature your use of the widget on the site. As always, should you have questions, please feel free to post them on our customer forum over at http://support.rezgo.com.

Written by

Stephen is the CEO and Co-Founder of Rezgo. He has been working as a travel & tourism technology consultant since 1995. Stephen is active in fostering tourism technology and is a Past Chair of the OpenTravel Alliance. He is also a regular contributor for Tnooz, a leading travel technology media site, and speaks regularly at conferences around the Globe on travel & tourism technology, messaging standards, and industry trends.

14 thoughts on “Add Your Tours To Any Site Using Widgets

  1. Hi,am designing my website but problem is i cant see where to get a color theme,add sliding photo videos and use a font of my choice,The whole site looks so plain and ordinary.

  2. I have tried to install the widget to my page, but is not working. I just simply copy and paste the code and i have changed the page name to my own, but it doesnn´t work, Any idea?

  3. Hi Johan, Are you referring to the details links on the hosted booking engine? If so, then no, those can’t be redirected… however, the PHP/WordPress installs do allow you to completely customize the templates, layout, etc. so you can create more advanced personalized page layouts. You can, in fact, completely control the booking process and secure portions on your own website as well as long as you have a secure certificate installed. If you need more details, let us know at support@rezgo.com.

  4. Suggestion:
    it would be nice if there was a selector to direct the “details” link to an installed instance of rezgo PHP/WordPress. Then you could easily build quite advanced “personalized” page layouts just with widgets

    For the record, im a total Rezgo newbie so this may already be possible, if so please disregard my suggestion and kindly push me gently in the right direction 🙂

  5. I’m trying to customize the look of the details button in the Rezgo widget, but it’s not working. I can see a button border that matches the style I’m trying to create, but the dark blue default button with the text “details” hasn’t changed. There isn’t an example of how to style the #btn_details class. Can you provide one?

  6. Hello and thank you in advance for your assistance.

    Is there a master list of fields I can pass the widget?

    Also, is there a master list of CSS elements for the resulting list items?

    Thank you!

  7. We updated the code samples so that the curly quotes have been replaced with proper quotes. The code samples should work fine now. Just copy and paste the code and replace the domain with your domain.

  8. Hi Alfredo. My guess is that the quotes in the javascript are defaulting to the curly quotes instead of the straight quotes. I’ll send you the javascript in email and hopefully that will work. As an added note, I will ask the team to update the documentation to use text boxes so the quotes are correct.

  9. I’m tryning to install the widget in the html widget option in a wix page, but is not working. I jus simply copy and paste de code changing the page name to my own, but it desn´t work, Any idea??

    Thank u in advance,

    Alfredo

  10. Copy and paste the javascript code noted in the “Widget Options. Make sure you replace “yourdomain” with your actual domain name. You can then modify your widget using the parameters. We’re working on a generator that will make it easier.

  11. How do I install the widget?.. Or is it just code that is generated by clicking a button somewhere? Thanks

We would love your feedback