How To Integrate Instant WhatsApp Chat And Text SMS Support to blogger

 

    Plus                  

         

There many ways through which visitors connect with blog admins for some reasons. Visitors do connect with site admins though many means like adding facebook like box, Twitter flow button and LinkedIn widget, Instagram and so on. Tawk.to is a platform that let users create a simple widget and integrate it on blogs or website and have a live chating with support team, website like sharecash  that pays per download, referral and survey used this platform to chat with visitors right on their website, here comes whatsapp widget and text sms widget for blogger

Mis my last post on how show blogger widget on mobile veiw

Reason why bloggers should use this widget

Visitors might want to contact the blog owners for instant and immediate business negotiation, recommendation, comments, contract,  offer and so on. Not only that whatsapp has over 4 million active users which can visit your blog and send you messages or other file right from your blog or website.


How does it work? (Whatsapp Widget)
WhatsApp is one of the fastest and smoothest way to send and receive messages online, and even exchange document.

Once you've successfully install the codes I'm about to share with you in your blogger template.

With just a one-time click, your whatsapp messanger opens the chat area waiting for your messsage to be sent to the blog support center. See shots below

How to increase readers engagement using basic blogger widgets

The widget capability

Just like the regular whatsapp chat area allows you to;
- place a voice call through
- place video calls
- send attahements

Here is How To Integrate This Beautiful Codes To Blogger Template.

- In your blogger dashboard => Go to theme => edit theme

- Hit CTRL+F to find </body> code

Just Copy the below code and paste it before or above </body>

 <!-- whatsapp text support widget --><script type="text/javascript">    (function () {        var options = {            whatsapp: "+23490922067731", // WhatsApp number            company_logo_url: "//static.whatshelp.io/img/flag.png", // URL of company logo (png, jpg, gif)            greeting_message: "Hi! You are now connected with our blog support center. How may we be of help?", // Text of greeting message            call_to_action: "Message us", // Call to action            position: "right", // Position may be 'right' or 'left'        };        var proto = document.location.protocol, host = "whatshelp.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><!-- /whatsapp text support widget -->

Now personalize the codes
* Change the phone number stated in red to your own WhatsApp registered number alongside with your country code.

* Your greeting message (blue)that shows before visitors send their message.

* The widget position (brown) put either "Left" or "Right".

Once you are done, Save the theme.

Now preview your blog homepage, you will then see the whatsapp logo displayed at the downward level of the blog. On a tap on the logo, it open whatsapp messanger and sent whatever you want to send to the blog support center.
Mind you, it might not be visible on some browsers like operamini mobile. To see the widget live on your blog you can use mozila, crome, safari and any others.


SMS Text Message Widget for blogger

This widget is also necessary for blogger so as to let visitors connect with the blog support center through text messages.

The widget can;
* send text message to multiple numbers
* send attachment like multimedia and other files like book, apps and so on.


How it works


One-time click opens SMS area, and you are good to send whatever you like. See shots below

How to add the codes to blogger
The code can stand alone using blogger gadget and putting it inbetween blogger template.

The codes should be put in somewhere people will be able to see it like below menu or in the blog footer.

To put it below blog menu
=> Click on theme tap from blogger dashboard

=> Click edit theme, now find

=> Copy the below codes and paste it under

<center><div class="col-lg-12 col-md-12 col-sm-12" class="dp"><p> SMS/Whatsapp +2348160961848 <a href="sms:08160961848?body=...type your message here..."><button class="btn btn-primary"><h3>Send SMS</h3></button></a></p> </div> </center>

Change the position either <center> <right> or <left> but don't forget to close the position tag </center> </right> or </left>

Change the red line to the text you want; like Send Instant SMS or any other you might think of.

Change the blue line to the number you want to use to receive the sms

Change the brown line to the message to display (optional)

Change the green line to the text you want on the button (Optional)

To make button and the text size bigger, you can change the heading tag <h3></h3>. You can use <h1></h1>, <h2></h2>, <h3></h3>, <h4></h4>, <h5></h5>, <h6></h6>  (Optional)


=> Now save the theme and preview


To put it in the footer

In the theme editor => find your footer credits and look through for your footer links.

Now copy the codes and paste it after the link of your choice.

<center><div class="col-lg-12 col-md-12 col-sm-12" class="dp"><p> SMS/Whatsapp +2348160961848 <a href="sms:08160961848?body=...type your message here..."><button class="btn btn-primary"><h3>Send SMS</h3></button></a></p> </div> </center>

Change the position either <center> <right> or <left> but don't forget to close the position tag </center> </right> or </left>

Change the red line to the text you want like Send Instant SMS or any other you might think of.

Change the blue line to the number you want to use to receive the sms

Change the brown line to the message to display (optional)

Change the green line to the text you want on the button (Optional)

To make button size bigger, you can change the heading tag <h3></h3>. You can use <h1></h1>, <h2></h2>, <h3></h3>, <h4></h4>, <h5></h5>, <h6></h6>  (Optional)

Conclusion
All professional bloggers must add these widgets so as to show readers you know what your are doing. Visitors will also have their believe in you that you're not a fraudster or a scammer.

The most beautiful part of this whatsapp widget is not only that it displays whatsapp logo at the downward position of webpage, its even active when you are reading a blog post, and it has anything to do with your blog loading time.

Kindly come back to comment if you successfully add it and it works so as to let others do the same. Don't also forget to share with fellows...there is live in sharing.