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
Next.js Nedir? Avantaj ve Özellikleri Nelerdir?

JavaScript

Geliştiricilerin web uygulamalarını ve sitelerini oluştururken en çok tercih ettiği araçlardan biri olan Next.js, React teknolojisi..

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
Node.JS ile REST API Oluşturma

JavaScript

REST API'ler, web tabanlı uygulamaların temel taşlarındandır. Bu makalede, Node.js ve Express.js kullanarak temel bir REST API'nin nasıl oluşturulacağını göstereceğiz.

Devamını Oku