Теперь Кью работает в режиме чтения

Мы сохранили весь контент, но добавить что-то новое уже нельзя

Как в wordpress установить кнопку ватсап?

НастройкиУстановкаWordpress
Анонимный вопрос
WordPress
  · 853
Руководитель Digital-студии Маслоу. Графический дизайнер и разработчик сайтов со стажем...  · 5 нояб 2021  · maslows.ru
Если не знакомы с HTML и CSS, то можно воспользоваться любым бесплатным плагином для такой кнопки.
Вот простая кнопка: https://ru.wordpress.org/plugins/simple-chat-button/
Это уже более продвинутые чаты:
Если владеете HTML и CSS, то просто берете иконку кнопки, размещаете где то внизу сайта ближе к <body>
Ниже пример с таким результатом:
Тут почитайте сразу как сформировать ссылку на WhatsApp:
HTML:
<div class="wh-api">
    <div class="wh-fixed">
    <!-- Тут ниже вместо +7XXXXXXXXXX вставьте ваш телефон --!>
        <a href="[[https://wa.me/+7XXXXXXXXXX](https://wa.me/+7XXXXXXXXXX)]([https://wa.me/+7XXXXXXXXXX](https://wa.me/+7XXXXXXXXXX))>
            <button class="wh-ap-btn"></button>
        </a>
    </div>
</div>
CSS:
button.wh-ap-btn {
    outline: none;
    width:  60px;
    height:  60px;
    border:  0;
    background-color: #2ecc71;
    padding:  0;
    border-radius:  100%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    cursor:  pointer;
    transition:  opacity 0.3s, background 0.3s, box-shadow 0.3s;
}

button.wh-ap-btn::after {
    content: '';
    /* Тут ниже ссылка на вашу иконку */
    background-image: url('[[//www.freepngimg.com/thumb/whatsapp/77220-scalable-vector-graphics-logo-whatsapp-icon-thumb.png](//www.freepngimg.com/thumb/whatsapp/77220-scalable-vector-graphics-logo-whatsapp-icon-thumb.png)]([//www.freepngimg.com/thumb/whatsapp/77220-scalable-vector-graphics-logo-whatsapp-icon-thumb.png](//www.freepngimg.com/thumb/whatsapp/77220-scalable-vector-graphics-logo-whatsapp-icon-thumb.png))');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 48%;
    width:  100%;
    height:  100%;
    display:  block;
    opacity: 1;
}

button.wh-ap-btn:hover {
    opacity:  1;
    background-color: #20bf6b;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

.wh-api {
    position:  fixed;
    bottom:  0;
    left:  0;
}

.wh-fixed {
    margin-left:  15px;
    margin-bottom:  15px;
}

.wh-fixed>a {
    display:  block;
    text-decoration:  none;
}
button.wh-ap-btn::before {
    content: 'Написать в Whatsapp';
    display:  block;
    position:  absolute;
    margin-left: 70px;
    margin-top: 16px;
    height: 25px;
    background-color:  #333;
    color:  #fff;
    border-radius:  3px;
    width:  0;
    opacity:  0;
    padding:  0;
    transition: opacity 0.4s, width 0.4s, padding 0.5s;
    padding-top:  7px;
}

.wh-fixed>a:hover button.wh-ap-btn::before {
    opacity:  1;
    width:  auto;
    padding-top: 7px;
    padding-left: 10px;
    padding-right: 10px;
    width:  80px;
}