Как добавить форму для бронирований на сайт ресторана

Подготовительный этап — запрос идентификатора ресторана

Для подключения формы потребуется уникальный идентификатор ресторана. Его можно получить:

• через поддержку в личном кабинете ресторатора;
• через почту reserve_sup@eda.yandex.ru.

Как добавить форму вручную

С помощью ссылки

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

1. Если на сайте есть кнопка для оформления брони, добавьте в нее ссылку на форму:

   https://reservation.yandex.ru/partner-reserve/forms/XXXX
   

2. Значение XXXX замените на идентификатор ресторана.

Теперь по клику на кнопку пользователь будет переходить на страницу с формой.

Через HTML-код

Если вы обновляете сайт только через код, можете подключить готовый скрипт. Форма добавится автоматически — после того, как измените код.

1. Добавьте перед закрывающим тегом </head> этот код:

   <script src="https://reservation.yandex.ru/partner-reserve/forms/static/jquery.js" type="text/javascript"></script> <script> window.onload = function () { jQuery.getScript(“https://reservation.yandex.ru/partner-reserve/forms/static/partnerWidget.js") }; </script>
   

2. Добавьте кнопку для перехода с надписью, например Забронировать. Для этого используйте код:

   <button class="openLeclickModalButton" data-restaurant-id="XXXX" data-creator="restaurant-website"> Название кнопки </button>
   

Как добавить форму через конструктор сайтов Tilda

Если сайт создан с помощью сервиса Tilda, вы можете добавить форму через него:

1. Откройте раздел Все блоки.

   

2. Выберите Другое → HTML-код — появится блок для вставки кода.

   

3. В блоке нажмите Контент, чтобы перейти к редактированию.

   

4. В окне редактирования вставьте код:

    <style>
      .ya-reservation-btn .tn-atom__button-content,
      .ya-reservation-btn .tn-atom__button-text,
      .ya-reservation-btn span {
    	pointer-events: none;
      }
    </style>
   
    <script src="https://reservation.yandex.ru/partner-reserve/forms/static/jquery.js" type="text/javascript"></script>
    <script>
    window.onload = function () { 
    	jQuery.getScript("https://reservation.yandex.ru/partner-reserve/forms/static/partnerWidget.js") 
    };
    </script>
   
    <script>
    document.addEventListener("DOMContentLoaded", function() {
    	let containers = document.querySelectorAll('.ya-reservation-btn');
    	
    	containers.forEach(function(el) {
    		let link = el.querySelector('a');
    		
    		if (link) {
    			link.setAttribute('href', '#!');
    			link.classList.add('openLeclickModalButton');
    			
    			// НЕОБХОДИМО УКАЗАТЬ ДАННЫЕ РЕСТОРАНА
    			link.setAttribute('data-restaurant-id', 'ID РЕСТОРАНА');
    			link.setAttribute('data-creator', 'НАЗВАНИЕ РЕСТОРАНА НА ЛАТИНИЦЕ');
    		}
    	});
    });
    </script>
   

   Внимание

   В 28 и 29 строках скрипта нужно указать ID ресторана, а также его название на латинице.

5. Нажмите Сохранить и закрыть.

   

6. Выберите Zero → Редактировать блок.

   

   

7. Удалите все элементы в блоке и нажмите Добавить элемент → Кнопка.

   

8. Откройте настройки элемента и в поле URL укажите #.

   

9. Нажмите правой кнопкой мыши на созданный элемент и выберите Добавить имя CSS-класса.

   

10. В поле CSS-КЛАСС укажите ya-reservation-btn, затем нажмите Сохранить и Закрыть.

    

11. Нажмите Опубликовать, чтобы запустить скрипт.

    

    После этого кнопка станет рабочей — пользователи смогут переходить по ней к форме для бронирования.