Есть вопросы?support@hipolink.net
Создай лендинг бесплатно
Лендинг бесплатно

Как сделать ссылку на Whatsapp: 3 варианта в HTML

07.04.21
39903 просмотров
Создание страницы
Маркетологи предлагают использовать в продажах мессенджеры как альтернативу Instagram Direct и Facebook. Привлечение клиентов из IG и FB может стоить очень дорого. В мессенджерах выстраивают более дешевую воронку продаж. Простой код html – и готова ссылка, которая переводит клиента в WhatsApp.
html button
Если аккаунт 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>
Кликнув по ссылке, человек перейдет в диалог.
article_image
Не используйте нули, скобки, дефисы при вводе номера телефона.
2. Чат с пользователем WhatsApp
Помогите клиенту обратиться к вам. Сформулируйте шаблон первого сообщения. Пользователю останется нажать «отправить».
· Html-код:
<a href="https://wa.me/4957777777?text=Привет! Хочу записаться на консультацию">Чат+сообщение WhatsApp</a>
· Как писать ссылку:
https://wa.me/4951234567?text=Привет! Хочу записаться
Что писать в html ссылке
Такую хитрость используют для создания базы клиентов, рассылок, оформления подписок, записи на вебинары и т.д.
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 class="Button__exampleOneContainer">
<a href="/" class="Button__exampleOne"><div class="Button__exampleOneText">Позвонить</div></a>
</div>
коды html для Hipolink

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

— Вместо «Привет» впишите шаблон сообщения.
— Вместо «0977777777» – свой телефон.
— "Button__exampleOneContainer" – название стиля. Чтобы сделать новую кнопку с новыми параметрами, измените имя стиля.
article_image
Больше HTML-кодов для Хиполинк – в подборке.
C помощью простой строчки html-кода вы сможете создать новую площадку продаж и продвижения.