WhatsApp ile İletişime Geç HTML Kodu
Web sitelerinde WhatsApp'ın "Tıkla sohbet et" özelliğini kullanmak için basit bir kod eklemeniz yeterlidir. WhatsApp’ın tıkla sohbet et özelliği, telefon rehberinizde kayıtlı olmayan kişilerle sohbet başlatmanıza olanak verir. Tıkla sohbet et özelliği hem telefonunuzda hem de WhatsApp Web’de çalışır.
WhatsApp Bağlantı Linki
https://wa.me/905001234567
905001234567 : Telefon numarası. WhatsApp telefon numaraları 212, 216, 312 vb. şehirlerarası kodlar kullanılabilinir ama ülke kodunun başına + eklenerek kullanılamaz.
WhatsApp HTML Kodu
<a href="https://wa.me/905001234567" rel="nofollow" target="_blank"></a>
WhatsApp Resimli HTML Kodu
<a href="https://wa.me/905001234567" rel="nofollow" target="_blank"><img src="RESİM URL" /></a>
Sayfa Kenarında Kayan WhatsApp Resimli HTML Butonu Kodu
<a style="display:scroll;position:fixed;bottom:5px;left:5px;" href="https://wa.me/905001234567" rel="nofollow" target="_blank" title="WhatsApp"><img src="RESİM URL" /></a>
WhatsApp Animasyonlu Destek Butonu Kodu
<div id="whatsapp-widget" class="ww-right ww-normal ww-yes"> <a target="_blank" href="https://wa.me/905001234567/" class="ww-text">Nasıl yardımcı olabiliriz?<div class="ww-arrow"></div></a>
<div class="ww-icon">
<div>
<a class="ww-icon-link" target="_blank" href="https://wa.me/905001234567/">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<path d=" M19.11 17.205c-.372 0-1.088 1.39-1.518 1.39a.63.63 0 0 1-.315-.1c-.802-.402-1.504-.817-2.163-1.447-.545-.516-1.146-1.29-1.46-1.963a.426.426 0 0 1-.073-.215c0-.33.99-.945.99-1.49 0-.143-.73-2.09-.832-2.335-.143-.372-.214-.487-.6-.487-.187 0-.36-.043-.53-.043-.302 0-.53.115-.746.315-.688.645-1.032 1.318-1.06 2.264v.114c-.015.99.472 1.977 1.017 2.78 1.23 1.82 2.506 3.41 4.554 4.34.616.287 2.035.888 2.722.888.817 0 2.15-.515 2.478-1.318.13-.33.244-.73.244-1.088 0-.058 0-.144-.03-.215-.1-.172-2.434-1.39-2.678-1.39zm-2.908 7.593c-1.747 0-3.48-.53-4.942-1.49L7.793 24.41l1.132-3.337a8.955 8.955 0 0 1-1.72-5.272c0-4.955 4.04-8.995 8.997-8.995S25.2 10.845 25.2 15.8c0 4.958-4.04 8.998-8.998 8.998zm0-19.798c-5.96 0-10.8 4.842-10.8 10.8 0 1.964.53 3.898 1.546 5.574L5 27.176l5.974-1.92a10.807 10.807 0 0 0 16.03-9.455c0-5.958-4.842-10.8-10.802-10.8z" fill-rule="evenodd"></path>
</svg>
</a>
</div> </div> </div><style>
#whatsapp-widget {
position: fixed;
bottom: 20px;
height: max-content;
display: flex;
align-items: center;
gap: 20px;
z-index: 99999999;
visibility: hidden;
transition: all 2s ease 0s;
}
#whatsapp-widget.ww-yes {
visibility: visible;
}
#whatsapp-widget.ww-no {
visibility: hidden !important;
}
#whatsapp-widget .ww-icon {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
opacity: 0;
animation: grow 3s;
animation-delay: 1s;
animation-fill-mode: forwards;
}
#whatsapp-widget .ww-link {
opacity: 1;
display: block;
bottom: -15px;
text-align: center;
white-space: nowrap;
text-decoration: none;
width: 60px;
font-family: Roboto, "Helvetica Neue", sans-serif;
font-size: 11px;
line-height: 11px;
border: 0px;
max-width: inherit;
color: rgb(175, 175, 175) !important;
}
#whatsapp-widget .ww-link:hover {
border: 0px;
text-decoration: underline !important;
color: rgb(175, 175, 175) !important;
}
#whatsapp-widget .ww-text {
border-radius: 8px;
border: 1px solid #e2e2e2;
cursor: pointer;
word-break: break-word;
background: white;
padding: 1rem;
position: relative;
box-shadow: 2px 2px 15px 2px rgb(0 0 0 / 17%);
opacity: 0;
animation: slide 1s;
animation-delay: 3s;
animation-fill-mode: forwards;
margin-bottom: 15px;
z-index: 100;
}
#whatsapp-widget .ww-arrow {
position: absolute;
background: white;
border-right: 0.5px solid #e2e2e2;
border-bottom: 0.5px solid #e2e2e2;
top: 50%;
width: 20px;
height: 20px;
z-index: -100;
}
#whatsapp-widget.ww-right .ww-arrow {
transform: translateY(-50%) rotate(-45deg);
right: -11px;
left: unset;
}
#whatsapp-widget.ww-left .ww-arrow {
left: -11px;
right: unset;
transform: translateY(-50%) rotate(135deg);
}
#whatsapp-widget.ww-big .ww-text {
font-size: 23px;
line-height: 25px;
}
#whatsapp-widget.ww-medium .ww-text {
font-size: 20px;
line-height: 22px;
padding: 15px;
}
#whatsapp-widget.ww-normal .ww-text {
font-size: 17px;
padding: 12px;
line-height: 19px;
}
#whatsapp-widget svg {
fill: rgb(255, 255, 255);
z-index: 1;
border-radius: 50px;
cursor: pointer;
transition: transform 0.7s ease-in-out;
width: 100%;
height: 100%;
stroke: none;
}
#whatsapp-widget svg:hover {
transform: rotate(720deg);
}
#whatsapp-widget.ww-right .ww-text::after {
right: -10px;
transform: translateY(-50%) rotate(-45deg);
}
#whatsapp-widget.ww-left .ww-text::after {
left: -10px;
transform: translateY(-50%) rotate(135deg);
}
#whatsapp-widget.ww-left {
left: 20px;
flex-direction: row-reverse;
}
#whatsapp-widget.ww-right {
right: 20px;
flex-direction: row;
}
#whatsapp-widget .ww-icon-link {
padding: 5px;
box-sizing: border-box;
border-radius: 50%;
cursor: pointer;
overflow: hidden;
box-shadow: rgb(0 0 0 / 40%) 2px 2px 6px;
transition: all 0.5s ease 0s;
position: relative;
z-index: 200;
display: block;
border: 0px;
background: rgb(77, 194, 71) !important;
}
#whatsapp-widget.ww-normal .ww-icon-link {
width: 50px;
height: 50px;
}
#whatsapp-widget.ww-medium .ww-icon-link {
height: 65px;
width: 65px;
}
#whatsapp-widget.ww-big .ww-icon-link {
height: 75px;
width: 75px;
}
#whatsapp-widget .ww-icon div {
display: flex;
align-items: center;
justify-content: center;
}
@media (max-width: 768px) {
#whatsapp-widget {
bottom: 5px;
}
#whatsapp-widget .ww-text {
display: none;
}
#whatsapp-widget.ww-right {
right: 5px;
left: unset;
}
#whatsapp-widget.ww-left {
left: 5px;
right: unset;
}
}
@keyframes slide {
from {
bottom: -20px;
opacity: 0;
}
to {
bottom: 0px;
opacity: 1;
}
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes grow {
0% {
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
}
50% {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
}
100% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
</style>
Blogger WhatsApp İletişim Butonu Eklemek
Widget (gadget) olarak eklemek için :
Blogger > Düzen > Gadget ekle > HTML/JavaScript yolunu izleyerek istediğiniz yere ekleyebilirsiniz
Sayfa içinde kullanmak için :
Blogger > Yeni yayın oluştur > HTML yolunu izleyerek istediğiniz yere ekleyebilirsiniz.
Yorumlar
Yorum Gönder
🔺 YUKARI ÇIK 🔺