Embedded Trip Card Styles

Learn how to add more visibility, stronger call to action, and extra SEO points to promote your public group trips! 

 

YouLi allows Public Listed Trips to be embedded on ANY website. Learn more about integrating YouLi Trips with websites.

Trip Card Styles

There are a few options when you embed Trip Cards on a website.

Under the INTEGRATE WITH WEBSITE section of the SHARE TRIP popup, you can select your base style:

1. Classic - The original design includes
   • Location above the banner image
   • Name of the Trip Owner with their avatar image in the upper right
   • Banner image (resized)
     • Clickable to take the traveler to the Trip Page
   • Trip Name below the image
   • Trip Dates + Trip Duration on one line
   • Trip Price
     
     
     
2. Detailed - Designed in 2021 to include more information
   
   • Banner image (resized)
     • Mask applied to make Trip Name more visible
     • Clickable to take the traveler to the Trip Page
   • Trip Name overplayed on the image
   • Location below the banner image
   • Trip Dates + Trip Duration on one line
   • Trip Share Summary
   • Call to Action button
     • Clickable to take the traveler to the Trip Page
     • Color is set by the Trip Owner's brand color
   • Link to Itinerary if visible
     
     • Clickable to take the traveler to the Itinerary section of the Trip Page
   • Trip Price

Plug N Play Website - Trip Card Styles

If your website is hosted by YouLi as a Plug N Play Website, then the embedded trips will show using the Detailed style.

Advanced Configuration Options

The code to embed your trips onto your website looks a bit like this:

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

If you are comfortable to edit this code, you can adjust it to add a few advanced configuration options. 

NOTE: These are examples, DO NOT USE these snippets, get the code from your trip as shown here.

Change the Call to Action for the button

Add the parameter:

• Name = ctatext
• Value = URL encoded string to be displayed on the button
• If not provided: defaults to the Yes button label set on the Trip

<script src="https://youli.io/embeds/script/trips/mystic-adventures/?view=card&style=detailed&ctatext=BOOK%20NOW"></script>

Change the text for the Itinerary link

Add the parameter:

• Name =itineraryLabel
• Value = URL encoded string to be displayed as the clickable text for the Itinerary
• If not provided: defaults to the Itinerary menu label set on the Trip

<script src="https://youli.io/embeds/script/trips/mystic-adventures/?view=card&style=detailed&itineraryLabel=View%20Details"></script>

Change the style of the card

Add the parameter:

• Name =style
• Value = URL encoded string to select the display style
• If not provided: defaults to the "classic" style

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

Need to go further? Use CSS

With the right skills you can modify the styles even further, here's an example.