1. Home
  2. Docs
  3. DearFlip jQuery Flipbook Plugin
  4. Customizations
  5. How to add custom share button?

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, 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