WhatsApp Fixed Contact Code to Your Website with JavaScript

Blog Gönderisi Resmi

Click to get information about our services.

Today, millions of people communicate with each other through instant messaging applications. The most popular of these is Whatsapp. Well, did you know that you can contact a person via Whatsapp through a form you added to your website? The easiest way to do this is to use JavaScript.

Add the code below to your HTML file as script, then edit it as you wish and publish it.

Whatsapp Button will automatically appear at the bottom right in a mobile compatible manner.


<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>

Areas You Must Definitely Edit


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

After arranging these codes according to your needs, the code will run automatically as soon as you place it in your HTML file. There is no need for any HTML code, just add the script.

What We Recommend For You

Blog Resim
What is JavaScript Object Oriented Programming?

JavaScript

JavaScript is a widely used language for web development today. Applying object-oriented programming (OOP) principles while using this language ..

Read More
Blog Resim
Vue.JS Nedir? Nerelerde Kullanılır?

JavaScript

Vue.JS, açık kaynak bir JavaScript hızlı geliştirme uygulama çerçevesidir. Vue.JS, tek sayfalı uygulamalar (SPA) oluşturmak için kullanılabilecek ..

Read More
Blog Resim
Making Load-More Button and Its Importance in terms of SEO

JavaScript

The Load more button is a button that allows unlimited loading of content on a particular page on a website. This button provides a better user experience ..

Read More
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 ..

Read More