Blog Website Me facebook Messanger Chat widget kaise Add kare
facebook messenger chat widget
facebook chat widget for website
facebook chat widget for website
Facebook Messanger Chat widget Blog/website मे add करने से आपके ब्लॉग पे आने वाले विजिटर को आपसे कांटेक्ट करने मे आसानी होंगी और विजिटर को आपका ब्लॉग पसंद आता है तो वो आपके फेसबुक पेज को भी लाइक करेंगे इससे ब्लॉग के साथ फेसबुक पेज भी पॉपुलर होगा So guys मै कहना चाहता हु की अपने ब्लॉग मे Facebook live chat widget जरूर ऐड करें ताकि विजिटर आपसे आसानी से कॉन्टेक्ट कर सके
आपको तो पता है की google मे हिंदी वेबसाइट की कमी नही है इसलिए अगर विजिटर को कोई question पूछना हो तो वे ऐसे वेबसाइट पर visit करेंगे जहाँ उन्हें उनका question का आंसर जल्दी मिले ऐसे मे जिस ब्लॉग पर ब्लॉगर से कांटेक्ट करने मे आसानी होंगी वैसे ही ब्लॉग पे visitor ज्यादा visit करना पसंद करते है इस लिए ब्लॉगर मे facebook Chat widget ऐड करके हम visitor के साथ live रह सकते है और विजिटर के साथ अच्छा कनेक्शन बना सकते है
मैंने यहाँ पर जो ट्रिक और कोड दिया है वो 100% working है आप सिर्फ यहाँ बताये गए स्टेप को सही से फॉलो करें तो successfuly Facebook messanger Chat widget Blogger Blog मे ऐड कर सकते है
Facebook messanger Chat widget Blog website मे kaise add करें in हिंदी कम्पलीट जानकारी
Step. 1 हमारे द्वारा निचे दिया गया कोड कॉपी करें
<!-- WhatsHelp.io widget --><script type="text/javascript">(function () {var options = {facebook: " xxxxxxxxxx ", // Facebook page IDcall_to_action: "Message us", // Call to actionposition: "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><!-- /WhatsHelp.io widget --> Customize Code 1
[नोट ; first code मे xxxxxxx की जगह अपने फेसबुक page ki id डाले
इसके अलावा कोड से छेड़ -छार नहीं करें
इसके अलावा कोड से छेड़ -छार नहीं करें
Step. 2 अब Blogger dashboard मे login करके जाये Theme पर क्लिक करें Edit html पर क्लिक करें
Step. 3 template की full coding open हो जाएगी template मे Ctrl +f press करके </body> Search करें
</body> मिल जाने पर Copy किया हुआ कोड </body> के निचे पेस्ट करके template Save कर दे
</body> मिल जाने पर Copy किया हुआ कोड </body> के निचे पेस्ट करके template Save कर दे
Trick 2
सबसे पहले ये Code कॉपी कर ले
<style>.fb-livechat,.fb-widget{display:none}.ctrlq.fb-button,.ctrlq.fb-close{position:fixed;right:24px;cursor:pointer}.ctrlq.fb-button{z-index:1;background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDEyOCAxMjgiIGhlaWdodD0iMTI4cHgiIGlkPSJMYXllcl8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxMjggMTI4IiB3aWR0aD0iMTI4cHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxnPjxyZWN0IGZpbGw9IiMwMDg0RkYiIGhlaWdodD0iMTI4IiB3aWR0aD0iMTI4Ii8+PC9nPjxwYXRoIGQ9Ik02NCwxNy41MzFjLTI1LjQwNSwwLTQ2LDE5LjI1OS00Niw0My4wMTVjMCwxMy41MTUsNi42NjUsMjUuNTc0LDE3LjA4OSwzMy40NnYxNi40NjIgIGwxNS42OTgtOC43MDdjNC4xODYsMS4xNzEsOC42MjEsMS44LDEzLjIxMywxLjhjMjUuNDA1LDAsNDYtMTkuMjU4LDQ2LTQzLjAxNUMxMTAsMzYuNzksODkuNDA1LDE3LjUzMSw2NCwxNy41MzF6IE02OC44NDUsNzUuMjE0ICBMNTYuOTQ3LDYyLjg1NUwzNC4wMzUsNzUuNTI0bDI1LjEyLTI2LjY1N2wxMS44OTgsMTIuMzU5bDIyLjkxLTEyLjY3TDY4Ljg0NSw3NS4yMTR6IiBmaWxsPSIjRkZGRkZGIiBpZD0iQnViYmxlX1NoYXBlIi8+PC9zdmc+) center no-repeat #0084ff;width:60px;height:60px;text-align:center;bottom:24px;border:0;outline:0;border-radius:60px;-webkit-border-radius:60px;-moz-border-radius:60px;-ms-border-radius:60px;-o-border-radius:60px;box-shadow:0 1px 6px rgba(0,0,0,.06),0 2px 32px rgba(0,0,0,.16);-webkit-transition:box-shadow .2s ease;background-size:80%;transition:all .2s ease-in-out}.ctrlq.fb-button:focus,.ctrlq.fb-button:hover{transform:scale(1.1);box-shadow:0 2px 8px rgba(0,0,0,.09),0 4px 40px rgba(0,0,0,.24)}.fb-widget{background:#fff;z-index:2;position:fixed;width:360px;height:435px;overflow:hidden;opacity:0;bottom:0;right:24px;border-radius:6px;-o-border-radius:6px;-webkit-border-radius:6px;box-shadow:0 5px 40px rgba(0,0,0,.16);-webkit-box-shadow:0 5px 40px rgba(0,0,0,.16);-moz-box-shadow:0 5px 40px rgba(0,0,0,.16);-o-box-shadow:0 5px 40px rgba(0,0,0,.16)}.fb-credit{text-align:center;margin-top:8px}.fb-credit a{transition:none;color:#bec2c9;font-family:Helvetica,Arial,sans-serif;font-size:12px;text-decoration:none;border:0;font-weight:400}.ctrlq.fb-overlay{z-index:0;position:fixed;height:100vh;width:100vw;-webkit-transition:opacity .4s,visibility .4s;transition:opacity .4s,visibility .4s;top:0;left:0;background:rgba(0,0,0,.05);display:none}.ctrlq.fb-close{z-index:4;padding:0 6px;background:#365899;font-weight:700;font-size:11px;color:#fff;margin:8px;border-radius:3px}.ctrlq.fb-close::after{content:'x';font-family:sans-serif}</style><div class="fb-livechat"> <div class="ctrlq fb-overlay"></div><div class="fb-widget"> <div class="ctrlq fb-close"></div><div class="fb-page" data-href="https://www.facebook.com/hixxxxxxx/" data-tabs="messages" data-width="360" data-height="400" data-small-header="true" data-hide-cover="true" data-show-facepile="false"><blockquote cite="https://www.facebook.com/hinxxxxxxx/" class="fb-xfbml-parse-ignore"> </blockquote></div> <div class="fb-credit"> <a href="https://www.labnol.org/software/facebook-messenger-chat-widget/9583/" target="_blank">Facebook Chat Widget by Digital Inspiration</a></div> <div id="fb-root"></div> </div><a href="https://m.me/xxxxxxx" title="Send us a message on Facebook" class="ctrlq fb-button"></a> </div><script src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.9"></script><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script><script>$(document).ready(function(){var t={delay:125,overlay:$(".fb-overlay"),widget:$(".fb-widget"),button:$(".fb-button")};setTimeout(function(){$("div.fb-livechat").fadeIn()},8*t.delay),$(".ctrlq").on("click",function(e){e.preventDefault(),t.overlay.is(":visible")?(t.overlay.fadeOut(t.delay),t.widget.stop().animate({bottom:0,opacity:0},2*t.delay,function(){$(this).hide("slow"),t.button.show()})):t.button.fadeOut("medium",function(){t.widget.stop().show().animate({bottom:"30px",opacity:1},2*t.delay),t.overlay.fadeIn(t.delay)})})});</script>
Code Customization ; isme 3 जगह पर xxxx है उसे remove करके अपने facebook page का id डाले
Blogger dashboard मे जाये Layout पर Click करें Sidebar मे add A Gadget पर Click करें
Step. 2 अब एक new window open hoga उसमे html/javaScript Slect करें
Step.3 फिर new window open होगा उसमे ऊपर वाले box को खाली छोड़ दे और niche वाले box मे Code pest करके Save कर दे
Cograts ; आपने सफलतापूर्बक अपने ब्लॉग मे facebook messanger chat widget add कर लिया है Chat widget से related कोई question हो तो हमसे पूछ सकते है
Friends कैसा लगा ये post हमें comment के माध्यम से जरूर बताये और लोगो के साथ social साइट्स पर share जरूर करें हमारे ब्लॉग के नई पोस्ट की जानकारी के लिए हमारे ब्लॉग को सब्सक्राइब जरूर करें
