Advertisers may face a problem where they want to track real orders from a landing page that checkout with WhatsApp. The problem comes when users click the order button but they may not click send on the WhatsApp app so the data could be inaccurate. There is no way to track if users have sent a message or not because the WhatsApp app is separate from the landing page. But now we have the solutions by using the webhook feature on SentWA.
This feature will read all incoming messages if you activate it, then you can create a simple PHP page to catch the message and do an identification when there is a new lead. Now we will create a simple order form with Contact Form 7 and register a new webhook URL using SentWA plugin.
1. Create a new page for thank you page, you can set the title with “Thank You”, insert body text and put some tracking code there.
2. Install Contact Form 7 from plugin repository then click Contact > Add New.
3. Paste this code to Form tab inside Add New Screen on Contact Form 7. You can edit and modify the field based on your needs
<label> Full Name
[text* full-name placeholder "Your Full Name"] </label>
<label> WhatsApp Number
[text* whatsapp-number placeholder "628XXXXXXXX"] </label>
<label> Choose Size </label>
[radio product-size default:1 "Size S" "Size M" "Size L" "Size XL"]
[submit "Order Via WhatsApp"]
<script>
(function($) {
var webhookUrl = 'https://demo.sentwa.com/wp-content/plugins/sentwa-woocommerce/chat.txt';
var redirectUrl = 'https://demo.sentwa.com/thankyou';
var countryCode = '62';
function checkLastChat(number){
var microtime = Date.now();
$.ajax({
url : "https://api.allorigins.win/raw?url=" + webhookUrl + "?v=" + microtime,
dataType: "text",
success : function (data) {
var listOfNumber = data.split(/\r?\n/);
console.log(listOfNumber);
if (listOfNumber.some(v => number === v)) {
window.location = redirectUrl;
}
setTimeout(function () {
checkLastChat(number);
}, 1000);
},
error: function(xhr, error){
setTimeout(function () {
checkLastChat(number);
}, 1000);
},
});
}
document.addEventListener( 'wpcf7submit', function( event ) {
var number = $('input[name=whatsapp-number]').val();
if (number.startsWith("0") === true) {
number = number.replace('0',countryCode);
}
checkLastChat(number);
}, false );
})(jQuery);
</script>
4. Change the domain on webhookUrl and redirectUrl to your url and set the default country code.
5. Now edit the webhook.php inside SentWA plugin folder and insert this code.
<?php
// Subscribe first to see the code
?>
6. Go to SentWA menu on your WP-Admin, then click Set Webhook button and insert the webhook.php url there.
7. All set. You can see the order form is tracking your real incoming message on WhatsApp now.