Кнопка обратной связи Telegram на WordPress

от

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

В результате мы получим кнопку с логотипом Telegram, прикрепленную к правому нижнему углу экрана. При нажатии на эту кнопку пользователь будет перенаправлен в чат. Чтобы она привлекала внимание, мы добавим анимацию. Пример можно наблюдать в правом нижнем углу данной страницы. 👉

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

Теперь давайте перейдем к созданию кнопки. Для начала откройте файл footer.php вашей дочерней темы или используйте раздел «Дополнительные скрипты» в настройках вашей темы. Вставьте следующий HTML-код, заменив `ваш_телефонный_номер` на ваш номер, который будет использоваться для связи в Telegram:

<a href="https://t.me/ваш_телефонный_номер" class="telegram-button" target="_blank"><i class="fab fa-telegram-plane"></i></a>

Теперь добавим CSS для стилизации кнопки и анимации. Поместите следующий код в раздел «Дополнительные стили» вашей темы:

.telegram-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #0088cc;
    color: white;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    transition: background-color 0.3s;
}

.telegram-button:hover {
    background-color: #0077a8;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.telegram-button {
    animation: pulse 1.5s infinite;
}

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

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

Сначала необходимо создать ссылку для общения в Telegram. В данной ссылке должен присутствовать логин пользователя (либо его номер телефона), а также, при необходимости, текст сообщения. Сформировать ссылку можно при помощи специального генератора.

Ссылка на общение в Telegram имеет следующий формат: https://t.me/логин_пользователя для пользователей, которые имеют логин в системе, или https://telegram.me/номер_телефона в случае использования номера. Если вы хотите, чтобы при переходе по ссылке автоматически открывалось окно чата с предзаданным сообщением, добавьте текст сообщения к ссылке в формате: https://t.me/имя_пользователя?text=Ваш%20текст, где %20 обозначает пробел. Например, если вы хотите отправить сообщение «Привет!», ссылка будет выглядеть так: https://t.me/имя_пользователя?text=Привет!.

Обратите внимание, что форматирование текста необходимо осуществлять с использованием URL-кодирования, чтобы избежать ошибок. Это особенно актуально для символов, которые могут быть неправильно интерпретированы в URL.

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

Интеграция кнопки на сайт

Для начала добавьте специальный код в файл функций вашей темы. Это позволит вам добавить элемент генерации ссылки на популярный мессенджер на страницу. Пример кода:


function add_messaging_button() {
echo 'Напишите нам';
}
add_action('wp_footer', 'add_messaging_button');

Следующий шаг – настройка стилей для вашего нового элемента. Вы можете добавить CSS в раздел «Дополнительные стили» в настройках темы или в стиль вашего файла CSS. Пример стилей:


.messaging-button {
background-color: #0088cc;
color: white;
padding: 10px 20px;
text-decoration: none;
border-radius: 5px;
}

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

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

В случае необходимости дополните функционал, используя плагины. Это упростит процесс интеграции, а также обеспечит возможность настройки с помощью графического интерфейса. Например, плагин WP Social Chat позволит легко настроить взаимодействие с клиентами, предоставляя множество опций.

Оставьте комментарий