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
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
Web Application Security in JavaScript

JavaScript

Today's almost every business, every institution uses web applications in some way. It is very important that these web applications work quickly, ..

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
JavaScript Upper & Lowercase Conversion

JavaScript

".toUpperCase()", a term frequently encountered during SEO (Search Engine Optimization) studies, is a function used in the JavaScript language. This ..

Read More