35 поп-апов, которые покорят вас с первого взгляда

Содержание:

Как создать и вызвать модальное окно?
Доступ к попапу из основного окна
Достоинства и недостатки форматов
Popup в Elementor по кнопке
Адаптируйте
Как сделать pop up, который не бесит, а продает
Images
Как создать pop-up
Перезвоним вам
- Помощники
- Шпионы
Смешанные поп-апы
Качественный pop-up
WP Popups: Список возможностей
Всплывающее окно с формой
Lemonstand
Описание скрипта модального окна
Всплывающее окно
Поп-апы при добавлении товара в корзину

Как создать и вызвать модальное окно?

Эта реализация модального окна не требует непосредственного размещения его HTML кода на странице. Это выполняется программно.

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

var modal = $modal();

При создании окна вы можете сразу же его настроить, для этого в данную функцию необходимо передать данные в формате объекта. Осуществляется это с помощью соответствующих ключей (свойств). Например, с помощью ключа вы можете задать заголовок, который будет иметь всплывающее окно по умолчанию. Ключ позволяет установить содержимое, а – кнопки для отображения их в его нижней части (футере).

var modal = $modal({
  title: 'Текст заголовка',
  content: '<p>Содержимое модального окна...</p>',
  footerButtons: 
});

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

Ключ в отличие от и принимает в качестве значения массив объектов. Каждый объект в этом массиве представляет собой кнопку. Она задаётся с помощью ключей , , . С помощью них вы можете установить кнопке (элементу ) текст, значение атрибутов и . Если ключ вообще не указать, то в этом случае модальное окно будет создано без футера.

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

var modal = $modal({
  title: 'Текст заголовка'
});

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

var modal = $modal();

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

Но функция не только создаёт модальное окно в DOM, но также предоставляет методы для управления им.

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

В эту созданную переменную будет помещён объект (а точнее ссылка на него), имеющий следующие методы:

– для отображения модального окна;
– для скрытия модального окна;
– для удаления модального окна из DOM и связанных с ним обработчиков событий;
– для установки контента;
– для установки заголовка.

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

Рассмотрим, как работать с этими методами на примерах.

Например, метод используется когда вам необходимо показать (открыть) модальное окно:

modal.show();

Метод применяется для его скрытия:

modal.hide();

Методы и предназначены соответственно для изменения контента и заголовка модального окна после его создания.

modal.setContent('<p>Новое содержимое...</p>');
modal.setTitle('Текст нового заголовка');

В возвращаемом объекте также есть метод . Его необходимо использовать только когда вам необходимо полностью удалить модальное окно из DOM, а также связанные с ним события:

modal.destroy();

Данную операцию имеет смысл использовать только в том случае, если созданное модальное окно вам больше не нужно на странице.

Доступ к попапу из основного окна

Какие выплаты положены за первого ребенка

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

Например, здесь мы генерируем содержимое попапа из JavaScript:

А здесь содержимое окна модифицируется после загрузки:

Обратите внимание: сразу после новое окно ещё не загружено. Это демонстрируется в строке

Так что нужно ждать , чтобы его изменить. Или же поставить обработчик на .

Политика одного источника

Окна имеют свободный доступ к содержимому друг друга только если они с одного источника (у них совпадают домен, протокол и порт (protocol://domain:port).

Иначе, например, если основное окно с , а попап с , это невозможно по соображениям пользовательской безопасности. Детали см. в главе Общение между окнами.

Достоинства и недостатки форматов

8 параметров групповой политики windows, которые должен знать каждый администратор

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

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

К сожалению, на этапе тестирования достаточно сложно контролировать целевую аудиторию, поэтому зачастую приходится работать с «холодным трафиком». Можно получить и ботов. Однако эта проблема решается с помощью чёрных списков.

Для вебмастеров также есть минус. Рекламу попандер и попап не любят поисковые системы. Они могу применить к площадке санкции и понизить её в выдаче. Однако на данный момент существуют продвинутые коды, которые значительно понижают риск получения санкций.

Popup в Elementor по кнопке

Символы которые не отображаются в стиме

Чтобы сделать всплывающее окно с обратной связью в Elementor не нужно больших знаний. Переходим в Popup Maker и в тригерах (ранее разбирали) добавляем через запятую id с помощью знака решетки через запятую. Не забываем обновлять тригер формы и сам проект.

Вносим ID в тригеры

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

Выводим параметры элемента в elementor

Переходим в предвариетльный просмотр, кликаем по кнопке, появляется всплывающее окно с обратной связью.

Показ формы связи через elementor

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

Адаптируйте

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

Тут возможны два пути:

Сделать поп-апы отдельно для мобильной и полной версии сайта;
Адаптировать всплывающие окна для разных устройств.

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

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

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

Вот так это будет выглядеть.

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

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

Как сделать pop up, который не бесит, а продает

“Поп апы – зло!” – кричат только те маркетологи, которые не умеют грамотно настраивать pop-up рекламу. Скрольте дальше и мы расскажем как настроить всплывающие окна, которые превратят трафик в лиды.

На примере крупных компаний убедимся, что поп ап может приносить деньги.

Digital Marketer – cообщество для маркетологов, которое рассказывает о новых кейсах и вдохновляющих стратегия развития. Благодаря pop-up, они получили:
- 2689 клиентов за 2 недели;
- увеличение продаж на 30.22%;
- увеличение пребывания на сайте на 35%.
Smart Marketer и Boom:
- получили 8997 дополнительных лидов за месяц;
- увеличили прибыль на 18,2%;
- продлили пребывание на сайте на 25,6%;
- количество просмотренных страниц выросло на 14,1%.
iSpionage улучшили трафик рефералов блога на 58% за 1 месяц.

Эти данные наталкивают на мысль, что это не поп-ап плохой, а просто кто-то не умеет с ним работать.

Оформляя pop-up, следуйте этим советам:

Images

SlideshowSlideshow GalleryModal ImagesLightboxResponsive Image GridImage GridTab GalleryImage Overlay FadeImage Overlay SlideImage Overlay ZoomImage Overlay TitleImage Overlay IconImage EffectsBlack and White ImageImage TextImage Text BlocksTransparent Image TextFull Page ImageForm on ImageHero ImageBlur Background ImageChange Bg on ScrollSide-by-Side ImagesRounded ImagesAvatar ImagesResponsive ImagesCenter ImagesThumbnailsBorder Around ImageMeet the TeamSticky ImageFlip an ImageShake an ImagePortfolio GalleryPortfolio with FilteringImage ZoomImage Magnifier GlassImage Comparison Slider

Как создать pop-up

Для создания попапов можно использовать следующие способы:

Специальные сервисы по созданию всплывающих форм. Например, Hellobar, GetSiteControl, Plerdy, WisePops, Keplerleads. В блоге мы рассказывали о 10 лучших сервисах, чтобы сделать попап.
Сервисы рассылки со встроенным редактором всплывающих форм (например, UniSender).
Аутсорс. Нанимаем верстальщика, который соберет попап вручную и поставит код на сайт.

Кроме того, создавать попапы можно с помощью различных плагинов. Например, с помощью плагинов попапов для WordPress:

ConvertPlug.
Ultimate Modal Windows.
Popups Generator.
Layered Popups.
Ninja Popups for WordPress.

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

Зарегистрироваться в сервисе.
В разделе «Инструменты» выбрать «Всплывающие формы».
Кликнуть «Создать форму» и выбрать подходящий шаблон.
Выбрать шаблон и дать название форме.
Отредактировать форму.
Настроить условия показа.
Выбрать список, в который будут попадать полученные данные.
Скопировать код формы и установить его на сайт.

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

Перезвоним вам

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

Помощники

Пользователя спрашивают, нашёл ли он то, что
искал. И если нет — предлагают заказать обратный звонок, чтобы консультант
объяснил всё подробнее. Иногда такие окошки всплывают даже раньше, чем
пользователь успевает проскроллить страницу до конца, но об этом позже.

Шпионы

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

Смешанные поп-апы

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

Сервис продажи электронных ЖД билетов UFS.Travel делает акцент на дружеское, полушутливое общение: поп-ап совмещает необычную подачу с пользой

Обратите внимание, что в этом случае поп-ап не только собирает базу подписчиков, но и делит её на 3 сегмента. Это хорошее решение, так как помогает присылать адресные предложения, которые с большей долей вероятности найдут отклик у подписчиков

Сервис рассылок UniSender также совмещает на своём поп-апе необычную подачу с пользой.

Качественный pop-up

Объявления воспринимаются визуально, поэтому нужно хорошо поработать над его оформлением

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

Несколько советов по оформлению объявления:

Сформулируйте правильный призыв к действию. Посетитель должен понимать, какую информацию пытается донести поп-ап реклама, что он получит взамен за совершенное действие.
Не переборщите с яркими цветами. Поп-ап должен выделяться на общем фоне, но не выедать глаза.
Старайтесь на разных страницах использовать различные варианты поп-апов, которые максимально соответствуют контенту.
Ценное предложение. Например — промокоды, бонусы, скидки или подарки.
Перед тем как запустить pop-up рекламу, не поленитесь, протестируйте ее. Если реклама будет мешать взаимодействовать с сайтом, пользователь уйдет.
Умеренное количество показов объявлений. Не пытайтесь навязывать клиенту продукт, старайтесь его заинтересовать бонусам или подарками.
Подобные фразы — «книгу уже скачало 10 000 человек», повышают уровень доверия.

WP Popups: Список возможностей

WP Popups поставляется как в бесплатной версии на WordPress.org (WP Popups Lite), так и в премиум-версии с большим количеством функций.

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

Что вы получаете в бесплатной версии?

5 разных мест для отображения всплывающих окон.
Визуальный конструктор шаблонов для управления дизайном и содержанием ваших всплывающих окон.
Подробные правила отображения для конкретного контента, пользователей, устройств и так далее.
3 различных правила запуска, включая время на сайте и глубину прокрутки
Интеграция с другими плагинами форм, такими как WPForms, Gravity Forms, MailPoet и другими.

Всплывающее окно с формой

Сделаем форму, которая будет открываться по клику на ссылку. Форма будет отправлять данные на ваш контроллер используя Ajax.

Пример SMARTY блока:

{capture name="content_for_popup"}
<form name="my_form" action="{""|fn_url}" method="post" class="cm-ajax">
    <div class="ty-control-group">
        <label class="ty-control-group__title" for="name">{__("your_name")}</label>
        <input id="name" size="50" class="ty-input-text-full" type="text" name="form_data" value="" />
    </div>
    <div class="buttons-container">
        <div class="ty-float-left">
{include file="buttons/button.tpl" but_name="dispatch" but_text=__("submit") but_role="submit" but_meta="ty-btn__primary ty-btn__big cm-form-dialog-closer ty-btn"}
        </div>
        <div class="ty-float-right">
            <a class="cm-dialog-closer ty-btn ty-btn__secondary" >Закрыть</a>
        </div>
    </div>
</form>
{/capture}

{include file="common/popupbox.tpl" text="Заголовок" content=$smarty.capture.content_for_popup link_text="Название ссылки"}

Lemonstand

Это было бы самое обычное всплывающее окно, если бы не анимация

Она привлекает внимание

Ясность: 1. Речь об электронной книге, и нам ее демонстрируют. Все понятно.

Контроль: 1. Контроль полный.

Креативность: 0,67. Очки за GIF-изображение и принадлежность бренду.

Релевантность: 1. Все отлично.

Очарование: 0,25. Ситуацию спасает только анимированное изображение.

Ценность: 1. Все честно.

Уважение: 1. Никакого «согласия на унижение» тут нет.

Всего: 85%

PetSmart

Самый простой пример из всех представленных. Но он призван продемонстрировать, что иногда оффер – это просто дополнительная информация, и все.

Ясность: 1. Кристально ясно.

Контроль: 1. Все работает как нужно.

Креативность: 0. Здесь креативностью даже не пахнет.

Релевантность: 1. Нам говорят о доставке на ecommerce-сайте. Все сходится.

Очарование: 0. Вот если бы добавили котят!

Ценность: 1. Определенно есть.

Уважение: 1. Все хорошо.

Всего: 71%

Анастасия Шестова, руководитель направления поискового продвижения ИнтерЛабс

Действительно, часто pop-up отвлекает и раздражает пользователей. При этом если добавляется назойливость, это прямая потеря подписчиков и возможных клиентов. Однако всплывающие окна не так уж и плохи, если их грамотно применять.

Разумеется, нет универсальных правил, подходящих ко всем pop-up, но есть ряд моментов, которые стоит учесть.

• Максимально простая форма и предложение получить что-то ценное в обмен на почту или телефон.

• Релевантность предложения – только то, что интересно вашим пользователям с учетом пути по сайту и проведенного времени. При этом оптимально использовать разные виды всплывающих окон и указывать, сколько пользователей уже воспользовалось, это вызывает доверие.

• Мини-персонализация – однократная демонстрация формы пользователям, автоматическое заполнение данных форм, если раньше они были введены на сайте.

• Временное использование – не стоит использовать одни и те же pop-up постоянно, лучше сразу определить временной промежуток применения с конкретной целью.

• Корректность отказа от предложения – не стоит прятать элементы управления окном, иначе пользователь вместо закрытого pop-up уйдет с сайта вообще. При этом лучше использовать нейтральное «Нет, спасибо», выделенное более спокойным фоном, чем оценочные суждения вида «Нет, меня устраивают мои средние возможности».

При этом оптимально тестировать различные варианты pop-up. Основной момент, который следует учитывать, – как соотносятся эффективность и негативный пользовательский опыт. И также нужно следить за тенденциями, например, что Яндекс против агрессивной рекламы.

Мне запомнился хороший pop-up на российском сайте Puma — https://ru.puma.com/. Занимает порядка 1/4 экрана, заполнение простой формы дает неплохую скидку 10% на первый заказ:

Описание скрипта модального окна

В этом разделе приведена информация для тех, кто хочет более подробно разобраться с тем, как работает это модальное окно.

Её JavaScript код представлен посредством функции :

$modal = function (options) {
  var
    _elemModal,
    _eventShowModal,
    _eventHideModal,
    _hiding = false,
    _destroyed = false,
    _animationSpeed = 200;

  function _createModal(options) { ... }
  function _showModal() { ... }
  function _hideModal() { ... }
  function _handlerCloseModal(e) { ... }

  _elemModal = _createModal(options || {});
  _elemModal.addEventListener('click', _handlerCloseModal);
  _eventShowModal = new CustomEvent('show.modal', { detail: _elemModal });
  _eventHideModal = new CustomEvent('hide.modal', { detail: _elemModal });

  return {
    show: _showModal,
    hide: _hideModal,
    destroy: function () { ... },
    setContent: function (html) { ... },
    setTitle: function (text) { ... }
  }
};

В качестве результата эта функция возвращает объект, состоящий из 5 методов. Они позволяют нам выполнять различные действия над созданным модальным окном. Назначение каждого метода, а также различные примеры как их использовать мы уже подробно рассмотрели выше. Здесь мы более подробно разберём внутренние переменные и функции .

В имеются следующие переменные , , , , , и функции , , , .

Функция предназначена для формирования HTML-кода модального окна (DOM структуры) и добавления её на страницу. В качестве результата она возвращает ссылку на базовый элемент этого модального окна. Т.к. нам эта ссылка нужна в других частях , то сохраним её в переменную :

_elemModal = _createModal(options || {});

Переменные и применяются для хранения созданных нами кастомных событий «show.modal» и «hide.modal». Событие «show.modal» мы будем вызывать при открытии модального окна, а «hide.modal» – при закрытии. Эти события будем генерировать для объекта . Используя их, вы можете очень просто добавить свою логику при открытии и закрытии модального окна:

document.addEventListener('show.modal', function (e) {
  // в e.detail содержится ссылка на открываемое модальное окно
  ...
});
document.addEventListener('hide.modal', function (e) {
  // в e.detail находится ссылка на корневой DOM-элемент закрываемого модального окна
  ...
});

Переменные и используются для хранения состояний. Первая применяется для индикации процесса скрытия модального окна. Она имеет значение во время скрытия окна, в остальных моментах — . Вторая переменная хранит или , в зависимости от того, удалены ли DOM элементы модального окна со страницы и связанные с ним события или нет.

Переменная используется для указания времени длительности процесса скрытия модального окна (в миллисекундах).

Функция предназначена для включения отображения модального окна на странице, а – для его скрытия.

Функция используется в качестве обработчика события «click» для документа и выполняет скрытие модального окна при нажатии на кнопку его закрытия или вне его.

Всплывающее окно

Первым шагом создания всплывающего окна является создание элемента <div> (или любого другого элемента) и его оформление:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      .okno {
	    width: 300px;
		height: 50px;
	    text-align: center;
	    padding: 15px;
	    border: 3px solid #0000cc;
	    border-radius: 10px;
	    color: #0000cc;
	  }
    </style>
  </head>

  <body>
  
    <div class="okno">
	  Всплывающее окошко!
	</div>

  </body>
</html>

Попробовать »

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      #okno {
	    width: 300px;
		height: 50px;
	    text-align: center;
	    padding: 15px;
	    border: 3px solid #0000cc;
	    border-radius: 10px;
	    color: #0000cc;
		display: none;
	  }
	  #okno:target {display: block;}
    </style>
  </head>

  <body>
  
    <div id="okno">
	  Всплывающее окошко!
	</div>
	
	<a href="#okno">Вызвать всплывающее окно</a>

  </body>
</html>

Попробовать »

Используя псевдо-класс мы выбираем и применяем стили к элементу, к которому был осуществлён переход. Таким образом после перехода по ссылки значение свойства элемента сменится с на .

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

#okno {
  width: 300px;
  height: 50px;
  text-align: center;
  padding: 15px;
  border: 3px solid #0000cc;
  border-radius: 10px;
  color: #0000cc;
  display: none;
  
  /*позиционируем и центрируем*/
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

Следующим шагом будет реализация скрытия окна, при нажатии на любое место страницы или на само окно. Для этого нам нужно расположить элемент внутри элемента <a>:

<a href="#" id="main">
  <div id="okno">
	Всплывающее окошко!
  </div>
</a>

Затем мы позиционируем элемент и растягиваем его на всю ширину и высоту окна. Задаём ему и перенаправляем нашу ссылку на него:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
	  #main {
	    display: none;
	    position: absolute;
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 100%;
	  }
      #okno {
	    width: 300px;
		height: 50px;
	    text-align: center;
	    padding: 15px;
	    border: 3px solid #0000cc;
	    border-radius: 10px;
	    color: #0000cc;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		margin: auto;
	  }
	  #main:target {display: block;}
    </style>
  </head>

  <body>
  
    <a href="#" id="main">
      <div id="okno">
	    Всплывающее окошко!
      </div>
    </a>
	
	<a href="#main">Вызвать всплывающее окно</a>

  </body>
</html>

Попробовать »

У элемента убираем (он больше не нужен, так как скрываем мы теперь ). В итоге родительский выполняет теперь скрытие всплывающего окна, перенаправляя выбор на страницу.

На этом создание простого всплывающего окна закончено.

Поп-апы при добавлении товара в корзину

NARS помогает пользователям избежать недоразумений при выборе товара и оттенка таким поп-апом

KUPIVIP добавляет к этому итоговую сумму и дату доставки

ASOS показывает все товары в корзине и общую сумму, напоминает о бесплатной доставке и ограниченном времени

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

Вы можете подсказать клиенту, сколько ему осталось до бесплатной доставки:

Книжный магазин Лабиринт.ру показывает это в форме прогресс-бара

Увеличьте сумму заказа, показав пользователю поп-ап с сопутствующими товарами:

Например, такой поп-ап показывает Top shop (да, это тот самый телемагазин, он есть в интернете!)

А такой — Massimo Dutti

ASUS, не торопи события! Возможно, этот поп-ап делали экстрасенсы: как иначе можно поздравлять с покупкой человека, который только добавил товар в корзину?

Можете сразу перейти к делу и предложить оформить заказ:

Gitarist.ru предлагает не медлить и просит номер телефона

Пользователь выбрал товар, но его нет в наличии? Бывает. Вы можете предложить ему оформить предзаказ: