We expect knowledge of Javascript and CSS to complete this customization.
Add the following CSS for What’s App button icon, and close button:
.df-share-button.ti-whatsapp:before {
content: url('https://api.iconify.design/simple-icons:whatsapp.svg?color=%23777&width=20&height=20');
}
.df-share-button.df-icon-close {
position: absolute;
top: 0px;
right: 0px;
}
Also add the following code that
1. Removes mail icon
2. Creates the What’s App button
3. Adds close button
jQuery(function(){
DFLIP.defaults.onCreateUI = function(flipbook){
//1. remove Mail icon
flipbook.ui.shareBox.mail.off().remove();
//2. Add Whats App Button
flipbook.ui.shareBox.whatsapp = jQuery("<a target='_blank'>").addClass("df-share-button ti-whatsapp");
flipbook.ui.shareBox.whatsapp.appendTo(flipbook.ui.shareBox.box);
flipbook.ui.shareBox.whatsapp.on("click",function(e){
jQuery(this).attr('href', 'https://wa.me?text='+ encodeURIComponent('Check this link: ' + flipbook.ui.shareBox.shareUrl));
e.stopPropagation();
});
//3. Add Close Button
flipbook.ui.shareBox.closeButton = jQuery("<a target='_blank'>").addClass("df-share-button df-icon-close");
flipbook.ui.shareBox.closeButton.appendTo(flipbook.ui.shareBox.box);
flipbook.ui.shareBox.closeButton.on("click",function(e){
flipbook.ui.shareBox.close();
e.stopPropagation();
});
}
});