All Collections
Booking Engine
How to add OTA Sync Booking Engine Widget on your website?
How to add OTA Sync Booking Engine Widget on your website?
Updated over a week ago

A widget is a website element that can be added to your website and is displayed like a search bar or search button. This article will show you can install our pre-built widget on your existing website. These do require a some knowledge of HTML, so make sure to be careful when adding them.

How does it look?

All the colors are customizable

Placing the code is super simple. Just copy the code from the below and change a few things such as your property ID and the background color of the widget.

<div id='engineForm'> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script type="text/javascript" src="https://app.otasync.me/utils/engineWidget/script.js"></script> <script> displayEngineForm("#engineForm", 276, "#306bad", "#ffffff");</script>

Now, some websites do have jQuery already included so you do not need to call it. So if your site has jQuery already (or simply the code above does not work) then use the simple version:

<div id='engineForm'> </div> <script type="text/javascript" src="https://app.otasync.me/utils/engineWidget/script.js"></script> <script> displayEngineForm("#engineForm", 276, "#306bad", "#ffffff");</script>

Now how to find your ID you can see here:

  1. Go to Settings

  2. Go to General

  3. On bottom-left you have this number, copy it and paste instead number above in bold

Copy this ID and paste it instead code "276" above

Finally how to change the background and text color on the engine is simple using HEX values. These are the codes #306bad and #ffffff in the code above. The first code is background color and the second is text color.

Read more on how to choose your HEX color here: https://htmlcolorcodes.com/

If you have Wordpress site we suggest you using our official WordPress plugin instead this.


Did this answer your question?