Как сделать всплывающие сообщения

#4 – Всплывающие сообщения (Toast и AlertDialog)

За урок мы научимся использовать различные всплывающие уведомления в Android. Мы научимся использовать класс Toast и класс AlertDialog для формирования всплывающих подсказок.

Видеоурок

Подсказки Toast

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

Пример создания подсказки:

Toast.makeText(this, "Пример текста", Toast.LENGTH_LONG).show();

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

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

Пример создания простого всплывающего окна представлен ниже:

AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this); builder.setTitle("Большая подсказка").setMessage(text)); AlertDialog dialog = builder.create(); dialog.show();

Попап (всплывающее окно)

В Unisender есть все для рассылок: можно создавать и отправлять клиентам письма и SMS, настроить чат-бота и делать рассылки в Telegram и даже собрать простой лендинг для пополнения базы контактов.

Всплывающее окно (попап) — это элемент интерфейса, который отображается поверх веб-страницы в браузере. Оно внезапно «всплывает» без запроса пользователя или появляется по клику.

Пример pop-up с подпиской на рассылку

Всплывающие окна: за и против

Отношение к всплывающим окнам неоднозначное. Большинство пользователей их не любит. Опросы потребителей показывают , что 73% интернет-аудитории не одобряют попапы.

По данным Statista, в 2019 году примерно 25,8% интернет-пользователей блокировали рекламу на своих устройствах и, соответственно, блокировали и всплывающие окна. Ожидается, что востребованность блокировщиков будет только расти. Уже сейчас практически четверть попапов не достига ет своей аудитории.

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

Вредоносное всплывающее окно требует оплаты для восстановления доступа к системе

К счастью, негатив вокруг попапов постепенно стихает. При правильном применении всплывающие окна — ценный инструмент маркетинга. SUMO проанализировали 2 млрд всплывающих окон и выяснили , что их конверсия может достигать 40+%. Главное — использовать pop-up правильно.

BlogMarketingAcademy заявляет , что всплывающие окна на сайте показали наилучшую кликабельность в сравнении с другими видами рекламы — около 2%. А BitNinja, В2В-стартап, внедрили pop-up и в результате увеличили конверсию посетителей в подписчиков на 114%.

Зачем нужны попапы

Попапы применяют для следующих целей:

• привлечь подписчиков;
• сообщить новости;
• оказать техподдержку;
• показать рекламу;
• рассказать о товаре (предпросмотр карточки);
• получить заявки от клиентов.

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

Конверсионные попапы позволяют:

• Привлечь внимание . Очень малый процент пользователей будет досконально изучать ваш сайт. Поэтому часть контента они просто проигнорируют. Всплывающее окно привлекает внимание посетителя и показывает ему важную информацию. Например, рассказывает о текущей акции или предлагает скидку на покупку.
• Тонко настроить условия показа . Можно настроить время появления окна, длительность его отображения, содержание. К примеру, пользователь просматривает страницу товара. В момент, когда длительность просмотра достигнет заранее заданного времени, всплывёт окно с предложением купить товар по сниженной цене.
• Сегментировать аудиторию, которая видит попап . К примеру, во всплывающем окне пользователю предлагают подписаться на рассылку интернет-магазина. При этом у клиентов есть возможность выбрать рассылку с товарами для мужчин или с товарами для женщин.

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

Типы попапов

Все попапы делятся на 2 основных вида: hello-board и page-stop.

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

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

Hello-board раздражают пользователей меньше, чем page-stop, поскольку они менее навязчивы и их можно просто проигнорировать. Но page-stop считаются более эффективными, поскольку заставляют пользователей остановиться и ознакомиться с информацией. Например, компания AWeber провела исследование сайта клиента и выяснила , что page-stop принесли в 14 раз больше регистраций, чем форма сбоку.

Да, попапы Hello-board менее заметные. Кроме того, очень часто встречаются абсолютно серые попапы, за которые в принципе не цепляется внимание, поэтому да, их очень часто игнорируют.

Page-stop эффективнее, но — при соблюдении отдельных правил. Например, крестик должен действительно закрывать попап, а не просто быть :).

Сооснователь контент-агентства 4X

Как использовать всплывающие окна

Попапы различаются по цели применения и условиям показа. Перечислим основные варианты их использования.

Приветственное окно (entry pop-up)

Когда появляется . Всплывает сразу при загрузке страницы и блокирует контент до того, как посетитель его увидит.

Преимущества . Гарантированно привлекает внимание пользователей. Чтобы убрать окно, посетитель должен выполнить требуемое действие или закрыть попап вручную.

Недостатки . Такой вид попапа не подходит для сбора лидов или перенаправления пользователей на целевую страницу. Большинство пользователей просто закроет сайт, который ещё не дал ничего ценного, но уже требует выполнения каких-то действий.

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

Окно-приветствие не даёт ознакомиться с контентом до своего закрытия

Окно с временной отсрочкой (timed pop-up)

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

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

Недостатки . По поводу точного времени показа нет единого мнения. Оптимальный вариант — показывать окно не раньше, чем через 60 секунд после загрузки сайта. Этого времени достаточно, чтобы пользователь оценил сайт и решил, остаться ему или уйти. Но все-таки лучшее время показа определит только тест. Например, A/B-тестирование, проведённое сервисом LeadGenic, показало, что показ попапа через 2 секунды после входа принес больше конверсий, чем более поздние показы.

Когда лучше использовать . Через timed pop-up можно предлагать подписаться на рассылку или посмотреть другой раздел сайта, привлекать лиды, собирать заявки на обратный звонок, предоставлять демо-доступ к сервису и прочее.

Чтобы определить время отсрочки, изучите отчёты Google Analytics. Посмотрите, каково среднее время пребывания на странице и настройте появление pop-up примерно на 50% от этого времени.

Сколько времени люди проводят на странице. Отчет в Google Analytics. Считается, что если настроить время появления попапа на 50% от этого показателя, то окно не будет раздражать и сможет хорошо конвертировать

Окно по пролистыванию (scroll pop-up)

Когда появляется . Всплывает, когда пользователь пролистает определённый процент страницы. Пролистывание обычно устанавливают на 40-70% прочтения.

Преимущества . Можно показывать пользователю предложение, максимально релевантное просматриваемому контенту.

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

Когда лучше использовать . В scroll pop-up можно просить поделиться контентом, рассказывать пользователям о новостях и текущих акциях, предлагать подписку на рассылку.

Руководствуйтесь статистикой о средних доскроллах страницы, чтобы определить лучшее время для показа попапа. Также можно использовать данные тепловизоров для сайтов (например, Вебвизор Яндекс.Метрики ), когда будете задавать условия для появления окна. С помощью тепловизоров можно посмотреть, как ведут себя посетители на сайте и до какого момента в среднем прокручивают страницу.

Вебвизор Яндекс.Метрики показывает видео поведения пользователей на странице

Окно прощания (exit pop-up)

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

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

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

Когда лучше использовать . Задача exit pop-up — удержать внимание посетителя. Потому окно обычно используют, чтобы предложить дополнительный релевантный материал, пригласить в другой раздел сайта или получить email для рассылки.

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

Окно со всплытием по клику (click pop-up)

Когда появляется . Всплывает, когда пользователь совершит определенное целевое действие. Например, кликнет по ссылке или кнопке.

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

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

Когда лучше использовать . Такой тип окон можно использовать для показа формы подписки или обратной связи. В click pop-up также можно показывать подсказки или уточнения. Например, пользователь кликает по кнопке «Перезвоните мне». Сразу всплывает окно с формой заказа обратного звонка.

Pop-up всплывает после клика по кнопке «Перезвоните мне»

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

Элементы всплывающего окна

Любая форма попапа состоит из трёх частей:

1. Заголовок . Он должен пояснять содержание и быть понятным. Лучше использовать простые слова и короткие фразы. Пользователю должно быть с первых секунд ясно, что это за форма. Например, «Подпишитесь на рассылку», «Получите скидку».
2. Основная часть . Это может быть текст или форма. К примеру, текстом можно рассказать о текущей акции, выгодном предложении или подарке. Форму обычно используют, чтоб собрать пользовательские данные: имя, email, номер телефона.
3. Призыв к действию . Например, кнопка или подпись со ссылкой. Этот элемент мотивирует клиентов совершить целевое действие. Например, вы можете предложить подписаться на рассылку, заказать обратный звонок или скачать pdf-книжку.

Правильная форма не оставляет вопросов о том, зачем с ней взаимодействовать

Важно!

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

Хорошо работают попапы, в которых в основной части есть не только форма сбора контактов, но и перечислены выгоды клиента. Мы рекомендуем именно такой вариант, потому что, по опыту, условное «подпишитесь на рассылку» работает хуже, чем «подпишитесь на рассылку и получите что-нибудь».

А ещё в попапах, которые собирают контакты, отлично работает соцдоказательство — количество подписчиков, которые уже читают рассылку. Создаётся ощущение, что ты один не курсе, когда все остальные уже ее читают :).

Сооснователь контент-агентства 4X

Нет каких-то стандартов по оформлению содержания pop-up. Есть лишь рекомендация: всплывающее окно не должно быть сложным для восприятия. Планируя создание попапа, ответьте на следующие вопросы:

• О чём вы хотите рассказать? Ответ сформулируйте в виде понятного заголовка.
• Что это даст пользователю? К примеру, он сможет прочитать условия акции, увидеть форму подписки или описание рекомендуемого раздела. От ответа зависит содержание основной части.
• Какое действие должен совершить пользователь? Это может быть регистрация, подписка на рассылку, переход по ссылке. Ответив, вы поймёте, каким должен быть текст на кнопке призыва к действию.

Как правильно оформить pop-up

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

Вот 5 правил хорошего попапа:

1. Понятный интерфейс . У пользователя должна быть возможность сразу принять решение, а не разбираться с функционалом. Текст, поля и кнопки должны быть крупными и заметными.
2. Адаптивность . Учитывайте, что немалая часть трафика приходится на мобильную аудиторию. Всплывающее окно должно полностью помещаться на экране смартфона и быть удобным для просмотра. С закрытием попапа не должно возникать сложностей.
3. Уместность демонстрации . Нужно учитывать логику показа окна и ее релевантность текущим действиям пользователя. Например, нецелесообразно показывать форму подписки тем, кто уже оставил свой email или предлагать подписку на новые статьи сразу после перехода в блог.
4. Pop-up не должен быть навязчивым . Если пользователь закрыл окно, оно не должно открываться вновь. Также не стоит несколько раз подряд предлагать одно и то же. Можно предусмотреть на окне надпись «Я уже подписан» или «Не показывать больше».
5. Чёткий призыв к действию . Пользователю нужно понимать, какого действия от него ожидают. Например — «Подписаться на рассылку», «Перейти в каталог товаров», «Читать блог».

Практически в любом сервисе по созданию всплывающих окон все перечисленные требования можно настроить вручную. Если же вы ставите ТЗ на создание попапов верстальщику, не забудьте прописать это в требованиях.

При создании всплывающих окон нужно учитывать, что попапы — это форма рекламы. Поэтому, следует соблюдать требования Coalition for Better Ads — « Коалиции за лучшую рекламу », созданную ведущими международными торговыми ассоциациями и компаниями. Требованиями Coalition for Better Ads руководствуется Google Chrome, когда решает, нужно ли блокировать сайт и в каком виде его увидит пользователь.

Согласно Coalition for Better Ads нельзя:

• вставлять в попапы видео с автозапуском;
• настраивать фиксированное всплывающее окно, закрывающее 30+% площади экрана;
• применять агрессивные эффекты вроде динамического изменения цветов или мигающих элементов.

Полный текст требований Coalition for Better Ads можно изучить на сайте коалиции . Кроме того, отчет о качестве рекламы доступен в сервисе Google Search Console. Владелец сайта с подтверждёнными правами может изучить отчёт и выявить нарушения стандартов Coalition for Better Ads.

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

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

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

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

• ConvertPlug .
• Popups Generator .
• Layered Popups .
• Ninja Popups for WordPress .

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

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

Виды всплывающих уведомлений

• Pop-up — окно, которое всплывает поверх страницы сайта и занимает большую его часть. Выглядит так:

• Pop-under — окно, которое всплывает позади окна сайта. Пользователь обратит внимание на попандер уже после закрытия страницы, которую просматривал.
• Click-under — окно, которое открывается в новой вкладке, если пользователь кликает в любом месте сайта.

Push-уведомление — всплывающее поверх страницы окно, которое занимает меньшую часть экрана. На экране гаджетов пуши выглядят как любые другие уведомления, например, о новых сообщениях в соцсетях. Основное отличие от предыдущих форматов в том, что пуши видят лишь пользователи, которые подписались на рассылку push-уведомлений. Предложение о подписке также приходит пользователю в виде всплывающего окна: Однозначно разделить виды всплывающих окон по преимуществам и недостатками сложно. Их свойства становятся плюсом или минусом в зависимости от ваших целей. Например, как уже упомянули, пуши видят только пользователи, которые целенаправленно подписались на рассылку. С одной стороны, это плюс: вы показываете сообщения только целевой аудитории. С другой, перед вами может стоять задача охватить как можно большее количество пользователей. В таком случае лучше предпочесть поп-апы, которые пусть не всегда бьют в яблочко, зато их увидят все посетители сайта. Или, скажем, небольшой размер пушей можно считать как преимуществом (не так раздражает пользователей, не перекрывает контент), так и недостатком: пуш проще проигнорировать, чем тот же попап. Попап — формат, устойчивый к баннерной слепоте, зато довольно нервирующий пользователя: он перекрывает контент сайта, от него никуда не деться. Ну, разве что заблокировать при помощи AdBlock, что тоже минус для попапов. AdBlock, кстати, поможет пользователям избавиться и от попандера, и от кликандера. Общий плюс попапов, попандеров и кликандеров — широкий охват и дешевизна трафика. Впрочем, большинство аудитории все-таки будет нецелевой, а предложения всплывающих окон — не всегда релевантными для посетителей сайта. Что, понятно, вызовет раздражение. Мы рекомендуем использовать попандеры и кликандеры с большой осторожностью: как можно реже или, например, для тестов. Перед запуском полноценной дорогостоящей рекламной кампании протестировать реакцию пользователей можно с помощью таких форматов, потому что они стоят недорого. Попандеры и кликандеры часто встречаются серых сферах вроде онлайн-казино и adult-контента, так что и ассоциации у пользователей не слишком позитивные. Реклама продукта в таком формате может превратиться в антирекламу, оттолкнуть пользователей. Неслучайно многие офферы в партнерских сетях запрещают эти источники трафика. Кроме того, поисковики неодобрительно относятся к сайтам, на которых присутствуют попандеры и кликандеры (впрочем, и попапы тоже, но в меньшей степени).

Что делать, чтобы всплывающие окна не раздражали пользователей

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

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

• Выбирайте подходящее время для показа уведомлений. Поищите статистику (например, такую) по вашей нише: когда люди больше всего настроены на покупку или взаимодействие с вашим предложением, когда пользователи готовы положительно реагировать на пуши и попапы.
• При настройке всплывающих окон можно выбирать длительность их показа. Советуем показывать объявление в течение такого промежутка времени, чтобы пользователь смог прочитать его, но не успел фрустрироваться в поисках способа закрыть уведомление. Помогут UX-тесты и A/B-тесты. Можно запросить мнение коллег или знакомых, протестировать уведомления на них.
• Выбирайте сценарий, при котором всплывающее окно исчезает: либо само по себе спустя какое-то время (это возвращает нас к предыдущему пункту), либо если пользователь кликнет на крестик, либо перейдет по ссылке. Последний вариант — наиболее нервирующий. Пользователи не любят, когда их принуждают к действию, и вместо перехода по ссылке могут просто закрыть ваш сайт.
• Сегментируйте аудиторию по различным параметрам, чтобы люди видели наиболее релевантные их потребностям и интересам уведомления, а не все подряд.
• Внимательно следите за тем, каким пользователям рассылаете уведомления, если у вас на сайте есть разные локали (например, русская, английская и испанская версия одного сайта). Русские пользователи сильно — и неприятно — удивятся, если им внезапно придет уведомление на другом языке.
• Не делайте рассылки уведомлений слишком часто: хватит пары раз в неделю, и только по действительно значимым поводам. На эту тему тоже есть немало исследований (пример).
• Не нужно преследовать пользователя предложением подписаться на push-рассылку на каждой странице сайта. Хватит одного раза: например, когда человек уходит с сайта.

Еще несколько советов специально для Академии подготовили ребята из агентства email-маркетинга Inbox Marketing: «Рекомендуем показывать всплывающее сообщение так, чтобы оно не ломало пользовательский сценарий. Оно может аккуратно всплывать снизу, сверху, справа или слева, не перекрывая основной информации. Можно пожертвовать служебной информацией или рекламным баннером, но не тем, зачем пользователь пришел на сайт.Если же говорить о настройке всплывающих окон, то стоит опираться на аналитические данные вашего сайта. От этой информации зависит, на какой странице, на какой секунде или каком проценте перемотки страницы поставить механику с всплывающим сообщением. Например, пользователь в среднем проводит на сайте 30 секунд. Значит, попап можно показать на 20-й или 25-й секунде. Если же показать всплывающее уведомление на 3-й секунде, то пользователь не проведет даже средние 30 секунд на сайте, а сразу уйдет.Не показывайте попап сразу. Это вызовет рост числа отказов и потерю лояльности. Пользователю надо дать вовлечься во взаимодействие с ресурсом».

Сервисы для настройки всплывающих уведомлений

• Push.world, базовая версия — бесплатная. Позволяет создавать разные виды всплывающих уведомлений, в том числе интерактивные пуши. Также можно сегментировать подписчиков по разным категориям, гео, устройствам. Настройка пушей, по словам разработчиков, займет три минуты: нужно вставить в код сайта одну строчку.

• Sendpulse. Бесплатный набор функций сервиса включает все стандартные для сервисов рассылки пушей функции. При подключении платной версии вы получите больше «плюшек», например, сможете работать с API. Плюс софта — понятный и удобный интерфейс. Минус — в бесплатной версии остается лого SendPulse.
• Push4Site, от 990 руб. в месяц. Предлагает настроить разные форматы пушей, от обычных до навороченных визуальных и интерактивных.
• LetReach. Сервис с платными и бесплатными вариантами использования, популярный во всем мире. Понятный интерфейс, множество функций (A/B-тестирование, аналитика, RSS, сегментация пользователей) — в общем, лучшие практики такого рода софта.
• VWO. Недешевый, но очень функциональный сервис. Тут множество возможностей для тестирования кампаний с уведомлениями, в том числе и для мобильных версий сайтов. Есть расширенный редактор для тех, кто разбирается в коде, и углубленная статистика. Цена — от $199 в месяц.
• Hello Bar. Удобный сервис для создания попапов. Есть бесплатная и платные версии. Уведомления легко настраивать и анализировать. Но вот за отключение логотипа сервиса придется заплатить.
• Getsitecontrol. Сервис стоит от 390 руб. в месяц и хорош большим выбором шаблонов и отличной адаптацией попапов под гаджеты.
• OptinMonster обойдется от $9 в месяц. Тут широченный функционал, в том числе возможности для создания всплывающих окон — с очень гибкими настройками.
• AddThis, бесплатно. Базовые функции для настройки попапов: минимальный функционал, зато все просто и понятно.

Вы наверняка заметили, что сервисы в основном предлагают функции для создания пушей и попапов. С попандерами и кликандерами сложнее: далеко не все хотят с ним работать (почему — писали выше).

Настроить эти два формата можно с помощью специализированных рекламных сетей (PopAds, PropellerAds, Popunder, PopCash, ClickAdu). Сети предлагают различные варианты покупки трафика (CPA, CPM, CPL), разнообразные виды таргетинга. Стоимость за 1000 показов — приблизительно $0.05.

Также для добавления всплывающих уведомлений на сайт можно использовать плагины. Они легко гуглятся: зависит от того, какой CMS вы пользуетесь. Например, для WordPress есть PopUp Maker и Ultimate PopUnder.

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

Всплывающие сообщения для сайта на чистом JavaScript

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

Проект, рассматриваемый в рамках этой статьи, расположен на Github по адресу: https://github.com/itchief/ui-components/tree/master/toast

Он написан на чистом JavaScript без использования сторонних библиотек.

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

Подключение и использование

Компонент для показа всплывающих уведомлений состоит из 2 файлов: «toast.css» и «toast.js». Преимуществом данной библиотеки состоит в том, что она имеет очень маленький размер («toast.min.js» немного больше 1Кбайта). В отличие от библиотеки jGrowl эти сообщения не требуют библиотеку jQuery, что для многих сайтов очень важно.

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

• включения на страницу стилей «toast.min.css»;
• добавления JavaScript кода «toast.js».

Вывод всплывающего сообщения на страницу осуществляется посредством создания экземпляра объекта Toast :

JavaScript

/* title - название заголовка text - текст сообщения theme - тема autohide - нужно ли автоматически скрыть всплывающее сообщение через interval миллисекунд interval - количество миллисекунд через которые необходимо скрыть сообщение */ new Toast({ title: 'Заголовок', text: 'Сообщение. ', theme: 'light', autohide: true, interval: 10000 });

Если нужно создать сообщение без заголовка, то нужно просто ключу title установить значение false :

JavaScript

// без заголовка new Toast({ title: false, text: 'Сообщение. ', theme: 'light', autohide: true, interval: 10000 });

Подробное описание

Создание HTML кода всплывающих сообщений как с заголовком, так и без него выполняется в JavaScript. Целью является создание следующей структуры:

  
Сообщение.
 
  
Заголовок
 
Сообщение.
 

HTML код сообщений простой. Он состоит из элемента с классом toast , в котором в зависимости от типа уведомления расположены два или три элемента:

• с классом toast__header — заголовок;
• с классом toast__body — элемент, в котором выводится само сообщение;
• с классом toast__close — кнопка, для закрытия сообщения.

С помощью классов в CSS добавляются стили к этим элементам:

/* CSS-переменные */ :root { --toast-border-radius: 0.25rem; --toast-theme-default: #fff; } .toast { font-size: 0.875rem; background-clip: padding-box; border: 1px solid rgba(0, 0, 0, 0.05); border-radius: var(--toast-border-radius); box-shadow: 0 .125rem .25rem rgba(0, 0, 0, 0.075); display: none; position: relative; overflow: hidden; } .toast_default { color: #212529; background-color: var(--toast-theme-default); } .toast:not(:last-child) { margin-bottom: 0.75rem; } .toast__header { position: relative; padding: 0.5rem 2.25rem 0.5rem 1rem; background-color: rgba(0, 0, 0, 0.03); border-bottom: 1px solid rgba(0, 0, 0, 0.05); } .toast__close { content: ""; position: absolute; top: 0.75rem; right: 0.75rem; width: 0.875em; height: 0.875em; background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/0.875em auto no-repeat; border: 0; opacity: 0.5; cursor: pointer; transition: opacity 0.1s ease-in-out; } .toast__close:hover { opacity: 1; } .toast__body { padding: 1rem; } .toast_message .toast__body { padding-right: 2.25rem; }

Класс toast__close ещё используется в обработчике события click . При нажатии на эту кнопку выполняется закрытие сообщения.

JavaScript

this._el.addEventListener('click', (e) => { if (e.target.classList.contains('toast__close')) { // вызываем метод, скрывающий сообщение this._hide(); } });

После того как JavaScript добавляет HTML код всплывающего сообщения на страницу, оно не отображается, т.к. по умолчанию оно имеет display: none . Его показ осуществляется после того, как к нему добавляется класс toast_show .

.toast_show { display: block; }

Скрытие сообщения выполняется путём удаления класса toast_show .

Задание темы осуществляется посредством добавления класса.

Например, тема primary устанавливается так:

Помещение элементов .toast выполняется в контейнер .toast-container . Его создание тоже осуществляется с помощью JavaScript, но только в том случае, если его нет на странице.

JavaScript

if (!document.querySelector('.toast-container')) { const container = document.createElement('div'); container.classList.add('toast-container'); document.body.append(container); }

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

:root { --toast-width: 270px; } .toast-container { position: fixed; top: 15px; right: 15px; width: var(--toast-width); }

Написан код JavaScript в виде класса и имеет следующую структуру:

JavaScript

class Toast { constructor(params) { . } _show() { . } _hide() { . } _create() { . } }