Search form on main website

RezOn Universal is hosted on powerful server platforms. It is really easy to integrate it into any website by means of an iframe or HTML form.

1. HTML form (recommended)

When using this type of integration HTML + JS code is embedded into your website. After end-user fills in the search form, a new tab opens with search results. Further steps for booking creation are carried out on RezOn powered website.

Download the latest version of RezOn HTML search form

To launch this search form on your website takes just 3 steps:

1. Copy HTML code into your website

2. Connect the styles and scripts.

3. Initiate JS form

Depending on the type of content you are going to sell via RezOn, different markup should be pasted into the relevant container on your website:

• \src\html\aviaForm.html- flight ticket search form

• \src\html\railForm.html- rail ticket search form

• \src\html\busForm.html- bus ticket search form

Example of HTML code container:

<div id="rezon-forms">
    <div class="rez-forms container">
        <!-- File content with *.html markup-->
    </div>
</div>

On the page where the form is located, the following include styles and scripts should be connected:

<link href="//cdn.rawgit.com/rezon-universal/form/master/src/css/shoot.css" rel="stylesheet"/>

<script src="//cdn.rawgit.com/rezon-universal/form/master/src/js/jquery-2.1.4.min.js"></script>
<script src="//cdn.rawgit.com/rezon-universal/form/master/src/js/typeahead.bundle.js"></script>
<script src="//cdn.rawgit.com/rezon-universal/form/master/src/js/vue.min.js"></script>
<script src="//cdn.rawgit.com/rezon-universal/form/master/src/js/vue_datepicker/Datepicker.js"></script>
<script src="//cdn.rawgit.com/rezon-universal/form/master/src/js/rezon-form.js"></script>

Please note that if you already have some library connected on your page, for example jQuery, then you do not need to connect it again.

In your own script file (or via the page directly) add the form initialization script:

$(document).ready(function(){
    $("#rezon-forms").rezOnForm({
        projectUrl: "https://YOUR_DOMAIN_FOR_REZON.COM/",
        defaultLang: "ru", // ua|ru|en
        formType: "all", // avia|railway|buses,
        formTarget: "_blank" // '_blank' - search results are displayed in a new browser window, '_self' - search resulta are displayed in current browser window.
    });
});

Instead of YOUR_DOMAIN_FOR_REZON.COM indicate your own RezOn project URL.

For flight ticket search form, it is possible to have pre-set values in the form fields:

$(document).ready(function () {
    $("#rezon-forms").rezOnForm({
        projectUrl: "https://YOUR_DOMAIN_FOR_REZON.COM/",
        defaultLang: "ru",
        formType: "avia",
        avia: {
            defaultRouteType: 'roundtrip', // [oneway/roundtrip/route]
            defaultAirportFrom: 'IEV',     // IATA code or string for origin airport search 
            defaultAirportTo: 'TLV',       // IATA code or string for destination airport search
            defaultDateThere: '09.03.2018',// Departure date in DD.MM.YYYY format
            defaultDateBack: '15.03.2018'  // Return date in DD.MM.YYYY format
        }
    });
});

An example of the full page code with all styles and scripts connected can be viewed here.

2. iframe

You can view video tutorial for iframe integration into websites based on Wordpress and Joomla.

On the website page a script is integrated, which generates an iframe for the search form. Once the search form has been filled in the search results display in a new tab. Further steps for booking creation are carried out on RezOn powered website.

iframe URL consists of:

• subdomain, where RezOn project is located

• language, amongst connected for specific RezOn project

• type:

• • avia- for flight tickets,

  • railway- for rail tickets,

  • aviaoffers - to search for special offers

  • buses - for bus ticket search

iframe examples:

• https://YOUR_DOMAIN_FOR_REZON.COM/ru/IFrame?t=avia — flight ticket search form

• https://YOUR_DOMAIN_FOR_REZON.COM/ru/IFrame?t=railway — rail ticket search form

• https://YOUR_DOMAIN_FOR_REZON.COM/ru/IFrame?t=buses — bus ticket search form

For flight ticket search form, it is possible to have pre-set values in the form fields:

Field name	Description
tab	[oneway/roundtrip/route] - default search type
from_iata	Origin IATA code
to_iata	Destination IATA code
book_from_date	Departure date in DD.MM.YYYY format
book_to_date	Return date in DD.MM.YYYY format
target	[_blank/_parent/_self] - display search results in a new tab/current tab/in iframe

https://YOUR_DOMAIN_FOR_REZON.COM/ua/IFrame?t=avia&tab=oneway&from_iata=iev&to_iata=mow&book_from_date=09.03.2018​

Please place this iframe search form code in a visible place on your website:

<!-- Place it in a visible place on your wesite -->
<div id="galileoForm"></div>

<script type="text/javascript">
    //example iframe link, please use your own RezOn URL!
    var galileoProject = "https://YOUR_DOMAIN_FOR_REZON.COM/ru/IFrame?t=avia"; 
    (function(d) {
        d.head.appendChild((function() {
            var s = d.createElement('script');
            s.src = 'https://bo.rezonuniversal.com/Scripts/iframe.js';
            s.defer = true;
            return s;
        })());
    })(document);
</script>

Instead of YOUR_DOMAIN_FOR_REZON.COM indicate your own RezOn project URL.