Fedev

Віджет бронювання та його вигляд

Увімкніть кнопку «Забронювати», додайте більше таких кнопок у тему, виберіть їхні кольори та оформіть портал працівника.

Клієнти бронюють у вікні бронювання, яке відкривається поверх будь-якої сторінки, де вони перебувають. Ви вмикаєте його один раз для всієї теми в редакторі теми Shopify, а відкривати його може будь-що: плаваюча кнопка Забронювати на кожній сторінці, кнопка, яку ви розмістите в розділі, чи посилання в меню. Кольори вікна, а також сторінки, де клієнти бачать своє бронювання, задаються один раз у Rezervito й діють у кожній темі. Портал працівника має власний акцентний колір і показує логотип вашого магазину.

Увімкнути кнопку «Забронювати»

Скористайтеся кнопкою посібника з налаштування Відкрити редактор теми. Вона відкриває Вбудовування застосунків у редакторі теми з уже ввімкненим вбудовуванням Rezervito Забронювати: натисніть Зберегти, і готово. Також можна самостійно відкрити в редакторі теми Налаштування теми → Вбудовування застосунків і ввімкнути Забронювати.

Це єдине, що обов’язково має бути ввімкнено. Коли вбудовування ввімкнено, у куті кожної сторінки вашого магазину з’являється плаваюча кнопка Забронювати, і працюють усі інші кнопки «Забронювати». Вона не з’являється на сторінці, де клієнт бачить своє бронювання: там він уже забронював, а на телефоні кнопка закривала б кнопки цієї сторінки. Поки відкрита бічна панель кошика, меню чи пошук вашої теми, кнопка ховається, щоб не закривати їхні кнопки. Коли вимкнено — не працює жодна.

Крок посібника з налаштування Увімкніть кнопку «Забронювати» позначається виконаним сам, щойно вбудовування ввімкнено у вашій активній темі. Див. Початок роботи.

Налаштування вбудовування в редакторі теми:

  • Показувати плаваючу кнопку: спочатку ввімкнено. Вимкніть, якщо хочете розміщувати власні кнопки.
  • Розташування: Унизу праворуч, Унизу ліворуч, Посередині праворуч або Посередині ліворуч.
  • Відстань від краю і Відстань від низу, у пікселях: спочатку 20. Для положення «Посередині» відстань від низу натомість опускає кнопку нижче середини.
  • Інша відстань від низу на телефонах: увімкніть, щоб задати Відстань від низу на телефонах, напр. щоб підняти кнопку над закріпленою панеллю «Додати в кошик» вашої теми або кнопкою чату.
  • Текст кнопки: залиште порожнім, щоб показувати «Забронювати» мовою, якою переглядає клієнт.
  • Назва поля нотаток і Підказка в полі нотаток: текст поля нотаток. Чи запитувати в клієнтів нотатки, задається в Rezervito: Налаштування → Правила бронювання → Дані клієнта. Якщо поле порожнє, воно показує нагадування не писати даних про здоров’я чи інших чутливих відомостей; із вашою власною підказкою це нагадування показується під полем.

Більше кнопок «Забронювати»

Кожна кнопка «Забронювати» відкриває те саме вікно бронювання:

  • Блок кнопки «Забронювати». У редакторі теми додайте блок Кнопка «Забронювати» до будь-якого розділу, що приймає блоки застосунків, напр. до головного банера домашньої сторінки або до шапки магазину. Його налаштування — Текст (порожній показує «Забронювати» мовою клієнта) і Вирівнювання: Ліворуч, По центру або Праворуч. У шапці Розташування в шапці ставить її Перед значками, Перед кошиком (початковий вибір) або Після кошика; наскільки її можна посунути, залежить від вашої теми. На телефоні вона менша й в один рядок; у темі з широким логотипом посередині заголовка місця для неї все одно може забракнути, тож перевірте магазин на телефоні й за потреби використайте там плаваючу кнопку або посилання в меню. Блок показується, лише коли ввімкнено вбудовування.
  • Будь-яке посилання на `#book-now`. Додайте пункт меню чи кнопку в темі з посиланням #book-now (або /#book-now). Воно відкриває вікно бронювання на сторінці, де перебуває клієнт. Це працює й там, де тема не приймає блоків застосунків.
  • Посилання, яким ви ділитеся. Адреса вашого магазину, а за нею /#book-now, напр. https://your-store.com/#book-now, відкриває магазин уже з відкритим вікном бронювання. Використовуйте його в листах, соцмережах чи QR-коді.

Якщо вимкнути плаваючу кнопку й не розмістити жодної іншої кнопки «Забронювати», клієнти не матимуть способу забронювати, і ніщо вас про це не попередить. Перевіряйте вітрину після зміни цих налаштувань.

Вікно бронювання використовує мову вашого магазину. Коли Календар відкритий для нових бронювань вимкнено в Налаштування → Правила бронювання, воно повідомляє, що салон зараз не приймає бронювань. Див. Як бронюють клієнти.

Ваша сторінка бронювання

У вашого магазину є й Сторінка бронювання: адресу магазину, а за нею /apps/booking, напр. https://your-store.com/apps/booking. Вона відкриває вікно бронювання одразу після завантаження. Під вікном сторінка показує «Записатися на прийом» і кнопку Забронювати, тож клієнт, який закрив вікно, може відкрити його знову.

Сторінка бронювання працює, навіть коли вбудовування вимкнено чи тема не підтримує застосунки, тож це найнадійніше посилання, щоб ним ділитися: у меню, у соцмережах, у листах чи як QR-код на стійці. Скопіюйте її адресу кнопкою Копіювати посилання на картці Де клієнти можуть бронювати в Налаштування → Вигляд. Сторінка показується всередині вашої теми, мовою, якою переглядає клієнт. Її кнопка Забронювати бере кольори Кнопка й Текст кнопки; коли вибрано Тема, вона виглядає як кнопки вашої теми.

Де клієнти можуть бронювати

Картка Де клієнти можуть бронювати в Налаштування → Вигляд перелічує всі способи відкрити вікно бронювання, кожен зі своїм ярликом:

  • Плаваюча кнопка: Увімкнено або Вимкнено, як прочитано з вашої активної теми, і де вона розташована, наприклад «Унизу праворуч, на кожній сторінці.»
  • Кнопка в шапці або розділі: Додати ↗ відкриває редактор теми й додає блок Кнопка «Забронювати» до вашої шапки. Деякі теми не дозволяють його в шапці; тоді додайте його до розділу.
  • Посилання в меню: #book-now з Копіювати посилання. У Shopify перейдіть у Контент → Меню й додайте пункт меню з цим посиланням.
  • Сторінка бронювання: адреса вашої сторінки бронювання з Копіювати посилання.

Картка їх групує: у У вашій темі перші три, яким потрібне вбудовування Забронювати, а в заголовку групи написано Вбудовування ввімкнено або Вбудовування вимкнено. Редагувати ↗ відкриває Вбудовування застосунків у редакторі теми. У Будь-де ваша сторінка бронювання, яка працює й без вбудовування.

Коли схоже, що вашу активну тему Canvas створив з нуля, або її взагалі не видно, У вашій темі показує Недоступно, а її рядки не мають швидких посилань, бо така тема поки не підтримує застосунки: використовуйте свою сторінку бронювання.

Виберіть кольори віджета

Відкрийте Налаштування → Вигляд. Картка Віджет бронювання містить:

  • Колірна схема: готові набори кольорів. Тема, початковий вибір, не задає власних кольорів: кнопки «Забронювати» виглядають як кнопки вашої теми, а вікно бронювання біле з темним текстом. Будь-яка інша схема задає всі п’ять кольорів, які потім можна змінювати по одному. Власна з’являється, щойно ви зміните колір вручну, і залишається, щоб до неї можна було повернутися, якщо спробуєте іншу схему.
  • П’ять кольорів: Текст, Тло, Кнопка, Текст кнопки і Контурна кнопка.

Пару кольорів, яку важко читати, позначено Важко читати. Це лише попередження: зберегти все одно можна.

Попередній перегляд показує плаваючу кнопку Забронювати і вікно бронювання зі зразковими даними, завширшки Телефон або Комп’ютер: список послуг і час. На комп’ютері він розташований поруч із картками, на телефоні — під ними.

Зберегти одразу застосовує кольори до вашого магазину. Якщо магазин не вдається оновити, нічого не зберігається, і можна спробувати ще раз.

Кнопки «Забронювати» беруть кольори Кнопка й Текст кнопки. Форма кнопок лишається від вашої теми: кути, розмір і шрифт. Коли вибрано Тема, вони виглядають як кнопки вашої теми. Якщо кнопки вашої теми не вдається розпізнати, вони отримують просту кнопку з контуром.

Вікно бронювання завжди використовує шрифт вашої теми й товщину, яку тема дає тексту та заголовкам, тож воно виглядає так само легко чи виразно, як решта магазину. Усе інше у вікні – його власне: воно зберігає свій регістр літер, міжлітерні інтервали, розміри й розташування, хай що тема робить із заголовками, підписами й полями, а його жирний текст (місяць, поточний крок, сума) ніколи не тонший за текст вашого магазину. Воно також читається зліва направо, як усі його мови, навіть коли ваш магазин налаштовано справа наліво (для івриту чи арабської). Для будь-якого іншого оформлення скористайтеся власним CSS вашої теми; правило для вікна бронювання має починатися з .rezervito-modal[data-rezervito-modal][open] (або використовувати !important), щоб спрацювати. Кольори діють для кожної кнопки «Забронювати» й вікна бронювання в кожній темі, а також для сторінки, де клієнти переглядають, переносять чи скасовують своє бронювання. Їх використовують і ваші листи про бронювання: колір Кнопка – їхній акцент (темно-сірий зі схемою Тема або з надто світлою на білому кнопкою), разом із логотипом вашого магазину, а сторінки Rezervito в адмініструванні Shopify завжди виглядають як Shopify.

Сторінка бронювання ваших клієнтів побудована як їхні листи: угорі назва вашого магазину та № бронювання, наприклад #1042 (той самий номер, що й в адмінці); далі статус бронювання, час і послуга з працівником, тривалістю та ціною. Під ними розділ Змінити або скасувати вказує, до якого часу клієнт може змінити час або скасувати онлайн — одним реченням, коли обидва терміни спливають одночасно, — і кнопки Перенести та Скасувати бронювання. Перенести відкриває те саме вікно бронювання, у якому клієнти бронюють, на кроці Виберіть час для послуги цього бронювання: працівника вже вибрано, а інших пропонують лише тоді, коли вони беруть його за тією самою ціною й тривалістю. Після вибору часу вікно показує новий час, а Перенести бронювання переносить його й перезавантажує сторінку. Скасувати бронювання спершу перепитує у вікні з Залишити бронювання. Перенести видно лише тоді, коли у вашій темі ввімкнено app embed «Book now». Коли онлайн уже нічого змінити не можна, сторінка каже це одним реченням і показує кнопку Написати салону. Сторінка візиту показує номер один раз, а послуги — одну за одною.

Знак Rezervito

Листи вашим клієнтам закінчуються коротким рядком «Заброньовано через Rezervito» з невеликим значком. Ваш магазин не показує знака Rezervito: ні у вікні бронювання, ні на сторінці бронювання клієнтів. У всіх тарифах однаково.

Щоб прибрати їх, зв’яжіться з нами, і ми вимкнемо їх для вашого магазину.

Вигляд порталу працівника

Картка Портал працівника на тій самій вкладці задає Акцентний колір порталу: його виділення й кнопки.

  • Як кнопка віджета (початковий вибір) повторює колір Кнопка віджета.
  • Мій власний колір дає змогу вибрати свій.

Акцентний колір, заблідий для читання в порталі, не використовується: портал залишає власний синій Rezervito, і картка про це повідомляє. Тло, текст і кольори бронювань порталу завжди однакові, щоб як робочий інструмент він легко читався.

Портал показує Логотип вашого магазину з Налаштування → Бренд у Shopify; Відкрити налаштування бренду веде туди. Без логотипа він показує назву магазину. Див. Працівники та робочий час.

Кнопка «Забронювати» в темі, створеній у Canvas

Canvas — новий спосіб Shopify створювати тему за допомогою Sidekick. Тема, продубльована в Canvas (у меню теми ⋯: Duplicate in Canvas), зберігає свої застосунки такими, якими вони були: якщо в оригіналі вбудовування Забронювати було ввімкнено, у копії працюють плаваюча кнопка, вікно бронювання, посилання в меню на #book-now і ваша сторінка бронювання, а Rezervito бачить її як будь-яку іншу тему. Тема, яку Canvas створює з нуля, поки не підтримує застосунки, а в самому Canvas нічого вмикати. Rezervito розпізнає таку тему: доки вона активна, а вбудовування вимкнено, крок посібника з налаштування Увімкніть кнопку «Забронювати» повідомляє, що вашу активну тему, схоже, створено в Canvas, і замість Відкрити редактор теми показує адресу вашої сторінки бронювання з кнопкою Копіювати посилання. (Якщо Rezervito взагалі не бачить вашої активної теми, крок повідомляє «Ми не бачимо вашої активної теми» і пропонує ту саму адресу.)

У такому разі можна:

  • надсилати клієнтам посилання на сторінку бронювання: додайте його в меню й використовуйте в соцмережах, листах і QR-кодах; або
  • опублікувати звичайну тему й увімкнути вбудовування Забронювати в ній.

Крок залишається відкритим, доки вашої активної теми не видно, і позначається виконаним сам, щойно вбудовування ввімкнено в активній темі, яку Rezervito бачить.

Під час бронювання з’являється «Щось пішло не так»

Адреса Rezervito майже в кожному магазині — /apps/booking, але у вашому вона може бути іншою. Її можна змінити в Shopify (Налаштування → Застосунки → Rezervito → App proxy), а Shopify дає Rezervito іншу адресу, наприклад /apps/booking-1, коли /apps/booking уже використовує інший застосунок. Rezervito сам переходить на нову адресу, щойно до нього доходить хоч один візит: вікно бронювання саме пробує /apps/booking-1, /apps/booking-2 і /apps/booking-3, а картка Де клієнти можуть бронювати тоді показує вашу сторінку бронювання за новою адресою. Посилання в листах про бронювання, надісланих після цього, теж ведуть на нову адресу.

Якщо вікно бронювання й далі показує лише «Щось пішло не так. Спробуйте ще раз.», відкрийте магазин у редакторі теми: там вікно бронювання каже вам, і лише вам, що не так. У Shopify перейдіть у Налаштування → Застосунки → Rezervito, один раз відкрийте вказану там URL-адресу App proxy і перезавантажте магазин.

Не знайшли відповіді?

Напишіть нам на support@fedevapps.com або скористайтеся «Зв’язатися з нами» в Rezervito.

Усі статті довідки