In today's digital age, integrating WhatsApp as a means to receive orders on your Blogger website can significantly boost customer engagement and sales. WhatsApp is widely used and provides a direct, personal channel for communication. This guide will walk you through the steps to set up a system that allows customers to place orders through WhatsApp.
Why Use WhatsApp for Orders?
Using WhatsApp for orders offers several benefits:
- Direct Communication: Provides a personal touch and immediate interaction with customers.
- Ease of Use: Most customers are familiar with WhatsApp, making the ordering process simple.
- Quick Response: Enables faster response times compared to traditional email.
Setting Up WhatsApp Ordering on Your Blogger Website
Follow the below step-by-step guide to integrate WhatsApp on your Blogger website. So that whenever someone orders a product on your Blogger website, you will get a notification on your WhatsApp. Then you can contact your customer directly and sell the product.
Step 1: First of all Login to your Blogger Dashboard and go to Theme.
Step 2: Click on the icon next to the Customize button.
Step 3: Install jQuery by adding the code below to your template. Copy the code below and paste it above </head> or <!--</head>--></head> tag.
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'/>
Step 4: Now let's add some CSS. To do that copy the code below then press Ctrl + F and search for ]]></b:skin> and paste the code above it.
/* WhatsApp Form */
.wiki-form-wa{position:fixed;display:none;top:0;left:0;right:0;bottom:0;background:rgba(255,255,255,0.69);z-index:999}.form-container{width:calc(100% - 20px);max-width:500px;background:#fff;box-shadow:0 10px 35px 2px rgba(61,61,61,.3);padding:30px;box-sizing:border-box;border-radius:10px;margin:2% auto;overflow:hidden}.wiki-form-wa.aktif{display:block}
.wiki-form-header{background:linear-gradient(to right, #ff002c,#09796c);color:#fff;font-weight:700;padding:15px 20px;border-radius:10px;margin:0 0 30px}
span.input-title{border-left:4px solid #ff002c;padding:0 15px;font-size:.9rem;display:block}.wiki-form-wa #your-data{display:grid;grid-template-columns:49% 49%;grid-gap:10px;margin:10px 0 20px}
.wiki-form-header a.form-close svg{fill:#fff;width:35px;height:35px;margin-top:-5px;float:right}
a.wiki-btn-wa.send_form{background:linear-gradient(to right, #ff002c,#09796c);color:#fff;font-size:15px;font-weight:bold;text-align:center;text-decoration:none;padding:10px 10px 10px 25px;width:100px;margin:15px 50px 0 0;float:left;border-radius:5px;}
.wiki-btn-wa{background:linear-gradient(to right, #ff002c,#09796c);font-size:15px;font-weight:700;color: #fff;display:inline-flex;align-items:center;margin:15px 15px 15px 0;padding:15px 25px;border-radius:7px;margin:15px;text-decoration:none;left:50%!important}
.wiki-btn-wa:hover{opacity:.8;color:#fff}
.wiki-btn-wa svg{fill:#fff;width:22px;height:22px;vertical-align:-5px;margin-right:10px}
.wiki-input-field{position:relative;margin:15px 0 0}
.wiki-input-field input,.wiki-input-field textarea{font-size:15px;padding:12px 0 12px 12px;display:block;width:94%;border:1px solid #ddd;border-radius:5px}.wiki-input-field input:focus,.wiki-input-field textarea:focus{outline:none}
.wiki-input-field label{color:#999;border-radius:20px;font-size:14px;font-weight:500;position:absolute;pointer-events:none;left:15px;top:15px;transition:.2s ease all}.wiki-input-field input:focus~label,.wiki-input-field input:valid~label,.wiki-input-field textarea:focus~label,.wiki-input-field textarea:valid~label{top:0;font-size:14px;color:#ff002c;background:#fff;padding:1px 7px;margin:10px 0 0 -5px}
.wiki-input-field input:focus~label,.wiki-input-field input:valid~label,.wiki-input-field textarea:focus~label,.wiki-input-field textarea:valid~label{top:-20px!important;font-size:13px;color:#ff002c;font-weight:700}.wiki-input-field textarea{width:96.5%}.wiki-input-field select{background:#fff;padding:12px 15px;border-radius:5px;margin:0 0 5px 0;border:1px solid #ccc;outline:none;width:100%;max-width:100%;font-size:14px;cursor:pointer}
.wiki-input-field .wiki-validasi{position:absolute;z-index:2;top:calc(100% + 20px);left:0;background:#09796c;color:rgba(0,0,0,.6);padding:5px 10px;border-radius:3px;font-size:80%;box-shadow:0 5px 10px rgba(0,0,0,.08);transition:.4s;visibility:hidden;opacity:0;display:inline-block!important}
.wiki-input-field .wiki-validasi.show{visibility:visible;opacity:1;top:calc(100% + 10px)}
.wiki-input-field .wiki-validasi:after{position:absolute;bottom:100%;left:12px;content:'';border:8px solid;border-color:transparent transparent #09796c transparent}
#nama_produk{display:none}
Step 5: Now you have to place the code inside <body> tag. So you should place it either above <footer> or </body> or wherever you want. It will work as long as you keep its side <body> tag.
<div class='wiki-form-wa'> <div class='form-container'> <div class='wiki-form-header'><span class='form-title'>WhatsApp Checkout Form</span><a class='form-close' href='javascript:void' title='Close'><svg viewBox='0 0 24 24'><path d='M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z'/></svg></a></div> <span class='input-title'>Your Data</span> <div id='your-data'> <div class='wiki-input-field'><input class='validate' id='wa_nama' name='name' type='text'/><label>Your Name</label></div> <div class='wiki-input-field'><input class='validate' id='wa_email' name='email' type='text'/><label>Email</label></div> <div class='wiki-input-field'><input class='validate' id='wa_blog' name='blog name' type='text'/><label>Blog Name</label></div> <div class='wiki-input-field'><input class='validate' id='wa_url' name='blog url' type='text'/><label>Blog URL</label></div> </div> <span class='input-title'>Other Data</span> <div class='wiki-input-field'><select class='validate' id='wa_lisensi' name='licence'> <option hidden='hidden' selected='selected' value='default'>Select License</option> <option value='1'>Personal Package</option> <option value='2'>Reseller Package</option> </select></div> <div class='wiki-input-field'><select class='validate' id='wa_pembayaran' name='payment'> <option hidden='hidden' selected='selected' value='default'>Payment</option> <option value='1'>PayPal</option> <option value='2'>GoPay</option> <option value='3'>Credit Card</option> <option value='4'>VISA Card</option> <option value='5'>Crypto</option> </select></div> <a class='wiki-btn-wa send_form' href='javascript:;' title='Send Product Information' type='submit'>SEND</a></div></div>
Step 6: Now place the code below under <data:post.body/>. There could be more than 1 of these codes. So place it under the last one. That should be the correct one where you need to paste this code. If it doesn't work then try others.
<div id='nama_produk'><data:post.title/></div>
Step 7: Finally place this last piece of code above the </body> tag. Adjust the marked part before you start using it.
<script>
//<![CDATA[
// WhatsApp Form
// Open Close Button
$(".form-close").click(function(){
$(".wiki-form-wa").fadeOut("fast")}
);$(".show-form").click(function(){
$(".wiki-form-wa").fadeIn("slow")});
// Validation Required For Columns
$('.wiki-input-field .validate').each(function() {
title = $(this).attr('name');
label = $(this).parents('.wiki-input-field');
$('<span class="wiki-validasi"><b>' + title + '</b> required</span>').appendTo(label);
});
$(document).on('keyup', '.wiki-input-field .validate', function() {
if ($(this).val() != '') {
$(this).removeClass('focus');
$(this).parents('.wiki-input-field').find('.wiki-validasi').removeClass('show');
}
});
$(document).on('change', '.wiki-input-field select', function() {
$(this).removeClass('focus');
$(this).parents('.wiki-input-field').find('.wiki-validasi').removeClass('show');
});
$('.send_form').click(whatsappchat);
function whatsappchat() {
if ($('#wa_nama').val() == '') { // Validate Full Name
$('#wa_nama').each(function() {
$(this).addClass('focus');
$(this).parents('.wiki-input-field').find('.wiki-validasi').addClass('show');
});
$('#wa_nama').focus();
return false;
} else if ($('#wa_email').val() == '') { // Validate Email Address
$('#wa_email').each(function() {
$(this).addClass('focus');
$(this).parents('.wiki-input-field').find('.wiki-validasi').addClass('show');
});
$('#wa_email').focus();
return false;
} else if ($('#wa_blog').val() == '') { // Validate Blog Name
$('#wa_blog').each(function() {
$(this).addClass('focus');
$(this).parents('.wiki-input-field').find('.wiki-validasi').addClass('show');
});
$('#wa_blog').focus();
return false;
} else if ($('#wa_url').val() == '') { // Validate Blog Url
$('#wa_url').each(function() {
$(this).addClass('focus');
$(this).parents('.wiki-input-field').find('.wiki-validasi').addClass('show');
});
$('#wa_url').focus();
return false;
} else if ($('#wa_lisensi').val() == 'default') { // License validation
$('#wa_lisensi').each(function() {
$(this).addClass('focus');
$(this).parents('.wiki-input-field').find('.wiki-validasi').addClass('show');
});
$('#wa_lisensi').focus();
return false;
} else if ($('#wa_pembayaran').val() == 'default') { // Payment validation
$('#wa_pembayaran').each(function() {
$(this).addClass('focus');
$(this).parents('.wiki-input-field').find('.wiki-validasi').addClass('show');
});
$('#wa_pembayaran').focus();
return false;
} else {
/* WhatsApp Settings */
var walink = 'https://web.whatsapp.com/send',
phone = '+14875XXXXX', // Your WhatsApp Number
walink2 = 'Hello, I want to buy your template with the following description:'; // Opening Message
/* Smartphone Support */
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
var walink = 'whatsapp://send';
}
/* Call Input Form */
var input_nama = $("#wa_nama").val(),
input_email = $("#wa_email").val(),
input_namaBlog = $("#wa_blog").val(),
input_urlBlog = $("#wa_url").val(),
input_lisensi = $("#wa_lisensi :selected").text(),
input_pembayaran = $("#wa_pembayaran :selected").text(),
input_namaproduk = $("#nama_produk").text(),
input_viaUrl = location.href;
/* Final WhatsApp URL */
var wiki_whatsapp = walink + '?phone=' + phone + '&text=' + walink2 + '%0A%0A' +
'*MY DATA* %0A' +
'=============================%0A' +
'*Name* : ' + input_nama + '%0A' +
'*Email* : ' + input_email + '%0A' +
'*Blog Name* : ' + input_namaBlog + '%0A' +
'*Blog Url* : ' + input_urlBlog + '%0A' +
'*Payment Method* : ' + input_pembayaran + '%0A' +
'=============================%0A' + '%0A' +
'*SHOPPING LIST* %0A' +
'=============================%0A' +
'*Template Name* : ' + input_namaproduk + '%0A' +
'*License Type* : ' + input_lisensi + '%0A' +
'*Template Link* : ' + input_viaUrl + '%0A' +
'=============================%0A';
/* Open Whatsapp Window */
window.open(wiki_whatsapp,'_blank');
window.location.href = input_viaUrl;
return false;
}
};
//]]>
</script>
So we are done with integrating WhatsApp with the Blogger website for taking orders from Blogger and selling them. This form was made for selling digital products such as Theme, Software, Image, Music, Video, etc. But you can adjust the form for selling any type of products you want. Make sure you replace the phone number with your actual WhatsApp number.
In the next step, we will learn how to use this form to take orders from the customers.
WhatsApp order form for Blogger website
Number 1: Create a custom product page and use this page to receive orders from your customers. If you don't know how to create one then read this blog and follow the instructions to create a product page and get orders.
Number 2: Just copy the code below and paste it anywhere. Customers can click on this button and place their orders.
<div style='text-align:center'> <a class="wiki-btn-wa show-form" href="javascript:void" title="Buy Now"><svg viewBox='0 0 24 24'><path d='M17,18C15.89,18 15,18.89 15,20A2,2 0 0,0 17,22A2,2 0 0,0 19,20C19,18.89 18.1,18 17,18M1,2V4H3L6.6,11.59L5.24,14.04C5.09,14.32 5,14.65 5,15A2,2 0 0,0 7,17H19V15H7.42A0.25,0.25 0 0,1 7.17,14.75C7.17,14.7 7.18,14.66 7.2,14.63L8.1,13H15.55C16.3,13 16.96,12.58 17.3,11.97L20.88,5.5C20.95,5.34 21,5.17 21,5A1,1 0 0,0 20,4H5.21L4.27,2M7,18C5.89,18 5,18.89 5,20A2,2 0 0,0 7,22A2,2 0 0,0 9,20C9,18.89 8.1,18 7,18Z'/><line x1='12' x2='12' y1='2' y2='16'/></svg>Buy Now</a></div>
That's it! we are done integrating WhatsApp with our Blogger website for taking orders.
Conclusion
Integrating WhatsApp as an ordering channel on your Blogger website is a powerful way to enhance customer experience and boost sales. By following the steps outlined in this guide, you can set up an efficient and user-friendly system that allows customers to place orders directly through WhatsApp. Ensure you promote this new feature effectively to maximize its benefits.
Implement these strategies and watch your customer engagement and sales grow. Happy selling!
Post a Comment