Recently I saw most of the store using the WhatsApp chat button in there store to engage with customer directly.

So I decide to write a post about it how easily we can add WhatsApp chat button without any App.

Installing

Git Repo – https://github.com/rafaelbotazini/floating-whatsapp

Download Git repo and extract it.

I found this jQuery lib which is really awesome and made our life easy so in this course, we are going to use it.

Lets Start

First we need to include jquery and floating wpp lib into our theme and assets folder.

Add these lines into your theme.liquid file make sure if you already have jQuery script included in your theme you can remove first script.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="preload" href="{{ 'floating-wpp.min.css' | asset_url }}" as="style">
<script src="{{ 'floating-wpp.min.js' | asset_url }}" defer="defer"></script>

Now we added script tags we need to initialize floatingWhatsApp script and provide a placeholder.

<div id="whatsappChatButton"></div>
<script type="text/javascript">
  $(function () {
    $('#whatsappChatButton').floatingWhatsApp({
      phone: '+10987654321'
    });
  });
</script>

Check the screenshot

That’s all we need and it’s pretty much straight forward though we can add additional settings to make it more like a chat button.

<div id="whatsappChatButton"></div>
<script type="text/javascript">
    $(function () {
      $('#whatsappChatButton').floatingWhatsApp({
        phone: '+10987654321',
        position : 'right',
        popupMessage: 'Hello, how can we help you?',
        message: "I'd like to order a pizza",
        showPopup: true,
        showOnIE: false,
        headerTitle: 'Welcome!',
        headerColor: '#23D366',
        backgroundColor: '#23D366',
        buttonImage: '{{ 'whatsapp.svg' | asset_url | img_tag: 'whatsapp' }}'
      });
    });
 </script>

Note: Please make sure you add phone number with country code other wise it won’t work.

Thanks for reading this aritcle, with shopify we can make custom section and settings to make chat button customizable.

I will try to make article with section soon till then stay tunned and like, share and comment.