Шаблоны
Сайты клиентов
Тарифы
Обучение
Campus - Обучение
Практические знания, как улучшить навыки в создании сайтов
и заработке на этом
Статьи
Статьи, как улучшить качество сайта
и увеличить продажи
Справочный центр
Инструкции по сервису и связь
с тех.поддержкой
Бесплатный практикум
Инструкции по сервису и связь
с тех.поддержкой
Вход
Регистрация
← Назад
Соц. сети

Создание ссылок на контакты, социальные сети и мессенджеры

Сложность ∙ Легко
Часто сайт посещают с телефонов, и удобно, если на сайте есть ссылка на кликабельный телефон, e-mail и т.д. — которая сразу открывает нужное приложение
на телефоне или набирает номер. Здесь мы рассмотрим основные приемы создания таких ссылок в редакторе mottor.



Рассмотрим самые популярные:
I. Ссылка на телефон
II. Ссылка на e-mail
III. Ссылки на социальные сети
IV. Ссылки для перехода в мессенджеры
V. Кнопки "Поделиться"



Для размещения контактов на сайте вы также можете добавить:

Виджет социальных сетей — шаблон секции, закрепленный на определенном положении экрана.

Блок "Социальные сети" — блок редактора, позволяющий быстро добавить в определенном месте сайта кнопки для перехода в социальные сети.

Важный момент:
Чтобы все изменения появились на вашем сайте, необходимо нажать на кнопку "Опубликовать" в правом верхнем углу редактора:

Публикация изменений на сайте в mottor
Публикация изменений на сайте в mottor

I. Ссылка на телефон

Видео-инструкция:

Ссылка на телефон имеет простой формат url (когда прописывается не полная http:// ссылка, а сокращенное обозначение, понимаемое браузерами как вызов нужного приложения).

В случае с телефоном это протокол tel:

tel:+7xxxxxxxxxx

Ссылку можно добавить на сайт несколькими способами, рассмотрим их:



1. Ссылка в тексте

• Выделите нужный фрагмент текста в текстовом блоке и нажмите на иконку цепочки
в меню блока:

Cсылка на телефон в тексте mottor
Cсылка на телефон в тексте mottor

• В открывшемся окне введите в поле ссылки url вашего телефона:

tel:88005555555

• После чего нажмите "OK" в окне и выйдите из редактирования текстового блока, чтобы сохранились изменения.

Теперь при клике на ссылку на сайте браузер будет вызывать подходящее приложение для совершения вызова — в мобильных браузерах это начнет набор телефонного номера для звонка.



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



2. Ссылка в кнопке

• Зайдите в настройки блока, откройте вкладку "Действие при клике" и выберите действие "Позвонить по телефону". В появившемся поле ниже впишите нужный номер телефона:

Ссылка на телефон в кнопке
Ссылка на телефон в кнопке
Ссылка сформируется автоматически :)

3. Ссылка на картинке

• Зайдите в настройки блока, нажав на кнопку с шестеренкой в его меню:

Ссылка на телефон в картинке
Ссылка на телефон в картинке

• Во вкладке "Действие при клике" выберите пункт "Позвонить по телефону".
В появившемся поле ниже укажите нужный телефон:

Прикрепить ссылку на изображение в mottor
Прикрепить ссылку на изображение в mottor
Ссылка сформируется автоматически :)
4. Ссылка в блоке "Социальные сети"

• Зайдите в настройки блока, во вкладке "Пункты" нажмите на кнопку "•••" около нужного пункта:
Ссылка на телефон в блоке "Социальные сети"
Ссылка на телефон в блоке "Социальные сети"

• Выберите подходящую иконку, пропишите название и номер телефона:

Ввод телефона в блок социальных сетей в mottor
Ввод телефона в блок социальных сетей в mottor
Важно!
В отличие от других блоков, здесь нужно вводить сам номер телефона в формате +7хххххххххх, без приставки "tel:".

II. Ссылка на email

Видео-инструкция:

Аналогично настраивается ссылка на email-адрес, только вместо протокола tel используется протокол mailto

mailto:xxxxxxxx@mail.ru

Здесь также может использоваться любой ваш email адрес, возьмем для примера адрес нашей техподдержки: support@lpmotor.ru

1. Ссылка в тексте

• Выделите нужный фрагмент текста в блоке и нажмите на иконку с цепочкой в меню блока:

1. Ссылка в тексте

• Выделите нужный фрагмент текста в блоке и нажмите на иконку с цепочкой
в меню блока:

Ссылка в текстовом блоке mottor
Ссылка в текстовом блоке mottor

• Введите ссылку с email из примера:

mailto:support@lpmotor.ru

Ссылка на почту в текстовом поле в mottor
Ссылка на почту в текстовом поле в mottor

• Укажите нужный вам адрес почты вместо примера.

• Нажмите "ОК" и сохраните изменения.


Теперь рассмотрим настройку в блоках "Кнопка" и "Картинка".
Здесь ссылку на телефон указать гораздо проще, потребуется только указать адрес электронной почты.
Плюс, после установки ссылки на этих блоках цвет текста не меняется на синий.

2. Ссылка в кнопке

• Зайдите в настройки блока "Кнопка", во вкладке "Действие при клике" выберите пункт "Отправить email", впишите нужный адрес почты в поле ниже:

2. Ссылка в кнопке

• Зайдите в настройки блока "Кнопка", во вкладке "Действие при клике" выберите пункт "Отправить email", впишите нужный адрес почты в поле ниже:

Ссылка на почту в кнопке в mottor
Ссылка на почту в кнопке в mottor

Система автоматически сформирует ссылку для вас :)

3. Ссылка на картинке

• Зайдите в настройки блока "Картинка":

3. Ссылка на картинке

• Зайдите в настройки блока "Картинка":

Ссылка на почту в изображении
Ссылка на почту в изображении

• Во вкладке "Действие при клике" выберите пункт "Отправить email", впишите нужный адрес почты в поле ниже:

• Во вкладке "Действие при клике" выберите пункт "Отправить email", впишите нужный адрес почты в поле ниже:

Ввод ссылки на почту в изображении
Ввод ссылки на почту в изображении

Система сформирует ссылку :)

4. Ссылка в блоке "Социальные сети"

• Зайдите в настройки блока, во вкладке "Пункты" нажмите на кнопку "•••" около нужного пункта:

4. Ссылка в блоке "Социальные сети"

• Зайдите в настройки блока, во вкладке "Пункты" нажмите на кнопку "•••" около нужного пункта:

Ссылка на почту в блоке социальных сетей
Ссылка на почту в блоке социальных сетей

• Выберите подходящую иконку, пропишите название и e-mail адрес:

• Выберите подходящую иконку, пропишите название и e-mail адрес:

Выбор иконки и ввод ссылки на почту в блоке социальных сетей
Выбор иконки и ввод ссылки на почту в блоке социальных сетей

Важно!
В отличие от других блоков, здесь нужно вводить сам адрес почты в формате xxx@xxx.xx, без приставки "mailto:".



Как добавить тему в текст письма

Если вы хотите добавить тему письма и текст, которые будут появляться в письме автоматически, то вам необходимо разместить в настройках ссылку вида:

Важно!
В отличие от других блоков, здесь нужно вводить сам адрес почты в формате xxx@xxx.xx, без приставки "mailto:".



Как добавить тему в текст письма

Если вы хотите добавить тему письма и текст, которые будут появляться в письме автоматически, то вам необходимо разместить в настройках ссылку вида:

mailto:order@mysite.com?subject=Заказ%20тура&body=
Страна:%0AНомер%20для%20связи:

в этой ссылке:
order@mysite.com — адрес получателя,
в subject содержится тема письма,
в body — текст письма,
%20 — спецсимвол для вставки пробела,
%0A — спецсимвол для переноса строки.

в этой ссылке:
order@mysite.com — адрес получателя,
в subject содержится тема письма,
в body — текст письма,
%20 — спецсимвол для вставки пробела,
%0A — спецсимвол для переноса строки.

Пример отображении темы письма
Пример отображении темы письма
Рассмотрим на примере:

Если мы хотим, чтобы:
• письмо попадало по адресу info@mysite.ru
• тема письма была "Летняя распродажа"
• а текст письма автоматически заполнялся, как:
"Номер товара:
Цвет:
"


То в ссылке нам необходимо поменять выделенные полужирным данные:

mailto:order@mysite.com?subject=Заказ%20тура&body=
Страна:%0AНомер%20для%20связи:

mailto:order@mysite.com?subject=Заказ%20тура&body=Страна:%0AНомер%20для%20связи:

(остальные символы ?,=,& мы не трогаем)

И в итоге ссылка будет выглядеть так:

mailto:info@mysite.ru?subject=Летняя%20распродажа&body=
Номер%20товара:%0AЦвет:"

Помним, что нам потребуются символы:

%20 — спецсимвол для вставки пробела,
%0A — спецсимвол для переноса строки.

III. Установка ссылок на социальные сети

Разместите на сайте кнопки и иконки социальных сетей, чтобы дать возможность посетителям быстро делиться интересными страницами в своих социальных сетях.
А также для удобного поиска и направления посетителя на вашу страницу в той или иной соц. сети.


Видео-инструкция:

В нашем сервисе есть несколько способов установки ссылок:

Пример отображения ссылок в mottor
Пример отображения ссылок в mottor

1. В блоке "Кнопка"

• Зайдите в настройки блока. Во вкладке "Действие при клике" выберите пункт "Переход по ссылке", выберите пункт "Внешняя ссылка" и впишите нужную ссылку
в поле "URL":

1. В блоке "Кнопка"

• Зайдите в настройки блока. Во вкладке "Действие при клике" выберите пункт "Переход по ссылке", выберите пункт "Внешняя ссылка" и впишите нужную ссылку в поле "URL":

Ввод ссылки в кнопку в mottor
Ввод ссылки в кнопку в mottor

2. В блоке "Картинка"

• Зайдите в настройки блока:

2. В блоке "Картинка"

• Зайдите в настройки блока:

Переход в настройки картинки для ввода ссылки в mottor
Переход в настройки картинки для ввода ссылки в mottor

• Во вкладке "Действие при клике" выберите пункт "Переход по ссылке", выберите пункт "Внешняя ссылка" и впишите нужную ссылку в поле "URL":

Ввод ссылки в картинку в mottor
Ввод ссылки в картинку в mottor

3. В "Текстовом блоке"

• Выделите нужный фрагмент текста внутри блока и нажмите на кнопку с иконкой цепочки в меню:

3. В "Текстовом блоке"

• Выделите нужный фрагмент текста внутри блока и нажмите на кнопку
с иконкой цепочки в меню:

Переход в создание ссылки в текстовом блоке
Переход в создание ссылки в текстовом блоке

• Впишите ссылку в поле во вкладке "URL адрес" и нажмите на кнопку "ОК":

Ввод ссылки в текстовый блок в mottor
Ввод ссылки в текстовый блок в mottor

4. В блоке "Социальные сети"

• Зайдите в настройки блока, во вкладке "Пункты" нажмите на кнопку "•••" около нужного пункта:

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


Примеры ссылок на соц. сети:

• Вконтакте https://vk.com/account
• Одноклассники https://ok.ru/account
• Twitter https://twitter.com/account
• Facebook* https://www.facebook.com/account
• Instagram* https://www.instagram.com/account
• Выберите подходящую иконку, пропишите название и ссылку
на нужный сервис.


Примеры ссылок на соц. сети:

• Вконтакте https://vk.com/account
• Одноклассники https://ok.ru/account
• Twitter https://twitter.com/account
• Facebook* https://www.facebook.com/account
• Instagram* https://www.instagram.com/account

IV. Ссылки для перехода в мессенджер (WhatsApp, Viber, Telegram)

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


Видео-инструкция:

1. WhatsApp

ВАЖНО! Может работать некорректно на территории РФ


Для него есть 4 варианта ссылок, каждая из которых работает только при определенных условиях:
https://wa.me/7999999****
(работает на мобильных и ПК, если установлено приложение WA)

или

whatsapp://send?phone=7999999****
(работает, только если на устройстве установлено приложение WA)

или

https://web.whatsapp.com/send?phone=7999999****
(рекомендуется использовать только для ПК-версии сайта)

или

https://api.whatsapp.com/send?phone=7999999****
(рекомендуется использовать для сайтов, размещенных вне территории РФ)
Вместо номера 7999999**** вам нужно будет указать номер телефона вашего аккаунта в этом мессенджере.

Ещё вариант: Если вам нужна ссылка, при переходе по которой, в мессенджере будет набрано сообщение, то укажите её в следующем формате:
В этой ссылке мы видим, что есть номер телефона 7999999****, его вы меняете на свой телефон в таком же формате, без точек, тире, пробелов и т.п. Просто указываете набор цифр.

+ в ссылке есть "зашитое" сообщение "Добрый день! Я хочу купить квартиру в Москве."

Единственное отличие от нормального текста в ссылке в том, что вместо пробелов используется — %20.


И тогда получается:
Добрый%20день!%20Я%20хочу%20купить%20квартиру%20в%20Москве
В примере ссылки вы меняете только то, что выделено жирным шрифтом, т.е. номер телефона и текст сообщения:
https://api.whatsapp.com/send?phone=7999999****&text=
Добрый%20день!%20Я%20хочу%20купить%20квартиру%20в%20Москве
https://api.whatsapp.com/send?phone=7999999****&text=Добрый
%20день!%20Я%20хочу%20купить%20квартиру%20в%20Москве
2. Viber

Пример:
Вместо номера 7999999**** вам нужно будет указать номер телефона вашего аккаунта в Вайбере без плюса в начале.


Ещё вариант: Для того, чтобы по нажатию на кнопку открывался чат с вами в Viber укажите ссылку в формате: 
http://viber%3A//chat?number=+7999999****
%2B - обязательно должно остаться перед номером телефона. Знак "+" перед телефоном НЕ указывается.
%2B - обязательно должно остаться перед номером телефона. Знак "+" перед телефоном НЕ указывается.
3. Telegram

Для перехода на диалог с пользователем:
3. Telegram

Для перехода на диалог
с пользователем:
username - заменяем на ваш логин внутри telegram (без знака @)


Для перехода в telegram канал:
В случае, если по ссылке https://telegram.me не открывается Telegram, можно попробовать изменить ссылку на https://tele.click/. Например, https://tele.click/lpmotorsupportbot


Вы также можете воспользоваться генератором ссылок.



Вариант с ссылки с заданным сообщением:

https://t.me/USERNAME?&text=hello, где

- Вместо "Username" указывается профиль в Телеграм.
- Вместо "Hello" указывается текст сообщения. Пробелы между словами заменяются кодом "%20".
В случае, если по ссылке https://telegram.me не открывается Telegram, можно попробовать изменить ссылку на https://tele.click/. Например, https://tele.click/lpmotorsupportbot


Вы также можете воспользоваться генератором ссылок.



Вариант с ссылки с заданным сообщением:
где:
- Вместо "Username" указывается профиль в Телеграм.
- Вместо "Hello" указывается текст сообщения. Пробелы между словами заменяются кодом "%20".


4. Skype


Пример:
username - логин вашего аккаунта в Skype
username - логин вашего аккаунта
в Skype


5. MAX

Чтобы получить ссылку на ваш контакт в мессенджере, выполните действия:

• Откройте настройки профиля. В левом верхнем углу экрана настроек вы найдете QR-код вашего профиля.

• Нажмите на QR-код. Откроется окно с деталями вашего профиля.
• Скопируйте ссылку. Нажмите кнопку "Поделиться" или "Скопировать ссылку".


5. MAX

Чтобы получить ссылку на ваш контакт
в мессенджере, выполните действия:

• Откройте настройки профиля. В левом верхнем углу экрана настроек вы найдете QR-код вашего профиля.

• Нажмите на QR-код. Откроется окно
с деталями вашего профиля.
• Скопируйте ссылку. Нажмите кнопку "Поделиться" или "Скопировать ссылку".

V. Кнопки "Поделиться"

1. Код таких кнопок можно получить в Конструкторе блока «Поделиться» от Яндекса.

1. Код таких кнопок можно получить
в Конструкторе блока «Поделиться»
от Яндекса
.

Конструктор ссылки Яндекс
Конструктор ссылки Яндекс

2. Также получить код таких кнопок можно получить и от других сервисов. Например, usocial.pro.

ВАЖНО!
Перед тем как продолжить — чтобы получить код, вам нужно зарегистрироваться или войти в личный кабинет на этом сервисе с помощью кнопки "Вход в личный кабинет" справа вверху. Без этого шага получить код на этом сервисе не получится.



• Перетащите в окошко предпросмотра нужные иконки соц.сетей и задайте параметры внешнего вида и работы этих кнопок:

Предпросмотр кнопки Поделиться
Предпросмотр кнопки Поделиться

• Когда закончите, нажмите кнопку "Получить код":

• Когда закончите, нажмите кнопку "Получить код":

Получение кода виджета Поделиться
Получение кода виджета Поделиться

• Система переведет вас на личный кабинет, где будет показан код для вставки на сайт:

Отображение кода для вставки кнопки Поделиться
Отображение кода для вставки кнопки Поделиться
• Полученный код кнопок можно вставить в html-блок. Инструкция по вставке любого html-кода.

* Продукт компании Meta, признанной экстремистской организацией в России.
Часто задаваемые вопросы
1. Почему не срабатывают ссылки для перехода в Whatsapp?

Самая частая причина — выбор неверной ссылки для размещения на сайте. Из-за блокировок Whatsapp в РФ, у каждой из них есть определенные условия, в рамках которых она будет работать.

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

В большинстве случаев для ПК и мобильной версий сайта необходимо создавать две разные ссылки.
2. Как исправить ошибку "На этом веб-сайте установлена блокировка автоматического инициирования вызова" в Safari?

Если нажать 3 раза на номер телефона и после вопроса "Позвонить или отменить" нажать "Отменить", то Сафари решит, что сайт ненадежный. И поэтому выведет это сообщение.

Чтобы исправить ошибку, вам надо один раз разрешить позвонить.

Итоги

Итак, в этой статье мы научились настраивать ссылки на соц.сети и увидели, как просто это делается в редакторе mottor.

Надеемся, вы примените эти знания при создании своего собственного сайта. Если что-то будет непонятно — в конструкторе сайтов mottor есть бесплатная техподдержка для всех пользователей. Вам поможет живой специалист:

— в чате на сайте lpmotor.ru
— по телефону 8 800 200 51 47 (звонки по РФ бесплатные)
— в Телеграм: https://t.me/lpmotorchat

Создать сайт с ИИ бесплатно

Не забудьте протестировать все возможности mottor прямо сейчас

Конструктор сайтов, чат-ботов, автоворонок, мобильных приложений

Конструктор сайтов, чат-ботов, автоворонок, мобильных приложений

Быстрый старт:

Премиум поддержка
Полезные материалы
Интеграции
Технологии
Шаблоны сайтов
Тарифы
Импорт из Figma
Сделано на mottor
Партнеры

Продукты:

Сайты + лендинги
Интернет-магазины
Квизы
Чат-боты
Автоворонки
Приложение
AI-агенты (n8n)
Партнерская программа
WhiteLabel

О нас:

О компании
Тур по сервису
Вакансии
Отзывы
Контакты

Шаблоны:

Популярные запросы:

Все шаблоны
Шаблон доставка еды
Шаблон строительство
Шаблон недвижимость
Шаблон онлайн-курс
Шаблон онлайн школа
Шаблон портфолио
Шаблон вебинар
Шаблон интернет-магазин мебели

ООО “ЛПМОТОР”, все данные защищены

Договор оферта
Согласие
Политика конфиденциальнсоти
Инструкция по установке
Бесплатный конструктор сайта
Одностраничный сайт
Конструктор интернет магазинов
Конструктор страниц
Конструктор сайта онлайн
Онлайн конструктор сайта бесплатно
Сайт конструктор бесплатно
Создать квиз
Конструктор создания сайтов
Создать сайт бесплатно конструктор
Многостраничный сайт
Создать бесплатно интернет магазин
Создать сайт онлайн бесплатно самому
Создать сайт конструктор

Стоимость:

Клиенты:

Материалы:

Обновления
Справочный центр
Бесплатный практикум
Mottor Campus

Подпишитесь на наши соцсети
и получайте кейсы, исследования и обновления первыми:

Бесплатный звонок по России

Бесплатный звонок по России

support@lpmotor.ru

support@lpmotor.ru