Код в конце стати. Подходит для любой платформы!
Тильда
Тильда — это конструктор сайтов, который позволяет легко создавать и редактировать веб-страницы без знания кода. Чтобы добавить кнопку звонка в Тильде:
- Добавьте на страницу блок Т123 — HTML код.
- Добавьте код в блок и замените номер телефона на свой или на любую ссылку, например на попап окно.
WordPress
Для добавления своего кода перед закрывающим тегом </body> в WordPress можно использовать следующие плагины:
- Clearfy Pro — мощный плагин для WordPress.
- Simple Custom CSS and JS.
Расскажу как добавить свой код на примере плагина Clearfy Pro.
- В меню в админ панели выбрать Clearfy Pro.
- В открывшемся окне найти вкладку КОД.
- Спускаемся в самый низ списка настроек и выбираем Код перед </body>. Включаем код.
- Добавляем код и меняем в нем номер телефона на свой или можно заменить на любую ссылку, например на попап окно.
Сайт на HTML
Если вы предпочитаете вручную редактировать код сайта, вы можете добавить кнопку звонка с помощью HTML и CSS. Просто добавьте код перед закрывающим тегом </body>.
<!-- В этом месте замени номер телефона или добавь ссылку на форму -->
<a href="tel:+70000000000" rel="nofollow" class="btn-call">
<svg class="btn-call__ico" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M39.0312 47.0001C39.0156 47.0001 39 47.0001 38.9844 47.0001C31.4687 46.754 22.6641 39.4689 16.5977 33.3986C10.5234 27.3282 3.23828 18.5196 3.0039 11.0392C2.91797 8.41418 9.35937 3.74621 9.42578 3.69933C11.0977 2.53527 12.9531 2.94933 13.7148 4.00402C14.2305 4.71886 19.1133 12.1173 19.6445 12.9571C20.1953 13.8282 20.1133 15.1251 19.4258 16.4259C19.0469 17.1486 17.7891 19.3595 17.1992 20.3907C17.8359 21.297 19.5195 23.5196 22.9961 26.9962C26.4766 30.4728 28.6953 32.1603 29.6055 32.797C30.6367 32.2071 32.8477 30.9493 33.5703 30.5704C34.8516 29.8907 36.1406 29.8048 37.0195 30.3439C37.918 30.8946 45.2969 35.8009 45.9766 36.2736C46.5469 36.6759 46.9141 37.3634 46.9883 38.1642C47.0586 38.9728 46.8086 39.8282 46.2891 40.5743C46.2461 40.6368 41.6328 47.0001 39.0312 47.0001Z" fill="white"/>
</svg>
</a>
<style>
/* В этом месте нужно заменить код цвета кнопки на свой используя rgb код */
:root {
--btn-call-shadow-color: 0, 202, 85;
}
.btn-call {
text-decoration: none;
color: inherit;
}
.btn-call {
background: rgba(var(--btn-call-shadow-color), 1);
border: 2px solid rgba(var(--btn-call-shadow-color), 1);
border-radius: 50%;
box-shadow: 0 8px 10px rgba(var(--btn-call-shadow-color), 0.3);
cursor: pointer;
height: 60px;
width: 60px;
text-align: center;
position: fixed;
right: 50px;
bottom: 50px;
z-index: 999;
transition: 0.3s;
-webkit-animation: hoverWave linear 5s infinite;
animation: hoverWave linear 5s infinite;
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
}
.btn-call__ico {
display: flex;
justify-content: center;
align-items: center;
animation: 7200ms ease 0s normal none 1 running shake;
animation-iteration-count: infinite;
-webkit-animation: 7200ms ease 0s normal none 1 running shake;
-webkit-animation-iteration-count: infinite;
color: white;
padding-top: 0px;
transition: 0.3s all;
width: 60%;
height: 60%;
}
@-webkit-keyframes hoverWave {
0% {
box-shadow: 0 8px 10px rgba(var(--btn-call-shadow-color), 0.3),
0 0 0 0 rgba(var(--btn-call-shadow-color), 0.2), 0 0 0 0 rgba(var(--btn-call-shadow-color), 0.2);
}
40% {
box-shadow: 0 8px 10px rgba(var(--btn-call-shadow-color), 0.3),
0 0 0 15px rgba(var(--btn-call-shadow-color), 0.2), 0 0 0 0 rgba(var(--btn-call-shadow-color), 0.2);
}
80% {
box-shadow: 0 8px 10px rgba(var(--btn-call-shadow-color), 0.3),
0 0 0 30px rgba(var(--btn-call-shadow-color), 0), 0 0 0 26.7px rgba(var(--btn-call-shadow-color), 0.067);
}
100% {
box-shadow: 0 8px 10px rgba(var(--btn-call-shadow-color), 0.3),
0 0 0 30px rgba(var(--btn-call-shadow-color), 0), 0 0 0 40px rgba(var(--btn-call-shadow-color), 0);
}
}
@keyframes hoverWave {
0% {
box-shadow: 0 8px 10px rgba(var(--btn-call-shadow-color), 0.3),
0 0 0 0 rgba(var(--btn-call-shadow-color), 0.2), 0 0 0 0 rgba(var(--btn-call-shadow-color), 0.2);
}
40% {
box-shadow: 0 8px 10px rgba(var(--btn-call-shadow-color), 0.3),
0 0 0 15px rgba(var(--btn-call-shadow-color), 0.2), 0 0 0 0 rgba(var(--btn-call-shadow-color), 0.2);
}
80% {
box-shadow: 0 8px 10px rgba(var(--btn-call-shadow-color), 0.3),
0 0 0 30px rgba(var(--btn-call-shadow-color), 0), 0 0 0 26.7px rgba(var(--btn-call-shadow-color), 0.067);
}
100% {
box-shadow: 0 8px 10px rgba(var(--btn-call-shadow-color), 0.3),
0 0 0 30px rgba(var(--btn-call-shadow-color), 0), 0 0 0 40px rgba(var(--btn-call-shadow-color), 0);
}
}
@keyframes shake {
0% {
transform: rotateZ(0deg);
-ms-transform: rotateZ(0deg);
-webkit-transform: rotateZ(0deg);
}
10% {
transform: rotateZ(-30deg);
-ms-transform: rotateZ(-30deg);
-webkit-transform: rotateZ(-30deg);
}
20% {
transform: rotateZ(15deg);
-ms-transform: rotateZ(15deg);
-webkit-transform: rotateZ(15deg);
}
30% {
transform: rotateZ(-10deg);
-ms-transform: rotateZ(-10deg);
-webkit-transform: rotateZ(-10deg);
}
40% {
transform: rotateZ(7.5deg);
-ms-transform: rotateZ(7.5deg);
-webkit-transform: rotateZ(7.5deg);
}
50% {
transform: rotateZ(-6deg);
-ms-transform: rotateZ(-6deg);
-webkit-transform: rotateZ(-6deg);
}
60% {
transform: rotateZ(5deg);
-ms-transform: rotateZ(5deg);
-webkit-transform: rotateZ(5deg);
}
70% {
transform: rotateZ(-4.28571deg);
-ms-transform: rotateZ(-4.28571deg);
-webkit-transform: rotateZ(-4.28571deg);
}
80% {
transform: rotateZ(3.75deg);
-ms-transform: rotateZ(3.75deg);
-webkit-transform: rotateZ(3.75deg);
}
90% {
transform: rotateZ(-3.33333deg);
-ms-transform: rotateZ(-3.33333deg);
-webkit-transform: rotateZ(-3.33333deg);
}
100% {
transform: rotateZ(0deg);
-ms-transform: rotateZ(0deg);
-webkit-transform: rotateZ(0deg);
}
}
@media screen and (max-width: 448px) {
.btn-call {
right: 20px;
bottom: 20px;
}
}
</style>
