---
title: "How-to: Javascript Examples to Dynamically Change the Embedded Trips on website or pass utm tracking codes to your trips"
description: Do you want to have a filter or other method of dynamically changing what trips are displayed on your website?
---

[Skip to content](https://support.youli.io/how-to-dynamically-change-the-embedded-trips-on-my-website#main-content)

[Open Ticket](https://support.youli.io/kb-tickets/new?hsLang=en) [Customer portal](https://support.youli.io/feature-request-tickets-view?hsLang=en)

[![YouLi Support](https://support.youli.io/hs-fs/hubfs/Logo%20White.png?width=100&height=75&name=Logo%20White.png)](https://support.youli.io/?hsLang=en)

- [Pricing](https://go.youli.io/pricing)
- [Book Demo](https://go.youli.io/youli-demo-videos)
- [Blog](https://blog.youli.io/)

Open main navigation

Close main navigation

- [Pricing](https://go.youli.io/pricing)
- [Book Demo](https://go.youli.io/youli-demo-videos)
- [Blog](https://blog.youli.io/)
- [Open Ticket](https://support.youli.io/kb-tickets/new)
- [Customer portal](https://support.youli.io/feature-request-tickets-view)
- [Open Ticket](https://support.youli.io/kb-tickets/new)

[Open Ticket](https://support.youli.io/kb-tickets/new?hsLang=en)

 How can we help you?

- There are no suggestions because the search field is empty.

1. [Help Center](https://support.youli.io/?hsLang=en)
2. [How-To](https://support.youli.io/how-to?hsLang=en)
3. [Website Integration](https://support.youli.io/how-to?hsLang=en#website-integration)

# How-to: Javascript Examples to Dynamically Change the Embedded Trips on website or pass utm tracking codes to your trips

## How-to: setup a filter to change what trips are displayed on your website & How-to: to ensure your utm tracking codes are passed through from your website

This article provides an example of how you can create a dynamic experience on your website that returns the Trips your customer is seeking based on the attributes you have defined.

These can be:

- Trip Tags
- Departure Date

[Learn more about all the filter options in the embed code (includes parameter definitions).](https://support.youli.io/4404616908175-how-to-filter-your-embedded-trips-on-your-website?hsLang=en)

See the example below for how this was [achieved with Pristine Trails](https://pristinetrails.com/kilimanjaro/group-treks/)

<iframe data-hsv-src="https://play.hubspotvideo.com/v/4545741/id/106708342045" referrerpolicy="origin" sandbox="allow-forms allow-scripts allow-same-origin allow-popups" allow="autoplay; fullscreen;" style="position: absolute !important; width: 100% !important; height: 100% !important; left: 0; top: 0; border: 0 none; pointer-events: initial" title="HubSpot Video" loading="lazy" data-hsv-id="106708342045" data-hsv-style="" data-hsv-width="688" data-hsv-height="408" data-hsv-autoplay="false" data-hsv-loop="false" data-hsv-muted="false" data-hsv-hidden-controls="false" data-hsv-full-width="false"></iframe>

### Code Sample

This will need to be adjusted based on your site styles and desired behavior.

```
<style>    #load {        width: 48px;        height: 48px;        border: 5px solid #b8905e;        border-bottom-color: transparent;        border-radius: 50%;        display: inline-block;        box-sizing: border-box;        animation: rotation 1s linear infinite;    }    @keyframes rotation {        0% {            transform: rotate(0deg);        }        100% {            transform: rotate(360deg);        }    }    @media only screen and (max-width: 768px) {        .trip-card-wrapper.detailed h3 a {            font-size: 15px !important;        }        .trip-card-wrapper.detailed {            margin-left: 0px !important;            margin-right: 0px !important;        }    }</style><div>    <div>        <h3>Use the dropdowns to filter trips by year, month and moon cycle</h3>    </div>    <div>        <select id="trip-switch-dropdown" class="trip-switch-filter" onchange="switchDropdown()">            <option value="">All Years</option>            <option value="2023">2023</option>            <option value="2024">2024</option>        </select>    </div>    <div>        <select id="trip-switch-dropdown" class="trip-switch-filter" onchange="switchDropdown()">            <option value="">All Months</option>            <option value="Jan-Mar">Jan-Mar</option>            <option value="Apr-Jun">Apr-Jun</option>            <option value="Jul-Sep">Jul-Sep</option>            <option value="Oct-Dec">Oct-Dec</option>        </select>    </div>    <div>        <select id="trip-switch-dropdown" class="trip-switch-filter" onchange="switchDropdown()">            <option value="">All Moon Cycles</option>            <option value="Full Moon">Full Moon</option>        </select>    </div></div><div>    <div style="text-align: center;">        <div id="load"></div>    </div>    <div id="placeholder-search-results">&nbsp;</div></div><script>    function loadScript(el, o) {        return new Promise((resolve) => {            let script = document.createElement("script");            script.onload = () => {                document.getElementById('load').style.visibility = "hidden";                resolve();            };            script.src = o.src;            console.log(script);            el.appendChild(script);        });    }    function switchDropdown() {        document.getElementById('load').style.visibility = "visible";        var dropdown = document.getElementsByClassName("trip-switch-filter");        var selectedValue = [];        var dropdownArray = [...dropdown]        for (let i = 0; i < dropdownArray.length; i++) {            var val = dropdownArray[i].options[dropdownArray[i].selectedIndex].value;            // for(let j = 0; j < )            if (val !== "") {                selectedValue.push(val);            }        }        console.log(selectedValue);        reloadTrips(selectedValue);    }    function reloadTrips(tags) {        tags = tags || [];        // Clear search results from page        var el = document.getElementById('placeholder-search-results');        el.innerHTML = '';        // Fetch new search results and render on page        // Get this from the SHARE TRIP LINK -> INTEGRATE WITH WEBSITE        var baseUrl = 'https://youli.io/embeds/script/trips/[your-team-alias-here]/?view=card&style=detailed&tags=';                var tagsAsQueryString = tags.map(function (tag) {            // return encodeURI(tag);            return tag;        }).join(',');        loadScript(el, {            // src: baseUrl + (tagsAsQueryString ? "set-departure,"+tagsAsQueryString : "set-departure")            src: baseUrl + tagsAsQueryString        }).then(() => {                setupYouLiCardDropdownsEvents();    // a function from the YouLi embed script            });;    }    // When user selects from dropdown reload search results    // var dropdown = document.getElementById('trip-filter-dropdown');    // dropdown.addEventListener('change', function (event) {    //     reloadTrips([{ text: event.target.value }])    // });    // Load all trips to start with    reloadTrips();    // }());</script>
```

### Where to get baseURL

1. On any trip or from the dashboard, click to SHARE TRIP LINK
2. Click to INTEGRATE WITH WEBSITE
3. Click to copy next to EMBED ALL LISTED TRIPS![](https://support.youli.io/hs-fs/hubfs/Screenshot%202023-03-16%20at%204-11-15%20pm-png.png?width=346&height=86&name=Screenshot%202023-03-16%20at%204-11-15%20pm-png.png)
4. Get the URL referenced in the script tags, in bold in code block below

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

**NOTE:** In the src URL the domain is "youli.io", but this would be replaced with your [white label domain](https://support.youli.io/4405271268495-white-label-domain-custom-domain-masking-on-youli-io?hsLang=en) if you have that configured. For example: "trips.runwildretreats.com"

### Passing UTM Affiliate tracking

If you want to pass through affiliate tracking from your website to your trip pages, be sure to include the **utm\_medium=affiliate&utm\_source=\[affiliate-code\]**

You'll need javascript to pick up the right parameter from the URL and append it to the base URL.

[Learn more about how to pass utm tracking parameters](https://support.youli.io/passing-utm-affiliate-tracking-from-landing-page?hsLang=en)

- [Get Started](https://support.youli.io/get-started?hsLang=en#main-content)

    - [Checklists](https://support.youli.io/get-started?hsLang=en#checklists)
    - [Setting up your account](https://support.youli.io/get-started?hsLang=en#setting-up-your-account)
    - [Setting up your Trip Page](https://support.youli.io/get-started?hsLang=en#setting-up-your-trip-page)
    - [Video Tutorials](https://support.youli.io/get-started?hsLang=en#video-tutorials)
    - [Trip Registration](https://support.youli.io/get-started?hsLang=en#trip-registration)
    - [Emails](https://support.youli.io/get-started?hsLang=en#emails)
    - [Packages & Installments](https://support.youli.io/get-started?hsLang=en#packages-installments)
    - [Payments](https://support.youli.io/get-started?hsLang=en#payments)
    - [Adding & Managing People](https://support.youli.io/get-started?hsLang=en#adding-managing-people)
    - [Starter Website](https://support.youli.io/get-started?hsLang=en#starter-website)
- [How-To](https://support.youli.io/how-to?hsLang=en#main-content)

    - [Technology Partners](https://support.youli.io/how-to?hsLang=en#technology-partners)
    - [API](https://support.youli.io/how-to?hsLang=en#api)
    - [Reports](https://support.youli.io/how-to?hsLang=en#reports)
    - [YouLi Plan Add-ons](https://support.youli.io/how-to?hsLang=en#youli-plan-add-ons)
    - [Affiliates](https://support.youli.io/how-to?hsLang=en#affiliates)
    - [Payments](https://support.youli.io/how-to?hsLang=en#payments)
    - [Video Tutorials](https://support.youli.io/how-to?hsLang=en#video-tutorials)
    - [Website Integration](https://support.youli.io/how-to?hsLang=en#website-integration)
    - [Mobile App](https://support.youli.io/how-to?hsLang=en#mobile-app)
    - [White Label App](https://support.youli.io/how-to?hsLang=en#white-label-app)
    - [Account Roles](https://support.youli.io/how-to?hsLang=en#account-roles)
    - [Tasks](https://support.youli.io/how-to?hsLang=en#tasks)
    - [Packages](https://support.youli.io/how-to?hsLang=en#packages)
    - [Highlights, Itinerary & Optional Add-ons](https://support.youli.io/how-to?hsLang=en#highlights-itinerary-optional-add-ons)
    - [Invitation Groups](https://support.youli.io/how-to?hsLang=en#invitation-groups)
    - [Coupons](https://support.youli.io/how-to?hsLang=en#coupons)
    - [Trip Page Menu](https://support.youli.io/how-to?hsLang=en#trip-page-menu)
    - [Integrating Cruise Deck Plans](https://support.youli.io/how-to?hsLang=en#integrating-cruise-deck-plans)
    - [Managing Trip Dashboard](https://support.youli.io/how-to?hsLang=en#managing-trip-dashboard)
    - [Emails](https://support.youli.io/how-to?hsLang=en#emails)
    - [Bookings](https://support.youli.io/how-to?hsLang=en#bookings)
    - [Managing People](https://support.youli.io/how-to?hsLang=en#managing-people)
    - [Registration](https://support.youli.io/how-to?hsLang=en#registration)
    - [PDF Confirmation](https://support.youli.io/how-to?hsLang=en#pdf-confirmation)
    - [Documents](https://support.youli.io/how-to?hsLang=en#documents)
    - [Billing](https://support.youli.io/how-to?hsLang=en#billing)
- [New Features](https://support.youli.io/new-features?hsLang=en#main-content)

    - [Recent Releases](https://support.youli.io/new-features?hsLang=en#recent-releases)
    - [Past Releases](https://support.youli.io/new-features?hsLang=en#past-releases)
- [Enterprise Clients](https://support.youli.io/enterprise-clients?hsLang=en#main-content)

    - [Enterprise Onboarding](https://support.youli.io/enterprise-clients?hsLang=en#enterprise-onboarding)
    - [Enterprise-only Features](https://support.youli.io/enterprise-clients?hsLang=en#enterprise-only-features)
- [FAQ](https://support.youli.io/faq?hsLang=en#main-content)

    - [Data Security](https://support.youli.io/faq?hsLang=en#data-security)
    - [Payments](https://support.youli.io/faq?hsLang=en#payments)
    - [YouLi Account](https://support.youli.io/faq?hsLang=en#youli-account)
    - [Emails](https://support.youli.io/faq?hsLang=en#emails)
    - [Managing People](https://support.youli.io/faq?hsLang=en#managing-people)
    - [Packages](https://support.youli.io/faq?hsLang=en#packages)
    - [YouLi Subscription Plans](https://support.youli.io/faq?hsLang=en#youli-subscription-plans)
    - [Tasks](https://support.youli.io/faq?hsLang=en#tasks)
- [Reporting](https://support.youli.io/reporting?hsLang=en)
- [YouLi User Roles](https://support.youli.io/youli-user-roles?hsLang=en)
- [For Travelers](https://support.youli.io/for-travelers?hsLang=en)
- [Partners](https://support.youli.io/partners?hsLang=en)
- [Upcoming Features](https://support.youli.io/upcoming-features?hsLang=en)
- [Incidents](https://support.youli.io/incidents?hsLang=en)
- [Contact Us](https://support.youli.io/contact-us?hsLang=en)

[![YouLi Marketing Site](https://support.youli.io/hs-fs/hubfs/Logo%20Default.png?width=55&height=24&name=Logo%20Default.png "YouLi Marketing Site")](https://go.youli.io)

### Need more help?

Reach out to the YouLi Support team via the **Chat** icon at the bottom-right corner of your screen:

![Screenshot 2026-07-22 at 12.27.38 PM](https://support.youli.io/hs-fs/hubfs/Screenshot%202026-07-22%20at%2012.27.38%20PM.png?width=268&height=111&name=Screenshot%202026-07-22%20at%2012.27.38%20PM.png)

or [submit a Support Ticket.](https://support.youli.io/kb-tickets/new?hsLang=en)

<https://www.facebook.com/youlivetotravel> <https://www.instagram.com/youlivetotravel> <https://www.youtube.com/youlivetotravel> <https://www.linkedin.com/company/youlivetotravel/>

Copyright © 2025, YouLi Travel Pty. Ltd

```json
{
  "@context" : "https://schema.org",
  "@type" : "VideoObject",
  "contentUrl" : "https://4545741.fs1.hubspotusercontent-na1.net/hubfs/4545741/pristine-filter-clipped.mp4",
  "dateModified" : "2023-03-16T05:05:39.254Z",
  "duration" : "PT9S",
  "height" : 648,
  "name" : "pristine-filter-clipped",
  "thumbnailUrl" : "https://support.youli.io/hubfs/pristine-filter-clipped.mp4/medium.jpg",
  "uploadDate" : "2023-03-16T05:05:31.968Z",
  "width" : 1092
}
```