View Categories

Add Custom Download button to Flipbook

1 min read

This customization allows user to add an extra download button that downloads different PDF file specified in the code.

JavaScript Code: #

<script>
  
  jQuery(function($){

    var customButtonFunction = function(event){
      //Custom button code goes here
    };

    var alternateDownloadFile = "https://js.dearflip.com/wp-content/uploads/2020/03/foee_hbf_meatatlas_jan2014.pdf";
    
    //We add the function in Global Defaults so that all flipbooks in the page act same.
    DFLIP.defaults.onReady = function(flipbook) {

      var customDownloadButton = jQuery('<a class="df-ui-btn ti-download df-ui-custom-download-button" download target="_blank"></a>');
      customDownloadButton.attr("href",alternateDownloadFile).attr("title","Download Alternate File");
      flipbook.ui.more.after(customDownloadButton);
      //if you want to insert in some other place.. find the button and then insert before that button
    };

  });
  
</script>

CSS StyleSheet: #

<style>

.df-ui-custom-download-button{
  width:max-content;
}

</style>

Leave a Comment