Добавление всплывающего окна (pop-up)
Pop-up — всплывающее окно на сайте, которое появляется после какого-то действия (например, нажатие на кнопку, клик по ссылке или просто открытие страницы). Pop-up всплывает поверх сайта, и пока посетитель его не закроет, других действий на сайте он сделать не сможет.
Всплывающие окна обычно используются для маркетинговых целей — уведомляют о скидках, предлагают подписаться на рассылку или вебинар и прочее. Так, с помощью нашего редактора вы сможете создать pop-up менее чем за полчаса, чтобы продвигать свой бизнес или повысить лидогенерацию.
Следуйте инструкциям ниже, чтобы узнать о возможных настройках pop-up.
Важно: опция добавления pop-up доступна только для сайтов с платными подписками.
Чтобы добавить всплывающее окно, в редакторе сайта откройте вкладку Pop-ups на панели управления:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/group-138_1iyz828.png)
Нажмите на + Добавить Pop-up внизу открывшегося меню:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/image-106_xkiv6r.png)
В новом окне вы увидите все доступные варианты всплывающих окон в нашей галерее. Выберите подходящий для вас блок и кликните на него, чтобы добавить на сайт:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/template-1035-4_1quqmfj.png)
Подсказка: вы также можете выбрать кастомный блок в галерее, чтобы создать pop-up с нуля.
Важно: всплывающие окна (попапы) не имеют функции мультиязычности, поэтому их необходимо создавать отдельно, а затем отображать конкретные попапы на конкретных страницах языковых версий (или подключать к определенным элементам на страницах как действие при нажатии).
Чтобы открыть список Pop-ups, перейдите во вкладку Pop-ups на панели управления:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/image-107_1hie7np.png)
Здесь вы можете увидеть список всех всплывающих окон, добавленных на ваш сайт. Они сортируются по дате создания — вверху списка находятся последние (недавно добавленные) всплывающие окна.
Вы можете переименовать, создать копию или удалить pop-up, нажав на троеточие и выбрав нужную опцию в выпадающем списке:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/image-110_1rbf6lx.png)
Примечание: при создании копии выбранного всплывающего окна условия его отображения не дублируются, а сохраняется только содержимое блока.
Помимо нажатия на крестик в углу блока, пользователь может закрыть pop-up по нажатию вне окна или же нажать ESC на клавиатуре. Чтобы включить эту функцию, нажмите на «бегунок» возле нужного всплывающего окна в списке и включите опцию Закрывать pop-up по клику вне окна или на клавишу Escape во вкладке Поведение:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/group-142_12djks5.png)
Чтобы перейти в режим редактирования pop-up, кликните на нужный из них в списке.
Примечание: чтобы выйти из режима редактирования всплывающего окна, нажмите на любую страничку в меню страниц или создайте новый pop-up.
Все pop-up'ы в галерее полностью адаптивны и легко поддаются редактированию. Это значит, что вы сможете добавлять нужные вам элементы, тем самым меняя структуру блока самостоятельно.
Pop-up работают по такому же принципу, как и остальные блоки в галерее: вы можете настроить их дизайн, фон, анимацию, добавить картинки, видео и так далее. Статья Изменение дизайна блока поможет вам приступить к редактированию всплывающего окна.
Кроме того, вы можете изменить ширину всплывающего окна в настройках. Для этого наведите на блок в режиме редактирования и откройте Настройки pop-up:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/template-1054-1_6em1bl.png)
Перейдите во вкладку Вид и выберите нужный размер:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/template-1027-7_19k2yqy.png)
Здесь вы также можете выбрать цвет и размер для иконки крестика в углу pop-up:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/template-1028-6_9vn9v.png)
Если вы хотите создать полноценное модальное окно, вы можете добавить шапку к своему pop-up и изменить её фон:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/template-1131_9dhikb.png)
Примечание: текст для шапки будет браться с самого названия pop-up — того, которое вы видите в редакторе.
Анимация — это хороший способ привлечь внимание ваших пользователей и сделать сайт более динамичным. Вы можете настроить динамическое появление добавленных элементов в pop-up.
Чтобы настроить динамическое появление элементов в окне, перейдите во вкладку Анимация в Настройках pop-up и выберите подходящий вариант:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/template-1061-1_bf0fi6.png)
После того, как вы закончили настраивать всплывающее окно в редакторе, не забудьте опубликовать свой сайт, чтобы изменения вступили в силу.
Если у вас на сайте добавлено несколько всплывающих окон с одинаковым триггером, они будут открываться одномоментно и накладываться на друг друга. Чтобы избежать такого сценария, необходимо выставить порядок отображения pop-up на сайте.
Для этого перейдите в список Pop-ups и отсортируйте всплывающие окна, перетаскивая их в нужном порядке:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/zapis-ekrana-2022-05-10-v-0642_yr08nm.gif)
Примечание: pop-up, который находится внизу списка, откроется на сайте первым. Остальные окна, которые находятся в списке выше, будут ждать завершения показа предыдущего pop-up.
В настройках для каждого pop-up включите опцию Поочерёдное отображение во вкладке Поведение:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/group-137_1cozma0.png)
Подсказка: для дальнейшей настройки триггеров появления pop-up на сайте обратитесь к статье Настройка появления всплывающего окна.
Всплывающие окна обычно используются для маркетинговых целей — уведомляют о скидках, предлагают подписаться на рассылку или вебинар и прочее. Так, с помощью нашего редактора вы сможете создать pop-up менее чем за полчаса, чтобы продвигать свой бизнес или повысить лидогенерацию.
Следуйте инструкциям ниже, чтобы узнать о возможных настройках pop-up.
Важно: опция добавления pop-up доступна только для сайтов с платными подписками.
Добавление pop-up окна
Чтобы добавить всплывающее окно, в редакторе сайта откройте вкладку Pop-ups на панели управления:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/group-138_1iyz828.png)
Нажмите на + Добавить Pop-up внизу открывшегося меню:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/image-106_xkiv6r.png)
В новом окне вы увидите все доступные варианты всплывающих окон в нашей галерее. Выберите подходящий для вас блок и кликните на него, чтобы добавить на сайт:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/template-1035-4_1quqmfj.png)
Подсказка: вы также можете выбрать кастомный блок в галерее, чтобы создать pop-up с нуля.
Важно: всплывающие окна (попапы) не имеют функции мультиязычности, поэтому их необходимо создавать отдельно, а затем отображать конкретные попапы на конкретных страницах языковых версий (или подключать к определенным элементам на страницах как действие при нажатии).
Управление списком Pop-ups
Чтобы открыть список Pop-ups, перейдите во вкладку Pop-ups на панели управления:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/image-107_1hie7np.png)
Здесь вы можете увидеть список всех всплывающих окон, добавленных на ваш сайт. Они сортируются по дате создания — вверху списка находятся последние (недавно добавленные) всплывающие окна.
Вы можете переименовать, создать копию или удалить pop-up, нажав на троеточие и выбрав нужную опцию в выпадающем списке:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/image-110_1rbf6lx.png)
Примечание: при создании копии выбранного всплывающего окна условия его отображения не дублируются, а сохраняется только содержимое блока.
Помимо нажатия на крестик в углу блока, пользователь может закрыть pop-up по нажатию вне окна или же нажать ESC на клавиатуре. Чтобы включить эту функцию, нажмите на «бегунок» возле нужного всплывающего окна в списке и включите опцию Закрывать pop-up по клику вне окна или на клавишу Escape во вкладке Поведение:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/group-142_12djks5.png)
Чтобы перейти в режим редактирования pop-up, кликните на нужный из них в списке.
Примечание: чтобы выйти из режима редактирования всплывающего окна, нажмите на любую страничку в меню страниц или создайте новый pop-up.
Изменение вида pop-up
Все pop-up'ы в галерее полностью адаптивны и легко поддаются редактированию. Это значит, что вы сможете добавлять нужные вам элементы, тем самым меняя структуру блока самостоятельно.
Pop-up работают по такому же принципу, как и остальные блоки в галерее: вы можете настроить их дизайн, фон, анимацию, добавить картинки, видео и так далее. Статья Изменение дизайна блока поможет вам приступить к редактированию всплывающего окна.
Кроме того, вы можете изменить ширину всплывающего окна в настройках. Для этого наведите на блок в режиме редактирования и откройте Настройки pop-up:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/template-1054-1_6em1bl.png)
Перейдите во вкладку Вид и выберите нужный размер:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/template-1027-7_19k2yqy.png)
Здесь вы также можете выбрать цвет и размер для иконки крестика в углу pop-up:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/template-1028-6_9vn9v.png)
Если вы хотите создать полноценное модальное окно, вы можете добавить шапку к своему pop-up и изменить её фон:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/template-1131_9dhikb.png)
Примечание: текст для шапки будет браться с самого названия pop-up — того, которое вы видите в редакторе.
Добавление анимации
Анимация — это хороший способ привлечь внимание ваших пользователей и сделать сайт более динамичным. Вы можете настроить динамическое появление добавленных элементов в pop-up.
Чтобы настроить динамическое появление элементов в окне, перейдите во вкладку Анимация в Настройках pop-up и выберите подходящий вариант:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/template-1061-1_bf0fi6.png)
После того, как вы закончили настраивать всплывающее окно в редакторе, не забудьте опубликовать свой сайт, чтобы изменения вступили в силу.
Работа с несколькими всплывающими окнами
Если у вас на сайте добавлено несколько всплывающих окон с одинаковым триггером, они будут открываться одномоментно и накладываться на друг друга. Чтобы избежать такого сценария, необходимо выставить порядок отображения pop-up на сайте.
Для этого перейдите в список Pop-ups и отсортируйте всплывающие окна, перетаскивая их в нужном порядке:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/zapis-ekrana-2022-05-10-v-0642_yr08nm.gif)
Примечание: pop-up, который находится внизу списка, откроется на сайте первым. Остальные окна, которые находятся в списке выше, будут ждать завершения показа предыдущего pop-up.
В настройках для каждого pop-up включите опцию Поочерёдное отображение во вкладке Поведение:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/group-137_1cozma0.png)
Подсказка: для дальнейшей настройки триггеров появления pop-up на сайте обратитесь к статье Настройка появления всплывающего окна.
Обновлено на: 22/05/2024
Спасибо!