Ссылка на WhatsApp позволяет пользователю мгновенно начать диалог, минуя форму обратной связи или лишние клики. В Тильде это реализуется с помощью стандартного блока с кнопкой или текста с гиперссылкой. Главное – правильно сформировать URL-адрес.
Используйте формат ссылки: https://wa.me/номер_без_плюса. Например, https://wa.me/79991234567. Если необходимо добавить текст сообщения, добавьте параметр ?text= и укажите сообщение в URL-кодировке: https://wa.me/79991234567?text=Здравствуйте%2C%20хочу%20узнать%20подробнее.
В Тильде откройте нужную страницу, добавьте блок TX03 (текст) или BF703 (кнопка), затем вставьте сформированную ссылку в поле «Ссылка». Убедитесь, что включена опция «Открывать в новом окне», чтобы не прерывать навигацию по сайту.
Если вы используете UTM-метки для отслеживания источников переходов, добавьте их к ссылке, как и для любой рекламной кампании. Например: https://wa.me/79991234567?text=Здравствуйте&utm_source=site&utm_medium=button.
Как сгенерировать ссылку для открытия чата в WhatsApp
Чтобы создать ссылку, открывающую чат с конкретным номером в WhatsApp, используйте формат: https://wa.me/номер. Номер указывается без плюса, пробелов и символов. Пример: для номера +7 (900) 123-45-67 ссылка будет https://wa.me/79001234567.
Если необходимо сразу вставить текст сообщения, добавьте параметр ?text= и укажите текст в URL-кодировке. Пример: https://wa.me/79001234567?text=Здравствуйте%2C%20интересует%20услуга.
Для кодировки текста используйте онлайн-инструменты, поддерживающие URL encoding. Не вставляйте пробелы, кавычки и другие спецсимволы без кодировки, иначе ссылка не откроется корректно.
Проверьте ссылку вручную в браузере до размещения на сайте. Если чат открывается в мобильном приложении или в веб-версии WhatsApp, ссылка сгенерирована правильно.
Как вставить ссылку WhatsApp в текстовый блок Tilda
Откройте страницу в редакторе Tilda и выберите нужный текстовый блок. Щёлкните по тексту, в который необходимо вставить ссылку.
Выделите часть текста, которая будет ссылкой. В появившейся панели нажмите на значок цепочки для вставки ссылки.
В поле «Ссылка» введите URL формата: https://wa.me/79991234567, где 79991234567 – номер телефона в международном формате без плюса и пробелов. Для добавления текста сообщения используйте параметр ?text=, например: https://wa.me/79991234567?text=Здравствуйте, хочу заказать услугу.
Нажмите Enter или кнопку «Применить». Ссылка будет сохранена и активна сразу в режиме предпросмотра и после публикации страницы.
Проверьте, что номер телефона корректен и WhatsApp привязан к нему. Неверный формат приведёт к ошибке при переходе по ссылке.
Как добавить кнопку с переходом на WhatsApp
Откройте проект в Тильде и перейдите в нужную страницу. Нажмите «Контент» на блоке, где хотите разместить кнопку. Если подходящего блока нет, добавьте его через «+Блок» в категории «Кнопки» или «Другое».
В поле для ссылки вставьте следующий URL-формат:
https://wa.me/79991234567
Замените номер телефона на ваш, без плюса и пробелов. Для добавления текста сообщения используйте параметр ?text=:
https://wa.me/79991234567?text=Здравствуйте, хочу узнать подробнее
Текст должен быть закодирован для URL. Используйте онлайн-сервисы для кодировки (например, URL Encoder), чтобы преобразовать пробелы в %20 и кириллицу в соответствующий формат. Пример закодированной ссылки:
https://wa.me/79991234567?text=%D0%97%D0%B4%D1%80%D0%B0%D0%B2%D1%81%D1%82%D0%B2%D1%83%D0%B9%D1%82%D0%B5%2C%20%D1%85%D0%BE%D1%87%D1%83%20%D1%83%D0%B7%D0%BD%D0%B0%D1%82%D1%8C%20%D0%BF%D0%BE%D0%B4%D1%80%D0%BE%D0%B1%D0%BD%D0%B5%D0%B5
В настройках кнопки укажите открытие ссылки в новом окне, чтобы пользователь не покинул сайт:
| Тип действия | Ссылка |
| Ссылка | https://wa.me/79991234567?text=… |
| Открытие | В новом окне |
После внесения изменений сохраните блок и опубликуйте страницу. Проверьте корректность перехода с кнопки и отображение предварительного сообщения в WhatsApp.
Как настроить открытие ссылки WhatsApp в новой вкладке
Чтобы ссылка на WhatsApp открывалась в новой вкладке, при добавлении её в Тильду используйте атрибут target="_blank". Это нужно указать вручную в HTML-блоке или в настройках кнопки, если используется пользовательский код.
Формат ссылки: https://wa.me/79123456789 или с текстом сообщения: https://wa.me/79123456789?text=Здравствуйте, интересует информация.
Если вы вставляете ссылку через HTML-блок (Zero Block или HTML-код в стандартных блоках), используйте следующий синтаксис:
<a href="https://wa.me/79123456789" target="_blank" rel="noopener">Написать в WhatsApp</a>
Атрибут rel="noopener" предотвращает потенциальные уязвимости при открытии внешней ссылки в новой вкладке и рекомендуется к использованию вместе с target="_blank".
Если вы используете встроенную кнопку Тильды, активируйте опцию «Открывать в новой вкладке» в настройках кнопки. Для этого перейдите в блок, нажмите на кнопку, откройте вкладку «Ссылка» и включите переключатель «Новая вкладка».
Проверьте корректность ссылки после публикации страницы – ссылка должна открываться в новой вкладке без перезагрузки текущей.
Как вставить иконку WhatsApp рядом с текстом или кнопкой
Чтобы добавить иконку WhatsApp рядом с текстом или кнопкой в Тильде, выполните следующие шаги:
- Загрузите SVG-иконку WhatsApp. Рекомендуемый источник: Bootstrap Icons. Скачайте файл формата .svg.
- Вставьте иконку через блок «Т123 HTML» или «Т229 Кнопка с HTML». Используйте следующий код:
<a href="https://wa.me/79991234567" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16" style="vertical-align: middle; margin-right: 8px;">
<path d="..."/>
</svg>
Написать в WhatsApp
</a>- Замените
79991234567на свой номер в международном формате, без плюса и пробелов. - Содержимое тега
<path>скопируйте из SVG-файла и вставьте внутрь тега<svg>. - Чтобы иконка стояла слева от текста, используйте свойство
margin-right. Для правой стороны –margin-left.
Если используете кнопку Тильды, добавьте иконку в HTML-режиме внутри текста кнопки:
<button>
<svg ... style="vertical-align: middle; margin-right: 6px;">...</svg>
Связаться
</button>- Для сохранения выравнивания по центру используйте
vertical-align: middle. - Размер иконки настраивается параметрами
widthиheight.
Как подключить WhatsApp-ссылку к форме заявки в Tilda
Для интеграции WhatsApp-ссылки с формой заявки на Tilda используйте встроенную настройку редиректа после отправки формы. В разделе «Форма» выберите нужный блок с формой и откройте настройки. В поле «После отправки» выберите пункт «Перейти по ссылке».
Вставьте в поле URL готовую ссылку WhatsApp в формате https://wa.me/номер_телефона или https://api.whatsapp.com/send?phone=номер_телефона&text=текст_сообщения. Номер телефона указывайте без знаков «+», пробелов и скобок, только цифры, включая код страны, например, 79161234567.
Если требуется автоматически передать данные из формы в сообщение WhatsApp, настройте JavaScript, который собирает значения полей формы и формирует ссылку с параметром text. В Tilda добавьте код в раздел «Дополнительный HTML» перед закрывающим тегом </body> или используйте блок с кастомным кодом.
Пример простого скрипта для передачи имени и телефона из формы с id form1:
document.getElementById('form1').addEventListener('submit', function(e) {
e.preventDefault();
let name = this.querySelector('[name="name"]').value;
let phone = this.querySelector('[name="phone"]').value;
let message = encodeURIComponent(`Имя: ${name}%0AТелефон: ${phone}`);
window.location.href = `https://wa.me/79161234567?text=${message}`;
});
При таком подходе после заполнения и отправки формы пользователь сразу попадёт в чат WhatsApp с уже сформированным сообщением, что ускоряет коммуникацию и снижает риск ошибок при ручном вводе данных.
Как протестировать работу ссылки WhatsApp на опубликованной странице
Для проверки корректности ссылки WhatsApp на сайте, опубликованном в Тильде, выполните следующие шаги:
1. Откройте опубликованную страницу в браузере на устройстве, где установлен WhatsApp (мобильный телефон или компьютер с десктопным клиентом).
2. Нажмите на ссылку WhatsApp. Если всё настроено правильно, должно автоматически открыться окно чата с указанным номером телефона в приложении WhatsApp или в WhatsApp Web.
3. Проверьте формат номера. Он должен быть в международном формате без пробелов и спецсимволов, например: +71234567890. Номер указывается в параметре phone= ссылки (https://wa.me/71234567890).
4. Убедитесь, что сообщение в ссылке отображается корректно, если используется параметр text=. Текст должен быть URL-кодирован, например, Привет%20из%20Тильды.
5. Протестируйте ссылку на разных устройствах: на iOS и Android, а также на ПК с браузером, чтобы гарантировать универсальную работоспособность.
6. Используйте инструменты разработчика браузера для проверки, что при клике происходит переход именно по адресу WhatsApp, без ошибок редиректа или блокировок.
7. Если ссылка не работает, проверьте настройки блокировщика рекламы и антивируса – они могут мешать переходу на внешние приложения.
8. При использовании всплывающих окон или скриптов в Тильде убедитесь, что ссылка не блокируется JavaScript-ошибками.
Вопрос-ответ:
Как правильно вставить ссылку на WhatsApp в кнопку на Тильде?
Чтобы добавить ссылку на WhatsApp в кнопку на Тильде, необходимо создать кнопку через редактор сайта, выбрать тип «Ссылка» и указать в поле адреса формат ссылки: https://wa.me/номер_телефона без знаков «+» и пробелов. После этого сохраните изменения и проверьте работу кнопки на сайте.
Можно ли настроить автоматическое сообщение, которое отправится при клике на ссылку WhatsApp в Тильде?
Да, можно. Для этого в ссылке нужно добавить параметр text. Например, ссылка будет выглядеть так: https://wa.me/номер_телефона?text=Текст%20сообщения. Важно заменить пробелы на %20 или использовать кодировку URL. Тогда при переходе по ссылке в окне WhatsApp автоматически откроется чат с указанным текстом.
Что делать, если ссылка на WhatsApp в Тильде не открывается на мобильных устройствах?
Чаще всего проблема связана с неверным форматом ссылки или настройками браузера. Убедитесь, что ссылка записана как https://wa.me/номер_телефона без лишних символов. Также проверьте, установлен ли на устройстве сам WhatsApp. Если проблема сохраняется, попробуйте очистить кэш браузера или протестировать на другом устройстве.
Можно ли добавить ссылку на WhatsApp в Тильде так, чтобы она открывалась в новом окне?
В стандартных настройках Тильды ссылка на кнопку открывается в том же окне. Чтобы ссылка на WhatsApp открывалась в новой вкладке, нужно использовать HTML-блок с ручным добавлением кода, где прописать атрибут target=»_blank». Это позволит избежать перехода с текущей страницы.
Как проверить, что ссылка на WhatsApp в Тильде правильно работает после публикации сайта?
После публикации сайта рекомендуется перейти на страницу с кнопкой и нажать на неё с разных устройств — компьютера и телефона. Ссылка должна перенаправлять в чат WhatsApp с вашим номером телефона. Если используется автоматическое сообщение, оно должно автоматически появляться в поле для текста. Также можно проверить URL вручную, убедившись, что он соответствует формату https://wa.me/номер_телефона.
Загрузка...
