Widget integration

Introduction into Quandoo world

Integrating with Quandoo platform

Integration types

Reservation management

Widget integration

A javascript snippet is included on merchant’s page and allows the whole reservation process to take place on the restaurant website (excluding reservations that require credit card information to be stored). Notifications via Javascript listeners are provided, allowing the merchant to store information related to the reservations places using Quandoo widget.

How to integrate Quandoo widget?

Widget Integration is a quick and easy integration – a javascript snippet writes an iframe into the page for the end user to create a complete booking. Simply include this code where you wish the widget to appear. Your page should be of type HTML5. Minimum recommended sizes for widget div are width: 300px and height: 805px.

<div id=”quandoo-booking-widget”>
</div> 
<script src=”https://booking-widget.quandoo.com/index. Js” data-agent-id=”16” data-merchant-id=”1234”></script>

The script tag must be after the div tag is loaded. We suggest putting the div tag where you want the widget to appear and the script tag just after however you can also move the script tag to the footer.

There are only two parameters required:

Agent ID

data-agent-id=”10” /* Will always be an integer */

Merchant ID

data-merchant-id=”1234” /* Will always be an integer */

Tracking

We provide callback events for successful conversions on both Reservation Complete and Enquiry Complete, but also for the reservations completed on Quandoo (when the merchant has CCV enabled).

Example

<script>  
    (function (w) {    
          if (w.qdoo) {      
               // Reservation Complete Event      
               w.qdoo.onReservationComplete(function (event) {        
              // place tracking pixel or fire your own GTM event here.        
                    event.payload.reservationId // for example      
              });

             // Enquiry Complete Event     
             w.qdoo.onEnquiryComplete(function (event) {        
               // place tracking pixel or fire your own GTM event here.        
                     event.payload.enquiryId // for example      
              });          

            w.qdoo.onContinueCheckoutOnPortal(function (event) {        
              // place tracking pixel or fire your own GTM event here.       
                    event.payload.merchantId // for example     
              });  
     }  
    })(window); 
  </script>

Each event pushes an object into the callback function. Depending on the event, the object will contain different properties for you to link to your own tracking:

onReservationComplete	onEnquiryComplete	onContinueCheckoutOnPortal (used for CCV*)
reservationId merchantId agentId quantity dateTime areaId customerId language	enquiryId merchantId agentId quantity date startTime endTime areaId customerId language	merchantId agentId quantity dateTime areaId language

*CCV: When the merchant has enabled CCV, the creation of a reservation requires the guest pre-filling all information within the widget, but the actual reservation takes place on the Quandoo Portal because the restaurant has asked to hold credit card information as part of its cancellation policy. For this type of reservations we do provide a callback event through the widget to say the customer was directed to the portal to complete the reservation.

Embedding in Apps

For iOS:
We highly suggest loading the widget using WKWebView and loadHTMLString.

For Android:

We recommend the use of WebView and the loadData method to render the widget. Don’t forget to enable JS support on your WebView to make sure that all scripts will run properly.

Note for both:

You’ll also need to include some way ‘back’ after the reservation (see events) as well as a way of exiting the view if they decide not to continue making a booking. We highly suggest loading the widget using WKWebView and loadHTMLString. You’ll also need to include some way ‘back’ after the reservation (see events) as well as a way of exiting the view if they decide not to continue making a booking.