Как называется кнопка на сайте со ссылкой

Используйте ссылки и кнопки правильно. Пожалуйста

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

Почему возникает проблема

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

Ссылки создаются с помощью тега .

Кнопка — это функциональный элемент. Она отвечает за выполнение определённой функции: добавить в корзину, купить, отправить, проголосовать и т. д.

Для кнопок используют тег .

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

Что случится, если вместо ссылки сделать кнопку

Если URL-адрес обернуть не , а тегом , то при нажатии пользователя на правую кнопку мыши браузер предложит выполнить действия, которые положены при клике на кнопку. Адрес нельзя будет открыть в новой вкладке или отправить через контекстное меню.

Такая кнопка не позволит открыть страницу в новой вкладке и через комбинацию клавиш — Ctrl и левая кнопка мыши.

При наведении курсора на правильную ссылку её адрес появляется внизу окна браузера. URL-адрес, обёрнутый в , не отобразится.

Что произойдёт, если вместо кнопки сделать ссылку

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

При наведении курсора на псевдоссылку внизу окна браузера появится не адрес, а javascript:; или АдресТекущейСтраницы/# .

Как определить элемент по макету

Конкретные указания часто прописывают в техническом задании к макету. В стайлгайде самого макета можно посмотреть состояния элемента.

У ссылки должны быть стили для состояния покоя, при наведения курсора :hover , в момент нажатия :focus , активного :active и иногда состояния, когда пользователь уже посещал эту страницу :visited .

У кнопки нет состояния :visited , зато есть состояние блока :disabled .

Однако рассчитывать только на макет не нужно. У ссылки может не быть :visited , а у блока :disabled — это может запутать.

Всё-таки кнопка или ссылка?

Если дизайнер по каким-то причинам не отрисовал состояния вообще, то придётся руководствоваться одной логикой.

Ссылка

Кнопка

За что отвечает

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

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

Что видит пользователь

При наведении курсора на ссылку внизу окна браузера возникает её адрес.

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

При наведении курсора на ссылку внизу окна браузера не отображается адрес.

Через меню по клику правой кнопкой мыши нельзя скопировать адрес или поделиться им.

Пример, чтобы расставить всё по своим местам

На макете отрисована фраза «Войти». Если клик по ней должен открывать окно для ввода регистрационных данных на этой же странице, это кнопка. Если при нажатии должна открываться отдельная страница для входа, это ссылка.

Другие великие противостояния

• Как ставить пустые ссылки: 7 способов
• Абсолютные и относительные ссылки
• Когда использовать флексы, а когда гриды
• Что лучше — табы или пробелы?

Ссылки ссылками, а промокод VESELO даст приятную скидку на любой профессиональный курс в HTML Academy. Например, на курс «Анимации для фронтендеров» можно записаться в любой момент, а пользы для карьеры будет целый вагон.

• Блог компании HTML Academy
• Веб-разработка
• Программирование
• HTML
• Дизайн

Если коротко:

Используйте для кнопок — кнопки, а для ссылок — ссылки.

Для кнопок использовать
ссылки
— не комильфо.

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

Для кого эта статья?

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

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

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

Ссылки

Введение

Когда наводят указатель на ссылку которая кнопка то в левом нижнем углу появляется надпись javascript:;:

Или адрес с решёткой:

ПКМ на такой кнопке и контекстное меню любезно предложит:

ctrl + ЛКМ на такой кнопке откроют новую вкладку на которой будет ровно та страница, с которой она была открыта.

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

В JavaScript скриптах для таких кнопок дополнительно используется e.preventDefault() , чтобы предотвратить действие кнопки по умолчанию (переход по ссылке) «— это костыль.

Ссылка

• Если клик приведёт к смене адреса,
• этот адрес можно скопировать,
• отправить по электронной почте,
• на него можно снова зайти,
• это не адрес самой страницы
  — это ссылка.

У ссылки должны быть стили для обычного, :active , :visited , :focus и :hover состояний.

Антипаттерн

Поздравляю! С такими стилями все ваши ссылки визуально превратятся в обычный текст. Найти их на странице станет крайне затруднительно.

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

Состояния

a — обычное состояние

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

a:hover — наведение

a:hover

Когда курсор находится над ссылкой, она становится :hover и в данном примере приобретает подчёркивание. Так пользователь поймёт, что это точно ссылка, на которую можно кликнуть.

a:focus — фокус клавиатуры

a:focus

Когда на ссылку устанавливается указатель, перемещаемый табулятором TAB ↹
она становится :focus . В 2016 году это может показаться странным, но есть люди которые работают с сайтам посредством клавиатуры. У некоторых вовсе сломана мышь. В любом случае, занулять :focus состояние — это преступление против таких людей.

Особые спецэфекты применять не обязательно, достаточно таких как у :focus .

CSS чтобы не писать дважды:

a:focus, a:hover

a:active — клик

a:active

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

a:visited — ранее посещённая страница

a:visited

Можно все посмотреть‽

:visited , поможет пользователю не забыть какие странички он уже открывал и не открывать их повторно. Так вместе с :active и :hover мы чуточку разгрузим интернет от случайных загрузок, и сделаем его чуть лучше и быстре.

В эпоху HTML4 вместо кнопок использовались ссылки подчёрнутые пунктирной линией. Этот паттерн устарел.

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

Пример нестандартного оформления ссылок:

Слова в ссылке должны подчиняться правилам русского языка, капс непозволителен (исключение — аббревиатуры)

HTML5 Кнопка

• Если клик не меняет адрес страницы,
• адрес нельзя скопировать
• и нельзя этим адресом поделиться — это кнопка.

В кнопке позволителен капс, при условии, что вы не используете аббревиатуры. Особенно в неочевидных местах.
Если у вас встречаются аббревиатуры, то верхний регистр в кнопке не желателен, выделяйте их другим способом. Не искушайте пользователей тапать по тому, что не тапается. У пользователей тачскрина нет возможности подсмотреть :hover или :focus состояние. Ну или есть, но происходит это всё не очень удобно, обычно уже после свершившегося тапа.

Доступность

может быть недоступен на архаичных браузерах или устройствах. У кнопок не применятся стили без специальных JavaScript скриптов.
Но вас это не должно беспокоить. На таких устройствах часто и JavaScript не работает. И быть может CSS.

Вообще если следовать идеологии что всё, что должно обрабатываться JavaScript’ом, должно добавляться JavaScript’ом, такой проблемы вовсе не возникнет.

Поведение внутри формы

по умолчанию имеет атрибут type=submit даже если его не прописать.

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

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

Это кстати отличный сбособ для стилизации кнопки отправки формы.
В отличии от , в содержимое
button можно писать любой HTML код, а не только текст.
Например

   Красный Синий 

Это даёт даже больше свободы в стилевом оформлении чем

Состояния

Похожи на состояния у ссылок за исключением того, что у кнопок нет состояния :visited , зато есть состояние :disabled .
Обычно дефолтное оформление браузера выпиливается основательно, иногда с нейтрализацией отображения состояний отличных от обычного.
Да. Этот гайд для тебя, любитель превратить веб-страницу в бумажный аналог.

Стилей для этих штучек понадобится немного больше, но всё не так страшно. Кроме того ребята из Twitter и отчасти Google уже позаботились о реализации велосипеда.
Тёплый ламповый Bootstrap «и новомодный MaterializeCSS, например.

Отображение

Так выглядит Кнопка в моём Chrome 54:

На картинке button , button:hover , button:focus , button:active соответственно.

Без излишеств. Но учитывая движение Google в направлении Material Design, вполне может статься так, что в скором времени их заменят на подобные аналоги.

CSS

Для наглядности — мой вариант велосипеда который выглядит странновато, но для примера сойдёт.

Обычная, наведение, клик, отключена соответственно.

button — обычное состояние

button

button:hover , button:focus — при наведении

button:hover, button:focus

button:active — в момент клика

button:active

button:disable — отключена

button:disabled

Пример посложнее

Показать CSS

button < margin: .8rem; font-size: 1.42rem; padding: 1rem; background: hsla(180, 90%, 64%, 1); color: hsla(180, 90%, 12%, 1); text-shadow: 1px 1px 1px hsla(180, 90%, 32%, 1); box-shadow: -4px 4px 0 0 hsla(180, 90%, 22%, .87), -3px 4px 3px hsla(180, 42%, 11%, 1), 1px 5px 4px hsla(180, 42%, 11%, 1), -4px 1px 0 0 hsla(180, 90%, 32%, 1), inset 0 0 1px 0 hsla(180, 90%, 90%, 1); border: 1px hsla(180, 92%, 56%, 1) solid; border-top-color: hsla(180, 92%, 64%, 1); border-radius: 5px; outline: none; position: relative; transition: all .22s ease-in; >button:hover < background: hsla(420, 90%, 42%, 1); color: hsla(420, 90%, 12%, 1); text-shadow: 1px 1px 1px hsla(420, 90%, 32%, 1); border: 1px hsla(420, 92%, 56%, 1) solid; border-top-color: hsla(420, 90%, 64%, 1); box-shadow: -4px 4px 0 0 hsla(420, 90%, 22%, .87), -3px 4px 3px hsla(420, 42%, 11%, 1), 1px 5px 4px hsla(420, 42%, 11%, 1), -4px 1px 0 0 hsla(420, 90%, 32%, 1), inset 0 0 1px 0 hsla(420, 90%, 90%, 1); >button:focus < background: hsla(108, 90%, 42%, 1); color: hsla(108, 90%, 12%, 1); text-shadow: 1px 1px 1px hsla(108, 90%, 32%, 1); border: 1px hsla(108, 92%, 56%, 1) solid; border-top-color: hsla(108, 90%, 64%, 1); box-shadow: -4px 4px 0 0 hsla(108, 90%, 22%, .87), -3px 4px 3px hsla(108, 42%, 11%, 1), 1px 5px 4px hsla(108, 42%, 11%, 1), -4px 1px 0 0 hsla(108, 90%, 32%, 1), inset 0 0 1px 0 hsla(108, 90%, 90%, 1); >button:active < background: hsla(420, 90%, 42%, 1); color: hsla(420, 90%, 12%, 1); text-shadow: 1px 1px 1px hsla(420, 90%, 32%, 1); transform: translate(-4px, 4px); border: 1px hsla(420, 92%, 22%, 1) solid; border-top-color: hsla(420, 92%, 56%, 1); box-shadow: 0 0 0 0 hsla(420, 90%, 22%, .87), 0 0 0 hsla(420, 42%, 11%, 1), 0 0 0 hsla(420, 42%, 11%, 1), 0 0 0 0 hsla(420, 90%, 32%, 1), inset 1px 1px 4px 0 hsla(420, 90%, 22%, 1); >button:disabled < background: hsla(420, 0%, 64%, 1); color: hsla(420, 0%, 12%, 1); text-shadow: 1px 1px 1px hsla(420, 0%, 32%, 1); transform: translate(-4px, 4px); border: 1px hsla(420, 0%, 22%, 1) solid; border-top-color: hsla(420, 0%, 56%, 1); box-shadow: 0 0 0 0 hsla(420, 0%, 22%, .87), 0 0 0 hsla(420, 42%, 11%, 1), 0 0 0 hsla(420, 42%, 11%, 1), 0 0 0 0 hsla(420, 0%, 32%, 1), inset 1px 1px 4px 0 hsla(420, 0%, 22%, 1); >button:disabled.in_ajax

Дизайнеру

Ты цээсэсов можешь и не знать, но состояния отрисовать обязан!

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

Ребята из Google сделали такой макет.

Спасибо

Спасибо, что дочитали. Всё здесь написаннное не является 100% истиной в последней инстанции.
Репозиторий

GitHub

Ссылка на репозиторий этой статьи. Если хотите дополнить или исправить, присылайте пожалуйста Pull Request

Элементы интерфейса сайта

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

Кнопка — элемент, при нажатии на который происходит какое-то действие на сайте.

Radiobutton — позволяет пользователю выбрать одну опцию.

Checkbox — позволяет выбрать несколько опций.

Select — позволяет пользователю выбрать одну опцию из выпадающего списка.

Accordeon — элемент интерфейса состоящий из заголовков и скрываемого и открываемого контента.

Слайдер — переключатель изображений (или другого контента) работающий автоматически или вручную.

Контент — текст, изображения, видео, то есть наполнение сайта.

Popup — небольшое всплывающее окно в углу экрана.

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

Блок (Экран) — смысловой элемент включающий в себ я информацию только об одной сущности. Обычно блок начинается с заголовка и отделен от следующего каким-либо визуальным решением, цветом, линией, тенью.

Раздел — страница сайта. Тут все просто.

Шапка (хеддер / header) — самая верхняя часть сайта. Обычно в ней расположены логотип, меню и контактная информация. Шапка чаще всего бывает закрепленной, т.е. она перемещается вместе с перемещением пользователя по странице.

Подвал (футер / footer) — самая нижняя часть сайта. Чаще всего в ней расположена карта сайта, контактные данные, быстрые ссылки на популярные разделы, копирайт, политика конфиденциальности и ссылка на разработчика сайта.

Галерея — набор из нескольких изображений.

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

Бордер — обводка элемента. Бывает solid (цельной), dashed (линиями) и dotted (точками).

Тултип (tooltip) — подсказка, всплывающая при наведении на элемент.

Курсор Поинтер (Pointer) — тип курсора в виде руки с вытянутым указательным пальцем. Обычно появляется при наведении на ссылку.

Курсор Текст (Text) — тип курсора, стандартный для редактирования текста.

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

П агинация — нумерация страниц, обычно отображенная как навигация в конце страницы.

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

Стрелочки — вид навигации.

Поисковая строка — строка для ввода поискового запроса.

Плеер — элемент воспроизводящий аудио и видеофайлы.

Ползунок — предназначен для ввода чисел в указанном диапазоне.

Текстовое поле — поле для ввода текстовых значений.

Поле пароля — поле для ввода пароля. Автоматически скрывает символы, заменяя их на точки.

Маска — это значения, указывающие формат допустимых значений входных данных в поле.

Ссылка — элемент интерфейса перенаправляющий вас по адресу, указанному в нем.

Состояние ссылок и кнопок: Hover (Ховер) — состояние выбранного элемента при наведении на него курсора мыши (важно знать — в мобильных устройствах нет этого состояния)

Состояние ссылок и кнопок: Focus (Фокус) — состояние выбранного элемента при переключении между элементами клавишей tab (чаще всего это синяя обводка вокруг элемента)

Состояние ссылок и кнопок: Active (Эктив) — состояние выбранного элемента в момент нажатия на него.

Якорь — элемент интерфейса перенаправляющий вас по адресу и к конкретному элементу, указанному в нем.

Вкладки (табы) — элемент интерфейса, так же как и аккордеон, состоит из заголовка и скрытого контента, на который можно попасть при обращении к заголовку.

Строка загрузки — элемент, показывающий степень загрузки контента или исполняемой функции.

Переключател ь (switch) — элемент интерфейса, который позволяет выбрать одно из состояний, чаще всего вкл/выкл.

Алерт окно — всплывающее окно, блокирующее взаимодействие пользователя не только с элементами на данной страницы, но и в целом со всем браузером.

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

Рейтинг (Rating bar) — элемент интерфейса показывающий среднюю оценку.

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

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

20 вариантов нестандартного оформления кнопки онлайн-консультанта

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

У Webim много клиентов, которые разрабатывают собственный дизайн кнопок и по-разному располагают их на сайте. Вот 20 примеров и шесть советов, как оформить кнопку онлайн-консультанта.

Совет первый. Кнопка должна оптимально вписываться в дизайн сайта по форме, размеру и цветам. Можно настроить её под цвета сайта или, наоборот, сыграть на контрасте, чтобы кнопка выделялась.

TourKids — дизайн кнопки перекликается с оформлением сайта, за счёт этого она идеально вписывается в дизайн и не отвлекает внимание от информации.

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

888.ru разместили сразу два виджета на главной — классическую кнопку и крупный элемент на главной странице. Кнопка тёмная, не контрастирует с цветами сайта, но всё равно выделяется. Дополнительный жёлтый элемент показывает, что операторы в онлайне и готовы ответить на ваш вопрос.

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

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

Небольшая кнопка с надписью Online на сайте avtodor-tr.ru показывает, что вам быстро ответят.

НПФ «Благосостояние» поместили кнопку на слайдер. Изображения меняются, кнопка остаётся на месте.

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

«Тинькофф Банк» спрятали в кнопку сразу три канала связи на выбор — чат на сайте, email и Telegram. У посетителя сайта есть выбор способа связи.

«Райффайзенбанк» тоже предлагает сразу четыре канала на выбор: чат, звонок с сайта, email, Telegram.

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

Аlltime.ru — ещё один вариант фиксированного футера c кнопкой консультанта, историей просмотров и корзиной.

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

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

• кнопку делают менее заметной или переносят как пункт в меню;
• кнопку размещают не на главной (самой посещаемой странице) а, например, на странице «Помощь», куда заходят посетители с вопросом или проблемой, или «Корзина», куда доходят посетители, готовые совершить покупку;
• кнопка появляется в «авторизованной зоне» сайта — то есть пользователь увидит кнопку, только когда авторизуется.

«Банк Хоум Кредит» разместил на сайте небольшую кнопку нейтрального цвета в шапке. Она не привлечет лишнего внимания, но и найти её не трудно.

У Leroy Merlin чат есть только в «Корзине», и туда обращаются посетители сайта, готовые совершить покупку, с конкретными вопросами по доставке, наличию товаров, работе магазинов и так далее.

На сайте Почты России кнопка размещена в разделе «Помощь» после списка часто задаваемых вопросов. Только если клиент не найдёт ответ в перечне, он дойдёт до кнопки. Это сокращает количество обращений в чат.

Одна кнопка консультанта на сайте «Беларусбанка» перенесена в боковое меню, вторая — в шапку сайта.

Yves Rocher разместили ссылку в подвале сайта. Как правило, посетитель сайта прокручивает страницу до футера, чтобы найти контакты компании, поэтому ссылка на чат там оправдана.

Auto.ru использует лаконичную кнопку красного цвета, которая появляется только после того, как пользователь авторизовался на сайте.

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

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

Совет пятый. Разместите кнопку рядом с элементом, который подталкивает посетителя сайта к покупке. Например, как это сделала компания ПЭК — на её сайте кнопка чата размещена рядом с калькулятором расчёта стоимости заказа. Тогда посетитель сайта после расчёта сможет задать уточняющий вопрос или сразу сделать заказ. Кроме того, это отличный способ приучать посетителей сайта к самообслуживанию.

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

Так может выглядеть офлайн-форма

Либо, если вы знаете, что предстоит наплыв обращений (например, перед праздниками, во время распродаж или запуска масштабной рекламной кампании), настройте исчезновение кнопки после определённого количества обращений в очереди.

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

Кнопка онлайн-консультанта может располагаться в разных локациях сайта:

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

Оранжевым показаны варианты расположения кнопки онлайн-консультанта

Несколько советов по оформлению и расположению кнопки.

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