Як вбудувати онлайн-меню на веб-сайті вашого ресторану

TL;DR

• Вбудовування означає вставку фрагмента згенерованого коду на одну сторінку або шаблон. Зазвичай не потрібно спеціальної розробки.
• Основна перевага полягає в розділенні: персонал редагує страви та ціни в інструменті меню, а веб-сайт оновлюється без розробника або нового PDF.
• Розмістіть меню у вашій основній навігації та кнопці на головній сторінці, а не захованим у посиланні в нижньому колонтитулі. Залиште пряме посилання та QR-код як резервний варіант.
• Тестуйте спочатку на мобільних пристроях. Саме там більшість гостей його відкриють.
• Якщо ви не хочете поєднувати інструменти, RESTOBOT включає вбудоване меню у свій конструктор веб-сайтів без комісії за замовлення.

Зміст

• Що насправді означає "вбудовування" меню
• Підготуйте контент перед тим, як торкатися до коду
• Покроково: вбудовування віджета меню
• Куди помістити меню, щоб гості його дійсно побачили
• Тільки меню чи меню плюс замовлення?
• Наша перспектива
• Де RESTOBOT підходить
• Поширені помилки при вбудовуванні меню
• Швидкий контрольний список перед запуском
• Часті запитання
• Джерела

Що насправді означає "вбудовування" меню

Існує три поширені способи розміщення меню в Інтернеті, і вони поводяться дуже по-різному.

Меню тільки у форматі PDF або ePaper може бути пов'язане або вбудоване, але не надає вам можливості живого замовлення, бронювання або контролю доступності. Це важливо в момент, коли страва закінчується або постачальник змінює ваші витрати.

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

Підготуйте контент перед тим, як торкатися до коду

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

1. Категорії в порядку, в якому думають гості. Закуски, основні страви, гарніри, десерти, напої. Тримайте список коротким. Сім або вісім категорій читаються краще, ніж п’ятнадцять.
2. Назви страв і короткі описи. Один рядок про основні інгредієнти та спосіб приготування. Уникайте поезії.
3. Ціни, остаточні та послідовні. Використовуйте один і той же формат на всіх рядках, наприклад, £12.50 на кожному рядку, а не змішування £12.5 і 12.50.
4. Фотографії страв, які продаються. Вам не потрібно фотографувати кожен пункт. Почніть з ваших найпопулярніших страв і фірмових тарілок. Наш посібник з фотографування ресторанного меню за один день показує, як це зробити без студії.
5. Інформація про дієтичні обмеження та алергени. Чітко позначайте вегетаріанські, веганські та безглютенові страви. У Великій Британії Агентство з питань стандартів харчування говорить, що ресторан або кафе повинні надавати інформацію про алергени, або в меню, або через підказку, що пояснює, як її отримати. Перевірте сторінку FSA, щоб дізнатися, що стосується вашого закладу.

Якщо ви хочете дізнатися більше про те, що показувати і де, наша стаття про оптимізацію онлайн-меню для власників охоплює оформлення та презентацію цін.

Дизайн категорій та фотографії страв

Два деталі змінюють те, як меню виглядає на маленькому екрані.

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

Фотографії. Використовуйте один і той же співвідношення, зазвичай квадратне або 4:3, щоб сітка виглядала охайно. Тримайте файли стиснутими, щоб сторінка швидко завантажувалася на мобільних даних. Меню з десятьма хорошими фотографіями краще, ніж одне з сорока нерівними.

Покроково: вбудовування віджета меню

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

1. Створіть меню. Додайте категорії, страви, ціни, фотографії та дієтичні мітки у вашому інструменті меню.
2. Налаштуйте вигляд. Виберіть оформлення, кількість стовпців і кольори, щоб воно відповідало вашому сайту. Керування стовпцями та шириною допомагає адаптувати віджет до коротших або довших меню.
3. Скопіюйте згенерований код. Це зазвичай короткий тег скрипта або iframe.
4. Відкрийте потрібну сторінку на вашому сайті. Створіть сторінку "Меню", якщо у вас її немає.
5. Вставте код у блок HTML або вбудовування. Не вставляйте його в блок простого тексту, який покаже код як текст.
6. Опублікуйте та протестуйте на телефоні. Потім протестуйте на настільному комп'ютері та планшеті.

Інструменти віджетів вказують на сумісність з WordPress, Wix, Squarespace, Webflow, Shopify, Joomla та простим HTML, тому шлях подібний, незалежно від того, який конструктор ви використовуєте. Якщо ваш сайт був створений агентством, запитайте їх про місце розташування блоку вбудовування або шаблону. Веб-дизайнерська студія, така як Hook Digital в Оксфорді, може порадити щодо технічних варіантів для поширених платформ веб-сайтів, якщо вам потрібна практична допомога.

Точка невдачі, про яку ніхто не згадує

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

Якщо макет виглядає переповненим на телефоні, проблема часто полягає в сторінці, а не в віджеті. Питання відображення на різних пристроях є питанням дизайну так само, як і технічним, як ілюструє робота агентства, така як цей сайт ресторану.

Де розмістити меню, щоб гості його дійсно побачили

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

• Головна навігація. "Меню" повинно бути одним з перших пунктів, а не під "Більше".
• Кнопка на головній сторінці. Один чіткий заклик до дії над згином на мобільному.
• Пряме URL. Дайте меню власну сторінку, наприклад yoursite.co.uk/menu, щоб його можна було ділитися та індексувати.
• Резервний варіант. Залиште пряме посилання та QR-код таблиці. Наш посібник по QR-кодам для онлайн-меню пояснює, як це налаштувати.
• Google. Якщо ваше меню не з'являється у вашому профілі Google, дізнайтеся, як виправити блоки партнерських фідів і опублікувати ваше меню в Google.

Для ширшої структури кращі практики веб-сайтів ресторанів пояснюють, як отримувати замовлення в один дотик, а якщо ви хочете зробити сторінку легкою для пошуку, рекомендації щодо SEO для ресторанів є корисною відправною точкою.

Меню лише, чи меню плюс замовлення?

Меню лише для відображення відповідає на питання "що ви подаєте?". Воно не приймає гроші. Перед вибором інструмента вирішіть, що ви хочете, щоб вбудовування робило.

Лише для відображення. Найдешевше і найпростіше. Добре для пабу або кафе, яке приймає замовлення на прилавку.

Меню плюс замовлення. Гості вибирають, платять, а ви отримуєте замовлення. Тут важливі збори. Ринкові платформи, такі як Uber Eats, Glovo, Bolt Food, Wolt, Just Eat і Pyszne, стягують 30% від чистої вартості замовлення плюс ПДВ, майже 40% загалом. На кошик за £30 це велика частка тонкого маржі. Замовлення через ваш власний сайт уникає цього, а з RESTOBOT комісія за замовлення становить 0%. Ви платите лише щомісячну підписку.

Меню плюс бронювання. Меню поруч із кнопкою бронювання корисне для ресторанів, де гості перевіряють страви перед вибором столика.

Коли меню, замовлення та бронювання всі знаходяться на одному сайті, гостю ніколи не потрібно виходити, щоб завершити справу. Якщо ви зважуєте витрати, наш аналіз реальних бюджетів веб-сайтів ресторанів надає реалістичні цифри, а швидке створення веб-сайту ресторану викладає план запуску.

Наша перспектива

Ми спостерігаємо ту ж саму тенденцію серед власників ресторанів. Вони починають з PDF, оскільки це швидко, а потім витрачають роки на повторний експорт щоразу, коли змінюється ціна. Реальна вартість не в годинах, витрачених на завантаження. Це тижні, коли веб-сайт показує меню минулого сезону, а гості приходять, очікуючи страву, яку ви більше не подаєте.

Отже, наша думка проста: меню повинно бути живим документом в одному місці, а все інше повинно читати з нього. Саме тому конструктор веб-сайтів у RESTOBOT має меню та резервування вбудованими з самого початку, а не залишає вас склеювати окремі віджети разом. Замовлення можуть надходити з веб-сайту та з бота Telegram, і ми не беремо комісію з них.

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

*— АДМІН*

Де RESTOBOT підходить

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

План MENU починається з 69 EUR на місяць, а план FULL, з повним набором функцій, — з 119 EUR на місяць. Річна оплата становить 59 EUR на рік для MENU і 99 EUR на рік для FULL. Дивіться повні деталі плану та ціни, щоб вибрати той, що підходить для вашого закладу.

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

Загальні помилки при вбудовуванні меню

• Вставка в текстовий блок. Код з'являється як слова на сторінці. Використовуйте HTML або елемент вбудовування.
• Забування про повторну публікацію сайту. Деякі конструктори потребують ручної публікації після додавання фрагмента.
• Залишення старих PDF активними. Пошукові системи та старі посилання продовжують надсилати гостей до застарілих цін. Видаліть їх або перенаправте на нову сторінку меню.
• Занадто великі фотографії. Повільне завантаження — це найшвидший спосіб втратити мобільного відвідувача.
• Відсутність резервного варіанту. Якщо скрипт заблоковано розширенням браузера або корпоративною мережею, пряме посилання все ще працює.
• Ігнорування відгуків. Хороша сторінка меню працює найкраще поряд із соціальним підтвердженням. Дивіться, як вбудувати відгуки Google на вашому веб-сайті.

Нарешті, уважно розгляньте основи перед покупкою нових інструментів. Наша стаття про операційну ефективність ресторану стверджує, що виправлення витрат є пріоритетом перед додаванням технологій. Якщо ви також продаєте кейтеринг, онлайн-замовлення для кейтерингу показує, як вийти в ефір за день.

Швидкий контрольний список перед запуском

1. Кожна категорія та страва присутні з фінальними цінами.
2. Найпопулярніші страви мають фотографії з однаковим співвідношенням.
3. Дієтичні мітки та інформація про алергени перевіряються тим, хто найкраще знає кухню.
4. Вбудований елемент знаходиться на окремій сторінці, на яку є посилання з основної навігації та кнопки на головній сторінці.
5. Сторінка швидко відкривається на мобільних даних, і кожна цільова кнопка працює.
6. Пряме посилання та QR-код ведуть до одного й того ж меню.
7. Старі PDF-файли видаляються або перенаправляються.
8. Одна призначена особа відповідає за оновлення, щоб ціни залишалися актуальними.

FAQ

Чи потрібен мені розробник, щоб вбудувати онлайн-меню?

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

Чи можу я вбудувати меню в WordPress, Wix або Squarespace?

Так. Постачальники віджетів вказують підтримку для WordPress, Wix, Squarespace, Webflow, Shopify та простого HTML. Ви додаєте згенерований код в HTML або вбудований блок на сторінці, де повинно з'явитися меню.

Чи краще вбудоване меню, ніж PDF?

Для більшості ресторанів так, тому що ціни та страви можна оновлювати в одному місці без повторного завантаження файлу. PDF-файл підходить як друкована резервна копія, але не може запропонувати живу доступність, замовлення або бронювання.

Як я можу переконатися, що меню працює на телефонах?

Відкрийте опубліковану сторінку на принаймні одному iPhone та одному Android телефоні. Прокрутіть через кожну категорію, відкрийте страву та натисніть кожну кнопку. Якщо макет виглядає тісно, розширте контейнер або перемістіть вбудований елемент з вузької колонки.

Чи слід мені також зберігати QR-код і пряме посилання?

Так. Вони діють як резервний варіант, якщо скрипт заблоковано, а QR-код служить гостям за столом. Обидва повинні вказувати на одне й те ж живе меню, щоб нічого не було в розбіжності.

Sources

• Elfsight: Restaurant Menu widget (guide)
• Elfsight: how to create a Restaurant Menu widget
• Elfsight: Restaurant Menu widget for website
• Speisekarte.de: digital menu embedding
• Food Standards Agency: allergen information for consumers
• Hook Digital: website design and development
• Blucat Group: restaurant website development
• Baby Love Growth: SEO for restaurants

Recommended

• Online Menu QR Code Setup for Restaurants: A Fast Guide
• Fix Partner Feed Blocks to Publish Your Restaurant Menu on Google
• Profit First, Orders Up in Weeks: Online Menu Optimization for Owners
• Build a Restaurant Website Fast: A Launch Plan That Works