# Інтеграція форми пошуку на власний сайт \[HTML, IFRAME]

## 1. Html поисковая форма (рекомендуется)

На страницу Вашего сайта встраивается HTML+CSS+JS формы поиска. После заполнения формы открывается новая вкладка с результатами выдачи. Дальнейшие этапы бронирования происходят на проекте RezOn.

| <img src="/files/-Lv5-PNeK2iDhZMw7AfJ" alt="" data-size="original"> | ![](/files/-Lv5-ZIGPSgJf1uAIlTY) | ![](/files/-Lv5-gDeY8Ju3MzcX_NY) |
| ------------------------------------------------------------------- | -------------------------------- | -------------------------------- |

## [>> Скачать последнюю версию RezOn формы <<](https://github.com/rezon-universal/form/tree/master)

При необходимости Вы можете изменять стили/скрипты/разметку формы.

* [Демо формы поиска авиа билетов](https://github.com/rezon-universal/form/blob/master/demo/air/demo.html)
* [Демо формы поиска ЖД билетов](https://github.com/rezon-universal/form/blob/master/demo/rail/demo.html)
* [Демо формы поиска автобусов](https://github.com/rezon-universal/form/blob/master/demo/bus/demo.html)
* [Демо формы поиска отелей](https://github.com/rezon-universal/form/blob/master/demo/hotels/demo.html)
* [Демо формы оформления страховки](https://github.com/rezon-universal/form/blob/master/demo/insurances/demo.html)

Для подключения формы необходимо произвести следующие действия:

Html разметку из файла с формой [`\src\html\air\form.html`](https://raw.githubusercontent.com/rezon-universal/form/master/src/html/air/form.html) необходимо скопировать (или подключить) в блок контейнера, размещенный на странице Вашего сайта.

Пример контейнера html кода:

```markup
<div id="rezon-forms">
    <div class="rez-forms container">
        <!-- Содержимое файла с разметкой *.html -->
    </div>
</div>
```

Странице, где размещается форма, необходимо подключить файлы стилей и скриптов:

```markup
<link href="https://cdn.jsdelivr.net/gh/rezon-universal/form@latest/assets/css/rezon-form.min.css" rel="stylesheet"/>

<script src="https://cdn.jsdelivr.net/gh/rezon-universal/form@latest/assets/js/jquery-2.1.4.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/rezon-universal/form@latest/assets/js/typeahead.bundle.js"></script>
<script src="https://cdn.jsdelivr.net/gh/rezon-universal/form@latest/assets/js/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/rezon-universal/form@latest/assets/js/vuejs-datepicker.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/rezon-universal/form@latest/assets/js/rezon-form.min.js"></script>
```

*(обратите внимание, что если у вас на странице уже подключена какая-либо библиотека, например jQuery, то повторно её подключать не нужно )*

В собственный файл скриптов (или прямо на странице) добавьте скрипт инициализации формы

```javascript
$(document).ready(function(){
    $("#rezon-forms").rezOnForm({
        projectUrl: "https://YOUR_DOMAIN_FOR_REZON.COM/",
        defaultLang: "ru", // ua|ru|en
        formType: "avia", // avia|railway|buses|bus|hotel|insurances,
        formTarget: "_blank" // '_blank' - загружает поисковую выдачу в новое окно браузера., '_self' - в текущее окно.
    });
});
```

**Внимание!** Замените `YOUR_DOMAIN_FOR_REZON.COM` на url адрес вашего проекта RezOn!

Для авиа формы есть возможность предустановить поля формы

```javascript
$(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 код или строка поиска аэропорта отправления
            defaultAirportTo: 'TLV',       // IATA код или строка поиска аэропорта прибытия
            defaultDateThere: [new Date('2020-05-03')], //Дата вылета туда
            defaultDateBack: [new Date('2020-05-11')]  // Дата вылета обратно
        }
    });
});
```

&#x20;Пример кода полной страницы со всеми подключенными стилями и скриптами можно просмотреть [здесь](https://github.com/rezon-universal/form/blob/master/demo/air/demo.html).\
[![](/files/-LGVHYs3uYIGzizQKHLG)](https://github.com/rezon/backoffice/tree/5787a746c919d08b36b4d0b1c53d0248227c7ef4/assets/2018-02-23_13h55_03.png)

При подключении html формы поиска страховок можно задать минимальную дату начала страховки и минимальный страховой период:

```
<script type="text/javascript">
    $(document).ready(function(){
        $("#rezon-forms").rezOnForm({
            projectUrl: "https://test.rezonuniversal.com/",
            defaultLang: "ru",
            formType: "insurances",
            formTarget: "_blank",
            insurances: {
                DaysShift: 10,     // минимальная дата начала
                MinimumPeriod: 5   // минимальный период
            }
        });
    });
</script>
```

## 2. iframe поисковой формы

Видеоинструкции по установке онлайн модуля для сайтов на [WordPress](https://www.youtube.com/watch?v=RNFwogpo3dI\&feature=youtu.be) и [Joomla](https://www.youtube.com/watch?v=ZUTouHRDL4I).

На страницу Вашего сайта встраивается скрипт, который генерирует iframe с поисковой формой. После заполнения формы открывается новая вкладка с результатами выдачи. Дальнейшие этапы бронирования происходят на RezOn проекте.

**Формирование URL**:\
`https://{ДОМЕН}/{ЯЗЫК}/IFrame?t={ТИП}` , где\
`ДОМЕН` — поддомен, на котором подключен проект RezOn `ЯЗЫК` — алиас языка, например ru, ua или en\
`ТИП` — **avia** - авиа форма,                                                                                                                                               **railway** - ЖД форма,                                                                                                                                             **aviaoffers** - модуль авиа спецпредложений,                                                                                                      **bus** -форма поиска автобусо&#x432;**,                                                                                                                         hotels** - форма поиска отелей,                                                                                                                                                     **insurances** - форма оформления страховки

**Примеры URL фрейма**\
`https://YOUR_DOMAIN_FOR_REZON.COM/ru/IFrame?t=avia` — авиа форма\
`https://YOUR_DOMAIN_FOR_REZON.COM/ru/IFrame?t=railway` — ЖД форма\
`https://YOUR_DOMAIN_FOR_REZON.COM/ru/IFrame?t=bus` -форма поиска автобусов\
`https://YOUR_DOMAIN_FOR_REZON.COM/ru/IFrame?t=hotels` — форма поиска отелей\
`https://YOUR_DOMAIN_FOR_REZON.COM/ru/IFrame?t=insurances` — форма поиска страховок

Для авиа формы есть возможность предустановить поля формы:

| Параметр         | Описание                                                                                     |
| ---------------- | -------------------------------------------------------------------------------------------- |
| tab              | \[oneway/roundtrip/route] - тип вкладки по-умолчанию                                         |
| from\_iata       | IATA код аэропорта вылета                                                                    |
| to\_iata         | IATA код аэропорта прибытия                                                                  |
| book\_from\_date | Дата вылета туда в формате dd.MM.yyyy                                                        |
| book\_to\_date   | Дата вылета обратно в формате dd.MM.yyyy                                                     |
| target           | \[\_blank/\_parent/\_self] - отображать результаты поиска в новом окне/текущем окне/в iframe |

<https://your_domain_for_rezon.com/ua/IFrame?t=avia&tab=oneway&from_iata=iev&to_iata=par&book_from_date=09.03.2024>

Скрипт для итеграции IFrame формы поиска, разместите этот код в удобном месте на Вашем сайте

```markup
<!-- Установите блок в удобном месте -->
<div id="galileoForm"></div>

<script type="text/javascript">
    //Ссылка на iframe, установите ссылку на свой проект RezOn!
    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>
```

**Внимание!** Замените `YOUR_DOMAIN_FOR_REZON.COM` на url адрес вашего проекта RezOn!


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.rezonuniversal.com/obshaya-informaciya-1/integraciya/vstraivanie-formy-poiska-na-sobstvennyi-sait-html-iframe.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.