код ватсап для сайта

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 Web.

К примеру, правильным решением является указание в следующем формате https://wa.me/100000000.

При попытке ввода https://wa.me/+001-(000)0000 мобильное приложение в автоматическом режиме выдаст сообщение об ошибке.

Создание ссылки с автоматическим сообщением

При активации опции, сообщение в автоматическом режиме будет отображаться в диалоговом окне ввода текстового либо графического сообщения. Разработчики рекомендуют вводить https://wa.me/whatsappphonenumber?text=urlencodedtext, в котором предусматривается:

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

Как ставить ссылки на WhatsApp на сайт

Чтобы Whatsapp ссылка для сайта была активна, пользователям достаточно соблюдать установленную последовательность действий. Она зависит от поставленной задачи.

Для WordPress

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

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

Пользователи вправе указывать самостоятельно, где именно будет расположена клавиша, к примеру:

При желании клавишу можно расположить клавишу до либо после предоставленного пользователям контента.

Для Tilda

В случае использования Тильда html код подразумевает под собой ввод:

https://api.whatsapp.com/send?phone=00000000, где 00000000 номер мобильного телефона абонента, с которым пользователи начинают вести общение при нажатии на ссылку. Важно знать, что данные указываются без предварительного занесения символа «+». Если поле оставить пустой, в результате формирует перечень собеседников, с которыми можно инициировать обмен текстовыми и графическими сообщениями.

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

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

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

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

Источник

Кнопка WhatsApp для сайта — как установить и подключить к Ватсапу

Для привлечения новых клиентов для бизнеса, можно использовать различные инструменты, и сегодня мы поговорим о том, как сделать виджет WhatsApp на сайт. Рассмотрим назначение кнопки, и простой способов её установки.

Виджет Ватсап на сайт – описание

Кнопка Ватсап размещается на сайте, что обеспечить пользователям обратную связь с рекламодателями или владельцами бизнеса. Иногда клиентам гораздо проще связаться с представителями организации напрямую, чем ждать обратного звонка по заявке.

Как установить кнопку Ватсап на сайте

Для начала определимся с сервисом для создания виджета иконки Ватсапа. Если вы не программист, то самостоятельно у вас не получится написать код.

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

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

Как установить чат на сайте

А мы рассмотрим особенности процедуры на примере сервиса Hoversignal:

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

Чтобы добавить чат на свой сайт:

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

Если с установкой виджета для Вотс Апп все понятно, тогда двигаемся дальше по статье.

Возможности виджета чата Ватсап на сайте

Наличием кнопки WhatsApp вы:

Если на вашем сайте есть виджет чата Ватсап, то вы контролируете такие процессы:

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

Настройка чата с помощью сторонних программ

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

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

Источник

Как поставить иконку 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, чего и вам желаю!

Пишите в комменты у кого снова не получилось)))

Источник