Кнопка Max для сайта с анимацией

В этом уроке мы сделаем кнопу для мессенджера Max на сайт, которая переадрессовывает на чат. Также мы добавим ей небольшую анимацию для привлечения большего внимания. Данный способ можно использовать на любых типах сайтов, в том числе WordPress и Tilda.

Ссылка для перехода в мессенджер Max

Для начала нам необходимо получить ссылку на свой профиль в мессенджере. Делается это очень просто. Заходим в приложение Max, далее переходим в профиль (настройки) и там увидим вкладку "Пригласить друзей". Жмём на неё и отправляем приглашение себе на почту, Telegram или WhatsApp. (В ПК версии у вас сразу скопируется ссылка в буфер). После этого вы получите ссылку на свой профиль.

Выглядит она вот так:

Я пользуюсь мессенджером MAX. Присоединяйся! https://max.ru/u/f9LHodD0cOLc-5LY0oK6NjZhvKVQJMeV1nLZkE-KGg8OPVItshG1_-bTTiY

Теперь берём нашу ссылку на профиль и делаем из неё ссылку для сайта.

HTML код для вставки на сайт:

<a href=" https://max.ru/u/ваш_профиль" target="_blank" title="Написать в Max" rel="noopener noreferrer"></a>

Этот код является обычной внешней ссылкой, при клике на которую вы попадёте в чат Max. С помощью стилей и анимаций эту ссылку можно преобразовать в красивую фиксированную кнопку, чем мы и займёмся далее.

Фиксированная кнопка Max в углу экрана с анимацией

Для создания нашей кнопки, нам потребуется SVG изображение логотипа Max и ссылка на свой профиль.

SVG иконку можете найти в интернете, либо скачать с нашего сайта ниже ↓↓↓

HTML код:

<a href=" https://max.ru/u/ваш_профиль" target="_blank" title="Написать в Max" rel="noopener noreferrer">
  <div class="max-button">
    <img src="/uploads/max-logo.svg" alt="Max">
  </div>
</a>

Ссылки на профиль и иконку не забываем поменять на свои!

CSS код:

.max-button {
    position: fixed;
    right: 20px;
    bottom: 90px;
    transform: translate(-50%, -50%);
    background: #07F; /* Официальный цвет Max */
    border-radius: 50%;
    width: 55px;
    height: 55px;
    color: #fff;
    text-align: center;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.max-button:before,
.max-button:after {
    content: " ";
    display: block;
    position: absolute;
    border: 50%;
    border: 1px solid #07F; /* Цвет анимированных волн Max */
    left: -20px;
    right: -20px;
    top: -20px;
    bottom: -20px;
    border-radius: 50%;
    animation: animate 1.5s linear infinite;
    opacity: 0;
    backface-visibility: hidden; 
}

.max-button:after {
    animation-delay: .5s;
}

@keyframes animate
{
    0%
    {
        transform: scale(0.5);
        opacity: 0;
    }
    50%
    {
        opacity: 1;
    }
    100%
    {
        transform: scale(1.2);
        opacity: 0;
    }
}

/* Стили для иконок через img */
.max-button img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    filter: brightness(0) invert(1); /* Делает иконку белой */
}

CSS для мобильной версии сайта:

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

@media (max-width : 800px) {  
.max-button {   
    bottom: 50px; /*отступ кнопки снизу от экрана*/
    left: 70px; /*отступ кнопки слева от экрана(right - справа)*/
  }
}

Установка HTML кнопки на WordPress

В административной панели WordPress заходим в раздел "внешний вид/редактор тем". Далее, в зависимости от вашей темы, ищем нужные файлы и добавляем туда код. Код HTML обычно вставляется в файл footer.php (перед закрывающим тегом </body>), а код CSS в конец файла style.css.

Чтобы данные правки не слетели после очередного обновления темы, необходимо установить дочернюю тему.

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

Плагин кнопки MAX для WordPress

Я создал два плагина:

1) Первый - узконаправленный, создан конкетно для мессенджера Max. Это фиксированная кнопка в углу экрана с логотипом Макс.

Ссылка на плагин Кнопка Max для WordPress

2) Второй - универсальный. Это мультикнопка, с помощью которой можно добавить любое количество контактов. При нажатии на кнопку появляются дополнительные всплывающие кнопки с необходимыми ссылками на мессенджеры и соцсети.

Ссылка на плагин Multibutton Fixed