There are times when it may be necessary to display a PDF directly on a webpage rather than through a link, which can be accomplished through an embed.
There are 2 options to embed a PDF on a webpage. The first step is the same for both options: go to the webpage the PDF will be displayed on and toggle the page editor at the top of the screen to Active.
Once the page editor is active, a PDF can be embedded using the content editor or a PDF can be embedded directly on a webpage via the source code.
Embed Using Content Editor
In the WYSIWYG (what you see is what you get) content editor select Insert and then Insert/edit iframe. Select or upload the PDF to embed from Novi Files and be sure to set the width of the iframe to 1000px. The embedded PDF can be deleted as needed by clicking the pdf and hitting the Delete key on your keyboard.
Embed via Source Code
Add the following style code at the top of the source code for the page section embed within:
<style> .pdf-container { position: relative; overflow-x: scroll; } </style>NOTE: If there are multiple PDF embeds on a page, the <style> code should only be embedded ONCE at the top of the source code.
Save the source code and close the source code modal.
Once the <style> code is added, place your cursor where the PDF should appear on the webpage. Open the source code modal again, and use the following code within the source code modal at the point on the site page where you would like to embed the PDF:
<div class="pdf-container"> <iframe width="800" height="700" iframe="" src="XXX-REPLACE-URL-HERE-XXX"> </iframe> </div>
Replace XXX-REPLACE URL HERE-XXX with the PDF's URL. This link could come from a PDF that was uploaded into Novi Files (select the file in the lower right-hand corner, click the Manage button at the top, and select Info to get the PDF's URL) or it could be from a third-party source. After a PDF URL has been added, save and close the modal, and the page should display the PDF as an embedded file in an iframe.
The above embed code will work for both embedding in a paragraph section of the page, and within an accordion. Remember to include the <style> code at the top of the source code.
Whether embedding via the content editor or source code, the embedded PDF will appear on the page in an iframe like the image below:
Users interacting with the PDF can use the menu icon in the upper left-hand corner to show page previews, and users can zoom in/out, rotate, download, and print the PDF if applicable.