Можно попробовать использовать следующий код:
```
* {
box-sizing: border-box;
}
#chat-toggle {
position: fixed;
bottom: 20px;
right: 20px;
border: none;
background-color: #008CBA;
color: #fff;
padding: 10px;
border-radius: 50%;
cursor: pointer;
z-index: 9999;
}
#chat-toggle i {
font-size: 20px;
}
.chat-dropdown {
position: fixed;
bottom: 60px;
right: 20px;
width: 250px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
padding: 10px;
display: none;
z-index: 9999;
}
.chat-dropdown i {
font-size: 30px;
margin-right: 10px;
color: #008CBA;
}
.chat-dropdown a {
display: block;
margin-bottom: 10px;
font-size: 16px;
color: #333;
text-decoration: none;
}
.chat-dropdown a:hover {
color: #008CBA;
}
.show {
display: block;
}
```
```
<button id="chat-toggle"><i class="fa fa-comment"></i></button>
<div class="chat-dropdown">
<a href="#"><i class="fa fa-whatsapp"></i> WhatsApp</a>
<a href="#"><i class="fa fa-telegram"></i> Telegram</a>
<a href="#"><i class="fa fa-viber"></i> Viber</a>
</div>
<script src="
Для просмотра ссылки Войди или Зарегистрируйся"></script>
<script>
var chatToggle = document.getElementById('chat-toggle');
var chatDropdown = document.querySelector('.chat-dropdown');
chatToggle.onclick = function() {
chatDropdown.classList.toggle('show');
}
</script>
```
В этом коде мы используем CSS для создания кнопки и выпадающего списка мессенджеров. JavaScript добавляет действие, которое отображает или скрывает выпадающий список при клике на кнопку. Один из способов изменения иконок - использовать шрифтовые иконки, например, Font Awesome. В этом примере я использовал их. Чтобы изменить иконку, нужно добавить соответствующий класс в тег иконки, например, class="fa fa-whatsapp" для иконки WhatsApp. Вы можете добавить другие мессенджеры в список, просто добавив новые элементы ссылок с соответствующими иконками.
