Как сделать плавающую кнопку. Способствование действию скорее всего так часто не используется
В Leadback присутствует большое количество настроек, которые позволяют организовать практически любой алгоритм работы виджета обратного звонка. Первые настройки касаются логики появления виджета на сайте.
Ловить звонки в не рабочее время — введенные номера в не рабочее время будут распределяться между менеджерами в рабочее время. Менеджер получит звонок и автоответчик сообщит ему, что был заказан звонок в не рабочее время и соединит с потенциальным клиентом.
Ловить посетителя на выходе — виджет определяет момент, когда посетитель собирается покинуть Ваш сайт и предлагает ему связаться с менеджером за 27 секунд.
Плавающая кнопка «Телефон» — всегда на сайте в определенном месте видна кнопка, при нажатии на которую можно ввести номер и связаться с отделом продаж. Мы рекомендуем использовать данную функцию.
Настройка окна виджета — Вы можете выбрать 2 варианта показа виджета: Вариант «Окно» и «На весь экран». Так же, выбрать цветовую схему и изменить надпись на виджете. Мы рекомендуем использовать информацию о скидках и акциях, что бы мотивировать клиента оставлять номер для связи.
Виджет обратного звонка «На весь экран»
Настройка плавающей кнопки — раздел, где мы настраиваем внешний вид и цветовую схему кнопки. Доступны следующие варианты: Звонящий телефон, круглая кнопка с трубкой, квадратная кнопка с трубкой и стильная кнопка с трубкой напоминающая эконки популярных «мессаджеров» .
Обращаем Ваше внимание, что цвет кнопки можно подобрать под цветовую схему Вашего сайта, а расположить кнопку можно в любом месте. Для этого есть дополнительные настройки.
Разрешать несколько звонков для клиента — может ли один и тот-же клиент звонить Вам несколько раз? ДА/НЕТ Клиент определяется по браузеру.
Изменить время «Мы перезвоним вам за … сек» — Вы можете изменить время, за которое обещаете позвонить клиенту в большую или меньшую сторону.
Предлагать звонок 1 клиенту не чаще 1 раза за… — если у Вас включена функция «Ловить посетителя на выходе», то можно указать интервал, что бы не раздражать посетителя всплывающим окном каждый раз.
Принимать звонки из СНГ и Европы — Если Вы работаете только на Российском рынке, мы рекомендуем не включать эту функцию. Если Вам нужны клиенты из других стран, то включайте. Для остальных стран (кроме России), за одну минуту разговора будет списываться: Украина — 3 минуты, Казахстан — 2 минуты, Беларусь — 4 минуты, все другие страны — 5 минут.
Имя виджета для отчетов — Если вы используйте несколько виджетов на одном домене.
Появиться сообщение. Обращаем внимание, что код на сайте обновлять не нужно!
Настройка виджета завершена
После завершения настройки в Вашем личном кабинете Leadback в разделе виджеты появиться Ваш первый виджет.
Виджет в личном кабинете
Теперь нужно установить код виджета на Ваш сайт.
К настоящему времени стал открытием для тех, кто работает с приложениями на платформе Android, а также занимается проектированием пользовательских интерфейсов. Он был введен компанией Google несколько лет назад. Целью материального дизайна являлось создание визуального языка, который бы объединял принципы классического дизайна с инновациями.
Идея кажется весьма перспективной и многообещающей. Материальный дизайн является новейшей попыткой сделать пользовательский опыт (UX) комфортным и эффективным одновременно. Google проделали фантастическую работу в этой области: они используют минимальный набор элементов дизайна, применяют уникальные компоненты, яркие цвета, анимацию и создают дружественную для пользователя среду.
Вместе с этим дизайнеры практикуют так называемую плавающую кнопку целевого действия (floating action button, или FAB). Она представляют собой круглую кнопку, внешний вид которой хорошо известен пользователям Android. Она является еще одним отличительным элементом материального дизайна. FAB появляется поверх интерфейса приложения и мотивирует пользователей совершить определенное целевое действие.
По сути, FAB является , так как ее цель заключается в том, чтобы убедить человека сделать что-либо (например, скачать или загрузить определенный контент). Плавающая кнопка целевого действия обычно размещается в правом углу экрана. Ее очень трудно не заметить, так как она имеет яркий и привлекательный дизайн. FAB мотивирует пользователя на совершение самых популярных действий в приложении. Тем не менее, при использовании данных кнопок возникают определенные проблемы.
Что не так с плавающими кнопками целевого действия?
FAB представляют собой разумный подход, позволяющий мотивировать пользователя на совершение действия, ведь их трудно не заметить. Однако они могут стать неверным решением для дизайна пользовательского опыта в целом. Ниже представлено несколько причин, по которым плавающие кнопки целевого действия могут оказать негативное влияние на UX.
FAB могут мешать пользователям
Как уже было упомянуто выше, плавающие кнопки целевого действия обычно размещаются в правом нижнем углу экрана. В большинстве случаев они располагаются поверх контента приложения, перекрывая какую-то его часть.
Разумеется, размеры FAB действительно небольшие, поэтому они скрывают от глаз пользователя лишь незначительную часть контента. Однако, взгляните на приложение Google Photos (скриншоты ниже), где плавающая кнопка целевого действия перекрывает существенную часть фотографии.
Чтобы увидеть, что скрыто под кнопкой, пользователю придется прокрутить страницу вниз. Но что если он уже находится в самом низу страницы? Тогда прокрутка окажется невозможной, и пользователю придется добавить какой-либо контент, чтобы сделать скрытую часть фотографии видимой.
Очень важно признать тот факт, что плавающая кнопка целевого действия, несмотря на свои незначительные размеры, может скрыть от глаз человека какую-либо часть контента приложения. Это может иметь негативные последствия для пользовательского опыта.
Их дизайн препятствует полному погружению
Плавающие кнопки целевого действия заметно выделяются на общем фоне. Во многих случаях это создает препятствия для реализации важнейшей характеристики пользовательского опыта — полного погружения в атмосферу приложения.
В качестве примера вновь служит приложение Google’s Photos. Когда человек открывает его, он попадает в галерею пользователя, где он может просто просматривать фотографии. В данной ситуации функция поиска, которая представлена при помощи FAB, может оказаться полезной, однако она не является приоритетной.
Плавающая кнопка целевого действия отвлекает его от увлеченного просмотра фотографий, занимая место на экране и блокируя некоторые части изображений. В таких случаях кнопка не должна так сильно выделяться.
Они могут оказаться бесполезными
Как объясняют сами специалисты Google, плавающая кнопка побуждает пользователя совершить целевое действие. Тем не менее, разработчики иногда забывают о том, насколько часто человек совершает это действие, пользуясь приложением.
Золотое правило дизайна пользовательского опыта сводится к тому, чтобы нужные и часто используемые элементы были на виду, а редко используемые — почти не заметны. Тем не менее, как мы видим на примере приложения Gmail (скриншот выше), разработчики не приняли это правило во внимание.
На экране приложения мы видим кнопку, нажав на которую, пользователь сможет быстро перейти к написанию электронного письма. Тем не менее, по данным последних опросов, около половины пользователей лишь просматривают почту при помощи мобильных устройств. Иными словами, они не слишком части пишут письма, используя смартфоны или планшеты.
Всем доброго времени суток. Сегодня речь пойдет о модальных окнах, и на их примере мы реализуем кнопку «Заказать обратный звонок «. Наверняка вы видели на множестве лендингов такую кнопку, при нажатии на которую появляется контактная форма с затемнением общего фона. Именно такой функционал мы и реализуем сегодня.
Обычно кнопку «заказать обратный звонок» располагают в правом верхнем углу. Можете поэкспериментировать с расположением, но помните о том, что люди уже привыкли видеть этот элемент именно там, хотя, — это больше относится к сайтам бизнес тематики и услуг.
Конечно, в большинстве случаев модальные окна делают с применением javascript, но сегодня мы попробуем обойтись только средствами css, и не будем нагружать наш landing page лишним скриптом.
И напоследок, скажу, что я не заморачивался с дизайном контактной формы, просто хотел передать суть того, как реализуется подобный эффект, так что прошу сильно не пинать. Просто опишу основные моменты, а вы потом подправите, как вам будет угодно.
О том, как настроить контактную форму можно почитать в этих статьях:
Для того, чтобы статья не получилась очень длинной, я приведу только html разметку, а остальное вы сможете посмотреть, скачав исходник.
Будем реализовывать такой функционал: :)
Еще раз повторюсь — это просто небольшой шаблончик, который вы потом подправите под свой дизайн. Вызываться это все будет нажатием на кнопку.
Первое, что нужно сделать, это подключить таблицу стилей (less), представленную в исходнике. Я очень подробно описал его комментариями, посмотрите и внесите правки.
Html структура очень проста. Размещаем эту ссылку в нужное место на сайте. Туда, где вы планируете вывести кнопку «заказать обратный звонок»:
Заказать обратный звонок
Теперь нужно создать контейнер модального окна:
Оставьте ваш телефон
и наш консультант свяжется с вами
Не стал публиковать таблицу стилей, можете скачать исходник здесь:
А с html разметкой — все. Так вот просто. Преимущества этого способа в том, что модальное окно можно вызывать несколько раз на странице и в том, что не используются скрипты.
Как вы могли заметить, я написал, что использовал less. Посмотрите на структуру. Я не использовал и 5% от возможностей препроцессора (только вложенность), так как только начал изучать его, но планирую в будущем чаще применять. Вот хотел спросить у вас, как лучше. Не против ли вы, если примеры кода будут не в CSS а less? У меня Google chrome и Яндекс браузер отказались компилировать less в css без открытия файла через Денвер или OpenServer. На Мазила и IE — проглотили. Так что, скорее всего, буду выкладывать обычные CSS стили.
А на сегодня — все! Всем пока!
Если нет желания создавать подобную кнопку самому, рекомендую обратить внимание на , которые позволяют реализовать эту функцию и имеют много других дополнительных возможностей.
Подключать себе такой функционал заказчик не хотел. Ему просто надо была кнопка, после нажатия на которую, появлялось бы модальное окно с формой заказа. Кнопки обратного звонка - это очень полезная вещь. Благодаря им, человек может заказать звонок себе не тратя свои деньги, что есть важным для нашего человека:). По сути, такую кнопку можно сделать и для возвращения наверх страницы и для кнопки помощи и тд. Главный элемент тут будет - анимация, пульсирующий эффект.
09.09.2016 Добавлена новая кнопка, на старой не работал эффект пульсации в новом Хроме.
Установить анимированную кнопку себе на сайт очень легко. Вся анимация выполнена с помощью CSS , без подключения дополнительных скриптов и плагинов. Хоть кода и много, но все довольно просто.
УВАЖАЕМЫЕ МАСТЕРА! Имейте совесть, если используете данную кнопку, то хотя бы картинку трубки телефонной заливайте себе на хостинг, а не тупо копируете ссылку на мой сайт. Таких умельцев и их сайты прославлю на весь интернет 🙂
Сначала нужно добавить HTML разметку. У нас это будет обычная ссылка. В нужном месте у себя на сайте, в шапке или подвале вставляем такую строку.
Кнопка рассчитана на подключение модального окна из другой статьи. Если подключаете сторонние ссылки, то у самой кнопки в ее HTML коде есть событие
Onclick="return false;"
Теперь в файл стилей надо добавить сами стили CSS .
#popup__toggle{bottom:25px;right:10px;position:fixed;z-index:999;} .img-circle{background-color:#29AEE3;box-sizing:content-box;-webkit-box-sizing:content-box;} .circlephone{box-sizing:content-box;-webkit-box-sizing:content-box;border: 2px solid #29AEE3;width:150px;height:150px;bottom:-25px;right:10px;position:absolute;-webkit-border-radius:100%;-moz-border-radius: 100%;border-radius: 100%;opacity: .5;-webkit-animation: circle-anim 2.4s infinite ease-in-out !important;-moz-animation: circle-anim 2.4s infinite ease-in-out !important;-ms-animation: circle-anim 2.4s infinite ease-in-out !important;-o-animation: circle-anim 2.4s infinite ease-in-out !important;animation: circle-anim 2.4s infinite ease-in-out !important;-webkit-transition: all .5s;-moz-transition: all .5s;-o-transition: all .5s;transition: all 0.5s;} .circle-fill{box-sizing:content-box;-webkit-box-sizing:content-box;background-color:#29AEE3;width:100px;height:100px;bottom:0px;right:35px;position:absolute;-webkit-border-radius: 100%;-moz-border-radius: 100%;border-radius: 100%;border: 2px solid transparent;-webkit-animation: circle-fill-anim 2.3s infinite ease-in-out;-moz-animation: circle-fill-anim 2.3s infinite ease-in-out;-ms-animation: circle-fill-anim 2.3s infinite ease-in-out;-o-animation: circle-fill-anim 2.3s infinite ease-in-out;animation: circle-fill-anim 2.3s infinite ease-in-out;-webkit-transition: all .5s;-moz-transition: all .5s;-o-transition: all .5s;transition: all 0.5s;} .img-circle{box-sizing:content-box;-webkit-box-sizing:content-box;width:72px;height:72px;bottom: 14px;right: 49px;position:absolute;-webkit-border-radius: 100%;-moz-border-radius: 100%;border-radius: 100%;border: 2px solid transparent;opacity: .7;} .img-circleblock{box-sizing:content-box;-webkit-box-sizing:content-box;width:72px;height:72px;background-image:url(images/mini.png);background-position: center center;background-repeat:no-repeat;animation-name: tossing;-webkit-animation-name: tossing;animation-duration: 1.5s;-webkit-animation-duration: 1.5s;animation-iteration-count: infinite;-webkit-animation-iteration-count: infinite;} .img-circle:hover{opacity: 1;} @keyframes pulse {0% {transform: scale(0.9);opacity: 1;} 50% {transform: scale(1); opacity: 1; } 100% {transform: scale(0.9);opacity: 1;}} @-webkit-keyframes pulse {0% {-webkit-transform: scale(0.95);opacity: 1;} 50% {-webkit-transform: scale(1);opacity: 1;} 100% {-webkit-transform: scale(0.95);opacity: 1;}} @keyframes tossing { 0% {transform: rotate(-8deg);} 50% {transform: rotate(8deg);} 100% {transform: rotate(-8deg);}} @-webkit-keyframes tossing { 0% {-webkit-transform: rotate(-8deg);} 50% {-webkit-transform: rotate(8deg);} 100% {-webkit-transform: rotate(-8deg);}} @-moz-keyframes circle-anim { 0% {-moz-transform: rotate(0deg) scale(0.5) skew(1deg);opacity: .1;-moz-opacity: .1;-webkit-opacity: .1;-o-opacity: .1;} 30% {-moz-transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .5;-moz-opacity: .5;-webkit-opacity: .5;-o-opacity: .5;} 100% {-moz-transform: rotate(0deg) scale(1) skew(1deg);opacity: .6;-moz-opacity: .6;-webkit-opacity: .6;-o-opacity: .1;}} @-webkit-keyframes circle-anim { 0% {-webkit-transform: rotate(0deg) scale(0.5) skew(1deg);-webkit-opacity: .1;} 30% {-webkit-transform: rotate(0deg) scale(0.7) skew(1deg);-webkit-opacity: .5;} 100% {-webkit-transform: rotate(0deg) scale(1) skew(1deg);-webkit-opacity: .1;}} @-o-keyframes circle-anim { 0% {-o-transform: rotate(0deg) kscale(0.5) skew(1deg);-o-opacity: .1;} 30% {-o-transform: rotate(0deg) scale(0.7) skew(1deg);-o-opacity: .5;} 100% {-o-transform: rotate(0deg) scale(1) skew(1deg);-o-opacity: .1;}} @keyframes circle-anim { 0% {transform: rotate(0deg) scale(0.5) skew(1deg);opacity: .1;} 30% {transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .5;} 100% {transform: rotate(0deg) scale(1) skew(1deg); opacity: .1;}} @-moz-keyframes circle-fill-anim { 0% {-moz-transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .2;} 50% {-moz-transform: rotate(0deg) -moz-scale(1) skew(1deg);opacity: .2;} 100% {-moz-transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .2;}} @-webkit-keyframes circle-fill-anim { 0% {-webkit-transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .2; } 50% {-webkit-transform: rotate(0deg) scale(1) skew(1deg);opacity: .2; } 100% {-webkit-transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .2;}} @-o-keyframes circle-fill-anim { 0% {-o-transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .2;} 50% {-o-transform: rotate(0deg) scale(1) skew(1deg);opacity: .2;} 100% {-o-transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .2;}} @keyframes circle-fill-anim { 0% {transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .2;} 50% {transform: rotate(0deg) scale(1) skew(1deg);opacity: .2;} 100% {transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .2;}}
Первые 7 строк отвечают за внешний вид кнопки, далее уже анимация. В первой строке можно настроить расположение кнопки, а в шестой строке указываете путь к изображению в параметре background-image:url(mini.png) .
Вот и все что нужно для установки такой кнопки. Если Вы разбираетесь в CSS, то сможете настроить кнопку и по нужде полностью ее изменить под свои нужды и стиль сайта.
Чтобы привязать к этой кнопке модальное окно, Вам поможет статья - . Если все сделаете согласно инструкции, проблем у Вас не возникнет.
На этом все, спасибо за внимание. 🙂
P.S.
Я решил создать плагин, который поможет Вам без проблем получить нужный результат. Можете перейти и посмотреть:
Кнопки социальных сетей или onLine консультации сегодня встречаются практически на каждом Интернет проекте. Некоторые из них размещаются непосредственно в теле страницы, другие же остаются всегда на виду пользователя независимо от прокрутки. Именно такие кнопки, блок попытаемся создать в этом материале на чистом CSS
Чтобы кнопка, блок (далее просто кнопка) не изменяла своего положения независимо от прокрутки страницы – как бы плыла по материалам сайта, ей необходимо задать позицию (position ) и разместить ее, поверх все элементов. Но прежде чем перейдем непосредственно к стилям CSS создадим объект для наших экспериментов. Пускай это будет некая картинка (picture), которая является отправной точкой к какому-то действию
<a class =”start” href =”#” > <img src =”picture” > a >html-код составили, теперь попытаемся ее заставить плавать.
И так, с нам уже известно, что фиксированное позиционирование позволяет элементу сохранять свое положение при прокрутке странице, а чтобы он был всегда на переднем плане – необходимо задать большое числовое значение параметру z-index . Делаем это для нашей кнопки:
.start { position :fixed ; z-index : 99999 ; } .start { left :0 : position:fixed ; top :200 px ; z-index : 99999 ; }Если же нам нужно кнопку разместить справа, то вместо left нужно задать right, а именно:
.start { position :fixed ; right :0 ; top :200 px ; z-index : 99999 ; }Если же нашу кнопку необходимо разместить внизу окна браузера, то top заменяем на bottom.
Это было для кнопки, но а если перед нами стоит задача разместить не кнопку, а целый блок с текстом или целым набором кнопок. Эта задача решается аналогично, только приведенные стили нужно задать блоку:
CSS
.block_start { background : #382d25 ; border : 1 px solid #382d25 ; border-radius : 6 px ; box-shadow : 0 px 0 px 8 px #382d25 ; font-size :14 px ; padding : 5 px 5 px 0 ; position : fixed ; right : 25 px ; text-align : center ; top :25 px ; width : 96 px ; z-index : 99999 ; }Прокомментируем свойства параметров. Положение блока указали при помощи position: fixed; z-index: 99999; и разместили его справа сверху — right: 25px; top:25px. Ширина блока (width) равна 96 пикселей. Оформление его задается параметрами – background, border, border-radius, box-shadow. И в завершение, чтобы наш текст внутри блока размещался посредине и имел поля, был одного размера, записали font-size:14px; padding: 5px 5px 0; text-align: center.
Теория – это хорошо, подумали Вы, но вот как это внедрить в реальность? Для примера, допустим у нас есть два сайта – один CMS Joomla, другой – WordPress. Ну что же, установим для Joomla
Установка на CMS Joomla
html-код кнопки необходимо разместить в шаблоне сайта – это файл index.php, что находиться вот здесь — ваш_сайт/templates/тема/ Сам код я чаще всего устанавливаю непосредственно перед тегом