Embedding PDF's into a Content Page

Follow

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.

Have more questions? Submit a request

Comments

  • Avatar
    Marvin Hankins

    On mobile device it says "This plugin is not supported". Is there a fix for this?

  • Avatar
    Will Jiminez

    Hey Marvin, this is a known issue when using Android. It actually happens to a lot of websites because the mobile browser does not have the capability to support adobe or some other PDF viewer. You could put in a link directly to the PDF that mobile users could click to download the PDF which will allow for viewing, but the embedded PDF may not work in all browsers.

  • Avatar
    Marvin Hankins

    Thanks Will. I'm trying to figure out how to show link to PDF if mobile device and otherwise embed.

    Edited by Marvin Hankins
  • Avatar
    Marvin Hankins

    OK check this out. Here's a workaround to show the embedded PDF on large displays only and link to PDF on smaller displays:

    This is the embedded PDF visible only on large displays:

    [<span class="visible-lg"><embed src="/documents/Specs_##ITEMNR##.pdf" width="100%" height="800px" alt="pdf" pluginspage="http://www.adobe.com/products/acrobat/readstep2.html"></span>]

    This is a FontsAwesome icon with link to PDF the embedded PDF visible only on smaller displays:

    [<span class="hidden-lg"><p><i class="fa fa-file-pdf-o" aria-hidden="true"></i> <a href="/documents/Specs_##ITEMNR##.pdf" target="_blank">Print/Download</a>
    </p>]

    This is an embedded image of the PDF (from Google Drive) with link to the actual PDF visible only on smaller displays:

    [<p><a href="/documents/Specs_##ITEMNR##.pdf" target="_blank"><img src="https://docs.google.com/drawings/d/1TFhdik7-D3ou9Rnh9R6rzwrMk024UW4lEXPpoqDY4x8/pub?w=1000&h=1250" alt=""></a>
    </p></span>]

    The three sections of code are inside the brackets and would be placed together.

    Here is a link to the page - click on the "Specifications" tab.

    Edited by Marvin Hankins
  • Avatar
    Marvin Hankins

    Here's a simpler method that works great on all mobile devices except IOS - no idea why:

    [<object width="100%" height="800px" data="/documents/Specs_##ITEMNR##.pdf" type="application/pdf"><p><i class="fa fa-file-pdf-o" aria-hidden="true"></i> <a href="/documents/Specs_##ITEMNR##.pdf" target="_blank">Print/Download</a>
    </p>
    <p><a href="/documents/Specs_##ITEMNR##.pdf" target="_blank"><img src="https://docs.google.com/drawings/d/1TFhdik7-D3ou9Rnh9R6rzwrMk024UW4lEXPpoqDY4x8/pub?w=1000&h=1250"></a>
    </p></object>]

    (Just the part inside the square brackets)

    Edited by Marvin Hankins
  • Avatar
    Will Jiminez

    Great find Marvin!

    Just to help make sure everything is clear for future users you will want to replace

    embed src="/documents/Specs_##ITEMNR##.pdf"
    a href="/documents/Specs_##ITEMNR##.pdf"

    with the link to your PDF. Remove the content between the quotation marks and put in the URL to your PDF. If you follow Marvin's steps and make the URL edits above you should be good to go.

    Thank you Marvin!

  • Avatar
    Marvin Hankins

    Thanks for the clarification Will! I think the examples were too complicated maybe because the main point was to show the two methods to present different content for desktop and mobile devices by using the and

    The ##ITEMNR## merges are optional but are used to automatically created the URLs to the PDFs for each product so you don't have to enter each one manually. I created a custom merge with the code in the first example.