Плавающая кнопка обратной связи Telegram на WordPress

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

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

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

Шаг 1.

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

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

Шаг 2.

Код кнопки

В нашей реализации логотип Телеграм будет svg картинкой. Скачать ее можете по ссылке. Если используете на сайте иконочные шрифты (FontAwesome или др.), можете добавить иконку в виде символа. Иконка FontAwesome.

Если использовать svg иконку, код будет такой:

<a href="https://t.me/+79991234567" target="_blank" class="telegram-sticky" title="Напишите нам в Telegram">
    <span class="telegram-sticky-icon"><?php echo get_stylesheet_directory_uri() . '/images/telegram-logo.svg' ?></span>
</a>

SVG необходимо загрузить в папку /images вашей активной темы (дочерней темы).

Для FontAwesome код следующий:

<a href="https://t.me/+79991234567" target="_blank" class="telegram-sticky" title="Напишите нам в Telegram">
    <span class="telegram-sticky-icon"><i class="fa-brands fa-telegram"></i></span>
</a>

Значение атрибута href замените на ссылку, которую сгенерировали выше.

Шаг 3.

CSS стили

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

.telegram-sticky {
  position: fixed;
  right: 20px;
  bottom: 20px;
  background-color: #2aabee;
  height: 60px;
  width: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation-name: shake;
  animation-duration: 2600ms;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@media (min-width: 576px) {
  .telegram-sticky {
    height: 70px;
    width: 70px;
    right: 40px;
    bottom: 40px;
  }
}

.telegram-sticky:hover {
  background-color: #229ed9;
}

.telegram-sticky-icon {
  height: 45%;
  width: 45%;
  transform: translateX(-1px);
}

.telegram-sticky-icon img {
  height: 100%;
  width: 100%;
}

@keyframes shake {
  0%,
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }

  60% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  70%,
  80%,
  90% {
    -webkit-transform: translate3d(-6px, 0, 0);
    transform: translate3d(-6px, 0, 0);
  }

  75%,
  85%,
  95% {
    -webkit-transform: translate3d(6px, 0, 0);
    transform: translate3d(6px, 0, 0);
  }
}

Добавить этот код нужно в файл стилей вашей темы. Обычно это style.css в корне шаблона.

Шаг 4.

Добавление кнопки на сайт

Здесь нам понадобится код кнопки, который получился в шаге 2.

Код кнопки добавим в конец html кода сайта. Прям перед закрывающимся </body>. Для этого воспользуемся хуком wp_footer. На хук повесим функцию add_telegram_sticky_button.

<?php
add_action('wp_footer', 'add_telegram_sticky_button');

function add_telegram_sticky_button() { ?>
    <a href="https://t.me/+79991234567" target="_blank" class="telegram-sticky" title="Напишите нам в Telegram">
        <span class="telegram-sticky-icon"><?php echo get_stylesheet_directory_uri() . '/images/telegram-logo.svg' ?></span>
    </a>
<?php }

Код будет работать если в шаблоне вызвана функция wp_footer().

Этот PHP код добавляем в самый конец файла functions.php вашей темы. Сохраните все измененные файлы.

• Готово! Кнопка обратной связи телеграм добавлена на сайт.