Embed a Vally Calendar on Your Website

You can embed one trip calendar or your complete Vally calendar on your website so customers can view availability and start a booking.

Individual Trips Calendar

Default Embed Code

To add the calendar, simply copy and paste the html code below on the desired page in your site.

<iframe
  style="width: 400px; height: 600px"
  src="https://book.vallypro.com/embed/trips/[tripId]/calendar">
</iframe>

• Replace [tripId] with the actual trip ID from your trip.
• The width and height can be adjusted if needed.
• The default calendar look will be applied:
• 

Customization Options

You can change the text and colors of the calendar by adding small pieces at the end of the link.

1. First, put a ? after the link
2. For each extra change, add an &
3. Example: https://book.vallypro.com/embed/trips/[tripId]/calendar**?title=Trips&titleColor=#FFFFFF&**background=#F5F5F5

Let’s break it down:

1. title=TitleHere → Changes the title text at the top of the calendar (To add empty spaces, type “%20” where you want the empty space to be: for example “Book Now” should be “Book**%20**Now”).
2. titleColor=#Color → Sets the color of the title text. Default is #FFFFFF(white).
3. background=#Color → Changes the background color of the calendar. Default is #F5F5F5 (light gray).
4. buttonColor=#Color → Sets the background color of the Done button. Default is #00AA00 (green).
5. buttonTextColor=#Color → Sets the text color of the button. Default is #FFFFFF(white).

Customized Example:

<iframe style="width: 400px; height: 600px"
  src="https://book.vallypro.com/embed/trips/[tripId]/calendar?title=Book%20Now&titleColor=#FFFFFF&background=#F5F5F5&buttonColor=#00AA00&buttonTextColor=#FFFFFF">
</iframe>

• Title: Book Now
• Title color: White (FFFFFF)
• Background color: Green (7BB246)
• Button color: Black (000000)
• Button text color: Orange/Yellow (FFB300)
• Result:
• 

Global Calendar

By default, the global calendar displays a list of all your trips in the embedded calendar. To add the default calendar, copy and paste the code below, replacing the “your-slug-here” with your slug from vally

<iframe sandbox="allow-forms allow-modals allow-scripts allow-popups allow-same-origin"
  src="https://book.vallypro.com/embed/your-slug-here" style="width: 400px; height: 680px;" />

An example of the default Global Calendar:

If you want the calendar to show only some of your trips:

1. Add service=trip_id_1 at the end of the link (replace trip_id with your trip ID.)
2. To show more than one, just repeat it: service=trip_id_1&service=trip_id_2&service=trip_id_3
3. Example: https://book.vallypro.com/embed/your-slug-here?service=trip_id_1&service=trip_id_2&service=trip_id_3