How-to: Customize The Trip Cards On YouLi Embed

If you want to change how the style of your Trip Card appears on your website, look no further! This can be as simple as a font change or as complicated as the example below.

CAUTION: This article assumes you have already installed the embed code. If you have not, be sure to start here: Integrate YouLi with your website.

Common Trip Card customizations to explore

See this help article for details on how to do the following customizations: How-to: Filter Your Embedded Trips On Your Website

1. Use TAGS to limit which trips are shown (allow your website visitors to filter the TRIPS embedded into your website) 

2. Limit the number of TRIPS shown 

Advanced customizations example code, using the default trip card styles

  • Notice that the image below is duplicated because the TRIPS have the same banner (this is a multiple departure date experience)
  • Also notice there is no SHARE SUMMARY set, leaving a large blank space

So in this case we want to

  1. Hide the image
  2. Change the gradient to a solid color
  3. Remove the share summary space
  <script src="https://trips.globalfamilytravels.com/embeds/script/trips/global-family-travels/?view=card&style=detailed&tags=street%20art"></script>

Screen_Shot_2021-08-08_at_5.12.17_pm.png

Using the customized Trip Card styles

  • In this case, we used this CSS to accomplish this goal. Your CSS may vary depending on the stylesheets on your website.
  • Be sure to include this in the HTML section when referencing the YouLi embed code.

CAUTION: You usually need media queries. Be sure to check your mobile version.

<p>
<script src="https://trips.globalfamilytravels.com/embeds/script/trips/global-family-travels/?view=card&style=detailed&tags=street%20art"></script>
</p>

<style>

.trip-card-details, .trip-card-wrapper.detailed h3 {
font-family: arial;
}

.trip-card-banner-image {
height: 80px;
}
.trip-card-banner-image img {
display: none;
visibility: hidden;
}

.trip-card-details {
height: 160px;
}
.trip-card-details-description {
display: none;
visibility: hidden;
}
.trip-card-details-footer {
position: relative;
top: -70px;
}
.trip-card-wrapper.detailed .trip-card-banner-image .gradient-overlay {
background-image: linear-gradient(to bottom,rgba(54,182,201,1),rgba(54,182,201,1))
}

@media (max-width: 767px) {
.trip-card-banner-image {
height: 100px;
}

.trip-card-wrapper.detailed h3 {
font-family: arial;
/* display: inline-block; */
margin: 10px 8px;
/* font-size: 18px !important; */
}
.trip-card-details-footer {
position: relative;
top: -10px !important;
}
.trip-card-details{
height: auto;
}

}
</style>


YouLi client example - Global Family Travels

Screen_Shot_2021-08-08_at_5.35.53_pm.png

Other customization ideas

  • With the right Developer, you can even implement filters and searches on the embedded content
  • Don't have your own Developer? Contact YouLi Support to purchase website integration support.

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.