Copy đoạn code dưới đây chèn vào file functions.php của web hoặc tách code ra cho vào đâu tùy thích:
Yêu cầu: Web đã có sẵn thư viện Font Awesome
/* Code liên lạc */
add_action('wp_footer','custom_contact');
function custom_contact(){
?>
<div id="support">
<div id="iconChat"></div>
<ul id="option">
<li><a href=""><i class="fab fa-facebook-messenger"></i><span>Chat Facebook</span></a></li>
<li><a href=""><i class="fas fa-phone"></i><span>0987 127 039</span></a></li>
<li><a href=""><i class="fas fa-envelope"></i><span>Email</span></a></li>
<li><a href=""><i class="fas fa-globe"></i><span>Website</span></a></li>
</ul>
</div>
<script>
jQuery(document).ready(function () {
jQuery("#iconChat").click(function () {
jQuery('#option').toggle();
});
jQuery("#iconChat").click(function (e) {
e.stopPropagation();
});
jQuery(document).click(function () {
jQuery("#option").hide();
});
});
</script>
<style>
#support ul li {list-style-type: none;margin: 0;padding: 0;}
#support a {text-decoration: none;color: #333;}
#support {position: fixed;right: 10px;bottom: 100px;width: 60px;height: 60px;z-index: 99999;}
#iconChat {position: absolute;width: 100%;height: 100%;top: 0;left: 0;background: #189eff;cursor: pointer;border-radius: 99px;overflow: hidden;box-shadow: 0 0 10px rgba(0, 0, 0, .6);}
#iconChat:before {content: "\f1d8";position: absolute;font-family: "Font Awesome 5 Free";font-weight: 700;text-align: center;width: 40px;height: 40px;line-height: 40px;top: 10px;left: 10px;color: #189eff;background: #fff;border-radius: 99px;}
#option {background: center no-repeat #FFF;box-shadow: 0 0 10px rgba(0, 0, 0, .6);width: 235px;position: absolute;bottom: 60px;right: 0;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;-webkit-box-align: start;-ms-flex-align: start;align-items: flex-start;padding: 14px 0;-webkit-box-sizing: border-box;box-sizing: border-box;border-radius: 7px;-webkit-transform-origin: 80% 105%;-ms-transform-origin: 80% 105%;transform-origin: 80% 105%;
-webkit-transition: ease-out .12s all;-o-transition: ease-out .12s all;transition: ease-out .12s all;z-index: 10000;display: none;}
#option:before {content: "";position: absolute;bottom: -7px;right: 25px;left: auto;display: inline-block!important;border-right: 10px solid transparent;border-top: 10px solid #FFF;border-left: 10px solid transparent;}
#option li {width: 100%;}
#option li a {display: inline-block;padding: 8px 10px;}
#option li:hover {background: #eee;}
#option li a i {display: inline-block;width: 45px;height: 45px;line-height: 45px;background: #189eff;text-align: center;border-radius: 99px;color: #fff;margin-right: 8px;}
#option li a i.fa-facebook-messenger {background: #0078FF;}
#option li a i.fa-phone {background: #4EB625;}
#option li a i.fa-globe {background: #000;}
#option li a i.fa-envelope {background: #FF643A;}
</style>
<?php
}