Создай лендинг бесплатно
Лендинг бесплатно

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

07.04.21
50340 просмотров
Создание страницы

Маркетологи предлагают использовать в продажах мессенджеры как альтернативу 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>

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

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

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" – название стиля. Чтобы сделать новую кнопку с новыми параметрами, измените имя стиля.

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

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

Продолжая использовать наш сайт, вы соглашаетесь с нашей политикой использования файлов cookie. Подробнее