1. Anasayfa
  2. Eğitim

Siteye Hemen Ara ve Whatsapp Butonu Ekleme

Siteye Hemen Ara ve Whatsapp Butonu Ekleme
Siteye Hemen Ara ve Whatsapp Butonu Ekleme
2

Siteye Hemen Ara ve Whatsapp Butonu Ekleme

Siteye Hemen Ara ve Whatsapp Butonu Ekleme “Hemen Ara” ve “WhatsApp” butonları eklemek, kullanıcı deneyimini geliştirmenin ve müşteri etkileşimini artırmanın etkili yollarından biridir. Bu butonlar, ziyaretçilere iletişim kurma ve hızlı yanıt alma fırsatı sunar. İşte bu butonları web sitenize nasıl ekleyebileceğiniz hakkında bazı bilgiler:

Hemen Ara Butonu:

  1. Eklenti Kullanımı: WordPress gibi içerik yönetim sistemlerinde, “Hemen Ara” butonunu eklemek için birçok ücretsiz ve premium eklenti bulunur. Bu eklentiler sayesinde butonu hızla ekleyebilir ve gerektiğinde özelleştirebilirsiniz.
  2. HTML ve CSS: Hemen Ara butonunu manuel olarak eklemeyi tercih edebilirsiniz, HTML ve CSS bilginiz olmalıdır. HTML ile bir düğme oluşturun ve ardından CSS ile stil verin.
  3. Cep Telefonu Linki: Hemen Ara butonunuza tıkladığında telefon aramasını başlatması için bir “tel” bağlantısı ekleyin. Örneğin: <a href="tel:+1234567890">Hemen Ara</a> Aşağıdaki Yerleri Kendi numaranız ile değiştiriniz!

WhatsApp Butonu:

  1. WhatsApp Business: Eğer bir işletme olarak WhatsApp kullanıyorsanız, WhatsApp Business hesabı oluşturun. Ardından, resmi bir WhatsApp butonu almak için WhatsApp Business araçlarını kullanabilirsiniz.
  2. Eklenti veya Widget: WordPress gibi platformlarda, WhatsApp butonunu eklemek için çeşitli eklentiler veya widget’lar bulunur. Bu eklentileri yükleyin ve ayarlarınızı yapılandırın.
  3. Bağlantı Oluşturma: WhatsApp butonunuzu manuel olarak eklemek istiyorsanız, bir bağlantı oluşturabilirsiniz. WhatsApp numaranızı, ülke koduyla birlikte kullanarak bu bağlantıyı oluşturun: https://api.whatsapp.com/send?phone=+1234567890 Aşağıdaki Yerleri Kendi numaranız ile değiştiriniz!

Sitenize eklemeniz gereken Bootstrap Kodu;

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.2.1/dist/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.2.1/dist/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

Sitenize eklemeniz gereken CSS Kodu;

.btn-get-started {
  font-family: "Poppins", sans-serif;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 10px 28px;
  border-radius: 4px;
  transition: 0.5s;
  color: #fff;
  background: #106eea;
}

.btn-get-started:hover {
  background: #247cf0;
}

.iletisimbutonlari {
  position: fixed;
  width: 100%;
  z-index: 999;
  bottom: 0px;
  left: 0px;
}

.iletisimbutonlari a.btn {
  width: 100%;
}

Sitenize eklemeniz gereken HTML Kodu;

<div class="iletisimbutonlari btn-group d-flex justify-content-between d-md-none" role="group" aria-label="...">
    <a title="xxx Firma - Telefon Numarası" href="tel:+905555555555" class="btn btn-primary ">
       <i class="icofont-ui-call"></i> <b> ŞİMDİ ARA</b>
    </a>
    <a title=" xxx Firma - Whatsapp" rel="nofollow" href="https://api.whatsapp.com/send?phone=+905555555555" target="_blank" class="btn btn-success ">
      <i class="icofont-brand-whatsapp"></i> Whatsapp
    </a>
</div>

Bu butonları eklerken dikkat etmeniz gereken bazı önemli noktalar:

  • Butonların web sitenizde belirgin ve kullanıcı dostu bir konumda olmasını sağlayın.
  • Mobil cihazlarda da düzgün çalışmasını sağlamak için butonların duyarlı (responsive) tasarlandığından emin olun.
  • Butonların metinleri ve renkleri, web sitenizin tasarımına uygun olmalıdır.

Hemen Ara” ve “WhatsApp” butonları eklemek, kullanıcılarınıza hızlı ve kolay bir iletişim seçeneği sunmanın yanı sıra müşteri memnuniyetini artırabilir. Bu butonlar, potansiyel müşterilerle daha etkili bir şekilde iletişim kurmanıza ve soruları hızla yanıtlamanıza yardımcı olabilir.

Sizlere Önerebileceğim Bir Kaç Makale;

WordPress Hemen ara ve Whatsapp Butonu Eklentisi;

Easy Sticky Buttons

Easy Sticky Buttons eklentisi ile sitenizin mobil görünümünün alt kısmına 1 ila 4 adet yapışkan buton ekleyebilirsiniz.

Easy Sticky Buttons Eklentisi Kurulumu

Aşağıdaki “Easy Sticky Buttons” Eklentisini Kuruyoruz.

Easy sticky buttons
Easy sticky buttons

Easy Sticky Buttons Eklentisi Ayarları

Daha sonrasında aşağıda bulunan resimdeki gibi ayarlarımızı yapıyoruz. resimdekilerin birebir aynısını yapın “Icon Direction” ve “link” kısmını düzgün ayarladığınızdan emin olun!

Easy sticky buttons ayarlar
Easy sticky buttons ayarlar

Easy Sticky Buttons Eklentisi Mobil Görünüm

En son ayarlamalarınız düzgün ise bu şekilde gözükecektir iyi kullanımlar. Herhangi bir hata ile karşılaşırsanız lütfen yorumlar kısmına yazmayı unutmayınız.

Easy sticky buttons mobil görünüm
Easy sticky buttons mobil görünüm

Denizli Seo Uzmanı

Seo’nu Önemi

WordPress Optimizasyonu ve Semantik Seo

Anahtar Kelime Araştırması: İçeriklerinizin Arama Motorlarında Daha İyi Sıralanması İçin İpuçları

Bu Yazıya Tepkiniz Ne Oldu?
  • 2
    be_endim
    Beğendim
  • 0
    alk_l_yorum
    Alkışlıyorum
  • 0
    e_lendim
    Eğlendim
  • 0
    d_nceliyim
    Düşünceliyim
  • 0
    _rendim
    İğrendim
  • 1
    _z_ld_m
    Üzüldüm
  • 0
    _ok_k_zd_m
    Çok Kızdım
İlginizi Çekebilir
Seo'nun önemi

Bültenimize Katılın

Hemen ücretsiz üye olun ve yeni güncellemelerden haberdar olan ilk kişi olun.

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir


Yorumlar (2)

  1. Merhabalar. wordpress eklentisini kurdum ve yerlerini değiştirmek istiyorum nasıl yapabilirim?

    • Merhaba ahmet. yazıda belirttiğim gibi “Icon Direction” ve “link” Kısmını resimde olan ayarlara göre yaparsanız sorununuz çözülecektir.

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir