CREATE WhatsApp CHAT WIDGET ON YOUR BLOGGER WEBSITE WITH THIS SCRIPT IN 2023

John MichelleOctober 10, 2024

0 3 minutes read

Hey, guys welcome to the blogs of technoperman, So these days we tend to ar back with a surprising script in blogger which is WhatsApp Chat Widget ( Button ) Script For Blogger.

So here during this Blogger Website, we are going to find out how to set up an internet site that is WhatsApp Chat Widget ( Button ) Script For Blogger. when finishing web site setup it’s necessary to try to to the SEO setting, as SEO can assist your website to rank.

Table of Contents

Feature Of WhatsApp Chat Button ( Widget )

This Is A Method Of Making Direct Contact With Your Visitors. When You Use This What’s App Widget Button In Your Blogger Website, it’s Shown Your Website’s Lower Corner.

And If Your Visitors Want To Contact With You. They Click On WhatsApp Chat Ikon, This Chat Page Open Automatically In Your Web Page. They Are Just Put Their Massage Like WhatsApp,

And Send To You. It’s Directly Show In Your Personal WhatsApp Number. You Can Directly Reply Thair Massage With Your WhatsApp.

So below are the steps for setup a website in blogger, follow them and begin Earning from your tool website.

Do the subsequent Steps for creating web site In Blogger For WhatsApp Chat Widget ( Button ) Script :

Step 1: Login To Blogger Account Through Gmail.

Step 2: 1st of all visit your Blogger Dashboard.

Step 3: Click On Layout Option.

Step 4: Then Scroll Down The Page And Find The Side Bar Section.

Step 5: Then Click the ” Add Gadget ” Section.

Step 6: Yoy Find Many Gadget’s, But You Just Click “ Html /Javascript “ Gadget

-: TOTAL 4 CODE USE STEP BY STEP CAREFULLY: –

1ST STEP –

Step 7: Open The Gadget

COPY THIS CODE –

<!-- getbutton.io widget -->
<script type="text/javascript">
(function () {
var options = {
whatsapp: "+910000000000", // 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>
<!-- /getbutton.io widget -->

If You Face Any Error, Please Do This –

At First Copy This Code And Save In Notepad, And Open with Notepad++, Then Copy Code And Place in Theme.

Step 8: Pest This Code In Content Section And Click Save Button.

BEFORE SAVING THIS GADGET YOU MAKE SURE SOME CHANGES.

i) Place Your WhatsApp Number In The Section Of My WhatsApp Number With Country Code. Like +910000000000 Etc.

ii) Select Position As Your Choice . “position: “left”, // position may be ‘right’ or ‘left’ ” . I Will Make the Chat Button Position On the “left” Side. If You Want To Change Position, Please Write Your Position “left Or right ”

Then click Save.

STEP 2 –

* GO TO BLOGGER DASHBOARD .
* SELECT THEME
* SELECT EDIT HTML.

AFTER OPENING THE THEME DO THE FOLLOWING STEPS. After Completing the Full Steps, You Can Save Your Theme Or Template.

I) Click Anywhere of Theme And Press Cltrl+F
ii) 1. FIND – ]]></b:skin>
AND PEST CSS STYLE CODE BEFORE – ]]></b:skin>

COPY CODE –

/* WhatsApp Button */

.whatsapp-btn-container {
position: fixed;
left: 30px;
opacity: 0;
bottom: -50px;
padding: 24px;
animation: fade-up 1000ms forwards;
animation-delay: 1000ms;
} z-index: 500;

@keyframes fade-up {
100% {
bottom: 24px;
opacity: 1;
}
}

.whatsapp-btn-container .whatsapp-btn {
font-size: 48px;
color: #25d366;
display: inline-block;
transition: all 400ms;
}

.whatsapp-btn-container .whatsapp-btn:hover {
transform: scale(1.2);
}

.whatsapp-btn-container span {
position: absolute;
top: 0;
left: 4px;
font-family: "Roboto", sans-serif;
font-weight: bold;
color: #075e54;
transform: rotateZ(20deg) translateX(10px);
opacity: 0;
transition: all 400ms;
}

.whatsapp-btn-container .whatsapp-btn:hover + span {
transform: rotateZ(0deg) translateX(0px);
opacity: 1;
}

iii ) Click Anywhere Of Themes. And Press Cltrl+F

iv) Then FIND </body> Tag AND PEST THIS CODE BEFORE </body> TAG –

COPY CODE –

<div class="whatsapp-btn-container">
<a class="whatsapp-btn" href="https://wa.me/91999999999"><i class="fab fa-whatsapp"></i></a>
<span>Contact Us</span>
</div>

REPLACE YOUR WHATSAPP NUMBER WITH THIS NUMBER WITH COUNTRY CODE

v) Click Anywhere Of Themes. And Press Cltrl+F
vi ) Then FIND <head> AND PEST CODE AFTER <head> SECTION

COPY CODE –

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />

NOW CLICK THE SAVE BUTTON

Step 9: currently Now You View your Blog. It’s able to Publish.

You Find This Ikon In Left Side Or Right Side.

Click This Ikon And Text Massage And Find Your Massage In Your WhatsApp Number.

NOW COMPLETE YOUR NEW ADVANCE CHAT WIDGET ON YOUR BLOGGER WEBSITE WITH THIS SCRIPT IN 2023

PLEASE SHARE THIS ARTICLE ON YOUR SOCIAL MEDIA PLATFORM TO KNOW OTHERS. IF YOU HAVE ANY QUERY PLEASE WRITE IN COMMENT BOX ……….. THANK YOU FOR YOUR SUPPORT.