1. Home
  2. Docs
  3. Advanced Customizations
  4. Add Custom Button to Flipbook
  5. Add Custom Download button to Flipbook

Add Custom Download button to Flipbook

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://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>

For WordPress, please read on 
How to add Custom Code to WordPress Pages

Leave a Comment