HTML5 allows anyone to embed a PDF file into a website with ease. The scope of this article is to demonstrate how to do this on the Spark Pay platform.
Embed - To render a document or image onto an HTML page.
PDF - A file format that provides an electronic image of text or text and graphics that looks like a printed document. This can be viewed, printed, and electronically transmitted.
Initial Setup
To begin, you will first want to upload the PDF file to your storefront. You will need to login to the admin console to accomplish this. Once logged in, go to Content > Files. Here you should see a store directory, and a Shared folder. If you have a multistore setup and need this to appear on multiple stores, use the Shared folder. Click the gear icon next to the folder you want to upload, and choose Upload Files Here. Here you will want to select the file, and click the Insert button.
Once the file is uploaded, you will want to view the PDF to get the documents' URL. You can right click on the file, and choose "Open link" and copy the URL at the top if you have trouble finding it.
HTML Markup
Once you have obtained the URL of the file, it is time to add the HTML.
<embed src="/Shared/PDFs/document.pdf" width="100%" height="768px" alt="pdf" pluginspage="http://www.adobe.com/products/acrobat/readstep2.html">
The HTML above is an example of what to put in to embed the PDF.
- Replace the orange text with the URL to your PDF file. Note that this can be a relative URL if the file is on your storefront.
- The blue text is setting the width to be 100% of the parent element. If the width looks odd, replace this number with a pixel count (800px or something similar).
- The purple text is setting the height of the embedded PDF. Increase or decrease the pixel count as desired.
After replacing the markup with your values, paste the code into a page on your storefront. In the example below, I used a content page.
And that is it! Simply view the page to make sure its coming in as expected. Feel free to adjust the width and height parameters if something looks odd.
