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
JavaScript’te Asenkron Programlama Nedir?

JavaScript

JavaScript, web uygulamalarının en yaygın kullanılan programlama dillerinden biridir. Ancak, web uygulama geliştiricileri genellikle JavaScript'teki ..

Devamını Oku
Blog Resim
JavaScript Büyük & Küçük Harf Dönüşümü

JavaScript

Türkçe karşılığı "büyük ve küçük harflere dönüştürme" olan ".toUpperCase()" ".toLowerCase()" fonksiyonları, JavaScript'te string (metin) veri tipinde..

Devamını Oku
Blog Resim
Load-More Butonu Yapımı ve SEO Bakımından Önemi

JavaScript

Load more buttonu, bir web sitesinde belirli bir sayfada yer alan içeriğin sınırsız bir şekilde yüklenmesini sağlayan bir butondur. Bu buton, kullanıcıların...

Devamını Oku
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