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:

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

        });

    }
});

How can we help?

Leave a Comment