How to add a tour booking widget to WordPress or any website
Put your tours and online booking on your own website, with the free WordPress plugin or an HTML snippet. You need access to edit your website, and online payments set up so visitors can pay.
The booking widget at a glance
Try it in the booking demo. A TourTask website has the booking widget built in.
Live availability
Checked in real time as visitors book.
Always up to date
Tours and prices load straight from TourTask.
Checkout and payment
Visitors pay online, and bookings land in TourTask at once.
Your layout and colours
Four layouts and six colours to match your site.
Requests you confirm
Tours you confirm by hand arrive as requests.
Agents book too
Registered agents get their own prices at checkout.
Add the widget to a WordPress site
The widget shows one service area per page. To find an area's number, pick the area under Service areas on the HTML tab. The snippet then shows the number after data-service-area-id.
- 1
Install the plugin
In WordPress, open Plugins → Add New Plugin, search for TourTask, then press Install Now and Activate.
- 2
Copy your two values
In TourTask, open Website integrations → Tours and copy the Business ID and Business token from the WordPress tab.
- 3
Connect the plugin
In WordPress, paste both under TourTask → Settings. They save on their own.
- 4
Make the shortcode
Under TourTask → Shortcode, choose the Page type (Activities) and the Language. With several service areas, also enter the Service area ID. Then press Copy.
- 5
Paste it into your tours page
Paste the shortcode where your tours should appear, and publish the page.
- 6
Register the page
In TourTask, paste the page's address under Activities page URL on your website, in the field for its language. Until then, the widget shows This website is not registered with TourTask.
Add the widget to any other website
- 1
Open the HTML tab
In TourTask, open Website integrations → Tours, then the HTML tab.
- 2
Choose the language and area
If you have several languages or service areas, pick the page's language and its area under Service areas.
- 3
Copy the snippet
Copy the whole snippet with its copy button.
- 4
Paste it into your page
Paste it into the HTML of the page where your tours should appear, and publish the page.
- 5
Register the page
Paste the page's address under Activities page URL on your website, in the field for its language. Until then, the widget shows This website is not registered with TourTask.
Use the widget in several languages
The booking widget shows the language chosen in its shortcode or snippet, with no language switcher. For several languages, make one page per language. Register each in its language's field under Activities page URL on your website, so booking e-mails link to it.
Choose the layout and colours
Further down Website integrations → Tours, choose the Interface layout and the Storefront colors. Each change saves on its own.
Full width shows every tour in full on the page. Cards, Photo cards and Tiles open each tour in a window, and each tour gets its own address to share.
Questions we get asked
Yes: limit each page to some tour categories, using their numbers from Tours → Categories. Enter them in Tour category IDs on TourTask → Shortcode, or in the snippet as the HTML tab shows. One registered page covers its whole domain.
In the Cards, Photo cards and Tiles layouts, each tour gets its own address, titled with the tour's name. On WordPress, search results show your tours page, not each tour.
On WordPress, try changing Force full width under TourTask → Settings. If the cart bar hides behind your header, turn on Use a custom header element under Advanced.
On other websites, add the header attributes the HTML tab lists. Still stuck? Contact support.
Nothing extra: the booking widget comes with TourTask, and the WordPress plugin is free. TourTask's own price is on the pricing page.