|
जय हिंद दोस्तों, आज हम व्हाट्सएप विजेट को टेम्पलेट में एड करना सीखेगे। वैसे तो व्हाट्सएप विजेट जोड़ना अनिवार्य नहीं है, आप इसे जोड़ सकते हैं भी और नहीं भी यह आप पर निर्भर करता है। कुछ ब्लॉगर अपनी व्हाट्सएप गोपनीयता बनाए रखने के लिए इसका इस्तेमाल नहीं करते हैं, लेकिन कुछ ब्लॉगर ऐसे भी हैं जो अपने बिजनेस और प्रोडक्ट को बढ़ाने के लिए व्हाट्सएप नंबर या संपर्क का प्रयोग करते है। क्योंकि इसे कॉन्टैक्ट करना बहुत सरल हो जाता है।
इसलिए हमने इस ट्यूटोरियल के माध्यम से व्हाट्सएप चैट को लगना सिखाया है शायद मेरे कुछ ब्लॉगर्स को इस विजेट की आवश्यकता हो। इस विजेट का एक फायदा यह है कि इसे कस्टमाइज करना बहुत आसान है, आप अपने अनुसार विजेट के रंग और चौड़ाई को आसानी से बदल सकते हैं, नीचे दिए गए व्हाट्सएप चैट विजेट बनाने के तरीके को ध्यान से समझकर टेंपलेट में एड करें:
Step 1- Add CSS In Theme
सबसे पहले आपको Theme ऑप्शन पर जाना होगा उसके बाद Edit HTML टेम्पलेट मेनू पर जाना होगा और नीचे दिए गए CSS कोड को अपने ब्लॉग में </style> या ]]></b:skin> सेक्शन के ऊपर CSS कोड को जोड़ना होगा।
/* Chatbox Whatsapp */
:root {
--color-background: #4dc247; /*The background color of the chat button and header*/
--color-bg-chat: #f0f5fb;
--color-icon: #fff; /* Chat icon color */
--color-text: #505050;
--color-text-alt: #989b9f;
--lebar-chatbox: 320px;
}
.sticky-button{position:fixed;background-color:var(--color-background);bottom:20px;left:20px;width:55px;height:55px;border-radius:50px;box-shadow:0 2px 5px 0 rgba(0,0,0,.1);z-index:20;overflow:hidden;}
.sticky-button a, .sticky-button label{display:flex;align-items:center;width:55px;height:55px;-webkit-transition:all .3s ease-out;transition:all .3s ease-out;}
.sticky-button a svg, .sticky-button label svg{margin:auto;fill:var(--color-icon)}
.sticky-button label svg.svg-2{display:none}
.sticky-chat{position:fixed;bottom:70px;left:20px;width:var(--lebar-chatbox);-webkit-transition:all .3s ease-out;transition:all .3s ease-out;
z-index:21;opacity:0;visibility:hidden;line-height:normal}
.sticky-chat .chat-content{border-radius:10px;background-color:#fff;box-shadow:0 2px 5px 0 rgba(0,0,0,.05);overflow:hidden}
.sticky-chat .chat-header{position:relative;display:flex;align-items:center;padding:15px 20px;background-color:var(--color-background);overflow:hidden}
.sticky-chat .chat-header:after{content:'';display:block;position:absolute;bottom:0;right:0;width:70px;height:65px;background:rgba(0,0,0,.040);border-radius:70px 0 5px 0;}
.sticky-chat .chat-header svg{width:35px;height:35px;flex:0 0 auto;fill:var(--color-icon)}
.sticky-chat .chat-header .title{padding-left:15px;font-size:14px;font-weight:600;font-family:'Roboto', sans-serif;color:var(--color-icon)}
.sticky-chat .chat-header .title span{font-size:11px;font-weight:400;display:block;line-height:1.58em;margin:0;}
.sticky-chat .chat-text{display:flex;flex-wrap:wrap;margin:25px 20px;font-size:12px;color:var(--color-text)}
.sticky-chat .chat-text span{display:inline-block;margin-right:auto;padding:10px 10px 10px 20px;background-color:var(--color-bg-chat);border-radius:3px 15px 15px}
.sticky-chat .chat-text span:after{content:'Just now';display:inline-block;margin-left:15px;font-size:9px;color:var(--color-text-alt)}
.sticky-chat .chat-text span.typing{margin:15px 0 0 auto;padding:10px 20px 10px 10px;border-radius:15px 3px 15px 15px}
.sticky-chat .chat-text span.typing:after, .chat-menu{display:none}
.sticky-chat .chat-text span.typing svg{height:14px;fill:var(--color-text-alt)}
.sticky-chat .chat-button{display:flex;align-items:center;margin-top:15px;padding:12px 20px;border-radius:10px;background-color:#fff;box-shadow:0 2px 5px 0 rgba(0,0,0,.05);overflow:hidden;font-size:12px;color:var(--color-text)}
.sticky-chat .chat-button svg{width:20px;height:20px;fill:var(--color-text-alt);margin-left:auto;transform:rotate(40deg);-webkit-transform:rotate(40deg)}
.chat-menu:checked + .sticky-button label{-webkit-transform: rotate(360deg);transform: rotate(360deg);}
.chat-menu:checked + .sticky-button label svg.svg-1{display:none}
.chat-menu:checked + .sticky-button label svg.svg-2{display:table-cell}
.chat-menu:checked + .sticky-button + .sticky-chat{bottom:90px;opacity:1;visibility:visible}Step 2 - Add HTML Script Code
एचटीएमएल स्क्रिप्ट कोड को जोड़ने के दो तरीके हैं, आपको जो तरीका आसान लगे आप उसका इस्तेमाल कर सकते है, पहला तरीका है बहुत ही सरल है आपको ब्लॉगर लेआउट मेनू में सबसे पहले साइडबार विजेट पर जाकर एक नया एचटीएमएल/जवा स्क्रिप्ट का चुनाव करें और नीचे दिए गए एचटीएमएल स्क्रिप्ट कोड को कॉपी पेस्ट करें। दूसरा तरीका में आपको सबसे पहले नीचे दिए गए एचटीएमएल कोड को </body> टैग के ऊपर कॉपी पेस्ट करना होगा। आप दोनों में से कोई भी तरीका इस्तेमाल करे दोनों का परिणाम एक ही आएगा, ये आप पर निर्भर है कि आप कौन सा तरीक़ा काम में लेना चाहते हैं।
<input class='chat-menu hidden' id='offchat-menu' type='checkbox' />
<div class='sticky-button' id='sticky-button'>
<label for='offchat-menu'>
<svg class='svg-1' viewBox='0 0 32 32'><path d='M16,3A13,13,0,0,0,4.53,22.13L3,27.74a1,1,0,0,0,.27,1A1,1,0,0,0,4,29a.84.84,0,0,0,.27,0l5.91-1.65a1,1,0,0,0-.53-1.93L5.42,26.56l1.15-4.3a1,1,0,0,0-.1-.76A11,11,0,1,1,16,27a11.23,11.23,0,0,1-1.84-.15,1,1,0,0,0-1.15.82,1,1,0,0,0,.82,1.15A13,13,0,1,0,16,3Z'></path><path d='M15,11.21l-1.16-1.6a2.06,2.06,0,0,0-1.5-.84,2.08,2.08,0,0,0-1.62.6l-1.2,1.2a2.81,2.81,0,0,0-.8,2.08c0,1.77,1.36,4,4,6.6,3.09,3,5.23,4,6.69,4a2.7,2.7,0,0,0,2-.81l1.2-1.2a2,2,0,0,0-.24-3.11L20.8,17a2.09,2.09,0,0,0-1.83-.3l-1.49.47a.53.53,0,0,1-.26-.09,11.42,11.42,0,0,1-2.35-2.26.31.31,0,0,1,0-.11c.13-.44.35-1.15.5-1.64A2,2,0,0,0,15,11.21Zm1.29,7.63a2.33,2.33,0,0,0,1.75.2l1.54-.46,1.61,1.25L20,21c-.48.47-2.25.33-5.86-3.21-3-2.91-3.41-4.5-3.41-5.18A.89.89,0,0,1,11,12l1.28-1.19,1.18,1.65c-.16.49-.39,1.22-.51,1.65A2.12,2.12,0,0,0,13,15.51,11.24,11.24,0,0,0,16.33,18.84Z'></path></svg>
<svg class='svg-2' viewbox='0 0 512 512'>
<path d='M278.6 256l68.2-68.2c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-68.2-68.2c-6.2-6.2-16.4-6.2-22.6 0-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3l68.2 68.2-68.2 68.2c-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3 6.2 6.2 16.4 6.2 22.6 0l68.2-68.2 68.2 68.2c6.2 6.2 16.4 6.2 22.6 0 6.2-6.2 6.2-16.4 0-22.6L278.6 256z'></path>
</svg>
</label>
</div>
<div class='sticky-chat'>
<div class='chat-content'>
<div class='chat-header'>
<svg viewbox='0 0 32 32'><path d='M24,22a1,1,0,0,1-.64-.23L18.84,18H17A8,8,0,0,1,17,2h6a8,8,0,0,1,2,15.74V21a1,1,0,0,1-.58.91A1,1,0,0,1,24,22ZM17,4a6,6,0,0,0,0,12h2.2a1,1,0,0,1,.64.23L23,18.86V16.92a1,1,0,0,1,.86-1A6,6,0,0,0,23,4Z'></path><rect height='2' width='2' x='19' y='9'></rect><rect height='2' width='2' x='14' y='9'></rect><rect height='2' width='2' x='24' y='9'></rect><path d='M8,30a1,1,0,0,1-.42-.09A1,1,0,0,1,7,29V25.74a8,8,0,0,1-1.28-15,1,1,0,1,1,.82,1.82,6,6,0,0,0,1.6,11.4,1,1,0,0,1,.86,1v1.94l3.16-2.63A1,1,0,0,1,12.8,24H15a5.94,5.94,0,0,0,4.29-1.82,1,1,0,0,1,1.44,1.4A8,8,0,0,1,15,26H13.16L8.64,29.77A1,1,0,0,1,8,30Z'></path></svg>
<div class='title'>Please chat with our team <span>Admin will reply within minutes</span></div>
</div>
<div class='chat-text'>
<span>Hello, how can we help you?</span>
<span class='typing'><svg viewbox='0 0 512 512'><circle cx='256' cy='256' r='48'></circle><circle cx='416' cy='256' r='48'></circle><circle cx='96' cy='256' r='48'></circle></svg></span>
</div>
</div>
<a class='chat-button' href='https://api.whatsapp.com/send?phone=98576543210&text=Assalamualaikum,%20Saya%20ingin%20bertanya' rel='nofollow noreferrer' target='_blank'>
<span>Start chat...</span>
<svg viewBox='0 0 32 32'><path class='cls-1' d='M19.47,31a2,2,0,0,1-1.8-1.09l-4-7.57a1,1,0,0,1,1.77-.93l4,7.57L29,3.06,3,12.49l9.8,5.26,8.32-8.32a1,1,0,0,1,1.42,1.42l-8.85,8.84a1,1,0,0,1-1.17.18L2.09,14.33a2,2,0,0,1,.25-3.72L28.25,1.13a2,2,0,0,1,2.62,2.62L21.39,29.66A2,2,0,0,1,19.61,31Z'></path></svg>
</a>
</div>