Posted:
Ноя 23, 2020
Comments:
0 Comments

Html ссылка на whatsapp на сайте: Как реализовать ссылку с номер whatsapp на сайте? — Хабр Q&A

Как делается html ссылка на Whatsapp

Маркетологи предлагают использовать в продажах мессенджеры как альтернативу Instagram Direct и Facebook. Привлечение клиентов из IG и FB может стоить очень дорого. В мессенджерах выстраивают более дешевую воронку продаж. Простой код html – и готова ссылка, которая переводит клиента в WhatsApp.

Если аккаунт Instagram – единственная площадка продажи ваших услуг, товара, не стоит бояться переводить клиентов в переписку WhatsApp. Это самый популярный в мире мессенджер, на 10% популярнее, чем Viber.

По статистике компании «Statista», в 2020 году количество пользователей мессенджеров увеличилось вдвое. В 2021 году продолжит развиваться новый способ взаимодействия с целевой аудиторией – мессенджер-маркетинг. Поэтому не использовать мессенджеры – недальновидно.

Преимущества WhatsApp перед Direct

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

Людям проще писать сообщения, чем звонить. Итог: переполненный Direct. Плюсы Ватсап:

· обмен файлами аудио- и видеоформата,

· прикрепляются файлы,

· 100% голосовых сообщений дойдут,

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

Предприниматели предпочитают Ватсап из-за одной важной опции – внесение номера в контакты. В будущем это дает возможность:

· включить человека в рассылки,

· сообщать об акциях, мероприятиях.

Поэтому важно дать дополнительный способ связи.

Некоторые размещают в шапке номер телефона. Копировать номер с Инстаграм-страницы магазина, блога, сервиса – неудобно. Сложно представить, как человек переписывает по цифре номер, сворачивает приложение Instagram, открывает контакты, добавляет номер, потом пишет в WhatsApp.

Помните! Лишние действия тормозят процесс покупки.

Чтобы клиент не переписывал номер телефона вручную, а звонил, писал сразу, сделайте html ссылку на WhatsApp. Размещайте в «Ссылке профиля» Инстаграм, отправляйте в сообщении, иcпользуйте для таргетированной рекламы.

Как правильно сделать ссылку на WhatsApp

Функция «Прямая связь» запускает чат с пользователем, чьего номера нет в вашем списке контактов. Глубоких знаний Html не понадобится. Следуйте инструкции.

1. Создание ссылки на чат с номером

· Создайте ссылку следующего формата:

https://wa.me/<номер>, где <номер> — это ваш полный номер телефона международного формата, привязанный к WhatsApp.

· Html-ссылка выглядит так:

<a href=»https://wa.me/номер»>Чат с пользователем WhatsApp</a>

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

Не используйте нули, скобки, дефисы при вводе номера телефона.

2. Чат с пользователем WhatsApp

Помогите клиенту обратиться к вам. Сформулируйте шаблон первого сообщения. Пользователю останется нажать «отправить».

· Html-код:

<a href=»https://wa.me/4957777777?text=Привет! Хочу записаться на консультацию»>Чат+сообщение WhatsApp</a>

· Как писать ссылку:

https://wa. me/4951234567?text=Привет! Хочу записаться

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

text= Хочу получить бесплатный вебинар

Проверяют, работает ли ссылка, в поисковой строке браузера:

3. Отправка текста

Чтобы отправить текст нескольким контактам создайте Html-ссылку:

<a href=»whatsapp://send?text=Привет!»>Поделиться текстом WhatsApp</a>

Html для Мультиссылки

Ограничения для отображения контактов в шапке профиля Instagram – боль бизнес-аккаунтов. Доступно добавление одной ссылки. Единственный канал ограничивает возможности обратной связи с клиентами. Интернет-пользователи ленивы и требовательны: не будет удобного мессенджера – не закажут. WhatsApp и Telegram используют молодые люди. Аудитория более зрелого возраста чаще выбирает Viber.

Чтобы оставить контакты разных мессенджеров, социальных сетей, ссылки на описание товаров и услуг, воспользуйтесь сервисом мультиссылок Hipolink – мини-сайт с удобным функционалом. Подходит для бизнеса и продвижения товаров и услуг.

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

Ссылка на мессенджер в Hipolink

Не нужно знать html или искать код ссылки для WhatsApp. Hipolink – конструктор, настройки совершаются за пару кликов. Чтобы добавить мессенджеры, воспользуйтесь инструкцией.

В разделе «Настройка мессенджеров» выберете необходимые мессенджеры. Из всех сервисов мультиссылок только Hipolink предоставляет 11 мессенджеров, кнопку которых можно сделать без использования дополнительного html:

• WhatsApp,

• Viber,

• Facebook Messenger,

• Telegram,

• ВКонтакте,

• Skype,

• Line,

• WeChat,

• Discord,

• ICQ,

• QQ.

Вы дадите клиенту выбор, а он решит сам, какой мессенджер удобнее.

Как сделать свой дизайн кнопки WhatsApp

Цвет и форма кнопок, предусмотренные по умолчанию, не соответствуют дизайну страницы? Можете оформить кнопки по-своему. Используйте html-код. Скопируйте и вставьте его в разделе HTML блок.

<style>

.Button__exampleOneContainer {

padding: 10px;

}

.Button__exampleOne {

display: flex;

width: 100%;

height: 54px;

cursor: pointer;

text-decoration: none;

align-items: center;

justify-content: center;

background: #312937;

border-radius: 42px;

position: relative;

overflow: hidden;

box-sizing: border-box;

}

.Button__exampleOne:before {

content: «»;

position: absolute;

top: 0;

left: 0;

width: 0;

height: 100%;

background: #463651;

border-radius: 42px;

transition: all 0.5s ease;

}

.Button__exampleOne:hover:before {

width: 100%;

}

.Button__exampleOneText {

color: #ffffff;

font-family: TT Firs Neue;

font-size: 18px;

text-decoration: none;

position: absolute;

height: 100%;

width: 100%;

display: flex;

justify-content: center;

align-items: center;

}

</style>

<div>

<a href=»/»><div>Позвонить</div></a>

</div>

Редактируем код:

— Вместо «Привет» впишите шаблон сообщения.

— Вместо «0977777777» – свой телефон.

— «Button__exampleOneContainer» – название стиля. Чтобы сделать новую кнопку с новыми параметрами, измените имя стиля.

Больше HTML-кодов для Хиполинк – в подборке.

C помощью простой строчки html-кода вы сможете создать новую площадку продаж и продвижения.

как сделать HTML-код для вставки

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

Содержание

  1. Создание ссылки
  2. Создание ссылки с автоматическим сообщением
  3. Как ставить ссылки на WhatsApp на сайт
  4. Для WordPress
  5. Для Tilda
  6. HTML

Создание ссылки

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

К сведению: ссылка на Ватсап для сайта доступна в браузерной версии WhatsApp Web.

С целью выполнения подключения, настоятельно рекомендуется использовать специализированный код https://wa.me/<number>, в которой тег <number> является полный номер мобильного телефона исключительно в международном формате (с указанием кода страны). Категорически запрещается использованием нулей, скобок либо дефисов при вводе данных.

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

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

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

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

  • whatsappphonenumber — принадлежащий пользователю номер мобильного телефона исключительно в международном формате;
  • rlencodedtext — URL-закодированное сообщение в автоматическом режиме.

Примером достоверного кода является следующий формат https://wa.me/1XXXXXXXXXX?text=Я%интересуюсь%20в%приобретением%ваше%20продукции.

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

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

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

Для WordPress

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

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

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

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

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

Для Tilda

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

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

HTML

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

<a title=»Ватсап» href=»whatsapp://send?phone=00000000″><img src=»images/whatsapp_icon.jpg» alt=»Отправить сообщение в Ватсап» /></a>

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

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

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

android — HTML-ссылка для добавления контакта в WhatsApp

спросил

Изменено
1 год, 10 месяцев назад

Просмотрено
29 тысяч раз

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

Я нашел этот код

 Отправить текст в WhatsApp

И этот:

 Отправить текст пользователю

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

Имея абид, я могу попробовать, если это сработает, но я не знаю, где взять эти данные.

Большое спасибо

  • android
  • html
 Отправить сообщение

Без «+» или «00» в начале, просто введите код страны и номер.
Пример США: +12025599025, затем в приведенном коде замените NUMBER на 12025599025

, это сработало для меня:

whatsapp://send?text=MESSAGE&phone=+NUMERO&abid=+NUMERO

Очевидно, что «+NUMERO» номер wsp и «СООБЩЕНИЕ» предварительно загруженное сообщение, введенное в в атрибуте href`

1

Недавнее решение (июль 2017 г.

)

Ответ Малки действительно решает проблему, но недавно был опубликован официальный API Whatsapp, который я упомянул в ЭТОМ ДРУГОМ ОТВЕТЕ (поскольку в соответствии с политиками SO мне пришлось разместить ссылку на решение, без дубликатов).

Это не добавляет контакт напрямую, но позволяет вам открыть диалог с конкретным номером, это может быть очень полезно для использования на ваших веб-сайтах. Я только что обнаружил, что можно открыть разговор с номером, используя Click to Chat

Чтобы создать свою ссылку с предварительно заполненным сообщением, которое будет
автоматически появляются в текстовом поле чата, используйте
https://wa.me/whatsappphonenumber/?text=urlencodedtext где
whatsappphonenumber — это полный номер телефона в международном формате и
URL-encodedtext — это предварительно заполненное сообщение в кодировке URL.

Пример: https://wa.me/15551234567?text=I'm%20interested%20in%20your%20car%20for%20sale

ПРИМЕЧАНИЕ. Приложение WhastApp открывается, если щелкнуть ссылку с помощью браузер мобильного телефона (по крайней мере, из Android)

ABID (идентификатор адресной книги) предназначен для идентификатора, а не имени в вашем списке контактов.

В документации по схеме URL-адреса Whatsapp Документация по отправке сообщения конкретному контакту (пока) отсутствует.

Я нашел лучший способ добавить контакт, используя этот HTML-код:

 добавить номер

(это откроет приложение Контакты с вашего телефона)

Так вы можете создать ссылку для отправки сообщения WhatsApp на определенный номер.

Обратите внимание, что вам не нужно добавлять символ «+» перед кодом страны. Просто начните с кода страны и номера WhatsApp:

 значок ссылки

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

WhatsApp использует только html, чтобы поделиться URL-ссылкой с описательным текстом

спросил

Изменено
7 месяцев назад

Просмотрено
39 тысяч раз

Я хочу, чтобы пользователи моего веб-сайта могли делиться текущим URL-адресом веб-страницы (хранящимся в ViewBag. OgUrl) через WhatsApp.

Сообщение WhatsApp должно содержать заголовок URL-адреса (хранится в ViewBag.OgTitle), при нажатии на который открывается URL-адрес (хранится в ViewBag.OgUrl).

Это нужно сделать html без js.

Стандартный способ:

 @{
    var urlWhatsapp = "whatsapp://send?text=" + @ViewBag.OgUrl;
  }

А затем просто:

 Поделиться WhatsApp

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

Например, сообщение WhatsApp содержит фактическую ссылку http://example.org/, а я бы хотел, чтобы она отображалась в WhatsApp:

Первый пример

Редактировать: Если кто-то хочет получить заголовок и ссылку, просто замените код с:

 @{var urlWhatsapp = "whatsapp://send?text=" + @ViewBag.OgTitle + "-" + @ViewBag.OgUrl;}

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

  • HTML
  • поделиться
  • href
  • WhatsApp

1

Невозможно поделиться ссылкой в ​​WhatsApp так, как вы хотите. Вы можете отправить сообщение только с полной ссылкой, например http://example.org/ , и WhatsApp обнаружит это как ссылку для вас.

1

вопрос о процедуре на основе html (без js)

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

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

Синтаксис в html:

 @{var urlWhatsapp = "whatsapp://send?text=" + @ViewBag.OgTitle + "-" + @ViewBag.OgUrl;}

, где @ViewBag.OgTitle — это заголовок, а @ViewBag.OgUrl — полный URL-адрес (включая http:// или https://)

2

Попробуйте:

 
This entry was posted in Популярное