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 Web Uygulama Güvenliği

JavaScript

Günümüzün hemen hemen her işletmesi, her kurumu bir şekilde web uygulamaları kullanmaktadır. Bu web uygulamalarının hızlı, etkili ve güvenilir..

Devamını Oku
Blog Resim
JavaScript'te Eleman Seçimi: getElementById, querySelector ve querySelectorAll

JavaScript

Şimdiki yazımızda getElementById,querySelector ve querySelectorAll elemanlarının ne işe yaradığını öğreneceğiz ve bir kaç örnek göstereceğiz.

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
JavaScript Nesne Yönelimli Programlama Nedir?

JavaScript

Günümüzde web geliştirme için JavaScript oldukça yaygın kullanılan bir dildir. Bu dili kullanırken nesne yönelimli programlama (OOP) prensiplerini..

Devamını Oku