Как в тильде добавить ссылку на whatsapp

Как добавить ссылки на свои соцсети и мессенджеры WhatsApp, Viber. [Пошаговая инструкция Тильда]

Инструкция\обучение — Рассказываю на пальцах как добавить в Тильда ссылки на популярные соцсети и мессенджеры по клику. Неважно что это, иконка, текст или картинка. Ссылки из видео: — Вставка WhatsApp: https://wa.me/79999999999 — Вставка Viber: viber://chat?number=+79999999999 — Вставка Telegram: https://t.me/username (username — вписываете свой ник\профиль) — Вставка ВКонтакте: https://vk.com/username — ссылка на личный профиль или группу https://vk.me/username — ссылка на чат с вами (username нужно изменить на ваш логин) — Вставка Skype: skype:username?chat (username нужно изменить на ваш логин) — Вставка Twitter: https://twitter.com/username (username нужно изменить на ваш логин) — Вставка Facebook: https://www.messenger.com/t/username (username нужно изменить на ваш логин) — Вставка Instagram: https://www.instagram.com/username (username нужно изменить на ваш логин) *Признаны экстремистскими организациями и запрещены на территории РФ ________ �� Меня зовут Роман, я дизайнер на Тильда\Tilda, с 2019 года участвовал во многих проектах и получил большое количество опыта которым сейчас с вами и делюсь Что важно за 4 года появился серьезный опыт в маркетинге который я использую при создании своих сайтов на Тильда и повышаю заработок моих клиентов после чего многие остаются довольны и мы продолжаем работу. ✨ Ближайшие ролики совсем скоро;) Подписывайся. �� Оставь комментарий — если помогло. Теги: Как добавить ссылки на соц сети и мессенджеры,как настроить переход на соцсети,Как сделать все социальные сети в тильда,добавить кликабельные ссылки,как поделится ссылками Vk instagram facebook whatsapp viber skype,как добавить вк тильда,как добавить мессенджеры в тильду,ссылки на мессенджеры на сайте,кнопки для сайта,Как сделать ссылку на,как установить,Создание ссылок,как разместить на сайте тильда,Как встроить ссылки,как сделать ссылки,активная ссылка,поделится

Показать больше

Войдите , чтобы оставлять комментарии.

Как на Тильде сделать ссылку

Стоит начать с того, что в работе с Тильдой существует несколько различных ситуаций, в которых вам может понадобиться сделать ссылку:

1. Создание ссылки в тексте.
2. Создание ссылки в готовом блоке.
3. Создание ссылки с элемента в Zero Block.
4. Создание якорной ссылки.

Создание ссылки в тексте

Самое простое, что может быть в Тильде. Чтобы сделать ссылку, нужно кликнуть на текст в готовом блоке, при этом вверху появится панель с функциями. Выделите мышкой часть текста, которую вы хотите сделать ссылкой и нажмите в верхнем меню на иконку скрепки. В поле «Укажите ссылку» введите относительную (если это ссылка на внутреннюю страницу на Тильде) или абсолютную (если это внешняя ссылка) ссылку. Отметьте чекбокс «Открыть ссылку в новой вкладке», если это внешняя ссылка.

Ниже вам будут доступны дополнительные настройки: цвет текста, цвет и толщина линии, rel=»nofollow».

Создание ссылки в готовом блоке

Чтобы на Тильде сделать ссылку в любом готовом блоке, необходимо навести на блок и нажать на кнопку «Контент» в левом верхнем углу блока. В зависимости от категории блока (меню, плитка и ссылка, форма и кнопка и т. д.) нужно выбрать поле, в котором предусмотрено место для добавления ссылки. В указанное место необходимо добавить ссылку вручную, либо нажать на ссылки «Выбрать страницу» или «Выбрать блок». Здесь также можно отметить чекбокс «Открыть в новой вкладке», если ссылка должна открываться в новой вкладке.

Создание ссылки с элемента в Zero Block

В зависимости от того, с какого типа элемента в Zero Block нужно сделать ссылку, мы выполняем различные действия. Принцип добавления ссылки в текстовый блок такой же как для готового блока. Необходимо дважды кликнуть по текстовому блоку и в открывшейся панели нажать на иконку скрепки. Далее появляется панель, описанная в главе «Создание ссылки в тексте».

Чтобы на Тильде сделать ссылку с элементов Image и Shape, необходимо кликнуть на элемент левой кнопкой мыши, затем нажать на кнопку Settings в правом нижнем углу. В открывшемся окне открываем секцию Link и указываем ссылку в поле URL. Также можно настроить дополнительные параметры: Target (открывать или нет в новом окне) и Rel Nofollow (запрет перехода по ссылке для поискового робота).

Для элемента Button все идентично предыдущим двум элементам, но в окне настроек отсутствует секция Link. Ссылка указывается в поле URL.

Создание якорной ссылки

Бывают ситуации, когда ссылка должна вести не на отдельную страницу, а на конкретный блок внутри существующей или отдельной страницы. В этом случае нам на помощь приходит якорная ссылка. Чтобы на Тильде сделать якорную ссылку, необходимо в Библиотеке блоков нажать на категорию «Другое» и там выбрать блок Т173. Разместите его перед тем блоком, на который вы хотите ссылаться.

Наведите на созданный блок и в левом верхнем углу нажмите на «Контент». В поле «Имя якорной ссылки» укажите латиницей название для якорной ссылки. Хорошо, если оно будет по смыслу соответствовать блоку, на который вы хотите ссылаться.

Далее переходите к тому элементу, который должен ссылаться на выбранный блок. Это может быть один из элементов, описанных в предыдущих разделах. Необходимо указать имя якорной ссылки, поставив перед ним значок решетки. Пример якорной ссылки: #contacts. Если вы хотите указать ссылку на блок на другой странице, вы просто добавляете перед якорной ссылкой адрес этой страницы: /path/#contacts

Возможен еще один вариант. Вы можете навести на блок, на который хотите сослаться и в левом верхнем углу нажать на «Настройки». Необходимо прокрутить в самый низ окна и скопировать значение в поле Block ID — это имя уникальной якорной ссылки блока. Ее необходимо прописать в том месте, откуда вы хотите сделать якорную ссылку.

Если у вас остались вопросы о том, как на Тильде сделать ссылку, пишите их в комментариях к этой статье.

Делаем кликабельным номер телефона, Whatsapp, Telegram и E-mail

Скорость и простота коммуникации — то, к чему современные потребители уже привыкли. В эру высокоскоростного мобильного интернета люди хотят решать свои задачи через смартфон, делая минимум лишних движений. Клик сюда, клик туда и готово!

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

Разберемся, как проработать такую маленькую, но очень важную деталь сайта, как кликабельные кнопки связи (телефон, почта, мессенджеры).

Номер телефона

Чтобы при клике на номер телефона начинался звонок нужно сделать следующие шаги.

HTML-код сайта

Некликабельный номер телефона (просто текст) может выглядеть в коде по-разному, например, так:

8-123-456-78-90

 
+7 (900) 101-56-78 

Чтобы сделать обычный текст кликабельным нужно сделать из него гиперссылку и указать действие, которое будет совершено по клику (в нашем случае набор номера).

Для создания любых ссылок используется тег …. Между тегами располагается текст ссылки или картинка (например, иконка трубки). Атрибут href=“” указывает адрес ссылки или действие. Для набора номера используется параметр: tel:+7XXXXXXXXXX, где +7XXXXXXXXXX — нужный номер телефона.

Если доработать предыдущие примеры, то получится следующий код:

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

Зная, как устроен HTML-код вы легко сможете реализовать на любом движке или конструкторе.

В WordPress

Метод создания кликабельной ссылки на движке WordPress аналогичен пункту «HTML-код сайта» данной статьи. Главная задача в том, чтобы найти нужный фрагмент кода в админ-панели.

Шапка сайта

1. Если телефон находится в шапке сайта, то заходим в административной панели: «Внешний вид» -> «Редактор».
2. Справа, в Файлах темы находим «header.php», нажимаем на него.
3. В коде находим телефон. Для быстрого поиска кликнете левой кнопкой мыши на поле с кодом и нажмите комбинацию на клавиатуре: “Ctrl” + “F”. Затем введите несколько цифр телефона и нажмите “Enter”. Нужный фрагменты станут выделены желтым цветом.

1. Теперь остается обернуть простой текст в гиперссылку. Как это сделать смотрите в предыдущем пункте статьи.В данному случае получается по итогу так:

1. Нажимаем “Обновить файл” и изменения сохраняются. Проверяем работоспособность на сайте. Готово!

Записи/страница

1. Если телефон находится в записи, то переходим в редактор записи/страницы.

1. Переходим в редактор кода, нажав на вкладку “Текст”:

1. Выделяем номер и нажимаем кнопку “link”. В поле “URL” добавляем гиперссылку для номера:

1. Получается так:

1. Нажимаем “Обновить” и страница сохраняется. Готово!

В Tilda

Zero-блок

• Переходим к редактированию блока, нажав на кнопку “Редактировать блок” в конструкторе нужной страницы:

• Выделяем телефон и нажимаем кнопку “Setting”:

• В поле Link в настройках вводим ссылку: “tel:+ номер телефона с +7”

• Сохраняем изменения в блоке и публикуем страницу.

Стандартный блок

• Нажимаем “Контент”:

• Находим нужный блок, выделяем телефон и нажимаем иконку “Ссылка”:

• Выбираем пункт: “Вставить ссылку”:

• В поле “URL” вводим “tel:+ номер телефона с +7” и нажимаем кнопку “Вставить”:

• Сохраняем изменения в блоке и публикуем страницу.

Активная ссылка на WhatsApp

Принцип точно такой же, как и с телефоном (смотрите предыдущий пункт данной статьи), отличие только в самой ссылке. Она будет выглядеть следующим образом:

Для размещения кликабельного текста на сайте подойдут все инструкции, как для телефонного номера.

Кликабельная иконка для сайта

Но обычно кликабельным делается не номер телефона, а специальная иконка WhatsApp. Для этого:

1. Находим иконку, которую будем использовать. Для этого подойдет, например, сервис Flaticon.com.

1. Выбираем подходящее по стилистике изображение. Кликаем на него, выбираем формат SVG.
2. Дальше будет показан алгоритм действия, если сайт на Тильде. Если сайт на другой CMS, то нужно будет загрузить файл на хостинг и добавить небольшой HTML и CSS-коды на сайт, чтобы разместить иконку, например, в шапке. Для этого понадобятся минимальные знания верстки, либо помощь верстальщика.
3. На Тильде переходим в редактирование Zero блока.
4. Выбираем пункт добавить изображение и загружаем иконку.

1. Масштабируем ее и размещаем в нужном месте блока.
2. Добавляем в поле Link ссылку https://wa.me/номертелефона

1. Сохраняем изменения в блоке и публикуем страниц сайта. Готово! Кнопка Whatsapp теперь кликабельная и сразу перенаправляет пользователя на диалог в мессенджере.

Ссылка на Telegram

С Телеграм тот же алгоритм действий, что и Whatsapp (смотрите предыдущий пункт данной статьи), но основное отличие в том, что в РФ, например стандартные ссылки в формате https://t.me/seoforge не работают. Поэтому необходимо использовать редирект через такие сервисы, как tele.gg, telegram.im и другие. Сервисы полностью бесплатны и существует большой список таких сервисов без сторонней рекламы, используйте именно их.

Ссылка будет выглядеть следующим образом.

На канал @seoforge в Телеграм: telegram.im/seoforge

На пользователя @webengineer в Телеграм:

Интеграция Tilda (Тильда) и Whatsapp (WABA) (Ватсап)

Подключение за 5 минут, 30 дней на тесты, попробуйте.

Какие данные можно передавать из Tilda в Whatsapp (WABA)

События в Tilda

Нажмите на название события, чтобы посмотреть доступные поля.

Документация по API — здесь.

1. Заявка с формы

Описание

Доступные поля

Id	Название
formid	formid
tranid	tranid
name	name
phone	phone
email	email
comments	comments
utm_source	utm_source
utm_medium	utm_medium
utm_campaign	utm_campaign
utm_content	utm_content
utm_term	utm_term
COOKIES._ga	COOKIES._ga
COOKIES._gid	COOKIES._gid
COOKIES._ym_uid	COOKIES._ym_uid
COOKIES._fbp	COOKIES._fbp
COOKIES.marker_id	COOKIES.marker_id
COOKIES.previousUrl	COOKIES.previousUrl

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

2. Платеж

Описание

Доступные поля

Id	Название
name	Имя
email	Email
phone	Телефон
payment.sys	Платежный сервис
payment.systranid	ID транзакции
payment.orderid	ID заказа
payment.products	Продукты
payment.amount	Сумма
COOKIES	Cookies
formid	ID формы
formname	Имя формы
utm_source	utm_source
utm_medium	utm_medium
utm_campaign	utm_campaign
utm_content	utm_content
utm_term	utm_term
COOKIES._ga	COOKIES._ga
COOKIES._gid	COOKIES._gid
COOKIES._ym_uid	COOKIES._ym_uid
COOKIES._fbp	COOKIES._fbp
COOKIES.marker_id	COOKIES.marker_id

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

Если вы не нашли нужное событие, но в сервисе есть нужный вебхук, то используйте универсальный коннектор «Входящий вебхук». Можно будет завязать логику связок на любое поле, приходящее в вебхуке.

Действия в Whatsapp (WABA)

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

Документация по API — здесь.

Действий нет, попробуйте поменять местами сервисы.

Кейсы

Все кейсы можно реализовать самостоятельно или воспользоваться настройкой под ключ.

Автоматизация маркетинга и аналитики застройщика, 1000 заявок в день, 130 связок

Автоматизация передачи заказов из OZON в CDEK

Как мы загрузили 1 653 109 конверсий в Яндекс Метрику

Узнаем источник заявок через WhatsApp

Выгрузка расходов из Яндекс Директ в Clickhouse

Передача заявок и продаж из CRM в Яндекс Метрику и Google Analytics 4

Прием платежей из точки

Расшифровка звонков через Yandex SpeechKit

Передача заказов из Tilda в IIKO

Выгрузка расходов и любых данных в Google Sheets

Загрузка конверсий из GetCourse в Яндекс метрику

Отправка уведомлений в Whatsapp и Telegram

Смотрите кейсы на нашем канале

Не хватает возможностей?

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

Также можете написать нам в чат в телеграме.

План настройки интеграции Tilda с Whatsapp (WABA)

1	Настроить подключение для Tilda в ApiMonster.
2	Настроить вебхук в Tilda, указав ссылку из ApiMonster.
3	Настроить подключение для Whatsapp (WABA) в ApiMonster, указав логин/пароль/токен для доступа к апи.
4	Создать связку.
5	Указать в качестве источника данных Tilda.
6	Создать требуемое действие для Whatsapp (WABA), указав в какие поля Whatsapp (WABA) передавать значения полей из Tilda.
7	Настроить фильтры для каждого шага при необходимости.
8	Протестировать связки и убедиться что они работают согласно ТЗ.

Пример типовой настройки, посмотрите видео

Или пройдите полный курс по Apimonster.

Тарифы

Даем 30 дней на тест, что бы могли оценить стоимость сервиса под ваши задачи.
Наши тарифы одни из самых выгодных на рынке, мы посчитали.
Кешбэк до 25% при оплате за несколько месяцев.

Тариф 2

990 ₽. / мес.

• 1 200 транзакций / мес.
  Примерно 400 заказов/заявок
  в мес., зависит от сложности связок.
• 12 000 вебхуков / мес.
• 4 дней — срок хранения истории вебхуков
• До 5 входящих вебхуков / сек.
• Неограниченное число подключений на каждый сервис
• Бесплатная настройка
  под ключ
• Период парсинга Ozon/Wildberries/Kaspi: 5 дн.

Тариф 3

1 990 ₽. / мес.

• 5 000 транзакций / мес.
  Примерно 1667 заказов/заявок
  в мес., зависит от сложности связок.
• 50 000 вебхуков / мес.
• 7 дней — срок хранения истории вебхуков
• До 30 входящих вебхуков / сек.
• Неограниченное число подключений на каждый сервис
• Бесплатная настройка
  под ключ
• Период парсинга Ozon/Wildberries/Kaspi: 14 дн.

Тариф 4

2 990 ₽. / мес.

• 10 000 транзакций / мес.
  Примерно 3333 заказов/заявок
  в мес., зависит от сложности связок.
• 100 000 вебхуков / мес.
• 14 дней — срок хранения истории вебхуков
• До 50 входящих вебхуков / сек.
• Неограниченное число подключений на каждый сервис
• Бесплатная настройка
  под ключ
• Период парсинга Ozon/Wildberries/Kaspi: 21 дн.

Тариф 5

6 990 ₽. / мес.

• 50 000 транзакций / мес.
  Примерно 16667 заказов/заявок
  в мес., зависит от сложности связок.
• 500 000 вебхуков / мес.
• 21 дней — срок хранения истории вебхуков
• До 70 входящих вебхуков / сек.
• Неограниченное число подключений на каждый сервис
• Бесплатная настройка
  под ключ
• Период парсинга Ozon/Wildberries/Kaspi: 30 дн.

Кешбэк

Оплачивайте сервис на несколько месяцев и получайте кешбэк на баланс до 25%.

Сумма платежа	10 000 ₽	20 000 ₽	30 000 ₽	40 000 ₽	50 000 ₽
Кешбэк	5 %	10 %	15 %	20 %	25 %
Выгода	+ 500 ₽	+ 2 000 ₽	+ 4 500 ₽	+ 8 000 ₽	+ 12 500 ₽
Итоговая сумма на балансе сервиса	+ 10 500 ₽	+ 22 000 ₽	+ 34 500 ₽	+ 48 000 ₽	+ 62 500 ₽

FAQ

Что такое вебхук?
Любой входящий в ApiMonster get/post http запрос. Например уведомление из AmoCRM о создании новой сделки.

Что такое транзакция?
Это любой исходящий вебхук (запрос в api): отправить конверсию, создать/найти сделку/контакт/задачу и тд.

Сколько нужно транзакций?
Умножьте количество заявок в месяц на 3-4. Например, если заявок 100, то транзакций будет около 300-400 — создать сделки, отправить конверсии, уведомления. Для персонального расчета тарифа воспользуйтесь калькулятором.

Сколько нужно входящих вебхуков в месяц?
Обычно в 2-5 раз больше количества транзакций. Данное ограничение введено для уменьшения нагрузки от проектов с аномальным количеством вебхуков, создающих лишнюю нагрузку. Если вы не отправляете по 10 вебхуков в секунду, то для вас скорее всего ограничение не актуально.

Что такое срок хранения истории вебхуков?
История вебхуков нужна на случай если вы найдете ошибки в связке и захотите посмотреть что пришло в вебхуке для отладки. Содержимое вебхуков может требовать много ресурсов для хранения, поэтому введено ограничение. На работу связок данный параметр не влияет.

Для настройки связок достаточно 1-3 дней.

Сколько нужно входящих вебхуков в секунду?
Обычно входящий вебхук — это создание или обновление заявки. Данное событие редко происходит чаще 1 раза в секунду, поэтому лимита в 5-30 вебхуков в секунду более чем достаточно.

Смотрите кейсы на нашем канале

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