JavaScript ile Web Sitenize WhatsApp Sabit İletişim Kodu

Blog Gönderisi Resmi

Hizmetlerimiz hakkında bilgi almak için tıklayın.

Günümüzde milyonlarca insan, anlık mesajlaşma uygulamaları aracılığıyla birbirleriyle iletişim kuruyor. Bunlardan en popüleri ise Whatsapp'tır. Peki ya siz, web sitenize eklediğiniz bir form aracılığıyla, Whatsapp üzerinden bir kişiyle iletişime geçebileceğinizi biliyor muydunuz? Bunu yapmanızın en kolay yolu, JavaScript kullanmaktır.

Aşağıda bulunan kodu HTML dosyanıza script olarak ekleyin, ardından kendinize göre düzenlemesini yapın ve yayınlayın.

Whatsapp Butonu otomatik olarak mobil uyumlu bir şekilde sağ altta görünecektir.


<script>
class LandbotWhatsAppBtn {
  constructor({ dialcode, phone, text }) {
    this.dialcode = dialcode;
    this.phone = phone;
    this.text = text;
  }

  renderButton() {
    let fontAwesome = document.createElement("script");
    fontAwesome.setAttribute(
      "src",
      "https://kit.fontawesome.com/2640aa91b4.js"
    );
    document.body.appendChild(fontAwesome);

    let roboto = document.createElement("link");
    roboto.setAttribute(
      "href",
      "https://fonts.googleapis.com/css?family=Roboto&display=swap"
    );
    roboto.setAttribute("rel", "stylesheet");
    document.body.appendChild(roboto);

    let styles = document.createElement("link");
    styles.setAttribute(
      "href",
      "https://enesalp.com.tr/css/whatsapp-button-widget.css"
    );
    styles.setAttribute("rel", "stylesheet");
    styles.setAttribute("type", "text/css");
    document.body.appendChild(styles);

    let root = document.createElement("div");
    root.className = "WhatsAppButton__root";
    root.setAttribute("style", "position: fixed; bottom: 10px; right: 20px;");
    document.body.appendChild(root);

    let button_root = document.createElement("a");
    button_root.setAttribute(
      "href",
      `https://api.whatsapp.com/send?phone=${this.dialcode}${this.phone}&text=${this.text}`
    );
    button_root.setAttribute("style", "text-decoration: none");
    button_root.setAttribute("target", "_blank");
    root.appendChild(button_root);

    let button = document.createElement("button");
    button.setAttribute("class", "landbot-whatsapp__button");
    button_root.appendChild(button);

    let whatsappIcon = document.createElement("i");
    whatsappIcon.setAttribute("class", "fab fa-whatsapp");
    whatsappIcon.setAttribute("style", "font-size: 24px; margin-right: 5px");
    button.appendChild(whatsappIcon);

    let button_text = document.createElement("p");
    button_text.setAttribute("style", "margin: 0");
    button_text.innerText = "Mesaj Gönder!";
    button.appendChild(button_text);

  }
}
var whatsAppBtn = new LandbotWhatsAppBtn({
  dialcode: "+90",
  phone: "Telefon Numaranız",
  text: "Size Ulaşacak Mesaj"
});
whatsAppBtn.renderButton();
</script>

Muhakkak Düzenlemeniz Gereken Alanlar


var whatsAppBtn = new LandbotWhatsAppBtn({
  dialcode: "+90",
  phone: "Telefon Numaranızı Girin (5421112233)",
  text: "Merhabalar!"
});
whatsAppBtn.renderButton();

Bu kodları kendinize göre düzenledikten sonra, HTML dosyanızın içerisine yerleştirdiğiniz anda kod otomatik olarak çalışacaktır. Herhangi bir HTML koduna ihtiyaç yoktur, script'i eklemeniz yeterlidir.

Sizin İçin Önerdiklerimiz

Blog Resim
Node.js'de Sunuculardan Alınan En Yaygın Hatalar ve Çözümleri

JavaScript

Node.js, etkileyici performansı ve esnekliği ile popüler bir sunucu tarafı JavaScript platformudur. Ancak, her teknoloji gibi, Node.js ile çalışırken de karşılaşılan hatalar olabilir.

Devamını Oku
Blog Resim
JavaScript Kütüphanelerinde En Çok Kullanılanlar

JavaScript

JavaScript, web geliştiricilerin en çok kullandığı programlama dillerinden biridir ve web sayfalarına etkileşimli özellikler eklemek için sık sık kullanılır.

Devamını Oku
Blog Resim
Vue.js'ye Başlamak ve Vue.JS Kurulumu

JavaScript

Vue.js son yıllarda popüler hale gelen JavaScript kütüphanesi ve framework'üdür. Özellikle Single Page Applications (SPA) oluşturma konusunda ..

Devamını Oku
Blog Resim
Web Sitenize WhatsApp Sabit İletişim Kodu

JavaScript

Günümüzde milyonlarca insan, anlık mesajlaşma uygulamaları aracılığıyla birbirleriyle iletişim kuruyor. Bunlardan en popüleri ise Whatsapp'tır. Peki ya..

Devamını Oku