How to Receive Product Orders Through WhatsApp or Email on Your Blogger Website
Integrating multiple channels for receiving product orders can significantly enhance customer convenience and boost your sales. This guide will show you how to set up systems on your Blogger website to allow customers to place orders through WhatsApp or email.
Providing multiple options for placing orders not only improves the user experience but also increases the likelihood of conversions. By offering WhatsApp and email as ordering channels on your Blogger website, you cater to a wider audience who may prefer different methods of communication. This guide will walk you through the steps to set up these systems effectively.
Benefits of Using WhatsApp and Email for Orders
Before diving into the setup, let's explore the benefits of using WhatsApp and email for receiving orders:
- Direct Communication: Both platforms enable direct and personal communication with customers.
- Ease of Use: Customers are generally familiar with these platforms, making the ordering process straightforward.
- Documentation: Email provides a written record of orders, while WhatsApp can be used for instant communication and updates.
Create an order form for taking orders via WhatsApp and Email
Follow this step-by-step guide for adding an order from your Blogger website. Whenever someone orders VIA this form, you will get a notification on your WhatsApp or Email. make sure you follow these steps carefully.
Step 1: Make sure that your Blogger template has jQuery installed. If it doesn't then copy the code below and paste it above </head> or <!--</head>--></head> tag in your Blogger template.
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'/>
Step 2: Now copy the following CSS codes and palce it above the code </style> or ]]></b:skin> in your template.
/*WhatsApp checkout form*/
/*published by wikifortech | siteguide.xyz*/
.wiki-checkout-content{position:absolute;top:50%;left:50%;padding:35px 10px 10px 10px;transform:translate(-50%,-45%);background-color:#fff;border-radius:.5rem;max-width:500px;width:90%;box-shadow:inset 0 2px 6px 0 rgba(49,53,59,.12);max-height:calc(100vh - 150px);overflow:auto;margin:auto}
.wiki-checkout-content:hover{overflow-x:hidden;overflow-y:auto}
.wiki-checkout-content .wiki-close{position:absolute;right:15px;top:3px;font-size:15px;}
.wiki-checkout-content .wiki-close:before{content:'Close';position:relative;right:2px;top:0;font-size:12px;color:#999}
.wiki-checkout-content .wiki-close a.tombol-bukatutup{width:auto;background:transparent;color:#999;padding:;text-decoration:none}
.wiki-checkout-wrap{position:fixed;z-index:999;top:0;left:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.5);display:none;}
#wiki-belanja{padding:5px;display:block}
#wiki-konfirmasi{display:grid;grid-template-columns:1fr 1fr;grid-gap:0 15px}
.wiki-datainput{position:relative;margin-bottom:5px;margin-right:5px}
.wiki-datainput select{padding:12px 0;color:#555;font-size:14px;width:100%;border:0!important;border-bottom:1px solid #ddd!important;outline:none;background:#fff}
.wiki-datainput input{font-size:14px;padding:12px 0!important;display:block;width:100%;border:none!important;border-bottom:1px solid #ddd!important}
/*published by wikifortech | siteguide.xyz*/
.wiki-datainput input:focus{outline:none}
.wiki-datainput label{color:#999;font-size:14px;font-weight:400;position:absolute;pointer-events:none;left:0;top:10px;transition:.2s ease all}
.wiki-datainput .focus{box-shadow:inset 0 -1px 0 0 #f89000!important}
.wiki-datainput .wiki-validasi{position:absolute;z-index:2;top:calc(100% + 20px);left:0;background:#ff0033;color:#fff;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-datainput .wiki-validasi.show{visibility:visible;opacity:1;top:calc(100% + 10px)}
.wiki-datainput .wiki-validasi:after{position:absolute;bottom:100%;left:12px;content:'';border:8px solid;border-color:transparent transparent #f89000 transparent}
a.send_form{position:relative;display:inline-block;background:#ff0033;color:#ffffff;padding:7px;border-radius:5px;text-align:center;font-size:13px;font-weight:400;text-decoration:none;margin-top:5px}
.img-produk{display:grid;grid-template-columns:1fr 2.7fr}
.img-produk img{max-width:150px;float:left;margin:10px 15px 0 0;border-radius:5px}
.info-produk{font-size:13px;margin-top:10px}
.info-produk i{color:#999;font-size:11px;margin:8px 0;display:block}
#nama_produk{font-size:20px;font-weight:600}
/*css darkmode*/
/*published by wikifortech | siteguide.xyz*/
.darkMode .send_form,.darkMode .tombol-bukatutup{color:#fff}
.darkMode .wiki-checkout-content,.darkMode .wiki-datainput select,.darkMode .wiki-datainput input{background-color:#252526!important}
Plus UI Blogger template users replace .darkMode with .drK. Otherwise, this will not work in dark mode in your template.
Step 3: In the next step, place the code, below <data:post.body/> inside your template. But there could be more than one <data:post.body/> in your theme, so try 1 by 1 to find the right piece of code. But here is the trick, the last <data:post.body/> will be the actual piece of code where you need to place the below code. So, place this code under the last <data:post.body/>, if it didn't work then try others.
<div class='wiki-checkout-wrap'>
<div class='wiki-checkout-content'>
<div class='wiki-close'>
<a class='tombol-bukatutup' href='javascript:void(0);'>✕</a>
</div>
<div class='img-produk'>
<img expr:alt='data:post.title' expr:src='resizeImage(data:post.thumbnailUrl,150)' expr:title='data:post.title' />
<div class='info-produk'>
<div id='nama_produk'>
<data:post.title />
</div>
<br />Price : <span class='harga-s'></span>
<i>*Does not include postage</i>
</div>
</div>
<div id='wiki-belanja'>
<div id='wiki-konfirmasi'>
<div class='wiki-datainput'>
<input class='validate' id='namalengkap' name='Your Name' placeholder='Your Name' required='' type='text' value='' />
</div>
<div class='wiki-datainput'>
<input class='validate' id='nomorWA' name='Phone Number' placeholder='Phone Number' required='' type='number' value='' />
</div>
<div class='wiki-datainput'>
<input class='validate' id='email' name='Email' placeholder='Email' required='' type='text' value='' />
</div>
<div class='wiki-datainput'>
<select class='validate' id='pembayaran' name='Account Number'>
<option hidden='hidden' selected='selected' value='default'>Payment Method</option>
<option value='1'>PayPal</option>
<option value='2'>GoPay</option>
<option value='3'>Credit card</option>
<option value='4'>Visa Checkout</option>
<option value='5'>Cryptocurrency</option>
</select>
</div>
<div class='wiki-datainput'>
<input class='validate' id='alamat' name='Address' placeholder='Address' required='' type='text' value='' />
</div>
</div>
<a class='send_form' id='to_wa' href='javascript:;' title='Order via WhatsApp' type='submit'>Order via WhatsApp</a>
<a class='send_form' id='to_mail' href='javascript:;' title='Order via Email' type='submit'>Order via Email</a>
</div>
</div>
</div>
Step 4: The last step is placing the code below above the code </body> or <!--</body>--></body>
<script>
//<![CDATA[
// Open Close Button
$('.tombol-bukatutup').click(function(){
$('.wiki-checkout-wrap').fadeToggle()});
var input_harga = $('#harga').text();
$('.harga-s').text(input_harga);
// validation for the contents
$('.wiki-datainput .validate').each(function() {
title = $(this).attr('name');
label = $(this).parents('.wiki-datainput');
$('<span class="wiki-validasi"><b>' + title + '</b> required</span>').appendTo(label);
});
$(document).on('keyup', '.wiki-datainput .validate', function() {
if ($(this).val() != '') {
$(this).removeClass('focus');
$(this).parents('.wiki-datainput').find('.wiki-validasi').removeClass('show');
}
});
$(document).on('change', '.wiki-datainput select', function() {
$(this).removeClass('focus');
$(this).parents('.wiki-datainput').find('.wiki-validasi').removeClass('show');
});
$('.send_form').click(checkout);
function checkout() {
if ($('#namalengkap').val() == '') {
$('#namalengkap').each(function() {
$(this).addClass('focus');
$(this).parents('.wiki-datainput').find('.wiki-validasi').addClass('show');
});
$('#namalengkap').focus();
return false;
} else if ($('#nomorWA').val() == '') {
$('#nomorWA').each(function() {
$(this).addClass('focus');
$(this).parents('.wiki-datainput').find('.wiki-validasi').addClass('show');
});
$('#nomorWA').focus();
return false;
} else if ($('#email').val() == '') { // Validate Email Address
$('#email').each(function() {
$(this).addClass('focus');
$(this).parents('.wiki-datainput').find('.wiki-validasi').addClass('show');
});
$('#email').focus();
return false;
} else if ($('#pembayaran').val() == 'default') {
$('#pembayaran').each(function() {
$(this).addClass('focus');
$(this).parents('.wiki-datainput').find('.wiki-validasi').addClass('show');
});
$('#pembayaran').focus();
return false;
} else if ($('#alamat').val() == '') {
$('#alamat').each(function() {
$(this).addClass('focus');
$(this).parents('.wiki-datainput').find('.wiki-validasi').addClass('show');
});
$('#alamat').focus();
return false;
} else {
var email = 'yourmail@gmail.com', // Your Email Address
maillink = 'https://mail.google.com/mail/u/0/?view=cm&fs=1&tf=1&to=',
mailsubject = '&subject= Confirm Purchase ', // Email Subject But Only Appears On Smartphones
maillink1 = '',
jarak = '',
maillink2 = '&body= Hello, I want to buy your product with the following description: ', //Opening Message in email
phone = '+120255XXXXX', // Your Whatsapp Number
walink = 'https://web.whatsapp.com/send',
walink2 = 'Hello, I want to buy your product with the following description:'; // Opening Message on WhatsApp
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
var maillink = 'mailto:',
jarak ='<br>';
maillink1 = '?cc=&bcc=',
walink = 'whatsapp://send';
}
var input_nama = $('#namalengkap').val(),
input_nomor = $('#nomorWA').val(),
input_email = $('#email').val(),
input_pembayaran = $('#pembayaran :selected').text(),
input_alamat = $('#alamat').val(),
input_namaproduk = $('#nama_produk').text(),
input_harga = $('#harga').text(),
input_catatan = $('#catatan').val(),
input_viaUrl = location.href;
var mail_link = maillink + email + maillink1 + mailsubject + input_nama + maillink2 + '%0A%0A' + jarak + jarak +
'MY DATA ' + jarak +
'%0A-----------------------------%0A' + '%0A' + jarak + jarak +
'Name : ' + input_nama + '%0A' + jarak +
'Phone Number : ' + input_nomor + '%0A' + jarak +
'Email : ' + input_email + '%0A' + jarak +
'Address : ' + input_alamat + '%0A' + jarak +
'Payment Method : ' + input_pembayaran + '%0A' + jarak +
'%0A-----------------------------%0A' + '%0A' + jarak + jarak +
'SHOPPING LIST %0A' + jarak +
'-----------------------------%0A' + jarak +
'Product Name : ' + input_namaproduk + '%0A' + jarak +
'Product Price : ' + input_harga + '%0A' + jarak +
'Buyer Notes : ' + input_catatan + '%0A' + jarak +
'Product Links : ' + input_viaUrl + '%0A' + jarak +
'%0A-----------------------------%0A';
var whatsapp_link = walink + '?phone=' + phone + '&text=' + walink2 + '%0A%0A' +
'MY DATA ' +
'%0A-----------------------------%0A' + '%0A' +
'Name : ' + input_nama + '%0A' +
'Phone Number : ' + input_nomor + '%0A' +
'Email : ' + input_email + '%0A' +
'Address : ' + input_alamat + '%0A' +
'Payment Method : ' + input_pembayaran + '%0A' +
'%0A-----------------------------%0A' + '%0A' +
'SHOPPING LIST %0A' +
'-----------------------------%0A' +
'Product Name : ' + input_namaproduk + '%0A' +
'Product Price : ' + input_harga + '%0A' +
'Buyer Notes : ' + input_catatan + '%0A' +
'Product Links : ' + input_viaUrl + '%0A' +
'%0A-----------------------------%0A';
$('#to_wa').attr('href',whatsapp_link).attr('target','_blank');
$('#to_mail').attr('href',mail_link).attr('target','_blank');
/* Leave All Columns Blank If Sent */
$('#namalengkap').val('');
$('#nomorWA').val('');
$('#email').val('');
$('#pembayaran :selected').text('Payment Method');
$('#alamat').val('');
$('#catatan').val('');
}
};
//]]>
</script>
How to use the product page to take orders
What we have done till now is add the functionality to our blogger template so that customers can order products on the website and our website can send the order notification to the email or WhatsApp. Now we actually need to create a page for publishing the products.
Here is what you need to do now. First, you need to create a page that will display your product and take orders from your customers. Please read this article and follow all the steps. Once you have followed all the steps, your website is now ready to take orders from customers.
Do not forget to customize the code in step 4 and place your actual WhatsApp number and email.
Conclusion
Integrating WhatsApp and email as ordering channels on your Blogger website is a practical way to enhance customer experience and manage orders efficiently. By following the steps outlined in this guide, you can set up user-friendly and effective ordering systems. Promote these new features to your audience and continuously optimize the process to ensure customer satisfaction.
Implement these strategies and watch your sales grow. Happy selling!
