Тип компонента Окно оформления заявки

Что это за компонент

Окно оформления заявки - это компонент, который открывает клиенту простую форму для запроса обратной связи.

Если говорить совсем просто, это кнопка или компактный блок, по нажатию на который открывается окно с:

• заголовком
• поясняющим текстом
• контактами компании
• полями для имени и контакта клиента
• кнопкой отправки заявки

Такой блок удобен, когда нужно быстро получить обращение от клиента без длинного оформления заказа и без перехода в отдельный сложный сценарий.

Когда использовать именно этот тип

Окно оформления заявки подходит, если нужно:

• собрать запрос на звонок
• получить быструю заявку от клиента
• предложить консультацию
• дать возможность оставить контакты для связи
• вынести на страницу простой сценарий общения с компанией

Этот тип особенно полезен на промо-страницах, лендингах внутри витрины, страницах услуг и в других местах, где клиенту важнее быстро оставить запрос, чем сразу оформлять покупку.

Как этот блок выглядит в Omnis и в mini app

Рабочая логика простая:

1. В Omnis создается компонент типа Окно оформления заявки.
2. В карточке компонента настраиваются текст, контакты, подписи кнопок и иконка.
3. После сохранения компонент размещается на нужной странице.
4. В mini app клиент видит кнопку или компактный блок.
5. После нажатия открывается окно заявки.
6. Клиент вводит имя и контакт, затем отправляет заявку.

1. Как создать компонент Окно оформления заявки

Обычно сценарий такой:

1. Откройте Управление -> CMS -> Компоненты.
2. Нажмите Создать.
3. В окне выбора типа выберите Окно оформления заявки.
4. Заполните название компонента.
5. При необходимости задайте код.
6. Заполните заголовок и подзаголовок формы.
7. Укажите контактные каналы компании.
8. Заполните текст кнопки открытия и кнопки отправки.
9. При необходимости добавьте иконку.
10. Сохраните компонент.
11. Разместите его в нужном слоте страницы.

2. Основные поля карточки

Сверху у Окна оформления заявки используются стандартные поля CMS-компонента.

ID

Это внутренний идентификатор записи. В повседневной работе он нужен редко.

Тип

Для этого документа тип всегда будет Окно оформления заявки.

Он определяет:

• состав полей компонента
• внешний вид блока у клиента
• набор собственных настраиваемых свойств

Код

Это служебный код компонента.

Если код не заполнен вручную, система обычно формирует его сама после сохранения.

Наименование

Это рабочее название компонента в Omnis.

Лучше использовать понятные названия, например:

• Кнопка заявки на консультацию
• Форма обратного звонка
• Оставить заявку
• Запрос связи с менеджером

Приоритет

Это служебный параметр порядка. Он помогает определить положение компонента среди других блоков страницы.

Активирован

Этот переключатель помогает:

• включать рабочий компонент
• хранить черновики
• временно скрывать блок без удаления

3. Все поля самого компонента

Ниже стандартных полей находится область настройки самого Окна оформления заявки.

Заголовок

Это главный заголовок формы, который клиент видит после открытия окна заявки.

Хорошие примеры:

• Оставьте заявку
• Нужна консультация?
• Свяжемся с вами
• Запросить обратный звонок

Заголовок должен быть коротким и понятным.

Подзаголовок

Это дополнительный текст под заголовком формы.

Он помогает мягко объяснить, что произойдет дальше. Например:

• Оставьте контакты, и мы свяжемся с вами
• Ответим на вопросы и подберем решение
• Менеджер свяжется с вами в рабочее время

Если дополнительное пояснение не нужно, поле можно оставить пустым.

Тлф. контакт

Это телефон компании, который показывается в окне заявки как быстрый способ связаться напрямую.

Если поле заполнено, клиент увидит кнопку с номером телефона и сможет нажать на нее для звонка.

Это полезно, если вы хотите дать клиенту выбор:

• сразу позвонить
• или оставить заявку через форму

E-mail контакт

Это адрес электронной почты компании.

Если поле заполнено, в окне заявки появится отдельная кнопка для письма.

Это удобно, если часть клиентов предпочитает письменную коммуникацию.

Telegram контакт

Это ссылка на Telegram для связи с компанией.

Если поле заполнено, в окне заявки появляется отдельная кнопка Telegram.

Важно указывать уже рабочую ссылку, которая действительно открывает нужный канал связи.

Whatsapp контакт

Это ссылка на WhatsApp для связи с компанией.

Если поле заполнено, в окне заявки появляется кнопка WhatsApp.

Как и в случае с Telegram, лучше заранее проверить, что ссылка ведет в правильный сценарий общения.

Надпись на кнопке отправки

Это текст основной кнопки отправки формы.

Именно эту кнопку клиент нажимает после заполнения заявки.

Хорошие примеры:

• Отправить
• Оставить заявку
• Заказать звонок
• Связаться со мной

Текст должен быть максимально понятным и коротким.

Маска ввода тлф.

Это поле связано с форматом ввода телефонного контакта.

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

Надпись поля контакта

Это подпись у первого поля формы.

На практике именно она подсказывает клиенту, что нужно ввести.

Важно учитывать текущее поведение формы: в стандартном сценарии это поле используется как подпись первого поля, где клиент указывает свое имя или удобный способ представиться.

Хорошие варианты:

• Ваше имя
• Как к вам обращаться
• Имя

Submit URL

Это служебное поле.

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

Надпись на кнопке

Это текст самой кнопки или компактного блока на странице.

Именно этот текст клиент видит до открытия формы.

Хорошие примеры:

• Оставить заявку
• Заказать звонок
• Связаться с нами
• Нужна консультация

Иконка

Это изображение, которое может показываться рядом с текстом кнопки.

Оно помогает:

• сделать кнопку заметнее
• усилить визуальный акцент
• поддержать фирменный стиль

Если иконка не нужна, поле можно оставить пустым.

4. Как выглядит форма заявки у клиента

После нажатия на кнопку открывается отдельное окно заявки.

В стандартном сценарии клиент видит:

• заголовок
• подзаголовок
• контакты компании, если они заполнены
• поле имени
• поле телефона
• кнопку отправки

Что клиент может сделать в этом окне

Клиент может:

• сразу позвонить по телефону компании
• написать на e-mail
• перейти в Telegram
• перейти в WhatsApp
• заполнить форму и отправить заявку

Это делает компонент удобным: он не навязывает только один путь связи, а дает несколько вариантов.

5. Автоподстановка данных в форме

У этого компонента есть важная практическая особенность: часть данных в форме может подставляться автоматически.

Если у клиента уже есть доступные данные профиля, форма может заранее заполнить:

• имя
• телефон

На практике это работает так:

• при первом открытии форма может использовать уже доступные клиентские данные
• если у клиента уже есть сохраненный телефон в профиле, он может подставиться автоматически
• если у клиента уже есть имя в профиле, оно тоже может подставиться в форму
• если данные еще не доступны, форма останется пустой, и клиент заполнит ее вручную

Это удобно, потому что:

• клиенту не нужно каждый раз вводить одно и то же
• форма заполняется быстрее
• вероятность успешной отправки заявки выше

Важно понимать:

• автоподстановка зависит от того, есть ли у системы доступ к данным клиента
• в Telegram Mini App данные могут подставиться после получения доступа к контактным данным клиента
• если данные недоступны или клиент их не предоставил, форма продолжит работать в обычном ручном режиме

6. Как отправляется заявка

В стандартном сценарии клиент заполняет два поля:

• имя
• телефон

После этого он нажимает кнопку отправки.

Если поля заполнены корректно, заявка создается, а клиент получает подтверждение об успешной отправке.

Если у клиента раньше еще не был сохранен телефон в его карточке, после такой отправки он может быть сохранен в системе и использоваться дальше в клиентских сценариях.

Что важно проверить перед публикацией

• понятен ли текст кнопки открытия
• корректно ли заполнены телефон, e-mail, Telegram и WhatsApp
• правильно ли подписаны поля формы
• достаточно ли ясно клиенту, зачем оставлять заявку

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

7. В каком виде заявка попадает в Omnis

После отправки такая заявка создается в Omnis как новый заказ.

Практически для сотрудников это значит, что искать ее нужно в разделе:

• Продажи -> Заказы

Внутри Omnis такая заявка попадает как обычная новая запись заказа, но со своими особенностями:

• источник заявки - онлайн-канал
• статус при создании - новый
• в заявке нет товарных позиций
• в примечание заказа попадает пометка, что это заявка из формы обратной связи
• имя клиента берется из поля имени формы
• телефон клиента берется из поля контакта формы

Это удобно для бизнеса, потому что:

• менеджеры работают с такой заявкой в знакомом разделе Заказы
• не нужно искать обращения в отдельном месте
• заявка сразу попадает в рабочий поток обработки

На практике это обращение оформляется как заказ без товаров, чтобы с ним было удобно работать дальше внутри Omnis по обычному рабочему процессу.

8. Как компонент выглядит в разных режимах

У Окна оформления заявки есть два основных варианта внешнего вида.

Стандартный режим

В стандартном режиме компонент выглядит как обычная кнопка с текстом и, при необходимости, иконкой.

Этот вариант подходит, если:

• на странице нужен заметный призыв к действию
• блок должен выглядеть как самостоятельная кнопка
• важно сделать акцент на заявке

Компактный режим

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

Этот режим удобен, если:

• блок нужно разместить в более плотной области экрана
• на странице уже есть крупные акцентные элементы
• нужен аккуратный дополнительный способ связи

9. Общие настраиваемые свойства компонента

Как и у других компонентов, у Окна оформления заявки действуют общие свойства блока.

Чаще всего здесь могут пригодиться:

• padding-y - внутренние отступы сверху и снизу
• padding-x - внутренние отступы слева и справа
• margin-y - внешние отступы сверху и снизу
• margin-x - внешние отступы слева и справа

Практически это помогает:

• отделить кнопку от соседних блоков
• сделать экран аккуратнее
• встроить компонент в нужный ритм страницы

10. Собственные настраиваемые свойства Окна оформления заявки

У Окна оформления заявки есть собственные настраиваемые свойства, которые управляют видом кнопки, иконки и компактного режима.

Режим отображения

• skin - режим отображения компонента

Практически здесь используются два варианта:

• пустое значение или стандартный режим - обычная кнопка
• compact - более компактный вариант отображения

В редакторе для skin теперь доступен готовый выбор этих режимов без ручного ввода.

Иконка

• image-format - размерный формат иконки

Это свойство помогает аккуратно вписать иконку в кнопку.

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

В редакторе доступны готовые значения xs, sm, md, lg, xl, thumb, original.

Основной вид кнопки

• bg-btn - фон кнопки
• color-text-btn - цвет текста кнопки
• width-btn - ширина кнопки
• round-btn - скругление кнопки
• height-btn - высота кнопки
• text-size-btn - размер текста кнопки
• padding-x-btn - внутренние горизонтальные отступы кнопки
• weight-btn - насыщенность текста кнопки
• gap-x-btn - расстояние между иконкой и текстом

Эти свойства помогают сделать кнопку:

• более заметной
• более спокойной
• удобнее для нажатия
• ближе к фирменному стилю витрины

Компактный режим

• compact-color-text-btn - цвет текста в компактном режиме
• compact-lh-label - высота строки текста в компактном режиме
• compact-size-label - размер текста в компактном режиме

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

11. Практические рекомендации по настройке

Чтобы Окно оформления заявки действительно работало на получение обращений, полезно придерживаться нескольких правил.

Пишите ясный заголовок и кнопку

Клиент должен сразу понимать, что произойдет после нажатия. Чем яснее формулировка, тем легче человеку принять решение оставить заявку.

Не перегружайте форму лишними обещаниями

Лучше коротко и спокойно объяснить, что с клиентом свяжутся, чем перегружать форму длинным маркетинговым текстом.

Проверяйте все каналы связи

Если вы заполняете телефон, e-mail, Telegram или WhatsApp, обязательно проверьте, что каждый канал реально открывается и ведет туда, куда нужно.

Если не уверены в служебных полях, не меняйте их

Это особенно относится к Маске ввода тлф. и Submit URL. В стандартной работе их обычно не меняют без понятной причины.

Проверяйте результат на телефоне

Именно на мобильном экране лучше всего видно:

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