How To Have A Button On A Page That Downloads A PDF Document?
You must be login to your website's backend.
Head over to the page where you want the Button to be inserted.
Example: I will insert a button on About Us page.
How To Insert A Button?
Click on the "**+**" icon to display the Add Element dialog box and search for Button.
Under Button Settings dialog box, change the following:
Extra Note: You can change the Element ID base to your liking, however do not forget to change the element ID on your code. Make sure they have the same name.
**Sample Here:**
How To Locate Your PDF URL Link?
On the left side of your dashboard, click on Media. Locate the PDF file you want to be downloaded once the button is clicked. If the PDF file is not yet uploaded on Media, please do so.
Once the file is open, copy the complete sub-directory after your website's URL and paste it on "**Select URL**" button under Button Settings dialog box.
After setting up your button, we are going to insert few codes to enable the button to download PDF file and open it to a New Tab. To do this follow the steps below:
Click the "**+**" icon again which can be located under the button element.
Under Add Element dialog box, search for Raw JS.
Once the Raw JS Settings dialog box opens, paste the following code inside JavaScript Code box. Once done do not forget to click Save Changes button.
Code:
<script>
// DOWNLOADS THE FILE
jQuery( document ).ready(function($) {
$( "#ebookdownload" ).attr( "download", "" );_
});
// END DOWNLOADS THE FILE
// REDIRECT AFTER DOWNLOAD
jQuery('#ebookdownload').on('click', function(e){_
var win = window.open( jQuery(this).attr("href") ); //open download link in new page
win.close();
});
// END REDIRECT AFTER DOWNLOAD
</script>
Click on Update button to save all the changes.
Is this tutorial unclear? If you do not find the training you are looking for, please send us a detailed email to hello@lightningsites.com.
Head over to the page where you want the Button to be inserted.
Example: I will insert a button on About Us page.
How To Insert A Button?
Click on the "**+**" icon to display the Add Element dialog box and search for Button.
Under Button Settings dialog box, change the following:
Extra Note: You can change the Element ID base to your liking, however do not forget to change the element ID on your code. Make sure they have the same name.
**Sample Here:**
How To Locate Your PDF URL Link?
On the left side of your dashboard, click on Media. Locate the PDF file you want to be downloaded once the button is clicked. If the PDF file is not yet uploaded on Media, please do so.
Once the file is open, copy the complete sub-directory after your website's URL and paste it on "**Select URL**" button under Button Settings dialog box.
After setting up your button, we are going to insert few codes to enable the button to download PDF file and open it to a New Tab. To do this follow the steps below:
Click the "**+**" icon again which can be located under the button element.
Under Add Element dialog box, search for Raw JS.
Once the Raw JS Settings dialog box opens, paste the following code inside JavaScript Code box. Once done do not forget to click Save Changes button.
Code:
<script>
// DOWNLOADS THE FILE
jQuery( document ).ready(function($) {
$( "#ebookdownload" ).attr( "download", "" );_
});
// END DOWNLOADS THE FILE
// REDIRECT AFTER DOWNLOAD
jQuery('#ebookdownload').on('click', function(e){_
var win = window.open( jQuery(this).attr("href") ); //open download link in new page
win.close();
});
// END REDIRECT AFTER DOWNLOAD
</script>
Click on Update button to save all the changes.
Is this tutorial unclear? If you do not find the training you are looking for, please send us a detailed email to hello@lightningsites.com.
Updated on: 12/02/2022
Thank you!