Tourseta widgets let you embed booking related elements directly on your website without custom development.
You can display tours, show departure dates, or add a quick booking button. All widgets are lightweight, easy to install, and fully connected to your Tourseta back office.
Reach out to your account manager if you need help setting up any widget.
Widget parameters
Below is a list of all available parameters that can be used across Tourseta widgets.
Some parameters are required depending on the widget type. Parameters that are not relevant for a specific widget will be ignored.
Parameter | Required | Description | Example |
| yes | Your Tourseta organization slug. This connects the widget to your account. |
|
| required for tour-specific widgets | Unique tour slug from your Tourseta admin. Used to load a specific tour. |
|
| yes (except tour list) | Defines widget behavior. Available values: |
|
| no | Environment setting. Use |
|
| no | Text displayed on the CTA button. |
|
| no | Button background color (hex code). |
|
| no | Button text color (hex code). |
|
| no | Custom title displayed above the tour list. |
|
| Required for brochure | Unique identifier for the brochure widget instance. |
|
Widgets
Tour list widget
Displays all published tours from your Tourseta account in a clean list layout. Ideal for landing pages or “Our tours” sections.
Code example
<script
async
src="https://cdn.tourseta.com/scripts/tours-widget.min.js">
</script>
<div
id="tourseta-widget"
class="tourseta-widget"
data-btn-color="#FF5F00"
data-btn-text="Book now"
data-btn-text-color="#fff"
data-organization="wandrove"
data-widget-title="Your best adventure is here"
></div>
Tour departure dates widget
Shows available departure dates for a specific tour. Useful when you want to send users directly into the booking flow for a selected date.
Code example
<script
async
src="https://cdn.tourseta.com/scripts/departures-widget.js">
</script>
<div
id="tourseta-widget"
class="tourseta-widget"
data-btn-text="Book now"
data-organization="Wandrove"
data-tour-slug="wandrove-safari-dreams-into-the-heart-of-the-wild-9"
data-type="departures"
data-env="production"
></div>
Book now button (pop-up)
Adds a customizable “Book now” button. When clicked, a pop-up opens with available dates and the booking flow.
Code example
<script
async
src="https://cdn.tourseta.com/scripts/departures-widget.js">
</script>
<div
id="tourseta-widget"
class="tourseta-widget"
data-btn-text="Book now"
data-organization="wandrove"
data-tour-slug="wandrove-safari-dreams-into-the-heart-of-the-wild-9"
data-type="button"
data-env="production"
></div>
Book now button (link)
A simple CTA button that redirects users directly to the booking page of a selected tour.
Code example
<script
async
src="https://cdn.tourseta.com/scripts/departures-widget.js">
</script>
<div
id="tourseta-widget"
class="tourseta-widget"
data-btn-text="Book now"
data-organization="tourseta"
data-tour-slug="wandrove-safari-dreams-into-the-heart-of-the-wild-9"
data-type="button-link"
data-env="production"
></div>
Download brochure widget
A simple CTA button that opens a modal to collect the traveler’s name and email in exchange for the trip itinerary or brochure.
Code example
<script
async
src="https://cdn.tourseta.com/scripts/departures-widget.js">
</script>
<div
id="tourseta-widget"
class="tourseta-widget tourseta-widget--brochure"
data-widget-id="brochure-1"
data-btn-text="Download brochure"
data-organization="tourseta"
data-tour-slug="tourseta-new-tour-244"
data-type="brochure"
data-env="production"
></div>