How to Add WhatsApp Chat Widget in Blogger Blog?
In this article in P4Pakao website, we will discuss two methods ad adding WhatsApp widget in Blogger.
1. First Method To Add WhatsApp widget in Blogger
Follow the steps to enhance your blog by adding WhatsApp Chat widget in Blogger
- Go To Blogger Dashboard
- Layout
- Add A New Widget
- Select The HTML/JavaScript Widget
- Copy Below Code
- Paste it
- Change the number +923001234567
- Save
<script type="text/javascript">
(function () {
var options = {
whatsapp: "+923001234567", // whatsapp number
call_to_action: "message us", // call to action
position: "left", // position may be 'right' or 'left'
};
var proto = document.location.protocol, host = "getbutton.io", url = proto + "//static." + host;
var s = document.createelement('script'); s.type = 'text/javascript'; s.async = true; s.src = url + '/widget-send-button/js/init.js';
s.onload = function () { whwidgetsendbutton.init(host, proto, options); };
var x = document.getelementsbytagname('script')[0]; x.parentnode.insertbefore(s, x);
})();
</script>
2. Second Method To Add WhatsApp widget in Blogger
This method of adding WhatsApp widget in Blogger is also same like the above one. Add a widget of HTML/JavaScript paste the code after some changes save it.
- Search for P4Pakao and change it with your desire
- Find brandimg and place your image link
- Change the number +923001234567 with your specific number
- Save
<script>
var url = 'https://wati-integration-service.clare.ai/shopifywidget/shopifywidget.js?43370';
var s = document.createelement('script');
s.type = 'text/javascript';
s.async = true;
s.src = url;
var options = {
"enabled":true,
"chatbuttonsetting":{
"backgroundcolor":"#4dc247",
"ctatext":"",
"borderradius":"25",
"marginleft":"0",
"marginbottom":"50",
"marginright":"50",
"position":"right"
},
"brandsetting":{
"brandname":"P4Pakao",
"brandsubtitle":"typically replies within a day",
"brandimg":"https://www.P4Pakao.com/P4Pakao.jpg",
"welcometext":"hi, there!\nhow can I help you?",
"messagetext":"hello, *P4Pakao* I have a question.%0a%0a{{page_link}}",
"backgroundcolor":"#008a73",
"ctatext":"start chat",
"borderradius":"25",
"autoshow":false,
"phonenumber":"+923001234567"
}
};
s.onload = function() {
createwhatsappchatwidget(options);
};
var x = document.getelementsbytagname('script')[0];
x.parentnode.insertbefore(s, x);
</script>