How to add PDF viewer in Botble CMS
Sang Nguyen
Feb 17, 2023
3,060 views
1. Add reference to Fancybox stylesheet in Admin → Appearance → Custom HTML Header HTML, see screenshot below.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/fancybox.css">
2. Add reference to Fancybox JavaScript in Admin → Appearance → Custom JS → Footer JS see screenshot below.
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/fancybox.umd.js "></script>
3. Add on Page or Blog in Content, a Custom HTML shortcode with below an example:
Example 1:
<a data-fancybox data-type="pdf" data-src="https://www.africau.edu/images/default/sample.pdf" href="javascript:;"> Sample PDF file in Fancy Box </a>
Example 2:
<a data-fancybox data-type="iframe" data-src="https://mozilla.github.io/pdf.js/web/viewer.html" href="javascript:;"> Example #3 - Sample PDF file </a>Result:
