Generating your Tour Booking Engine widget Code
Tashi gives you flexible options in terms of how to use your Tour Booking Engine. To create your personalised widget code, follow these 4 steps.
🚨Generating and installing your Tour Booking Engine widget code requires some basic knowledge of computer coding. If you're not sure what options to choose, or how to do it, just ask us. We're happy to help!
__________
_____________
- Step 1 -
Select your Tour Widget Type
_____________
Your Options
(a) Tour Products List
This widget displays a list of all of our Tour products. You can use this on your home pate, all tours page or you can choose to show tours from a particular theme only on different pages.
For example, you could generate one widget that shows your Day Tours and another different widget that shows your Multi-day Tours, so that you can place the widgets on various web pages.
Pro tip 💡: Learn how to use Product themes to categories your Tours ➡️ HERE.
_____________
(b) Tour Products Detail
This widget showcases one Tour product only. You can generate different Tour product detail widget codes for on their own separate Tour product pages on your website.
_____________
Step 2
Select your Tour Widget should be rendered
& copy the respective code(s).
You've three option in terms of how your Tour Booking Engine should be rendered (appear). There is a different HTML code required for each option. You'll paste the related HTML code into your website in the respective segment.
_____________
(a) Open the Booking Engine in a Modal
This is where the website user would click a Book Now /Enquire Now button and the Booking Engine would pop up in a modal window.
When choosing to open the widget in a modal, you can also select from a Button or a Text link style.
Once you've selected your options for opening the Booking Engine in a modal, you should paste the related HTML code in the correct place on your website.
🚨 You can customise the text that appears in the button or text link. It can say 'Book Now', Enquire Now, or whatever text you'd like. You can edit that text after you paste in the HTML snippet into your website. If you're not sure how to do this, just ask us!
Once that's done, there are two more steps:
Pasting in the required Javascript code
Copy the code and past javascript snippet at the bottom of your HTML page, just before the </body> tag.
Adding or editing the CSS styles
You can fully customise the CSS of the Booking Engine to suit your website's style. Just copy this CSS snippet into your website's stylesheet or in a<style> block in the <head> section of your website's page and then edit the formatting of the modal as required.
_____________
(b) Embed Booking Engine on a webpage
This is where the whole Booking Engine widget is embedded on your web page. In this option, the widget looks like it's part of your website.
Select the 'Embed on-page' option to preview how it will look. Then, paste the related HTML code in the correct place on your website.
Once that's done there is one more step:
Adding or editing the CSS styles
You can customise the CSS of the Booking Engine to suit your website's style. Just copy this CSS snippet into your website's stylesheet or in a<style> block in the <head> section of your website's page and then edit the formatting of the modal as required.
_____________
(c) Direct Link
This is where you share the URL link with someone that will bring them directly to your Tours list or Tour details page.
Copy the URL code to share with the respective person so that they can out your product(s).
_____________
Pro Tip 💡:
If you're not sure what options to choose, or how to install your Tour Booking Engine, just ask us. We're happy to help!
_____________
Skip ahead to: