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 Are JavaScript Functions and Examples?

JavaScript

JavaScript, one of the most popular programming languages of our time, includes various functions that increase the user experience by adding ..

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
Whatsapp Contact Code to Your Website

JavaScript

Today, millions of people communicate with each other through instant messaging applications. The most popular of these is Whatsapp. But did you know that you can contact a person via...

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