Пример: Telegram — открыть Телеграм через браузер.
Вместо only_to_top используйте нужный логин.
Ссылка на WhatsApp
Перейти к диалогу WhatsApp.
Ссылка на WhatsApp:
Пример — ссылка на WhatsApp.
Переход к диалогу ватсап с текстом:
Пример — диалог ватсап с текстом WhatsApp.
Ссылка на Viber
Ссылка на Viber для ПК:
Ссылка на Viber для мобильных:
Ссылка на Skype
Открыть диалог для Skype переписки:
Пример — ссылка для чата Skype.
Ссылка на звонок по Skype:
Пример — ссылка на звонок Skype.
Ссылка Vkontakte
Открыть диалог для переписки Вконтакте:
Пример — ссылка на страницу пользователя Vkontakte.
Ссылка на Facebook Messenger
Открыть диалог в Facebook Messenger:
Пример — ссылка на messenger Facebook.
Ссылка на Instagram
Ссылка на Instagram:
Ссылка на электронную почту
Ссылка на e-mail:
Пример — ссылка на электронную почту — E-mail.
Ссылка на электронную почту с темой и текстом
- subject — тема письма;
- body — текст по умолчанию.
Ссылка на телефон
Значение href лучше прописывать без лишних символов.
Пример — ссылка на телефон +7 (032) 564-19-08.
Ссылка на файл
Ссылка на файл, будет открыт в браузере в новой вкладке:
Ссылка на файл, который будет предложено скачать или открыть:
Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.
Поделиться с друзьями:
Статьи из данной категории:
- JavaScript: Работа с Массивами
- Наличие Динамически Добавленного Элемента
- Стилизация Input File
- Предзагрузка Картинок — Предварительная Загрузка Изображений на JavaScript
- Стилизация Скролла
- События Формы
Источник: only-to-top.ru
Как сделать ссылку на телефон, email и мессенджеры кликабельной
Казалось бы, такой очевидный вопрос, на который ответ больше чем ясен. Но это только на первый взгляд: везде есть свои подводные камни. К примеру, для мессенджеров ссылка формируется немного иначе, к ссылке на звонок с телефона приписывается приставка tel и так дальше.
С этого небольшого обзора узнаем, как сделать ссылку на телефон кликабельной (активной), также сделаем активную ссылку на почту и на все популярные мессенджеры: Viber, Skype, WhatsApp, Telegram, ICQ. Разберем каждую в отдельности, а в конце все объединим в один блок и сделаем оформление, чтоб все красиво было.
Активная ссылка телефона на сайте
Для того чтобы на сайте номер телефона при нажатии срабатывал как активный вызов, нужно в атрибуте href прописать значение tel . Ну не совсем сразу будет идти вызов, а появится окно с запросом, каким приложением открыть tel . По сути, это обычный тег ссылки, а значит, вместо текста или самого номера, может быть, картинка, иконка и прочие.
Позвонить нам 
Активная ссылка для отправки писем по email
Здесь аналогичная ситуация, то есть все остается как есть, но в атрибуте ссылки прописываем немного другое значение. При нажатии на такую ссылку откроется модельное окно, в котором вас попросят выбрать приложение для открытия ссылки mailto .
Плюс ко всему к ссылке емейл можно задать параметры, а именно, тему письма, текст письма. Таким образом, будет автоматически заполнено поле формы.
Задать вопрос Написать на почту
Активная ссылка на Viber на сайт
Теперь начнем работу с самыми популярными приложениями для общения, связи или, другими словами, мессенджерами. Для Viber есть разный формат ссылок для разных устройств. То есть для ПК один вид, для телефонов другой. Это очень неудобно. Но есть универсальная ссылка, которая будет работать на всех устройствах. Только помните, что на устройстве должно быть установлено приложение Viber, иначе при нажатии на такую ссылку ничего не будет происходить.
Активная ссылка на WhatsApp на сайт
Такую ссылку можно получить в самом приложении в своем профиле. Но это лишняя «возня», так как ссылка всегда одинаковая, за исключением номера телефона. Поэтому вам всего лишь нужно изменить номер и можете смело использовать эту ссылку на WhatsApp на своем сайте.
Активная ссылка на Telegram на сайт
С ссылкой на Telegram особо никаких сложностей нет. Просто подставляется ник пользователя и ссылка готова. Но есть один небольшой нюанс, в основном в РФ. Ссылки могут блокировать, так как в России телеграм запрещён. Для этого есть разные способы обхода. К примеру, через сервис teleg.run сгенерировать ссылку или подобный сервис. Перенаправление будет происходить через переадресацию. В таком плане блокировок быть не должно.
Активная ссылка на Skype на сайт
Ссылка для Скайпа похожа на другие мессенджеры, только со своими приставками. Для примера приведу два варианта: ссылка на звонок и ссылка на чат. Они чаще всего используются на сайте. Ещё можно делать ссылки на конференции, на мультичат и т.д. Но это немного не то, что нужно для связи.
Позвонить по Skype Написать по Skype
Активная ссылка на ICQ на сайт
Для сервиса ICQ также есть ссылка, при нажатии на которую будет добавлять контакт в ваш список контактов. Это мессенджер уже стал не столь популярным, но все им еще многие пользуются. Скорей всего те, кто к нему привык.
Активные кнопки на мессенджеры
Как говорилось в начале обзора, объединяем все ссылки в один блок в виде веб-кнопок. В качестве иконок использовался шрифт Font Awesome.
.social-buttons < height: 90px; >.social-button < display: inline-block; background-color: #fff; width: 50px; height: 50px; line-height: 50px; margin: 0 3px; text-align: center; position: relative; overflow: hidden; opacity: .99; border-radius: 28%; box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.05); -webkit-transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59); transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59); >.social-button:before < content: »; background-color: #000; width: 120%; height: 120%; position: absolute; top: 90%; left: -110%; -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59); transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59); >.social-button .fa < font-size: 28px; vertical-align: middle; -webkit-transform: scale(0.8); transform: scale(0.8); -webkit-transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59); transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59); >.social-button.skype-but:before < background-color: #00A3E7; >.social-button.skype-but .fa < color: #00A3E7; >.social-button.whats-but:before < background-color: #4dc247; >.social-button.whats-but .fa < color: #4dc247; >.social-button.email-but:before < background-color: #ff6600; >.social-button.email-but .fa < color: #ff6600; >.social-button.phone-but:before < background-color: #000; >.social-button.phone-but .fa < color: #000; >.social-button.teleg-but:before < background-color: #31A9DD; >.social-button.teleg-but .fa < color: #31A9DD; >.social-button.icq-but:before < background-color: #24FF00; >.social-button.icq-but .fa < color: #24FF00; >.social-button.viber-but:before < background-color: #7B519C; >.social-button.viber-but .fa < color: #7B519C; >.social-button:focus:before, .social-button:hover:before < top: -10%; left: -10%; >.social-button:focus .fa, .social-button:hover .fa
- Одинаковая высота блоков CSS
- Показать/скрыть текст. Примеры на JS, CSS
- Псевдокласс root: переменные CSS
- CSS: ограничить количество строк
- CSS инструменты – онлайн-генераторы
- Как сделать блок на всю высоту страницы
- Карточка товара CSS. Красивое оформление
- Стили радио кнопок и чекбоксов CSS. Дизайн Material Design
- Мотивирующие CSS кнопки «Нажми на меня»
- Анимация background CSS: движущиеся облака
Источник: wordsmall.ru
Как добавить в Инстаграм ссылку на WhatsApp, Telegram или Viber
Ссылка в Инстаграм на WhatsApp, Telegram или Viber позволит подписчикам за два клика связаться с вами в мессенджере. Пользователю надо лишь кликнуть по ссылке – и он сразу перейдёт в диалоговое окно «Вайбера» или «Ватсапа».
Большинство потенциальных заказчиков предпочитает общаться именно в мессенджерах, а не в Директе. Значит, после добавления активной ссылки, вы упростите им работу с приложениями и сможете рассчитывать на рост конверсии: переходов и продаж.
- Сбор и фильтрация целевой аудитории
- Масслукинг, массфолловинг, масслайкинг
- Отложенный постинг фото, видео и историй
- Рассылка в Директ, автоответчик
Кстати, некоторые специалисты берут с владельцев аккаунтов в Instagram деньги за настройку быстрых ссылок и так называемых мультиссылок. Мы же научим вас это делать бесплатно.
Из статьи вы узнаете, как добавить ссылку на WhatsApp или Viber в шапку профиля в Инстаграм. Если вы хотите поставить ссылку сразу на несколько мессенджеров, потребуется использование сторонних сервисов.
Прямая ссылка на сообщение в WhatsApp, Telegram или Viber
Добавить ссылки в Инстаграм можно, как на компьютере, так и на мобильном телефоне. Давайте рассмотрим оба варианта.
На Android и iOS
Их интерфейс почти не отличается, соответственно, пошаговое руководство будет общим.
Перед переходом в настройки страницы рекомендуем скопировать наш образец, откорректировав его под себя.
Готовые шаблоны:
Образец для WhatsApp выглядит так: https://wa.me/номер.
Вместо «номер» укажите ваш телефон без тире, плюса и скобок. Не забудьте добавить перед ним код страны. Для России это 7.
Устаревший шаблон выглядит так: api.whatsapp.com/send?phone=номер.
Этот вариант тоже рабочий, но смотрится менее привлекательно.
Сохраните себе ещё один образец:
Он понадобится, если вы захотите добавить текст, который сразу автоматически отобразится в чате мессенджера (со стороны заказчика). Например, https://wa.me/номер?text=Яхочусделатьзаказ .
Как вы уже поняли, сообщение не должно содержать пробелов, поэтому лучше ограничиться одним словом или максимум несколькими.
Как добавить ссылку в описание профиля: пошаговая инструкция
Зайдите на свою страницу в Instagram и выберите действие «Редактировать профиль».
Вставьте в поле для добавления сайта скопированный и адаптированный под себя шаблон из прошлого пункта.
Сохраните изменения, после чего вернитесь в аккаунт и проверьте наличие прямой ссылки.
Протестируйте её – попробуйте перейти по ней в «Ватсап». Ссылка на Viber и Телеграм добавляется также. Только не забудьте в этом случае поменять название мессенджера в шаблоне.
На ПК
Откройте web-версию Инстаграм и зайдите в аккаунт. Теперь кликните по иконке аккаунта, расположенной справа от сердечка.
Нажмите на «Редактировать профиль». Вставьте в поле для адреса сайта готовую ссылку. Выберите «Отправить» внизу.
Проверьте работоспособность гиперссылки.
Как добавить мультиссылку
При помощи площадки wapp.click можно в один клик сократить свою ссылку. А такие сервисы, как mssg.me или «Таплинк» позволят вам добавить в профиль не один, а несколько контактов (речь идёт о мультиссылке). Например, «Вайбер», WhatsApp и Telegram.
На этих сервисах предусмотрены и free, и платные версии – возможности последних значительно больше. Все площадки имеют похожий принцип работы: вы создаёте в сервисе аккаунт, где собираете нужные контакты, информацию о товаре/услуге, настраиваете автоответчик.
Сервис TapLink
Это приложение даёт возможность создавать умные ссылки на мессенджеры с началом диалога в один клик для увеличения обращений и заявок от фолловеров.
Вместо одной активной ссылки вы сможете добавлять в описание профиля неограниченное количество своих контактов, ссылок на мессенджеры и социальные сети. Настройка мультиссылок занимает около 10 минут.
Шаг 1. Открываем сервис TapLink и выбераем действие «Попробовать сейчас».
Шаг 2. Авторизируйтесь через Инстаграм.
Шаг 3. Вставьте первый блок с вашим адресом WhatsApp. Для этого кликните по «Добавить новый блок».
Шаг 4. Откройте раздел «Мессенджеры».
Шаг 5. В поле для заголовка введите имя кнопки, например, «Написать в WhatsApp». После этого выберите в выпадающем меню «Открыть сайт».
Шаг 6. В строку ниже вставьте ссылку на контакт в WhatsApp, нажмите «Сохранить».
Шаг 7. На своей странице сервиса TapLink вы увидите новую кнопку с контактом WhatsApp. Щёлкните на изображение колёсика, чтобы зайти в настройки.
Шаг 8. Если хотите, можете изменить цвет кнопки, кликнув по разделу «Дизайн».
Шаг 9. Тем же способом настройте все нужные вам контакты, платежи и товары. Затем выберите «Установить».
Шаг 10. Нажмите «Скопировать»
Шаг 11. Откройте свой Инстаграм и вставьте скопированную только что ссылку в поле для веб-сайта. В описании профиля появится активная прямая ссылка.
При переходе на этот адрес загрузится страница со всеми добавленными вами кнопками.
Заключение
Используйте прямые ссылки на WhatsApp и Viber, чтобы упростить коммуникацию с потенциальными заказчиками. Довольные клиенты – основа хороших продаж!
Источник: www.socialkit.ru