How to add custom share button?

Click to open demo!
We expect knowledge of Javascript and CSS to complete this customization.

Add the following CSS for What’s App button icon:

.df-share-button.ti-whatsapp:before {
    content: url('https://api.iconify.design/simple-icons:whatsapp.svg?color=%23777&width=20&height=20');
}

Also add the following code that creates the What’s App button and removes the mail icon.

jQuery(function(){
    DFLIP.defaults.onCreateUI = function(flipbook){

        flipbook.ui.shareBox.whatsapp = jQuery("<a target='_blank'>").addClass("df-share-button ti-whatsapp");
        flipbook.ui.shareBox.whatsapp.appendTo(flipbook.ui.shareBox.box);
        //remove Mail icon
        flipbook.ui.shareBox.mail.off().remove();

        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();

        });

    }
});

Leave a Comment