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



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.