Blogger sitenize gelen ziyaretçiler bir ürün hakkında soru sormak istediğinde ne yapıyorlar? Büyük ihtimalle iletişim formunu dolduruyorlar ya da e-posta gönderiyorlar. Sonra saatlerce, hatta günlerce cevap bekliyorlar. WhatsApp destek butonu, bu sorunu kökten çözen harika bir araç. Bu rehberde, Blogger (BlogSpot) sitenize WhatsApp sohbet butonu eklemeyi adım adım öğreneceksiniz.
Daha önce WordPress’e WhatsApp destek butonu ekleme işlemini adım adım anlatmıştık. Bu yazımızdan sonra birçok Blogger kullanıcısından da benzer talepler gelmeye başladı. Biz de sizi yanıtsız bırakmak istemedik ve “Blogger’a WhatsApp canlı destek butonu nasıl eklenir?” sorusunun cevabını bu rehberde detaylıca ele aldık.
Blogger’a WhatsApp Destek Butonu Ekleme
Aşağıdaki adımları takip ederek, sitenize ziyaretçilerle anında iletişime geçebileceğiniz pratik bir WhatsApp sohbet butonu ekleyebilirsiniz. Üstelik teknik bilginiz olmasa bile adımları uygulamak oldukça kolay!
- Öncelikle Blogger kontrol paneline gidin ve menüden Tema seçeneğini tıklayın.
- Özelleştirme seçeneğinin altındaki ‘HTML’yi düzenle‘ye tıklayın.
- HTML kod sayfasının içinde herhangi bir boş yere tıklayıp ctrl+F tuşlarına birlikte basın, böylece arama kutusu açılacak.
- Arama kutusuna </body> yazın ve Enter’a tıklayın. Aradığınız </body> etiketi sarı renkte vurgulanacaktır.
- Şimdi aşağıdaki kodu </body> etiketinin üst kısmına yapıştırın ve değişiklikleri kaydedin:
<div id="whatsapp-widget" class="ww-right ww-normal ww-yes">
<a target="_blank" href="https://wa.me/905555555555/" 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/905555555555/">
<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>
- Kodu ekledikten sonra kod içerisinde vurgulanan kısımları düzenlemeyi unutmayın (telefon numaranız ve harekete geçirici mesajınız).
- Blogger WhatsApp canlı sohbet butonu ekleme işleminin ardından butonunuz şu şekilde görünecek:
Blogger’a WhatsApp canlı destek düğmesi eklemek için ayrıca buradaki ücretsiz hizmetten de faydalanabilirsiniz. Üstelik sadece WhatsApp değil, aynı zamanda Messenger ve diğer farklı canlı iletişim seçenekleri de mevcut. Sadece form alanlarını doldurarak otomatik kod oluşturup bu kodu </body> etiketinin üzerine yapıştırmanız yeterli olacaktır.
Blogger’a WhatsApp destek/sobhbet butonu ekledikten sonra sosyal medya hesaplarınızdan ve diğer iletişim kanallarınızdan duyurun. “Artık WhatsApp’tan da bize ulaşabilirsiniz!” mesajı vererek kullanıcıları teşvik edin. İlk hafta özel bir WhatsApp kampanyası da düzenleyebilirsiniz.
