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 Fonksiyonları ve Örnekleri Nelerdir?

JavaScript

Günümüzün en popüler programlama dillerinden biri olan JavaScript, web sayfalarına dinamizm katarak kullanıcı deneyimini arttıran çeşitli..

Devamını Oku
Blog Resim
Node.js ile POST İsteği Gönderme ve İşleme

JavaScript

Node.js, sunucu tarafı işlemleri gerçekleştirmek için güçlü bir platformdur. Bu platformu kullanarak, web istemcilerinden gelen POST isteklerini işleyebilirsiniz. Bu makalede, Node.js kullanarak POST isteği gönderme ve alınan veriyi işleme adımlarını öğreneceğiz.

Devamını Oku
Blog Resim
JavaScript Nedir? Ne İçin Kullanılır?

JavaScript

JavaScript, web sitelerinde dinamik içerikler yaratmak ve etkileşimi arttırmak için kullanılan bir programlama dilidir. Başta tarayıcılar olmak üzere..

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