Как сделать ссылки на мессенджеры в Таплинк
Блок «Мессенджеры» доступен на тарифе Pro и Business, но, зная некоторые правила, можно вставить активные кнопки на Ватсап, Телеграм, Вайбер и на базовом тарифе. Разберем, как это сделать.
Добавляем на страницу блок «Ссылка»:
Перед нами откроется следующая форма:
Нас интересуют следующие поля:
Текст ссылки: в этом поле пишем текст, который отобразится на кнопке (например, написать в WhatsApp)
Действие: из выпадающего списка выбираем значение Веб-сайт
Веб-сайт: пишем ссылку (скопируйте шаблон и вставьте свои значения)
Ссылка на WhatsApp
Можно добавить шаблон обращения, чтобы посетителю было легче решиться на общение:
+79993332222 — номер телефона
Добрый%20день!%20Меня%20интересует%20консультация — текст обращения
Заполненная форма будет выглядеть так:
Настройка мессенджеров
Нажмите «Добавить новый блок», выберите «Мессенджеры». Включите «тумблер» напротив тех мессенджеров, которые вы хотите разместить на вашей странице (он должен стать зеленым с надписью «Да»).
Настройка кнопок
Кликните на серую «плашку» с названием мессенджера, чтобы детально настроить кнопку. Здесь можно указать заголовок (например, «Написать мне в Viber»), а также ваш номер либо логин.
Для WhatsApp есть интересная возможность — написать «Текст-шаблон сообщения». По клику у пользователя откроется мессенджер с готовым текстом, например, «Добрый день! Сколько стоит ваш курс?».
Вы можете поменять кнопки мессенджеров местами, для этого потяните за серые ползунки слева.
Выбор вида кнопок
Теперь обратите внимание на самую верхнюю строчку, которая позволяет выбрать вид кнопок. Доступны и максимально компактные варианты, и крупные — на всю ширину страницы. Выберите подходящий.
Не забывайте нажимать «Сохранить» при внесении изменений.
Дополнительные настройки
Перейдем на вкладку «Настройки». Здесь можно включить или отключить блок мессенджеров (пункт «Блок виден всем посетителям»). Также можно настроить его отображение по расписанию.
Как сделать плавающую кнопку ватсап в таплинке
Да, блок «Мессенджеры» с простым интерфейсом (вводится ник пользователя или номер телефона) доступен только на платных тарифах PRO или BUSINESS.
Как добавить кнопку WhatsApp?
Для добавления кнопки перехода на WhatsApp нажимаете кнопку «Добавить новый блок» и выбираете «Мессенджеры«.
В блоке «Мессенджеры» выбираете WhatsApp, затем вводите номер телефона, текст-шаблон сообщения (если он необходим, это «шаблон ленивого клиента», который можно отправить вам в один клик) и нажимаете кнопку «Сохранить»
Как поставить иконки мессенджеров (социальных сетей) в одну строку?
Для размещения иконок мессенджеров в одну строку необходимо настроить все нужные мессенджеры в одном блоке (нажимая кнопку «Добавить новый пункт«), затем на вкладке «Дизайн» выбрать стиль для кнопок этого блока.
Оплатил тариф PRO (BUSINESS). Почему я не могу добавить мессенджеры и социальные сети? Я уже 10 раз добавлял, а их нет!
Возможно, у вас включено приложение (расширение браузера) блокирующее показ рекламы. К примеру, adblock или adguard. Оно распознает кнопки мессенджеров и социальных сетей как рекламу и блокирует их отображение.
Для работы с Taplink это приложение (расширение) следует отключить (удалить).
Блокировщики рекламы действуют по своим алгоритмам и нарушают нормальную работу сайтов. К сожалению, повлиять на их поведение мы не можем.
Текст-шаблон сообщения для кого предназначен?
Текст-шаблон это функция мессенджера WhatsApp, так называемый «шаблон ленивого клиента«. При ее использовании в приложении мессенджера отрывается чат с заранее введенным текстом, который клиент может отправить вам в один клик, просто нажав кнопку «Отправить«.
Как добавить переход (ссылку) на сайт?
Нажмите «Добавить новый блок» — «Ссылка». В открывшемся диалоговом окне укажите:
- Заголовок (1, название которое видят посетители, шрифт заголовка более крупный), заполнение обязательно.
- Подзаголовок (2, он тоже отображается на кнопке, но более мелким шрифтом), заполнение опционально.
- В поле действие выберите действие «Открыть сайт» (3)
- Указываете полный адрес нужной страницы (4, вводится с префиксом http или https, к примеру https://taplink.ru). Обратите внимание, из браузеров соцсетей ссылки с http могут не работать.
- При необходимости задаете миниатюру (5), изображение размещенное на кнопке. Миниатюра может быть как стандартная (из нашей библиотеки картинок), так и своя (произвольная картинка, соотношение сторон 1:1, разрешение до 300х300 точек)
Я добавил ссылку на сайт. Почему сайт не открывается?
- Проверьте корректность ссылки. Ссылки на сайт имеют вид https://taplink.ru.
- Если выдает ошибку сертификата или похожую — попробуйте вставить ссылку с префиксом HTTP вместо HTTPS — http://taplink.ru. Имейте ввиду, для перехода из браузера соцсетей сайт должен открываться по https, если выдает ошибку — проверьте корректность SSL-сертификата на стороне вашего сайта (на который ставите ссылку).
- Возможно, ваш сайт слишком «тяжел» для встроенного в приложение соцсетей браузера. Для проверки — откройте свой Taplink через полнофункциональный браузер (Chrome, Safari или с компьютера) и перейдите по ссылке на сайт. Если она открывается, но из приложения не работает — причина в вашем сайте. Для проверки можете вставить ссылку на нужный сайт к себе в профиль соцсетей и проверить, будет ли осуществляться переход из приложения. Если переход не выполняется — причина сбоя на стороне вашего сайта.
Как сделать кнопку «Позвонить»?
Чтобы сделать кнопку «Позвонить» (при ее нажатии открывается приложение «Телефон» с нужным номером) добавьте блок «Ссылка» с действием «Позвонить» и нужным номером телефона. Код страны выбирается из выпадающего списка и определятся автоматически по вашему местоположению, при необходимости можно выбрать другой из списка.
Как сделать кнопку «Написать письмо»?
Добавьте блок «Ссылка» с действием «Отправить эл. письмо», укажите нужный адрес электронной почты и тему сообщения.
Мне надо сделать ссылки на 2 номера Whatsapp / Viber. Это возможно?
Вы можете сделать переходы на любое количество номеров Whatsapp / Viber. Добавьте нужное количество блоков «Мессенджеры«, в каждом из которых укажите свой номер.
Как прикрепить в Taplink файл (документ), чтобы клиенты могли скачать его?
Для добавления возможности скачивания файла на страницу Taplink необходимо:
- Поместить нужный файл в облачное хранилище (к примеру, Яндекс.Диск) и создать для него публичную ссылку.
- На странице Taplink добавить блок «Ссылка», в котором в качестве адреса указать URL публичной ссылки на файл, созданный на шаге 1.
Как добавить иконку (картинку, миниатюру) на кнопку?
Для добавления изображения на кнопку в режиме редактирования блока «Ссылка» кликните по полю, находящемуся слева от заголовка кнопки (вкладка «Контент»), после чего укажите стандартное или загрузите собственное изображение. Поиск по базе стандартных изображений есть, но ключевые словам нужно вводить на английском языке. Собственные изображения вы загружаете в систему однократно (в вашу библиотеку изображений), далее можно будет выбрать их для любых блоков «Ссылка» вашего Taplink.
Как добавить чат WhatsApp?
Для перехода в чат (группу) WhatsApp необходимо добавить на страницу блок «Мессенджеры» — «WhatsApp», выбрать «Чат», указать пригласительную ссылку https://chat.whatsapp.com/*** и сохранить блок.
Обратите внимание, любой переход по номеру телефона настраивается в режиме «Телефон«, а не «Чат». Режим «чат» служит для перехода именно в группы WhatsApp.
Как добавить канал/группу/бота Viber?
Необходимо добавить на странице блок «Мессенджеры» — «Viber», выбрать режим «Канал». В строке «Укажите ссылку на канал» разместить пригласительную ссылку на этот канал и сохранить изменения. Ссылку можно указать в формате https://invite.viber.com/[код_приглашения], либо в формате https://viber.com/[название_канала]. Получить ссылку можно в настройках вашего канала Viber по кнопке «Поделиться».
Как настроить оформление кнопки и сделать ее анимированной?
Настройки внешнего вида конкретного блока «Ссылка» выполняется на вкладке «Дизайн» этого блока. Для блоков «Ссылка» можно настроить цветовую гамму и эффект анимации (движения блока при просмотре страницы, где он размещен). Обратите внимание, шрифт для блоков «Ссылка» задается только в настройках темы оформления (страница «Дизайн«) в настройках блока он не меняется.
Почему при переходе на Telegram, Viber и другие мессенджеры пишет «эта страница недоступна» или переводи в Избранное?
У мессенджера Viber (как и других мессенджеров) есть особенность — нельзя написать самому себе. Поэтому проверку работы перехода к Viber (и других мессенджеров) следует выполнять с телефона, где с Viber связан номер, отличающийся от того, что введен в Taplink.
Как настроить Telegram? У меня пишет «пользователя не существует»!
Переход в Telegram через диплинк выполняется по нику пользователя, а не по номеру телефона. Чтобы задать свой ник необходимо в приложении Telegram на телефоне зайти в «Настройки» и найти пункт «Имя пользователя».
Если в этом поле установлено значение «не задано» — необходимо коснуться этого пункта, ввести уникальный идентификатор пользователя (к примеру my_telegram99) и нажать на галочку в правом верхнем углу, чтобы сохранить введенное значение.
Для добавления кнопки Telegram в Taplink нажимаете «Добавить новый блок» — «Мессенджеры» — «Telegram», указываете там имя пользователя без @ (это важно) и нажимаете кнопку «Сохранить».
Как добавить ссылку на канал Telegram?
Мы рекомендуем использовать блок «Мессенджеры» — «Telegram», куда вводится название канала без @, t.me или иных дополнений. Обратите внимание, речь идет не о названии канала, которое отображается пользователям, а о его URI, совпадающем с частью ссылки после t.me.
У меня не работает переход в Telegram с Android, c iPhone (iPad) работает. Что делать?
Необходимо исправить настройки блока «Мессенджеры» — ник пользователя Telegram вводится без @.
Как сделать переход в Direct Instagram?
Поддержки перехода в Direct нет, через блок «Социальные сети» можно перейти только на профиль Instagram. Эта социальная сеть не одобряет автоматизацию в части рассылки личных сообщений.
WhatsApp кнопка для сайта с анимацией
Сегодня разберем, как сделать красивую анимированную кнопку для связи по WhatsApp прямо с сайта. Делать мы это будем без плагинов, только при помощи CSS. Поэтому данный способ подойдёт для любого сайта. Ну а разбирать мы всё это будем, конечно же, на примере самой популярной CMS WordPress.
Ссылка для перехода в Whatsapp
Для начала рассмотрим, как выглядит ссылка на чат в Whatsapp для сайта.
А вот она в виде HTML кода:
Вместо phone=79260000000 вставляем нужный номер
Этот код можно вставить в любом месте, как простую ссылку. Добавив к нему соответствующие стили, можно сделать с помощью этого кода обычную или фиксированную кнопку. Чем мы сейчас и займёмся.
Кнопка Whatsapp в углу экрана с анимацией
Первый вариант кнопки whatsapp для сайта делается довольно просто и её легко отредактировать, если вам понадобится поменять цвет или размеры.
Для создания нашей кнопки, мы будем использовать иконку Font Awesome. Для этого ваш шаблон должен поддерживать данный шрифт. Если нет, то необходимо его подключить. Если вы не знаете, как это сделать, то можно воспользоваться плагином Font Awesome — он автоматически подключит библиотеку иконок.
HTML код:
CSS код:
.whatsapp-button < position: fixed; right: 13px; bottom: 90px; transform: translate(-50%, -50%); background: #25D366; /*цвет кнопки*/ border-radius: 50%; width: 55px; /*ширина кнопки*/ height: 55px; /*высота кнопки*/ color: #fff; text-align: center; line-height: 53px; /*центровка иконки в кнопке*/ font-size: 35px; /*размер иконки*/ z-index: 9999; >.whatsapp-button a < color: #fff; >.whatsapp-button:before, .whatsapp-button:after < content: " "; display: block; position: absolute; border: 50%; border: 1px solid #25D366; /*цвет анимированных волн от кнопки*/ left: -20px; right: -20px; top: -20px; bottom: -20px; border-radius: 50%; animation: animate 1.5s linear infinite; opacity: 0; backface-visibility: hidden; >.whatsapp-button:after < animation-delay: .5s; >@keyframes animate < 0% < transform: scale(0.5); opacity: 0; >50% < opacity: 1; >100% < transform: scale(1.2); opacity: 0; >>
CSS для мобильной версии сайта:
Если вам необходимо поменять местоположение кнопки на мобильных устройствах, то добавьте к стилям CSS следующий код.
@media (max-width : 800px) < .whatsapp-button < bottom: 5px; /*отступ кнопки снизу от экрана*/ left: 70px; /*отступ кнопки слева от экрана(right - справа)*/ >>
Кнопка Whatsapp — вариант 2
Данная кнопка имеет более сложную анимацию и эффект появления надписи при наведении.
HTML код:
CSS код:
.whatsapp-button < background: #25D366; border: 3px solid #1cc15a; border-radius: 50%; box-shadow: 0 8px 10px rgba(7, 206, 112, 0.6); cursor: pointer; height: 68px; text-align: center; width: 68px; position: fixed; right: 5%; bottom: 8%; padding: 0px !important; z-index: 9999; transition: .3s; -webkit-animation: hoverWave linear 1s infinite; animation: hoverWave linear 1s infinite; >.whatsapp-button .text-button < height:68px; width:68px; border-radius:50%; position:relative; overflow:hidden; >.whatsapp-button .text-button span < text-align: center; color:#23a455; opacity: 0; font-size: 0; position:absolute; right: 8px; top: 27px; line-height: 14px; font-weight: 600; transition: opacity .3s linear; font-family: 'montserrat', Arial, Helvetica, sans-serif; >.whatsapp-button .text-button:hover span < opacity: 1; font-size: 11px; >.whatsapp-button:hover i < display:none; color:#25D366; font-size:44px; transition:.3s; >.whatsapp-button:hover < z-index:1; background:#fff; color:transparent; transition:.3s; >> .whatsapp-button i < color:#fff; font-size:44px; transition:.3s; line-height: 66px;transition: .5s ease-in-out; animation: 1200ms ease 0s normal none 1 running shake; animation-iteration-count: infinite; -webkit-animation: 1200ms ease 0s normal none 1 running shake; -webkit-animation-iteration-count: infinite; >@-webkit-keyframes hoverWave < 0% < box-shadow:0 8px 10px rgba(7,206,112,0.3),0 0 0 0 rgba(7,206,112,0.2),0 0 0 0 rgba(7,206,112,0.2) >40% < box-shadow:0 8px 10px rgba(7,206,112,0.3),0 0 0 15px rgba(7,206,112,0.2),0 0 0 0 rgba(7,206,112,0.2) >80% < box-shadow:0 8px 10px rgba(7,206,112,0.3),0 0 0 30px rgba(7,206,112,0),0 0 0 26.7px rgba(7,206,112,0.067) >100% < box-shadow:0 8px 10px rgba(7,206,112,0.3),0 0 0 30px rgba(7,206,112,0),0 0 0 40px rgba(7,206,112,0.0) >>@keyframes hoverWave < 0% < box-shadow:0 8px 10px rgba(7,206,112,0.3),0 0 0 0 rgba(7,206,112,0.2),0 0 0 0 rgba(7,206,112,0.2) >40% < box-shadow:0 8px 10px rgba(7,206,112,0.3),0 0 0 15px rgba(7,206,112,0.2),0 0 0 0 rgba(7,206,112,0.2) >80% < box-shadow:0 8px 10px rgba(7,206,112,0.3),0 0 0 30px rgba(7,206,112,0),0 0 0 26.7px rgba(7,206,112,0.067) >100% < box-shadow:0 8px 10px rgba(7,206,112,0.3),0 0 0 30px rgba(7,206,112,0),0 0 0 40px rgba(7,206,112,0.0) >> @keyframes shake < 0% < transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); -webkit-transform: rotateZ(0deg); >10% < transform: rotateZ(-30deg); -ms-transform: rotateZ(-30deg); -webkit-transform: rotateZ(-30deg); >20% < transform: rotateZ(15deg); -ms-transform: rotateZ(15deg); -webkit-transform: rotateZ(15deg); >30% < transform: rotateZ(-10deg); -ms-transform: rotateZ(-10deg); -webkit-transform: rotateZ(-10deg); >40% < transform: rotateZ(7.5deg); -ms-transform: rotateZ(7.5deg); -webkit-transform: rotateZ(7.5deg); >50% < transform: rotateZ(-6deg); -ms-transform: rotateZ(-6deg); -webkit-transform: rotateZ(-6deg); >60% < transform: rotateZ(5deg); -ms-transform: rotateZ(5deg); -webkit-transform: rotateZ(5deg); >70% < transform: rotateZ(-4.28571deg); -ms-transform: rotateZ(-4.28571deg); -webkit-transform: rotateZ(-4.28571deg); >80% < transform: rotateZ(3.75deg); -ms-transform: rotateZ(3.75deg); -webkit-transform: rotateZ(3.75deg); >90% < transform: rotateZ(-3.33333deg); -ms-transform: rotateZ(-3.33333deg); -webkit-transform: rotateZ(-3.33333deg); >100% < transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); -webkit-transform: rotateZ(0deg); >> @-webkit-keyframes shake < 0% < transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); -webkit-transform: rotateZ(0deg); >10% < transform: rotateZ(-30deg); -ms-transform: rotateZ(-30deg); -webkit-transform: rotateZ(-30deg); >20% < transform: rotateZ(15deg); -ms-transform: rotateZ(15deg); -webkit-transform: rotateZ(15deg); >30% < transform: rotateZ(-10deg); -ms-transform: rotateZ(-10deg); -webkit-transform: rotateZ(-10deg); >40% < transform: rotateZ(7.5deg); -ms-transform: rotateZ(7.5deg); -webkit-transform: rotateZ(7.5deg); >50% < transform: rotateZ(-6deg); -ms-transform: rotateZ(-6deg); -webkit-transform: rotateZ(-6deg); >60% < transform: rotateZ(5deg); -ms-transform: rotateZ(5deg); -webkit-transform: rotateZ(5deg); >70% < transform: rotateZ(-4.28571deg); -ms-transform: rotateZ(-4.28571deg); -webkit-transform: rotateZ(-4.28571deg); >80% < transform: rotateZ(3.75deg); -ms-transform: rotateZ(3.75deg); -webkit-transform: rotateZ(3.75deg); >90% < transform: rotateZ(-3.33333deg); -ms-transform: rotateZ(-3.33333deg); -webkit-transform: rotateZ(-3.33333deg); >100% < transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); -webkit-transform: rotateZ(0deg); >>
Установка кнопки на WordPress
В админ панели WordPress переходим в раздел «внешний вид/редактор тем». Далее, в зависимости от структуры вашей темы, заходим в нужные файлы вносим правки. HTML код обычно вставляют в файл footer.php (перед закрывающим тегом
