Нас часто просят рассказать о некоторых интересных случаях использования OptinMonster. Поэтому я подумал, что поделюсь с вами действительно изящным решением, которое мы недавно создали для одного из наших пользователей. Это отличный двухэтапный способ, который действует как подсказка в живом чате.
Подобно плавающему уведомлению в чате, мы проведем пальцем по изображению и используем MonsterLink для загрузки параметра.
Вы также можете нажать здесь, чтобы увидеть живую демонстрацию.
Преимущества двухэтапной подписки
Было обнаружено, что двухэтапные подписки конвертируют больше, чем автоматические подписки, потому что они требуют инициации пользователя. Это работает с эффектом Зигарника, который говорит, что люди больше сосредотачиваются на незавершенных задачах, чем на завершенных задачах. Поэтому, когда пользователь запускает эту опцию, он, скорее всего, сделает это, введя свой адрес электронной почты.
Это причина того, что обновления контента конвертируют в 5 раз больше, чем обычные варианты: потому что они требуют, чтобы пользователь начал процесс подписки. (Взгляните на 30 идей обновления контента здесь.)
Готовы ли вы узнать, как создать плавающий чат для своего сайта? Начнем!
НОТА: Это руководство – отличное место для начала более продвинутого использования OptinMonster. Обязательно ознакомьтесь со всей нашей другой замечательной документацией по Extender OptinMonster для получения дополнительных идей.
Как создать плавающий онлайн-чат
Поскольку это расширенное руководство, мы разделили его на 5 разделов. Щелкните ссылки ниже, чтобы перейти к каждому из разделов:
HTML – CSS – Javascript – Добавьте опцию – Файлы PSD
HTML
Мы создали два разных стиля плавающих ссылок MonsterLink. HTML для обоих идентичен, за исключением одного класса.
Поскольку для плавающей позиции MonsterLink установлено абсолютное значение, вы можете добавить HTML-код в любое место тела страницы.
Стиль 1: сдвиньте вправо
Стиль 2 – нижнее скольжение
CSS
Стиль 1: сдвиньте вправо
Наша плавающая ссылка MonsterLink стиля 1 синего цвета и расположена в правом нижнем углу окна браузера. Изображение аватара также больше и находится слева от текста призыва к действию и MonsterLink.
/* --- Floating MonsterLink Style 1 CSS ---
------------------------------------------ */
.floating-monsterlink.style1.show {
right: 30px;
}
.floating-monsterlink.style1 {
margin: 0;
width: auto;
border-radius: 10px;
display: inline-block;
position: absolute;
bottom: 30px;
right: -350px;
width: 160px;
padding: 10px 10px 10px 60px;
background-color: #eaeaea;
border: 5px solid #165c92;
-webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4);
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4);
-webkit-transition: right 3000ms ease-in-out;
-moz-transition: right 3000ms ease-in-out;
-o-transition: right 3000ms ease-in-out;
transition: right 3000ms ease-in-out;
}
.floating-monsterlink.style1 .floating-avatar {
top: -20px;
margin: 0;
padding: 0;
display: block;
overflow: hidden;
width: 120px;
height: 120px;
position: absolute;
margin-left: -150px;
border-radius: 999em;
border: 8px solid #165c92;
background-color: #165c92;
-webkit-box-shadow: -2px 2px 15px 0 rgba(0, 0, 0, 0.4);
-moz-box-shadow: -2px 2px 15px 0 rgba(0, 0, 0, 0.4);
box-shadow: -2px 2px 15px 0 rgba(0, 0, 0, 0.4);
}
.floating-monsterlink.style1 .floating-avatar span {
width: 106px;
height: 106px;
display: block;
overflow: hidden;
border-radius: 999em;
background-size: cover;
background-color: #eaeaea;
border: 15px solid #eaeaea;
margin: -8px auto auto -8px;
background-image: url('https://optinmonster.com/wp-content/uploads/2015/09/erica-avatar-200x200.jpg');
}
.floating-monsterlink.style1 .floating-cta {
padding: 0;
font-size: 13px;
text-align: left;
line-height: 1.5em;
margin: 0 auto 15px;
font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
}
.floating-monsterlink.style1 p.floating-cta:last-of-type {
margin: 0 auto;
}
.floating-monsterlink.style1 a.manual-optin-trigger {
color: #043f6c;
text-decoration: underline;
}
.floating-monsterlink.style1 a.float-close {
top: -15px;
right: -15px;
color: #fff;
height: 24px;
width: 24px;
font-weight: 300;
line-height: 23px;
text-align: center;
position: absolute;
border-radius: 999em;
text-decoration: none;
background-color: #444;
font-family: sans-serif;
-webkit-box-shadow: -1px 1px 3px rgba(0, 0, 0, 0.4);
-moz-box-shadow: -1px 1px 3px rgba(0, 0, 0, 0.4);
box-shadow: -1px 1px 3px rgba(0, 0, 0, 0.4);
}
Стиль 2 – нижнее скольжение
Наша плавающая ссылка MonsterLink в стиле 2 находится в нижней левой части окна браузера, использует темно-красные цвета, а изображение аватара меньше и находится справа от текста призыва к действию и MonsterLink.
/* --- Floating MonsterLink Style 2 CSS ---
------------------------------------------ */
.floating-monsterlink.style2.show {
bottom: 30px;
}
.floating-monsterlink.style2 {
margin: 0;
width: auto;
border-radius: 10px;
display: inline-block;
position: absolute;
bottom: -160px;
left: 30px;
width: 180px;
padding: 10px 20px;
background-color: #eaeaea;
border: 7px solid #92162d;
-webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4);
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4);
-webkit-transition: bottom 3000ms ease-in-out;
-moz-transition: bottom 3000ms ease-in-out;
-o-transition: bottom 3000ms ease-in-out;
transition: bottom 3000ms ease-in-out;
}
.floating-monsterlink.style2 .floating-avatar {
top: 35px;
margin: 0;
padding: 0;
display: block;
overflow: hidden;
width: 75px;
height: 75px;
position: absolute;
margin-left: 175px;
border-radius: 999em;
border: 4px solid #92162d;
background-color: #92162d;
-webkit-box-shadow: 2px 2px 15px 0 rgba(0, 0, 0, 0.4);
-moz-box-shadow: 2px 2px 15px 0 rgba(0, 0, 0, 0.4);
box-shadow: 2px 2px 15px 0 rgba(0, 0, 0, 0.4);
}
.floating-monsterlink.style2 .floating-avatar span {
width: 69px;
height: 69px;
display: block;
overflow: hidden;
border-radius: 999em;
background-size: cover;
background-color: #eaeaea;
border: 15px solid #eaeaea;
margin: -12px auto auto -12px;
background-image: url('https://optinmonster.com/wp-content/uploads/2015/09/erica-avatar-200x200.jpg');
}
.floating-monsterlink.style2 .floating-cta {
padding: 0;
font-size: 15px;
text-align: left;
line-height: 1.5em;
margin: 0 auto 15px;
font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
}
.floating-monsterlink.style2 p.floating-cta:last-of-type {
margin: 0 auto;
}
.floating-monsterlink.style2 a.manual-optin-trigger {
color: #730519;
text-decoration: underline;
}
.floating-monsterlink.style2 a.float-close {
top: -13px;
left: -13px;
color: #fff;
height: 20px;
width: 20px;
font-weight: 300;
line-height: 1.2em;
text-align: center;
position: absolute;
border-radius: 999em;
text-decoration: none;
background-color: #444;
font-family: sans-serif;
-webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
}
РЕКОМЕНДУЕМЫЕ: Если элемент тела сайта больше не включает overflow: hidden; Мы рекомендуем добавить это в свои стили CSS, чтобы полосы прокрутки не появлялись, когда плавающая ссылка MonsterLink появляется и исчезает из поля зрения.
body {
overflow: hidden !important;
}
Javascript
Мы будем использовать некоторые анимации jQuery для плавного перехода от Floating MonsterLink к просмотру и API событий OptinMonster Javascript, чтобы скрыть Floating MonsterLink, когда посетитель выберет MonsterLink, чтобы открыть опцию.
Стиль 1: сдвиньте вправо
// Floating MonsterLink Style 1
jQuery(document).ready(function ($) {
//* Animate Floating MonsterLink into view on page load
$(".floating-monsterlink.style1").addClass("show");
//* Animate out of view function
function closeFloatingMonsterLink(e) {
e.preventDefault();
$(".floating-monsterlink.style1").removeClass("show");
}
//* Triggers that run closeFloatingMonsterLink function
// run closeFloatingMonsterLink when close icon is selected
$('.floating-monsterlink.style1 .float-close').click(closeFloatingMonsterLink);
// run closeFloatingMonsterLink when manual trigger optin is successfully loaded
$(document).on('OptinMonsterManualOptinSuccess').click(closeFloatingMonsterLink);
});
Стиль 2 – нижнее скольжение
// Floating MonsterLink Style 2
jQuery(document).ready(function ($) {
//* Animate Floating MonsterLink into view on page load
$(".floating-monsterlink.style2").addClass("show");
//* Animate out of view function
function closeFloatingMonsterLink(e) {
e.preventDefault();
$(".floating-monsterlink.style2").removeClass("show");
}
//* Triggers that run closeFloatingMonsterLink function
// run closeFloatingMonsterLink when close icon is selected
$('.floating-monsterlink.style2 .float-close').click(closeFloatingMonsterLink);
// run closeFloatingMonsterLink when manual trigger optin is successfully loaded
$(document).on('OptinMonsterManualOptinSuccess').click(closeFloatingMonsterLink);
});
Вставить Optin
Не забудьте встроить эту опцию везде, где отображается плавающий MonsterLink, в соответствии с нашей документацией MonsterLinks.
В этой демонстрации мы создали опцию Lightbox, но вы можете вручную активировать следующие типы опций с помощью MonsterLink:
Скачать PSD (необязательно)
Вы можете скачать оригинальные PSD, которые использовались для создания нашей демонстрации Floating MonsterLinks, по ссылкам ниже:
Скачать PSD-файл Style 1 – Скачать PSD-файл Style 2
Это! Вы успешно добавили плавающий чат на свой сайт! Теперь ознакомьтесь с этими лучшими практиками в чате, чтобы ускорить обслуживание клиентов.
Использование проверенных психологических принципов – действительно умный способ увеличить конверсию на вашем сайте.
Когда вы используете эффект Зейгарник с дополнительной двухэтапной формой вместе со скользящей анимацией, вы значительно увеличиваете конверсию.
Готовы использовать эти психологические принципы на своем сайте? Начните сегодня с OptinMonster чтобы увеличить конверсию и увеличить продажи.
