Follow

Integrate your book now buttons

If you have your own website and you just want to use TrekkSoft for it’s booking system, you can embed book now buttons working without technology right in your product pages.

Creating a button

When creating a “Book now” button, you’ll need to decide on the type of integration you want to implement on your site and the type of content you want it to display. Then, you can generate a code for your booking button and add it to your current website.

To start, head over to Design and Pages and then Website Integration at the top navigation bar. This will bring you to the Widgets page.

Booknow1.gif

 

Screen_Shot_2017-12-14_at_10.04.41.png

In order to create your first button go to Design & Pages > Website integration.

  1. First, select the language you want your bookings process to be shown in. You’ll only have here the languages activated on your profile, so if you’re missing some just go to your profile and add it.
  2. Next, we’re going to select an Integration type, let’s see what each of those names mean:
    1. Fancybox/lightbox: the booking process will open a pop up in the middle of the page for your customers to book. Your customer will not be redirected to an external site and a new window will not be opened. When choosing this option, you will have to set the width of the popup in pixels.Fancybox1.gif
    2. New Window: this option will open a new popup window. Do note that this may be blocked by ad blockers and the customer will have to manually enable the pop-up.newwindow1.gif
    3. Link to TrekkSoft Website: this option will redirect the user from the current page they’re on (the page on your website with the “book now” button) to your TrekkSoft activity page (yourdomain.trekksoft.com).LinktoTSsite1.gif
    4. URL (for advanced users): this will create a popup window that goes to the “widget” view (booking view) of its destination page. It displays the same view as the JavaScript Fancybox in the first example. We advise that this option be adopted by advanced users because it is difficult to manage the formatting of the popup and widget view.
  3. Choose the content you would like to show when your customer hits on the button:
    1. Activities overview: they will see a collection.
    2. Activity finder: your end customer will be able to select the date within which he’s looking to doing an activity, they can select a location within your site. According to the set up they apply they will see the activities you have available for that dates and locations.
    3. Activity/Package details: we will show main information (details, prices, description, route…) from the activity you select and will allow the end customer to book it directly if they like what they see .
    4. Activity/Package booking: we will take your customer directly to the calendar step of the checkout so they start the process right from the moment they click on the button.
    5. Shop overview: we will show all your shop items for your end client to add it to their basket.
  4. If you’re creating this button to be integrated in your partner’s website, you want to give it an agent so you know exactly which bookings were referred by them and which ones you got yourself!
  5. Edit the button settings: give it a label (what will show for your clients) and edit its colours.buttonsettings.png
  6. Hit on Generate code and paste the code you see on your website’s HTML editor, easy peasy.

Note: We know this is a complex step, please remember that you can always reach out to your assigned account manager to help you out.

 

 

This is what the activities overview looks like in the New Window and Link integrations:

 

And this is what it looks like in the Fancybox and URL integrations:



Activity Finder

This content view allows customers to search through all of your tours. They can filter tours based on date, price and location. Here is what it looks like:


 

Activity Details (select an activity)

This view shows the details of a specific tour, an activity you choose when generating the button code. This page will also display the description, highlights and itinerary of the chosen activity, as well as a map with the location of the tour and an image gallery.

This is what it looks like in the New Window and Link Version:


 

And this is what it looks like in the Fancybox and URL version:

Activity Booking (select an activity)

The activity booking view shows the customer all of the available dates for a particular tour. It also allows them to select which dates they would like to purchase a ticket for.

This is what it looks like in the New Window and Link Version:

And this is what it looks like in the Fancybox and URL version:


 

Shop Overview (select a category)

This is what it looks like in the New Window and Link Version:

And this is what it looks like in the Fancybox and URL version:

  

 

 

 

The iFrame Integration

If you wish to integrate the booking widget as an iFrame please select the URL widget type.

Moreover, please see below the behaviour of the iFrame in different scenarios on mobile devices below:

  1. When no cookies were previously stored on your device (is the first time you access the website)
    1. Apple devices: If you’re using your TrekkSoft domain and haven’t purchased an SSL Cert (documentation link here), you will see we open a new window with the booking process for the very first time. .
    2. Android devices: It will always be a popup.
  1. If you have cookies stored in your device (you have previously visited the page)
    1. Apple devices: It will open the pop up on your iPhone screen..
    2. Android devices: always a pop up.
  2. Without SSL cert:
    1. Apple devices: It will sometimes open new window and sometimes a popup, depending on the cookies stored on the device.
    2. Android devices: It will always be a popup. 
Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments

Powered by Zendesk