Hello Everyone, on this occasion I will share How to Add Email Chatbox Widget in Blogger. This email chatbox widget is perfect for those who have sales sites like online stores or landing pages.
In addition to being able to beautify the appearance of your site, it will also look more professional, and it will also be easier for potential buyers to contact you directly.
How to Add Email Chatbox Widget in Blogger :-
Step 1 :- First of All Go To Blogger.Com And Login Your Account.
Step 2 :- Then Click on Theme Menu.
Step 3 :- Then Click on Theme Edit Html.
Step 4 :- Then Copy Css Below and Place Above Code ]]></b:skin> .
/* Email Chat Box By https://smarttechcarry.blogspot.com */
.stm-bgDefault{background:#0a16ff}
/* Change This Color Code as Per Your Need. #0a16ff */
.stmChatBoxMail{position:fixed;z-index:97;display:none;background:#fff;color:#444;box-shadow:0px 4px 10px 2px rgba(0,0,0,.06);border:1px solid #eee;border-radius:10px;bottom:80px;right:28px;max-width:320px;}.stmChatBoxHeader,.stmChatInput{padding:20px}span.stmChatTitle{color:#fff;padding:8px 15px;margin:0 0 10px;display:inline-block;border-radius:20px}.stmChatDesc{font-size:14px;line-height:1.8}.stmChatAdm{height:200px;background:#f4f5f9;padding:20px}span.waChatMAil{background:#fff;border:1px solid #ddd;font-size:14px;padding:10px 25px;display:inline-block;border-radius:10px}input#stmInputBox{border:none;outline:none;width:70%;padding:10px;margin:-10px}
a#stmChatSendMail{color:#555;width:55px;margin:-10px;float:right;font-weight:700;font-size:14px;padding:10px;background:#f0f5fb;border-radius:15px 3px 15px 15px;text-decoration:none}
a#stmChatSendMail:hover{opacity:.8}
.stmMailChatMenu:checked + .stmChatBtnMail{-webkit-transform: rotate(360deg);transform: rotate(360deg)}
.stmMailChatMenu:checked + .stmChatBtnMail svg.svg-1{display:none}
.stmMailChatMenu:checked + .stmChatBtnMail svg.svg-2{display:block}
svg{width:22px;height:22px;vertical-align:middle;fill:#fff}
.stmMailChatMenu,.stmChatBtnMail .svg-2{display:none}
.stmChatBtnMail{position:fixed;bottom:20px;right:20px;border-radius:50px;z-index:20;overflow:hidden;display:flex;align-items:center;justify-content:center;width:50px;height:50px;-webkit-transition:all .2s ease-out;transition:all .2s ease-out}
.stmChatBtnMail svg{margin:auto;fill:#fff}
.stmChatBtnMail svg.svg-2{display:none}
/* If CSS is Different Then Adjust Class or Remove This Section */
.darkMode .stmChatBoxMail .stmChatBoxHeader{background:#2d2d30;color:#fefefe}
.darkMode .stmChatAdm,.darkMode .stmChatBoxMail{background:#252526;color:#fefefe}
.darkMode span.waChatMAil,.darkMode #stmChatSendMail,.darkMode #stmInputBox{background:#2d2d30;color:#fefefe;border-color:rgba(255,255,255,.1)}You Can Change The Color Code According to You. To Change This Color Code #0a16ff .
Step 5 :- Then Copy The JQuery CDN and Place Above Code </head> or <!--<head/>--></head> .
<script async='async' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'/>
Step 6 :- Then copy the HTML code and place it under </footer> .
<div class='stmChatBoxMail'>
<div class='stmChatBoxHeader'><span class='stmChatTitle stm-bgDefault'>Help Service Center</span>
<div class='stmChatDesc'>Please let us know what we can help you with and we'll answer your questions.</div></div>
<div class='stmChatAdm'><span class='waChatMAil'>Hello, is there anything we can help you with?</span></div>
<div class='stmChatInput'><input id='stmInputBox' placeholder='Write Your Message Here...' type='text'/><a class='stm-bgDefault' href='javascript:void;' id='stmChatSendMail'>Send</a></div>
</div>
<input class='stmMailChatMenu hidden' id='offstmMailChatMenu' type='checkbox'/>
<label class='stmChatBtnMail tombol-bukatutup stm-bgDefault' for='offstmMailChatMenu'>
<svg class='svg-1' viewBox='0 0 32 32'><g><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'/><rect height='2' width='2' x='19' y='9'/><rect height='2' width='2' x='14' y='9'/><rect height='2' width='2' x='24' y='9'/><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'/></g></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'/></svg>
</label>Step 7 :- Then copy the JavaScript code and place it above the </body> .
<script type='text/javascript'>
//<![CDATA[
// Email Jquery Chat Box By https://smarttechcarry.blogspot.com
$('.tombol-bukatutup').click(function(){
$('.stmChatBoxMail').slideToggle()});
$('#stmChatSendMail').click(stmboxchat);
function stmboxchat() {
var stmmaillink = 'https://mail.google.com/mail/u/0/?view=cm&fs=1&tf=1&to=',
email = '[email protected]',
// Your Email Address
mailsubject = '&subject=Good Morning, Smart Tech Mukesh ',
// Email Subject But Appears On Smartphone Only
stmmaillink1 = '',
stmmaillink2 = '&body= ',
jarak = ''; if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
var stmmaillink = 'mailto:',
jarak ='';
stmmaillink1 = '?cc=&bcc=';
}
var stminputchat = $('#stmInputBox').val(),
// Taking User Message Input
input_viaUrl = location.href;
var stm_email_chat = stmmaillink + email + stmmaillink1 + mailsubject + stmmaillink2 + stminputchat + '%0A%0A' + jarak + jarak + 'Sent Via : ' + input_viaUrl;
window.open(stm_email_chat, '_blank');
window.location.href = input_viaUrl;
}
//]]>
</script>Step 8 :- Then Don't Forget to Click on Save and Then See The Result.
Instead of yourgmail.com, enter your gmail id. You can change all the marked elements accordingly.
Preivew of Email ChatBox Widget :-
Conclusion :-
In this post I have shared with you all How to Add Email Chatbox Widget in Blogger. So how did you like this post and tell me by commenting. If you have any question then you can comment. Thanks for visiting our website.
Refrence :
Smart Tech Carry
Rate This Article
Thanks for reading: How to Add Email Chatbox Widget in Blogger ?:)
Conclusion
In this article, I have shared How to Add Email Chatbox Widget in Blogger ?. I hope you have liked it Please do share it with your friends and follow our blog for more.
Join our Telegram Channel to get the lastest posts updates daily. Thank you!