View Categories

How to add custom share button?

2 min read

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

        });

    }
});

Leave a Comment