Экран покупателя iiko: что показывать гостю и как настроить

Экран покупателя — это второй экран на кассе, повёрнутый к гостю. Пока кассир собирает заказ, гость видит, какие блюда и по какой цене добавляются в чек, какая применяется скидка и сколько нужно заплатить. Когда касса свободна, экран показывает рекламу, а при оплате — QR-код для перевода по СБП или чаевых.

В iiko экран покупателя — это приложение веб-офиса и плагин на кассе. Оформление экрана, рекламные кампании, QR-коды и подсказки для кросс-продаж настраиваются в веб-офисе без программирования. Экран доступен для iiko версии 7.2.7 и выше.

В статье разбираем, в каких режимах работает экран, что на нём показывать гостю и как настроить его по шагам: от загрузки материалов до привязки к кассе.

Пять режимов экрана покупателя

• Экран заказа. Пока кассир выбирает блюда на терминале, гость видит на экране, какие позиции, с какой стоимостью и скидками добавляются в заказ.
• Режим ожидания. Когда на кассе ничего не происходит, экран показывает рекламу. Как только кассир нажмёт любую кнопку или коснётся экрана терминала, снова появится экран заказа.
• Экран оплаты. Необязательный режим. Когда кассир переходит к оплате, гость видит дополнительный экран — например, с итоговой суммой и способами оплаты.
• Экран завершения. Необязательный режим. После закрытия заказа на заданное время показывается экран с дополнительной информацией: «Благодарим за покупку» или «Перейдите к окну получения заказа».
• Касса не работает. Включается автоматически, когда на терминале нет открытой кассовой смены: гость видит сообщение, что эта касса не обслуживает. Вместе с сообщением можно показывать рекламу. Если тема для режима не настроена, экран чёрный.

Что показывать гостю

Набор элементов на экране свободный, поэтому решайте исходя из задачи:

• Состав заказа с ценами и скидками. Гость видит чек до оплаты и контролирует, что ему пробили. Меньше споров на кассе и возвратов. Дополнительно можно выводить подытог, предоплату, сдачу и баллы гостя по программе лояльности.
• Последнее добавленное блюдо. Отдельный блок с названием, количеством, калорийностью, аллергенами и описанием позиции, которую только что добавили в заказ. Полезно там, где гость спрашивает о составе.
• Реклама и акции. Изображения и видео в режиме ожидания, на экране заказа, оплаты и завершения. Кампании привязываются к датам, дням недели и времени суток — например, бизнес-ланч показывается только с 11:00 до 14:00.
• QR-коды. Оплата заказа по СБП или через Плати QR, перевод чаевых официанту. Код генерируется кассой в момент оплаты.
• Подсказки. Кросс-продажи: добавили капучино — на экране появляется круассан со скидкой, а у кассира кнопка, чтобы добавить его в заказ одним нажатием.
• Анимация. Всплывающее окно, которое анимирует последнее добавленное блюдо, контрол, текст или изображение — чтобы гость заметил изменение в заказе.

Что нужно для подключения

• Версия iiko. Кассовое приложение iiko версии 7.2.7 и выше.
• Плагин на кассе. На кассовый терминал устанавливается плагин экрана покупателя Resto.Front.Api.DigitalSignage. Его подключает поддерживающий партнёр iiko. Версия плагина должна подходить к версии кассы и к плагину Resto.Front.Api.iikoTransport — обновлять их нужно синхронно.
• Устройство для показа. Второй монитор, подключённый к кассе, или отдельное устройство с браузером в той же сети. Во втором случае на устройстве открывается адрес кассы с установленным плагином, порт 9150.
• Доступ в Cloud API. В веб-офисе нужно указать, в каких группах терминалов работают экраны покупателя.

Чтобы разрешить доступ: на главной странице веб-офиса в разделе «Внешние заказы» откройте приложение «Настройки Cloud API», перейдите на вкладку «Организации» и нажмите на название ресторана. В разделе «Разрешить доступ к терминальным группам» отметьте нужные группы и сохраните. Остальные настройки можно оставить по умолчанию.

Сразу после подключения на всех экранах покупателя начнёт показываться контент по умолчанию — тот, что задан в разделе «Настройка дисплея» как привязка по умолчанию.

Как устроена настройка

Всё оформление собирается в веб-офисе iiko: «Экраны и звуки» → «Экран покупателя». Настройка состоит из пяти шагов:

• Загрузить изображения и видео в галерею.
• Создать контролы — элементы, которые показывают на экране информацию о блюде.
• Собрать тему — разметку экрана для каждого режима и каждого размера дисплея.
• Настроить рекламные кампании — наборы изображений и роликов с расписанием.
• Привязать тему и кампании к кассам.

Заранее определитесь с размерами экранов. Если в заведении несколько устройств с разным разрешением, для каждого готовится свой вариант подложки, логотипа и роликов — все варианты удобно держать в одной кампании.

Шаг 1. Загрузите материалы в галерею

Галерея — хранилище изображений, видео и звуков для всех экранов iiko. Загруженные файлы становятся доступны при настройке тем, контролов и кампаний. Размер одного файла — до 100 МБ, занятый объём хранилища виден на экране галереи. Файлы можно раскладывать по папкам: по формату или по назначению — для экрана покупателя, для экранов выдачи заказов, для звуков.

Видео поддерживается только в кодеке H.264. Если ролик загрузился, но не показывается на экране, проверьте кодек и при необходимости перекодируйте файл — например, утилитой ffmpeg.

Шаг 2. Создайте контролы

Контрол — это элемент, который выводит на экран информацию о блюде из кассового приложения: название, цену, описание, аллергены, изображение. Создаются контролы в разделе «Экран покупателя» → «Контролы»: нажмите «Добавить», выберите тип «Стандартный», задайте имя и по кнопке «Добавить элементы» отметьте, что именно показывать гостю.

Для стандартного контрола доступны: текст и изображение, название продукта — в том числе на иностранном языке и в полном варианте, количество и единица измерения, описание, цена, аллергены, пищевая ценность и масштаб продукта — для блюд с размерами показывает, какой размер выбрал гость. Для контрола типа «Подсказка» набор другой: название и текст подсказки, изображение, название блюда, название и размер скидки, цена без скидки и со скидкой.

У каждого элемента настраивается оформление — цвет, границы и шрифт. Чтобы открыть настройки, нажмите на название элемента в блоке «Элементы». Готовый контрол добавляется в тему.

Шаг 3. Соберите тему

Тема определяет, где на экране расположены элементы: логотип, список заказа, сумма, скидки, реклама, QR-коды. Создаётся в разделе «Экран покупателя» → «Темы»: нажмите «Добавить», введите имя и задайте разрешение. Если стандартных вариантов нет, в выпадающем списке нажмите «Добавить» и укажите размеры своего экрана.

Для экрана заказа и режима ожидания по кнопке «Добавить элемент» разместите на макете:

• изображение для фона;
• блоки для состава заказа, скидки, итоговой суммы;
• рекламный блок — в теме только размечается место под рекламу, сами материалы задаются в кампании;
• текст, изображения и панели QR-кодов.

Чтобы контуры элементов были заметнее, включите настройку «Границы» — они будут видны и на экране покупателя. Экран оплаты, экран завершения и режим «Касса не работает» необязательны: чтобы они работали, включите переключатель «Активировать». Для экрана завершения укажите «Интервал смены экрана» — сколько секунд показывать его после закрытия заказа.

Кроме базовых блоков в тему можно добавить:

• Область подсказок — здесь при выборе блюда появляется рекомендация с итоговой стоимостью. Для области нужен контрол типа «Подсказка».
• Всплывающее окно — анимация контрола, текста, изображения или последнего добавленного блюда. Настраиваются тип анимации и время показа. В теме может быть только одно всплывающее окно.
• Последнее добавленное блюдо — название, калорийность, количество, аллергены. Таких элементов можно добавить сколько нужно.
• Текст, изображение, прямоугольник — для оформления, подписей и статичной информации.
• Подытог, предоплата, сдача, сумма, скидка, баллы клиента — финансовая информация о заказе и бонусах гостя.
• Текущее время — системное время устройства, на котором работает экран.
• QR-код, QR-код чаевых, Плати QR и Kaspi QR — панели с QR-кодами, о них ниже.

Тему можно скопировать кнопкой «плюс» — копия появится в списке с пометкой Copy, её удобно редактировать под второй экран. Темы раскладываются по папкам. Чтобы на экране показывалась актуальная валюта, нужен параметр в офисном приложении — его включает партнёр.

Шаг 4. Настройте рекламные кампании

Кампании создаются в разделе «Экраны и звуки» → «Кампании». Нажмите «Добавить», укажите название, период и время действия, дни недели показа и разрешение изображений. Размер ролика или картинки должен точно совпадать с экраном: для устройств с разным разрешением готовьте отдельные материалы.

Нажмите «Создать», выберите режимы, в которых показывается кампания — экран заказа, оплаты, завершения или режим ожидания, — и по кнопке «Добавить изображение или видео» возьмите файлы из галереи или загрузите с устройства. В блоке предпросмотра задайте длительность показа каждого файла. Несколько картинок и роликов будут сменять друг друга через заданное время.

Если периоды кампаний пересекаются, на экране по очереди показывается контент обеих. Так работает связка «основная кампания на год плюс новогодняя на две недели» или реклама бизнес-ланча, которая дополняет основной контент только днём. Созданную кампанию можно редактировать, удалять и переносить в папку.

Шаг 5. Привяжите тему и кампании к кассам

При запуске кассового приложения плагин регистрирует кассу в веб-офисе, и она появляется в разделе «Экран покупателя» → «Настройка терминалов». В некоторых версиях веб-офиса раздел называется «Дисплей покупателя» → «Настройка дисплея» — логика та же. Если в блоке с названием ресторана пусто, плагин не установлен ни на одной кассе.

Для каждой кассы выберите тему и одну или несколько рекламных кампаний, затем сохраните. Кампания для режима «Касса не работает» привязывается именно здесь: если добавить её только в тему, в этом режиме будет чёрный экран. Блок «Привязка по умолчанию» задаёт тему и кампанию для новых устройств, у которых ещё ничего не настроено. По кнопке «Выбрать меню» укажите внешнее меню, из которого в тему подтягиваются изображения блюд.

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

QR-коды на экране: оплата по СБП, Плати QR и чаевые

Если на кассе установлен и настроен плагин оплаты по QR-кодам, экран покупателя умеет показывать код в момент оплаты. Для этого в теме по кнопке «Добавить элемент» выбирается один из четырёх шаблонов:

• QR-код — оплата заказа через Систему быстрых платежей. Панель состоит из верхней строки с произвольным текстом, области кода, строки с суммой заказа и нижней строки с текстом. Код и сумма генерируются кассой при оплате.
• QR-код чаевых — перевод чаевых сотруднику через СБП. Элементы те же, но строку с суммой можно скрыть, чтобы гость выбирал сумму сам.
• Плати QR — оплата через систему Сбербанка. Кроме кода и суммы панель содержит обязательные логотипы и обязательный текст, оформление которого можно менять.
• Kaspi QR — аналогичная панель для оплаты через Kaspi.

Чтобы настроить панель, нажмите на добавленный элемент. В меню справа вводится текст строк, а на вкладках «Макет», «Граница» и «Шрифт» меняются расположение строк и кода, размер и цвет текста, шрифт и фон. Саму панель можно перетаскивать и растягивать за границы, чтобы вписать в макет.

Важная деталь: после настройки панель QR-кода нужно скрыть — в блоке «Добавить элемент» нажмите на значок глаза рядом с элементом QR. Видимостью кода управляет не веб-офис, а касса через API: она покажет панель в момент оплаты. Если панель не скрыть, на экране будет постоянно висеть исходный шаблон без ваших настроек. После этого дайте теме имя и сохраните: в списке тем по клику на название откроется предпросмотр с вашим QR-кодом.

Подсказки: кросс-продажи на кассе

Подсказки показывают гостю персональную рекомендацию в момент, когда он добавляет блюдо в заказ: к кофе — круассан или пирожное, к пицце — напиток или соус, к мороженому — топпинг. Кассир озвучивает предложение и добавляет товар одним нажатием. К рекомендации можно привязать скидку — она применится автоматически.

Скидку для подсказок плагин сам создаёт в офисном приложении, если её ещё нет, после чего офису и кассе нужно время на синхронизацию: для одиночного ресторана около 10 минут, для ресторанов в сети дольше. Настройка подсказок состоит из четырёх шагов.

1. Подготовьте внешнее меню

Изображения блюд для подсказок берутся из внешнего меню — того же, что используется для сайта и мобильного приложения. В веб-офисе откройте «Внешние заказы» → «Внешние меню», создайте или отредактируйте меню, добавьте блюда, которые будете рекомендовать, и загрузите для каждого изображение.

2. Создайте подсказку

В разделе «Экраны и звуки» → «Подсказки» нажмите «Добавить» и заполните настройки:

• название, период действия и время показа в течение дня — например, каждый день с 9:00 до 12:00; дата обязательна, время — по необходимости;
• где показывать: на экране покупателя, на экране кассира или на обоих;
• «При выборе» — блюда-триггеры, одно или несколько; при их добавлении в заказ срабатывает подсказка;
• «Рекомендовать» — одно блюдо, которое предлагается гостю;
• своё изображение, если не подходит картинка из внешнего меню, и текст рядом с подсказкой;
• опция «Благодарность» — скидка сработает и в обратном порядке: гость сначала заказал круассан, а потом капучино, условие выполнено, система даёт скидку и показывает текст благодарности;
• скидка — процент или фиксированная сумма.

3. Добавьте контрол подсказки в тему

Возьмите один из системных контролов типа «Подсказка» или создайте свой, при необходимости отредактируйте оформление. В теме должна быть область подсказки, в которой выбирается этот контрол. Сохраните тему.

4. Включите подсказки на терминалах

В разделе «Экран покупателя» → «Настройка терминалов» по кнопке «Выбрать меню» укажите подготовленное внешнее меню, в строке нужного терминала выберите одну или несколько подсказок и нажмите «Отправить настройки», чтобы касса получила изменения.

Результат: гость видит на экране изображение блюда, название, цену и скидку, если она настроена, а кассир — окно с подсказкой и кнопкой быстрого добавления товара в заказ.

Рекомендации и типичные проблемы

• Качество материалов. Готовьте изображения и видео в хорошем качестве и под разрешение конкретного экрана. Материалы не того размера растягиваются или обрезаются, а тяжёлые файлы тормозят экран.
• Не перегружайте экран. Его главная задача — показать гостю заказ. Реклама не должна мешать читать чек и раздражать.
• Обновляйте систему и плагины. Версия плагина DigitalSignage должна соответствовать версии кассы и плагина iikoTransport. Обновляйте их синхронно и до актуальных версий, перед обновлением делайте резервную копию.
• Тестируйте сценарии. Проверьте работу экрана при добавлении скидок, удалении позиций и использовании купонов: изменения должны появляться на экране без задержек.
• Блокировка Windows. Windows 11 может блокировать dll-файлы плагина без уведомления — при запуске кассы появляется сообщение об ошибке. Решение: отключить Smart App Control в настройках безопасности Windows или вручную разблокировать каждый dll-файл в папке плагина через «Свойства» → «Разблокировать».

Если проблема другая, обращайтесь к поддерживающему партнёру: логи плагина лежат в папке %appdata%\iiko\CashServer\Logs и помогают быстро найти причину.

Экран, который работает на обе стороны

Для гостя это прозрачность: он видит заказ, цены и скидку до оплаты и платит по QR-коду, не доставая карту. Для заведения — бесплатная рекламная поверхность у кассы, которая работает по расписанию, канал для чаевых по СБП и инструмент кросс-продаж, который предлагает сопутствующий товар за кассира и сам применяет скидку.

Вся настройка живёт в веб-офисе: галерея, контролы, темы, кампании и привязка к кассам. На стороне кассы нужен только плагин, который устанавливает и обновляет партнёр.

Экран под кассу, плагин DigitalSignage, темы, кампании, QR-коды и подсказки — настроим под ваше заведение и покажем первую кампанию уже на вашем экране.