---
title: "Вбудовування на сайт"
description: "Додайте бронювання на власний сайт: ціни оренди, доступність, вибір дат і кошик бронювання на WordPress, WooCommerce чи будь-якому іншому сайті з оформленням на клієнтському порталі. Завантажте плагін для WordPress, скопіюйте код організації, знайдіть слаги товарів і оберіть шорткоди."
canonical_url: "https://requiply.com/docs/uk/guides/online-booking/website-embed"
---
# Вбудовування на сайт

> Додайте бронювання на власний сайт: ціни оренди, доступність, вибір дат і кошик бронювання на WordPress, WooCommerce чи будь-якому іншому сайті з оформленням на клієнтському порталі. Завантажте плагін для WordPress, скопіюйте код організації, знайдіть слаги товарів і оберіть шорткоди.

**Вбудовування на сайт** дає клієнтам змогу бронювати на вашому власному сайті, а не лише на [клієнтському порталі](https://requiply.com/docs/uk/guides/online-booking). Кнопки бронювання, картки товарів, сітка товарів, вибір дат і кошик бронювання зʼявляються на ваших сторінках з актуальними цінами та доступністю з Requiply. Коли клієнт готовий, оформлення відкривається на вашому клієнтському порталі з тими самими товарами. Бронювання потрапляє в Requiply, як і будь-яке інше.

Відкривайте цю сторінку, коли клієнт питає «як додати кнопку оренди на мій сайт WordPress», «чи можна приймати бронювання на сайті» або «як підключити WooCommerce до Requiply».

Відкрийте її в **Налаштування → Інтеграції → Вбудовування на сайт**, [`https://app.requiply.com/settings/integrations/website-embed`](https://app.requiply.com/settings/integrations/website-embed).

<warning>

**Лише для адміністраторів.** Лише адміністратори бачать цю сторінку в меню налаштувань і можуть її відкрити. Саме вбудовування працює на будь-якому тарифі. Для показу товарів на продаж потрібен тариф Advanced, див. [Перш ніж почати](#%D0%BF%D0%B5%D1%80%D1%88-%D0%BD%D1%96%D0%B6-%D0%BF%D0%BE%D1%87%D0%B0%D1%82%D0%B8).

</warning>

<figure>

![Сторінка Вбудовування на сайт у розділі Налаштування, Інтеграції в темній темі. Заголовок Платформи сайтів із лічильником 2, нижче дві картки поруч. Картка WordPress (1) має логотип WordPress і теги Плагін, Шорткоди та Міграція з Booqable, а також кнопки Інструкція та Налаштувати. Картка WooCommerce (2) має логотип WooCommerce і теги Плагін, Звʼязування товарів і Синхронізація товарів, а також кнопки Інструкція та Налаштувати](https://requiply.com/docs/assets/settings/integrations/website-embed/platforms.png)<figcaption>

Одна картка на кожну платформу сайту: **WordPress** (1) для будь-якого сайту на WordPress, **WooCommerce** (2) для магазинів на WordPress. **Налаштувати** відкриває сторінку налаштування в Requiply, **Інструкція** відкриває повний посібник на requiply.com.

</figcaption>
</figure>

## Чому це важливо

- **Клієнти бронюють там, де вже вас знайшли.** Ваш сайт зберігає дизайн, тексти та позиції в пошуку. Він лише отримує робочу кнопку бронювання.
- **Ціни та доступність завжди актуальні.** Усе, що показують кнопки, береться з Requiply під час відкриття сторінки. Тож другого прайс-листа вести не треба.
- **Один процес бронювання.** Оформлення, оплата, кабінет клієнта та кожен лист і повідомлення з [автоматизацій](https://requiply.com/docs/uk/guides/automations/workflows) працюють так само, як для бронювань, зроблених на порталі.
- **Перехід із Booqable на WordPress в один клік.** Плагін переписує шорткоди Booqable на шорткоди Requiply.

## Перш ніж почати

<table>
<thead>
  <tr>
    <th>
      Вимога
    </th>
    
    <th>
      Чому це важливо
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      Товари з цінами в <a href="https://requiply.com/docs/uk/guides/inventory">
        Інвентарі
      </a>
    </td>
    
    <td>
      Вбудовування показує лише те, що є у вашому акаунті: товари, ціни за день, годину чи місяць, <a href="https://requiply.com/docs/uk/guides/settings/pricing/pricing-tiers">
        кількісне ціноутворення
      </a>
      
       і <a href="https://requiply.com/docs/uk/guides/settings/bookings/deposits">
        застави
      </a>
      
      .
    </td>
  </tr>
  
  <tr>
    <td>
      Робочий час у розділі <a href="https://requiply.com/docs/uk/guides/settings/organization/date-and-time">
        Дата і час
      </a>
      
       і правила бронювання в розділі <a href="https://requiply.com/docs/uk/guides/settings/bookings/booking-duration">
        Тривалість бронювання
      </a>
    </td>
    
    <td>
      Вибір дат пропонує лише час видачі та повернення в межах робочого часу і враховує мінімальну тривалість та буфери.
    </td>
  </tr>
  
  <tr>
    <td>
      Хоча б один спосіб оплати в <a href="https://requiply.com/docs/uk/guides/online-booking/portal-settings#%D0%B2%D0%BA%D0%BB%D0%B0%D0%B4%D0%BA%D0%B0-%D0%BF%D0%BB%D0%B0%D1%82%D0%B5%D0%B6%D1%96">
        налаштуваннях порталу
      </a>
    </td>
    
    <td>
      Оформлення відбувається на клієнтському порталі й пропонує увімкнені там способи.
    </td>
  </tr>
  
  <tr>
    <td>
      Сайт на WordPress (5.8 або новіший, PHP 7.4 або новіший) для плагіна
    </td>
    
    <td>
      Інші сайти можуть використовувати скрипт вбудовування напряму, див. <a href="#%D1%96%D0%BD%D1%88%D1%96-%D1%81%D0%B0%D0%B9%D1%82%D0%B8">
        Інші сайти
      </a>
      
      .
    </td>
  </tr>
  
  <tr>
    <td>
      Тариф Advanced, увімкнені функція <a href="https://requiply.com/docs/uk/guides/settings/organization/features#%D1%83%D0%B2%D1%96%D0%BC%D0%BA%D0%BD%D1%83%D1%82%D0%B8-%D0%BF%D1%80%D0%BE%D0%B4%D0%B0%D0%B6%D1%96">
        Продажі
      </a>
      
       і <strong>
        Продаж товарів
      </strong>
      
      , лише для товарів на продаж
    </td>
    
    <td>
      Тоді та сама кнопка продає й товари типу <strong>
        Обладнання на продаж
      </strong>
      
       із залишком і без дат.
    </td>
  </tr>
</tbody>
</table>

## WordPress

Натисніть **Налаштувати** на картці WordPress, щоб відкрити [`/settings/integrations/website-embed/wordpress`](https://app.requiply.com/settings/integrations/website-embed/wordpress). Заголовок пояснює, що робить плагін: *Додайте кнопки бронювання, сітку товарів та кошик бронювання на будь-яку сторінку WordPress за допомогою шорткодів.* Кнопка **Інструкція** відкриває [посібник для WordPress](https://requiply.com/blog/wordpress-rental-booking) на requiply.com.

Якщо ваш сайт працює на WooCommerce, банер **Користуєтесь WooCommerce?** під заголовком пропонує натомість **Відкрити налаштування WooCommerce**, бо налаштування для WooCommerce саме ставить кнопку бронювання на сторінки товарів.

Сторінка веде вас через три кроки:

1. **Встановіть плагін.** **Завантажити плагін** зберігає безкоштовний плагін **Requiply Rental Booking** як zip-файл. У WordPress завантажте його в **Плагіни > Додати новий > Завантажити плагін** та активуйте.
2. **Підключіть акаунт.** Скопіюйте **Код організації** кнопкою копіювання й вставте його у WordPress у **Налаштування > Requiply**. Код є останньою частиною адреси вашого порталу: для `portal.requiply.com/my-rental` це `my-rental`.
3. **Додайте бронювання на сторінки.** Вставте шорткод із таблиці нижче в будь-яку сторінку, запис або віджет Elementor.

<figure>

![Сторінка налаштування WordPress у розділі Вбудовування на сайт у темній темі. У заголовку логотип WordPress, назва WordPress, опис про додавання кнопок бронювання, сітки товарів і кошика бронювання на будь-яку сторінку WordPress за допомогою шорткодів і кнопка Інструкція. Нижче банер Користуєтесь WooCommerce? з кнопкою Відкрити налаштування WooCommerce. Далі три пронумеровані кроки: Встановіть плагін із кнопкою Завантажити плагін (1), Підключіть акаунт із кодом організації stalford-studio-en і кнопкою копіювання (2) та Додайте бронювання на сторінки (3). Під ними таблиця Шорткоди з кожним шорткодом і тим, що він показує (4)](https://requiply.com/docs/assets/settings/integrations/website-embed/wordpress-setup.png)<figcaption>

**Завантажити плагін** (1), скопіюйте **Код організації** (2), а потім розмістіть на сторінках (3) шорткоди з таблиці **Шорткоди** (4).

</figcaption>
</figure>

### Шорткоди

<table>
<thead>
  <tr>
    <th>
      Шорткод
    </th>
    
    <th>
      Що показує
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        [requiply_button item="product-slug"]
      </code>
    </td>
    
    <td>
      Ціна, наявність, кількість та «Додати до бронювання»
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        [requiply_card item="product-slug"]
      </code>
    </td>
    
    <td>
      Фото, назва та кнопка бронювання
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        [requiply_list show_search="true"]
      </code>
    </td>
    
    <td>
      Сітка ваших товарів із пошуком
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        [requiply_datepicker]
      </code>
    </td>
    
    <td>
      Вибір дат отримання та повернення
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        [requiply_cart_button]
      </code>
    </td>
    
    <td>
      Кнопка, що відкриває кошик бронювання
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        [requiply_tiers item="product-slug"]
      </code>
    </td>
    
    <td>
      Таблиця «Довші бронювання коштують дешевше». Порожня для товарів без рівнів
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        [requiply_portal_button]
      </code>
    </td>
    
    <td>
      Кнопка «Забронювати онлайн», що відкриває сторінку бронювання або оформлення, якщо товари вже додано
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        [requiply_account_links]
      </code>
    </td>
    
    <td>
      Посилання «Увійти» та «Реєстрація» до кабінету клієнта на вашій сторінці бронювання
    </td>
  </tr>
</tbody>
</table>

Замініть `product-slug` на слаг товару, див. [Як знайти слаг товару](#%D1%8F%D0%BA-%D0%B7%D0%BD%D0%B0%D0%B9%D1%82%D0%B8-%D1%81%D0%BB%D0%B0%D0%B3-%D1%82%D0%BE%D0%B2%D0%B0%D1%80%D1%83). Посібник на requiply.com описує додаткові параметри кожного шорткоду, наприклад категорію чи ліміт для сітки.

### Як знайти слаг товару

Шорткоди товарів посилаються на товар за його **слагом**: короткою читабельною назвою, утвореною з назви товару, наприклад `sony-fx6`. Requiply створює його автоматично під час додавання товару. Слаг унікальний у вашій організації й не змінюється, коли ви перейменовуєте товар. Тож шорткоди, які вже стоять на ваших сторінках, продовжують працювати. Той самий слаг є в адресі сторінки товару на вашому порталі, наприклад `portal.requiply.com/my-rental/item-sony-fx6`.

Щоб отримати слаг, прокрутіть до блоку **Знайти слаг товару** під таблицею шорткодів: *Оберіть товар, щоб отримати слаг для його шорткодів.* Почніть вводити назву в **Пошук товарів**, оберіть товар і скопіюйте **Слаг товару** кнопкою копіювання.

<figure>

![Сторінка налаштування WordPress у темній темі, прокручена до таблиці Шорткоди та панелі Знайти слаг товару під нею з текстом Оберіть товар, щоб отримати слаг для його шорткодів. У полі Пошук товарів вибрано товар Rode Procaster (1). Поруч поле Слаг товару зі значенням rode-procaster і кнопкою копіювання (2). Нижче підказка: Переходите з Booqable? Налаштування > Requiply одним натисканням переписує ваші шорткоди Booqable](https://requiply.com/docs/assets/settings/integrations/website-embed/slug-lookup.png)<figcaption>

Знайдіть товар (1) і скопіюйте його слаг (2). Пошук слага є на сторінках налаштування WordPress і WooCommerce.

</figcaption>
</figure>

Слаг не можна змінити в Requiply. Сторінки товарів більше не показують коди вбудовування, тому пошук на цій сторінці є єдиним місцем, де можна знайти слаг.

### Перехід із Booqable

*Переходите з Booqable? Налаштування > Requiply одним натисканням переписує ваші шорткоди Booqable.* Кнопка **Перехід з Booqable** (Migrate from Booqable) у плагіні перетворює кнопки та заповнювачі Booqable на ваших сторінках на шорткоди Requiply. Так кнопки товарів продовжують працювати. Щоб спершу перенести товари, клієнтів і бронювання з Booqable в Requiply, скористайтеся [Перенесенням даних](https://requiply.com/docs/uk/guides/settings/integrations/data-migration).

## WooCommerce

Натисніть **Налаштувати** на картці WooCommerce, щоб відкрити [`/settings/integrations/website-embed/woocommerce`](https://app.requiply.com/settings/integrations/website-embed/woocommerce): *Замініть «Додати в кошик» у товарах WooCommerce кнопкою бронювання, а Requiply оновлюватиме товари сам.* **Інструкція** відкриває [посібник для WooCommerce](https://requiply.com/blog/woocommerce-rental-booking).

Перші два кроки ті самі, що й для WordPress: плагін і код організації. Третій крок, **Оберіть, як товари залишаються узгодженими**, налаштовують у WordPress у **Налаштування > Requiply**:

<table>
<thead>
  <tr>
    <th>
      Режим
    </th>
    
    <th>
      Що він робить
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <strong>
        Лише звʼязок
      </strong>
    </td>
    
    <td>
      Звʼяжіть кожен товар WooCommerce з його товаром у Requiply, по одному або всі разом за збігом назв. Дані WooCommerce не змінюються.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Синхронізація з Requiply
      </strong>
    </td>
    
    <td>
      Requiply щогодини створює та оновлює товари WooCommerce. Ціна та наявність завжди йдуть з Requiply, а описи, адреси сторінок та SEO лишаються вашими.
    </td>
  </tr>
</tbody>
</table>

*Звʼязані товари показують кнопку бронювання замість «Додати в кошик» на сторінках товарів та в сітках каталогу.* Бронювання ніколи не стають замовленнями WooCommerce: кошик і оформлення належать Requiply.

На WooCommerce шорткоди необовʼязкові: використовуйте їх, щоб додати в тему вибір дат, кнопку кошика або посилання на кабінет. Пошук **Знайти слаг товару** є й на цій сторінці.

Дані товарів передаються в одному напрямку, з Requiply у WooCommerce. Зміна ціни у WooCommerce не змінює її в Requiply. Змініть ціну в [Інвентарі](https://requiply.com/docs/uk/guides/inventory/manage), а магазин оновиться слідом.

## Інші сайти

На сайті не на WordPress (Wix, Webflow, Tilda, Squarespace або ваш власний HTML) вбудовування теж можна використовувати, якщо сайт дозволяє додавати власний HTML-код:

1. Додайте скрипт один раз, наприклад у шапку сайту, зі своїм кодом організації:```html
<script async src="https://portal.requiply.com/embed/v1/requiply-embed.js" data-org="your-code"></script>
```
2. Розмістіть заповнювач там, де має зʼявитися кнопка бронювання, зі слагом товару з блоку [Знайти слаг товару](#%D1%8F%D0%BA-%D0%B7%D0%BD%D0%B0%D0%B9%D1%82%D0%B8-%D1%81%D0%BB%D0%B0%D0%B3-%D1%82%D0%BE%D0%B2%D0%B0%D1%80%D1%83):```html
<div class="requiply-button" data-item="product-slug"></div>
```

[Посібник для WordPress](https://requiply.com/blog/wordpress-rental-booking) описує заповнювачі для інших компонентів. Якщо ваш конструктор сайтів не приймає власний код, поставте на кнопку «Забронювати» посилання на адресу свого порталу або на [власний домен](https://requiply.com/docs/uk/guides/online-booking/custom-domains).

## Що бачать клієнти

1. **На ваших сторінках** кожен товар показує ціну за день, годину чи місяць. Доки дати не вибрано, товар пропонує *Перевірити наявність*, що відкриває вибір дат. Після цього він показує, скільки одиниць вільно, або *Недоступно на ці дати*.
2. **Вибір дат** показує календар і час видачі та повернення в межах робочого часу. Повністю заброньовані дні, вихідні та [свята](https://requiply.com/docs/uk/guides/settings/organization/date-and-time) вибрати не можна. Також вибір дат дотримується мінімальної тривалості бронювання.
3. **Кошик бронювання** супроводжує клієнта зі сторінки на сторінку. Він показує період, товари з кількістю (не більше вільної), [послуги під час оформлення](https://requiply.com/docs/uk/guides/online-booking/portal-settings#%D0%BF%D0%BE%D1%81%D0%BB%D1%83%D0%B3%D0%B8-%D0%BF%D1%96%D0%B4-%D1%87%D0%B0%D1%81-%D0%BE%D1%84%D0%BE%D1%80%D0%BC%D0%BB%D0%B5%D0%BD%D0%BD%D1%8F), які ви пропонуєте як перемикачі (наприклад, доставку), а також проміжну суму, знижку, заставу та підсумок.
4. **Перейти до оформлення** відкриває ваш клієнтський портал із тим самим кошиком. Клієнт вводить контактні дані або входить у кабінет, обирає спосіб оплати й підтверджує. Після онлайн-оплати провайдер повертає клієнта на портал.
5. **Сторінка успішного бронювання** показує номер бронювання та посилання **Повернутися на сайт** на сторінку, з якої клієнт почав.

Компоненти беруть **фірмовий колір** і **стиль кутів** з [налаштувань порталу](https://requiply.com/docs/uk/guides/online-booking/portal-settings), а шрифт із вашого сайту. Вони відкриваються мовою вашого сайту, англійською або українською. Коли ваш портал працює на [власному домені](https://requiply.com/docs/uk/guides/online-booking/custom-domains), усі створені ними посилання ведуть на нього.

Якщо в [Створенні бронювання](https://requiply.com/docs/uk/guides/settings/bookings/booking-creation#%D0%B7%D0%B2%D1%96%D0%B4%D0%BA%D0%B8-%D0%BF%D0%BE%D1%87%D0%B8%D0%BD%D0%B0%D1%94%D1%82%D1%8C%D1%81%D1%8F-%D1%84%D0%BE%D1%80%D0%BC%D0%B0-%D0%B1%D1%80%D0%BE%D0%BD%D1%8E%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F) вибрано **Почати з дат**, кнопки товарів спершу просять дати й додають товар після застосування дат.

## Що бачить команда в застосунку

Бронювання з вбудовування є звичайним бронюванням у [Керуванні бронюваннями](https://requiply.com/docs/uk/guides/bookings/manage), у Календарі та на Дашборді. Його **Джерело** показує **Вбудований віджет сайту**. Тож ви можете фільтрувати чи рахувати бронювання, що прийшли з вашого сайту. Додайте колонку **Джерело** в [Конфігурації таблиць](https://requiply.com/docs/uk/guides/settings/fields/table-columns), щоб бачити її у списку.

Кошик лише з товарами на продаж стає окремим продажем, а не бронюванням. Кошик, де є оренда разом із покупками, стає одним бронюванням із привʼязаним продажем.

## Типові сценарії

- **Сайт на WordPress зі сторінкою для кожного товару.** Встановіть плагін, вставте код організації та додайте `[requiply_button item="..."]` на сторінку кожного товару зі слагом із блоку **Знайти слаг товару**. Додайте `[requiply_datepicker]` і `[requiply_cart_button]` у шапку, щоб клієнти задавали дати один раз і бачили кошик усюди.
- **Магазин WooCommerce із сотнями товарів.** Оберіть **Лише звʼязок** і звʼяжіть товари за збігом назв. Потім виправте ті кілька, що не збіглися, на екрані товару. Або оберіть **Синхронізація з Requiply**, щоб Requiply щогодини оновлював ціни та наявність.
- **Доставка в кошику.** Додайте послугу доставки в розділі [Послуги під час оформлення](https://requiply.com/docs/uk/guides/online-booking/portal-settings#%D0%BF%D0%BE%D1%81%D0%BB%D1%83%D0%B3%D0%B8-%D0%BF%D1%96%D0%B4-%D1%87%D0%B0%D1%81-%D0%BE%D1%84%D0%BE%D1%80%D0%BC%D0%BB%D0%B5%D0%BD%D0%BD%D1%8F). Вона зʼявиться як перемикач у кошику вбудовування та під час оформлення.
- **Перехід із Booqable.** Імпортуйте дані через [Перенесення даних](https://requiply.com/docs/uk/guides/settings/integrations/data-migration), встановіть плагін і натисніть **Перехід з Booqable** у **Налаштування > Requiply**.
- **Сайт не на WordPress.** Додайте скрипт і заповнювачі з розділу [Інші сайти](#%D1%96%D0%BD%D1%88%D1%96-%D1%81%D0%B0%D0%B9%D1%82%D0%B8) або поставте на кнопку «Забронювати» посилання на свій портал.

## Поради та застереження

<tip>

**Порада:** плагін також виводить поточну ціну в HTML сторінки й оновлює її кожні 10 хвилин. Тож пошукові системи та відвідувачі без JavaScript теж бачать ціну.

</tip>

<note>

**Порада:** шорткод із неправильним або застарілим слагом нічого не показує. Перевірте слаг у блоці **Знайти слаг товару** і переконайтеся, що товар не в архіві.

</note>

<warning>

**Увага:** змінюйте ціни, фото та доступність у Requiply, а не на сайті. Вбудовування завжди показує те, що зберігає Requiply, а синхронізація WooCommerce перезаписує ціни та наявність у WooCommerce даними з Requiply.

</warning>

<warning>

**Увага:** комплекти поки не пропонуються через вбудовування. Клієнти можуть бронювати комплекти на [клієнтському порталі](https://requiply.com/docs/uk/guides/online-booking/booking-flow).

</warning>


## Sitemap

See the full [sitemap](https://requiply.com/docs/sitemap.md) for all pages.
