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

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

CREATE WhatsApp CHAT WIDGET ON YOUR BLOGGER WEBSITE BY THIS SCRIPT IN 2022




Hey, guys welcome to the blogs of S . B Tech, 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.

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


CREATE WhatsApp CHAT WIDGET ON YOUR BLOGGER WEBSITE BY THIS SCRIPT IN 2022



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


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


CREATE WhatsApp CHAT WIDGET ON YOUR BLOGGER WEBSITE BY THIS SCRIPT IN 2022

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

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



CREATE WhatsApp CHAT WIDGET ON YOUR BLOGGER WEBSITE BY THIS SCRIPT IN 2022

CREATE WhatsApp CHAT WIDGET ON YOUR BLOGGER WEBSITE BY THIS SCRIPT IN 2022



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 -->


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

If You Fase 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.


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


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 "

<!-- 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 -->

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.

CREATE WhatsApp CHAT WIDGET ON YOUR BLOGGER WEBSITE BY THIS SCRIPT IN 2022

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

CREATE WhatsApp CHAT WIDGET ON YOUR BLOGGER WEBSITE BY THIS SCRIPT IN 2022



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





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.







Post a Comment

0 Comments