How-to: Filter Your Embedded Trips On Your Website

Now that you've embedded your YouLi Trip Pages into your website, take the next step by allowing people to filter your Trips by a certain category (i.e. season, year, type of trip, etc.).

Important things to note

How to filter your embedded Trips on your website

1. Get your embed script

  • You should have code that looks a bit like this placed on your website:
<script src="https://youli.io/embeds/script/trips/mystic-adventures/?view=card&style=detailed"></script>

2. [OPTIONAL] Limit the number returned

  • This can be useful on the homepage or if you have limited space to highlight TRIPS and just want the Trips that are coming up soon (up to the limit) to be shown
  • In this example, the limit is 2, so only the first two trips with the nearest start date in the future, that are PUBLIC & LISTED (and match any TAGS below), will be shown
<script src="https://youli.io/embeds/script/trips/mystic-adventures/?view=card&style=detailed&limit=2"></script>
  • A number of 1 or greater is valid

3. Add the Tags parameter

  • Now let's say that you want to only show the "Adventure" trips on a particular page, use this script.
<script src="https://youli.io/embeds/script/trips/mystic-adventures/?view=card&style=detailed&tags=adventure"></script>
  • This will only show the TRIPS with TAGS of "Adventure". (You can set this on the OVERVIEW of the Trip when you edit it.)

4. Use a comma for more than one tag

If you want to only show the "Adventure" trips in Canada on a particular page, then add the "Canada" tag, separated by a comma

<script src="https://youli.io/embeds/script/trips/mystic-adventures/?view=card&style=detailed&tags=adventure,canada"></script>

Remember that this is AND logic, so the returned trips must have BOTH tags set:

  • Adventure
  • Canada

5. Make sure your Trips have the right Tags

  1. Click to your TRIP
  2. Click the PENCIL ICON to UPDATE TRIP
  3. Edit the list of TAGS shown to include
    • Adventure
    • Canada
  4. Click the SAVE button

Large_GIF__564x316_.gif

 

Real Example: Pristine Trails

See how to use tags to provide a convenient search/filter interface on your website.

Pristine Trails sells group treks to Kilimanjaro.

The most important elements to their travelers to find the perfect departure ate:

  1. What year
  2. What time of year
  3. Whether it is a full moon

YouLi developed a custom filter based on those tags

Any developer who knows Javascript can do the same for your website.

See it in action

Now all Pristine Trails has to do is make sure to tag their trips properly in YouLi and they are automatically shown in the search results on their website.

Pristine Trails, filter Kilimanjaro trips by tags

Need a Developer?

 


Need more help? 

Reach out to the YouLi support team via a chat box at the bottom of your screen or submit a ticket request. If you need more advanced support, schedule a 1:1 Consulting session with one of our experts, as we will walk you through the features and best practices.