 |
| Cách tạo Chatbox Email trên Blogspot |
I. GIỚI THIỆU
Chào mọi người đến với bài viết của ANewTips thì hôm nay tôi xin chia sẻ đến các bạn một Tips giúp website của bạn trở nên chuyên nghiệp hơn đó là tiện ích Chatbox Email dành cho Blogspot rất hữu ích cho các website bán hàng online, bên cạnh việc có thể làm đẹp giao diện trang website của bạn, nó cũng giúp website bạn trở nên chuyên nghiệp hơn và những người mua tiềm năng cũng sẽ cảm thấy dễ dàng hơn khi liên hệ trực tiếp với bạn. Còn chờ gì nữa hãy xem ngay cách thực hiện thôi.
II. CÁCH TẠO TIỆN ÍCH CHATBOX EMAIL
Các bạn truy cập vào trang quản trị Blogspot của bạn rồi nhấp vào Chủ đề - Tùy chỉnh - Chỉnh sửa HTML. Sau đó các bạn Copy đoạn Code bên dưới và đặt trước thẻ</head> hoặc & lt;! - </head> - & gt; & lt; / head & gt ;
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js' type='text/javascript'/>Sau đó bạn Copy thêm mã CSS và đặt nó phía trước thẻ ]]> </ b: skin>
/* chat box email by ANewTips */
.wc-bgDefault{background:#005bffbf} /* thay dổi màu chatbox */.wcChatBoxMail{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:100px;right:28px;max-width:320px;}.wcChatBoxHeader,.wcChatInput{padding:20px}span.wcChatTitle{color:#fff;padding:8px 15px;margin:0 0 10px;display:inline-block;border-radius:20px}.wcChatDesc{font-size:14px;line-height:1.8}.wcChatAdm{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#wcInputBox{border:none;outline:none;width:70%;padding:10px;margin:-10px}
a#wcChatSendMail{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#wcChatSendMail:hover{opacity:.8}
.wcMailChatMenu:checked + .wcChatBtnMail{-webkit-transform: rotate(360deg);transform: rotate(360deg)}
.wcMailChatMenu:checked + .wcChatBtnMail svg.svg-1{display:none}
.wcMailChatMenu:checked + .wcChatBtnMail svg.svg-2{display:block}
svg{width:22px;height:22px;vertical-align:middle;fill:#fff}
.wcMailChatMenu,.wcChatBtnMail .svg-2{display:none}
.wcChatBtnMail{position:fixed;bottom:60px;right:10px;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}
.wcChatBtnMail svg{margin:auto;fill:#fff}
.wcChatBtnMail svg.svg-2{display:none}
/* CSS darkmode */
.darkMode .wcChatBoxMail .wcChatBoxHeader{background:#2d2d30;color:#fefefe}
.darkMode .wcChatAdm,.darkMode .wcChatBoxMail{background:#252526;color:#fefefe}
.darkMode span.waChatMAil,.darkMode #wcChatSendMail,.darkMode #wcInputBox{background:#2d2d30;color:#fefefe;border-color:rgba(255,255,255,.1)}Để hiển thị Chatbox Email trên Blogspot bạn chỉ cần Copy đoạn mã HTML đặt phí trước thẻ </footer> hoặc có thể trong các tiện ích HTML/JavaScript miễn là trước thẻ </body>
<div class='wcChatBoxMail'>
<div class='wcChatBoxHeader'><span class='wcChatTitle wc-bgDefault'>Chatbox Email</span>
<div class='wcChatDesc'>Xin chào, ANewTips có thể giúp gì cho bạn? Tin nhắn sẽ được gửi qua Email và không trực tiếp trên Website.</div></div>
<div class='wcChatAdm'><span class='waChatMAil'>Hãy luôn giữ sức khỏe tốt bạn nhá.</span></div>
<div class='wcChatInput'><input id='wcInputBox' placeholder='Nhập tin nhắn...' type='text'/><a class='wc-bgDefault' href='javascript:void;' id='wcChatSendMail'>Gửi</a></div>
</div>
<input class='wcMailChatMenu hidden' id='offwcMailChatMenu' type='checkbox'/>
<label class='wcChatBtnMail tombol-bukatutup wc-bgDefault' for='offwcMailChatMenu'>
<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>Và cuối cùng là đặt đoạn Code jQuery trước thẻ </body> hoặc & lt;! - </body> - & gt; & lt; / body & gt;
<script>
//<![CDATA[
//jQuery Widget Chat Box Email by ANewTips
$('.tombol-bukatutup').click(function(){
$('.wcChatBoxMail').slideToggle()});
$('#wcChatSendMail').click(wcboxchat);
function wcboxchat() {
var wcmaillink = 'https://mail.google.com/mail/u/0/?view=cm&fs=1&tf=1&to=',
email = 'info.anewtips@gmail.com',
mailsubject = '&subject=Hỗ trợ: ',
wcmaillink1 = '',
wcmaillink2 = '&body= ',
jarak = '';
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
var wcmaillink = 'mailto:',
jarak ='Từ ';
wcmaillink1 = '?cc=&bcc=';
}
var wcinputchat = $('#wcInputBox').val(),
input_viaUrl = location.href;
var wendy_email_chat = wcmaillink + email + wcmaillink1 + mailsubject + wcmaillink2 + wcinputchat + '%0A%0A' + jarak + 'ANewTips: ' + input_viaUrl;
window.open(wendy_email_chat, '_blank');
window.location.href = input_viaUrl;
}
///]]>
</script>Hãy thay đổi Email mà bạn muốn nhận tin nhắn từ người truy cập, và bạn thay đổi các phần được đánh dấu sau cho phù hợp với website của bạn.
III. LỜI KẾT
Thì ANewTips đã chia sẻ xong cách để tạo Chatbox Email trên Blogspot chúc các bạn thành công, nếu thấy hay và thú vị hãy chia sẻ bài viết này để mọi người cùng biết đến nhá. Cảm ơn mọi người!
Copyright © ANewTips