код html для whatsapp
WhatsApp кнопка для сайта с анимацией
Сегодня разберем, как сделать красивую анимированную кнопку для связи по WhatsApp прямо с сайта. Делать мы это будем без плагинов, только при помощи CSS. Поэтому данный способ подойдёт для любого сайта. Ну а разбирать мы всё это будем, конечно же, на примере самой популярной CMS WordPress.
Ссылка для перехода в Whatsapp
Для начала рассмотрим, как выглядит ссылка на чат в Whatsapp для сайта.
А вот она в виде HTML кода:
Вместо phone=79260000000 вставляем нужный номер
Этот код можно вставить в любом месте, как простую ссылку. Добавив к нему соответствующие стили, можно сделать с помощью этого кода обычную или фиксированную кнопку. Чем мы сейчас и займёмся.
Кнопка Whatsapp в углу экрана с анимацией
Первый вариант кнопки whatsapp для сайта делается довольно просто и её легко отредактировать, если вам понадобится поменять цвет или размеры.
HTML код:
CSS код:
CSS для мобильной версии сайта:
Если вам необходимо поменять местоположение кнопки на мобильных устройствах, то добавьте к стилям CSS следующий код.
Данная кнопка имеет более сложную анимацию и эффект появления надписи при наведении.
Простая интеграция сайта с Whatsapp, Viber и Telegram
Сейчас популярны мессенджеры. Пользователи активно в них общаются, шлют друг другу смешные стикеры, кидают войсы и созваниваются, не тратя деньги на мобильную связь.
А для компаний, популярность мессенджеров изменила сам формат общения с клиентами. Многие пользователи уже не хотят звонить и общаться голосом, им удобнее написать в любимый мессенджер и получить консультацию в чате с менеджером.
При разработке сайтов в студии мы сразу ставим на них иконки мессенджеров для мобильной версии. Пользователь заходит на сайт со смартфона, бодро кликает по кнопке WhatsApp и переходит в чат с консультантом компании.
Как установить мессенджеры на сайт
Для того чтобы пользователь по клику на иконку мессенджера (Ватсапа, Вайбера или Телеграмма) сразу переходил в чат с менеджером, нужно установить на сайт специальные ссылки. И разместить иконки.
Ссылка на Whatsapp на сайте:
Ссылка на Telegram на сайте:
Заменяем номера телефонов в примерах выше и загружаем на сайт иконки.
Для Телеграмма вместо номера указываем логин (без знака @ в начале).
Ссылка на Viber на сайте:
Эти ссылки нужно установить в html-код сайта. Обычно в шапку или под ней. Рядом с номером телефона.
И заменить выделенные красным номера на мобильный телефон менеджера. На его телефоне, разумеется, должны быть установлены все три приложения.
Для Телеграмма, вместо номера, нужно указать логин. Задать его можно в настройках приложения.
Заходим в Setting, и в пункте username указываем логин.
В коде его нужно прописывать без знака «@».
Где найти значки
Также вам понадобятся иконки мессенджеров.
Их можно скачать ниже
Иконки нужно загрузить на сайт и указать путь к ним (в коде выше путь выделен зеленым).
Как получить ещё больше обращений с сайта
Кроме мессенджеров, хороших результатов можно добиться, установив на сайт чат с онлайн-консультантом.
Мы обычно используем jivosite.
Он включает, как интеграцию с мессенджерами, так и возможность общения в онлайн-чате.
Обязательно указываем для консультанта имя, фамилию и добавляем реальную аватарку.
Из полезных функций в jivosite есть авто-приглашение к диалогу.
При этом можно настроить различные приглашения для разных страниц.
Если какие-то из услуг или определённые товары пользуется особой популярностью, можно настроить отдельное приглашение к диалогу на их страницах.
Например для карточки Iphone XS, можно настроить такое авто-приглашение к диалогу:
Кстати, Iphone XS не боится воды, его можно даже ронять в воду 🙂
У вас есть какие-то вопросы по Iphone XS или о наших условиях доставки и оплаты?
Дополнительно, в jivosite также есть интеграция с viber и telegram. Плюс интеграции с группой в VK, Facebook.
Можно настроить, что все заявки из всех каналов будут поступать в единую систему и распределяться по менеджерам.
В заключении
По статистике наших клиентов от 20 до 40% обращений к нашим клиентам приходят через мессенджеры или онлайн-чат.
Как поставить иконку WhatsApp на сайт. Три способа
Ставим иконку WhatsApp на сайт
Друзья привет в этом видео я рассказываю как легко установить на сайт иконку для связи по WhatsApp.
Ссылка о которой я говорил в видео
https://faq.whatsapp.com/general/26000030/?lang=ru
Мы рассмотрим 3 способа.
1) При помощи кода выводя в записи или на странице
2) При помощи плагина WhatsApp me
3) При помощи scc поместим плагин в левый нижний угол
Все три способа элементарны и доступны пользователям с любым уровнем опыта. В видео я все очень подробно показываю.
Ранее выходило видео более старое, где я рассказываю не только про иконки Вацапа но и Скайпа Вайбера итд
Вот ссылочка на видео https://youtu.be/bYPEOwtwl58
А вот на страничку с кодом https://e-integrate.ru/kak-dobavit-na-sajt-ikonki-telefona-viber/
Первый варик
Ссылка просто на вацап.
Вставляем ее в режиме текстового редактора в любое место на сайте, и не забываем изменить телефон на свой к которому привязан WhatsApp.
Код выше, это код с заранее заполненным сообщением. Вместо закодированного текста вставляем свой код который Вы получите после перекодирования.
Ссылка выше это когда нужно, чтобы посетитель поделился со своими друзьями текстом который вы зарядили. Соответственно текст заранее кодируем и вставляем вместо моего.
Второй вариант
Третий вариант
Код для вставки на сайте, например в футере чтобы показывалось на всех страницах или на любой конкретной странице
Только поменяйте номер и адрес картинки вместо whatsapp-logo.png закиньте адрес своей картинки.
Немного отсебятины
Из опыта. Иконка WhatsApp работает лучше чем любой онлайн консультант. WhatsApp не установлен разве что у динозавров на телефоне. Хоть я сам динозавр но пользуюсь этой приложухой постоянно. Это очень удобно. Можно отправить просто текстовое сообщение, можно сразу позвонить и не отвечать на вопросых онлайн консультанта, типа а как Вас зовут, оставьте емайл, примите условие, поставьте галочку что мы можем налево и направо использовать Вашу персональную информацию. В общем я за иконку WhatsApp, чего и вам желаю!
Пишите в комменты у кого снова не получилось)))
Ссылка на Ватсап
Для общения с новым пользователем в WhatsApp его нужно добавить в список контактов на телефоне или в самом мессенджере, сохранив номер. Эта процедура не всегда удобная, а во время записи под диктовку можно ошибиться. По этой причине существует другой способ, как быстро связаться с человеком. Заключается он в создании персональной ссылке. Ее можно отправлять в сообщения в различных чатах или закрепить у себя в профиле, например, в Инстаграме. В данной статье мы расскажем, как создается ссылка на Ватсап, какие у нее возможности и настройке. Давайте со всем разбираться.
Ссылка на WhatsApp – краткое описание, цель и место размещения
Каждый пользователь сети знаком со ссылками, так как мы используем их каждый день, открывая сайты и переходя по вкладкам мессенджеров. Пусть они представлены в виде текста, но, если открыть код странички, все становится на свои места. Главное назначение URL – это перемещение пользователя в то место, куда он хочет прийти. Поэтому он кликает по той или иной надписи, ожидая закономерного результата.
Если говорить конкретно о Вотс Аппе, то ссылки помогают в повышении посещаемости странички профиля, в автоматизации процесса привлечения новой аудитории, приглашении участников в групповой чат, завуалированную рекламу товаров и услуг.
Так как ссылка – это инструмент для удобства использования интернета и маркетинговых кампаний, их размещают в социальных сетях, собственных сайтах для получения обратной связи, а также площадках-партнерах, пабликах и форумах. Место размещение зависит от преследуемой цели и выбранной стратегии, так что форма и методы выбираются соответствующие.
Если с этим все понятно, давайте поговорим о разновидностях ссылок, и для чего они используются.
Разновидности
Разработчики заложили в мессенджер несколько вариантов ссылок, чтобы пользователи с их помощью решали поставленные задачи. Рассмотрим особенности каждого вида подробнее.
Для удобства восприятия разобьем дальнейшее повествование на несколько логических блоков.
Прямая ссылка
Этот способ подходит для получения обратной связи от пользователей, клиентов, покупателей или других людей. Суть в том, что при переходе автоматически открывается WhatsApp и окно чата для обращения к вам.
Любой человек, у которого есть URL, может вам написать.
Чтобы сделать прямую ссылку в WhatsApp, возьмите за основу такой шаблон:
https://wa.me/xxx
Вместо xxx нужно подставить свой номер телефона в международном формате, исключив знаки плюса и любые нули в самом начале. Вот как это будет выглядеть в случае с российским номером:
https://wa.me/79776302177
Полученную ссылку вы можете ради интереса открыть в браузере у себя на телефоне или компьютере. В результате отобразится примерно такая страница:
Если нажать на кнопку «Перейти в чат», то у вас откроется переписка с самим собой.
Этот URL можно отправлять знакомым для быстрой связи в WhatsApp, размещать в социальных сетях, различных сервисах и т. д. Но в таких сценариях есть один неприятный момент – ссылка получается слишком длинной.
Вы можете сократить ее с помощью специального сервиса, например, bitly. Проще всего им воспользоваться с мобильного устройства:
Если с функцией «Прямая связь» в Ватсапе мы разобрались, тогда двигаемся дальше.
Ссылка с сообщением
Существует продвинутый вариант URL для связи в WhatsApp. Смысл в том, что при переходе по нему у пользователя открывается переписка с вами мессенджере, а в текстовом поле для ввода сообщения отображается уже какая-то фраза, которую он может сразу же отправить.
Этот вид больше применим для рекламных компаний. Например, вы продаете розы в Инстаграм. Человек переходит по такой ссылке, и ему сразу же предлагается сообщение с уточнением цены или региона доставки. Существует множества сценариев, когда такая функция окажется полезной.
Если вас заинтересовала продвинутая ссылка на WhatsApp, то вот для нее шаблон:
https://api.whatsapp.com/send?phone=xxx&text=yyy
Вместо xxx нужно вставить свой номер в международном формате без нулей в самом начале и без знака плюса. А вместо yyy – текст сообщения, который автоматически отобразится у пользователя в поле для ввода. Причем вместо пробелов между словами должны стоять знаки нижнего подчеркивания (вот_так).
Вид ссылки в качестве примера:
Ссылка на групповой чат WhatsApp
Как мы уже говорили, администраторы могут использовать такой URL, чтобы приглашать новых участников в групповой чат.
Чтобы сделать ссылка на чат WhatsApp на Андроид-устройстве:
Перейдите в окно чата с выбранным пользователем, тапните по строке для ввода, активируем меню дополнительных действий, и выбираем вариант «Вставить». Подтверждаем серьезность намерений кнопкой «Отправить». Человеку достаточно тапнуть по ссылке для перехода в окно чата групповой комнаты.
Для претворения задуманного в жизнь в версии мессенджера для iOS:
Инструкция для компьютерной версии Ватсапа представлена ниже:
Остается разместить ее в открытых источниках, на страничке профиля социальной сети или переслать в личные сообщения выбранному пользователю.
Если с использованием ссылки на групповой чат в Вотс Апп разобрались, тогда двигаемся дальше.
Сервис whatsapp.me
Это уже знакомая нам функция «прямая связь», информация о которой есть на официальном сайте Ватсапа. Таким образом вы можете поделиться WhatsApp-ссылкой на страничку своего чата, конечно, если укажете свой номер телефона. Обязательное условие – это использование международного формата, а также последовательность должна быть привязана к учетной записи мессенджера.
Если эти условия соблюдены, тогда никаких проблем с использованием доступного функционала не будет.
Однако это не самый удобный вариант для привлечения клиентов, тут больше подойдет короткая ссылка, об особенностях которой мы поговорим ниже.
Конструктор ссылок – что это и как пользоваться
Как мы уже сказали, короткая ссылка больше подходит для коммерческого использования, так как имеет более привлекательный внешний вид. Если вы пользуетесь Бизнес-версией WhatsApp, то для вас эта функция активна по умолчанию. Чтобы скопировать такую ссылку:
Остается перейти в интересующую нас площадку, и вставить линк на страничку профиля или поделиться с потенциальным клиентом в личных сообщениях.
Если же вы используете обычную версию мессенджера, тогда для создания короткой ссылки вам не обойтись без конструктора.
Это онлайн-сервис, который автоматизирует процесс создания линков.
Для его практического использования:
Остается обновленный линк в буфер обмена, и использовать его по прямому назначению.
Если с работой сторонних приложений разобрались, тогда давайте посмотрим, как размещать ссылки в популярных социальных сетях.
Ссылка на Ватсап в Инстаграм – описание, как размещать
Просто так линк на страничку чата размещать глупо. Как правило, такие действия входят в комплекс маркетинговой кампании. А ссылка – это удобный инструмент для получения обратной связи клиентов, или налаживания коммуникации с целевой аудиторией.
Если мы говорим об Инстаграм, то создать постоянный трафик пользователей к вам на страничку Ватсапа довольно просто. Но для этого нужно добавить ссылку.
Для претворения задуманного в жизнь:
На этом процедура благополучно завершается. Теперь пользователя, при нажатии на линк в профиле Инстаграм, будут автоматически перемещаться на страничку чата с вами в WhatsApp.
Завершение
Ссылка на Ватсап – это удобный инструмент для привлечения новых клиентов путем перегона трафика из социальных сетей, а также возможность пригласить новых пользователей в групповой чат, получить обратную связь от клиентов о качестве товара или услуги, к примеру.
Разработчики предусмотрели несколько вариантов ссылок, основываясь на потребностях веб мастеров или простых участников системы. Прямая подходит для повседневного использования, тогда как короткая имеет более маркетинговый уклон.
Помимо встроенных возможностей по созданию линков, можно использовать функционал сторонних приложений и сервисов. К примеру, короткие последовательности так и создаются, если вы, конечно, не используете бизнес-версию WhatsApp.
Они ускоряют и упрощают процесс, так как от вас требуется только вписать в пустое поле номер телефона, привязанный к учетной записи, а также выбрать ресурс, для которого ссылка будет работать. А дальше встроенные алгоритмы все сделают сами.
Процедура размещения линка в социальных сетях или на собственных сайтах проста, так как задействует только встроенный функционал ресурсов. Протекающие процессы одинаковы для приложений под управлением Андроид и iOS.
В статье представлена исчерпывающая информация по теме, так что вам, дорогие читатели, остается использовать полученные знания на практике. Пробуйте, и у вас все обязательно получится.
Кнопка WhatsApp для сайта — как установить и подключить к Ватсапу
Для привлечения новых клиентов для бизнеса, можно использовать различные инструменты, и сегодня мы поговорим о том, как сделать виджет WhatsApp на сайт. Рассмотрим назначение кнопки, и простой способов её установки.
Виджет Ватсап на сайт – описание
Кнопка Ватсап размещается на сайте, что обеспечить пользователям обратную связь с рекламодателями или владельцами бизнеса. Иногда клиентам гораздо проще связаться с представителями организации напрямую, чем ждать обратного звонка по заявке.
Как установить кнопку Ватсап на сайте
Для начала определимся с сервисом для создания виджета иконки Ватсапа. Если вы не программист, то самостоятельно у вас не получится написать код.
В таком случае можно, например, воспользоваться сервисом meConnect или другим. Чтобы использовать доступные возможности сервиса, нужно зарегистрироваться в системе, выбрать соответствующую вкладку и получить код в три строки. После останется вставить его на сайт в нужное место с помощью платформы для редактирования исходного кода.
Сервис поддерживает работу со всеми популярными социальными сетями, а также мессенджерами. Так что, помимо Ватсапа, можно будет подключить и еще несколько виджетов для большего эффекта и удобства пользователя.
Как установить чат на сайте
А мы рассмотрим особенности процедуры на примере сервиса Hoversignal:
Как только создание виджета готово, открытая ранее страничка пополнится новым объектом с иконками для редактирования или удаления.
Чтобы добавить чат на свой сайт:
Если все сделано правильно, то на страничке с кодом чата появится зеленая иконка в левом нижнем углу, что свидетельствует об успешной синхронизации двух сервисов.
Если с установкой виджета для Вотс Апп все понятно, тогда двигаемся дальше по статье.
Возможности виджета чата Ватсап на сайте
Наличием кнопки WhatsApp вы:
Если на вашем сайте есть виджет чата Ватсап, то вы контролируете такие процессы:
Возможность синхронизировать WhatsApp с сайтом есть у каждого пользователя. Если вы не обладаете навыками программирования, то достаточно просто создать полезный виджет с помощью онлайн-сервисов.
Настройка чата с помощью сторонних программ
Возможности сервисов позволяют легко выбрать шаблон для кнопки WhatsApp или целого чата, а также настроить его работу. К примеру, задать пользовательское имя условного оператора, а также его аватарку, прописать приветственное послание, а также разместить объект в рандомном месте на сайте.
Все это делается довольно просто и интуитивно понятно – достаточно переключаться между вкладками и прописывать нужные места. Учтите, что для синхронизации двух сервисов важно указать в соответствующей графе номер телефона, привязанный к учетной записи Ватсапа. В таком случае процедура пройдет без осложнений.