Inline/embedded PDF functionality

[amyleopold]

It would be great to have the functionality or a module that embeds PDFs on a landing page or web page.

The embedded PDF would have the functionality of a PDF or ebook with links and navigation. We have many PDFs that we offer as value to our customers, but linking directly to the PDF from an email removes the ability to have our website navigation or a CTA form alongside the PDF. If we have a CTA button on a webpage that links to the PDF, it just adds unnecessary clicks for our users and directs them away from a page that has the CTA form.

Thanks!

[Reynaldo]

Yes please, we need to have the option to remove user friction 

[Crystal_Hopper]

Wanted to do this today and found this post that shows I can't. So, thank you to the poster for suggesting this, and yes, please, Hubspot make this possible

[UnearthNick]

So, if you're a bit technical you can hack this together with the design tools.

Create a module and then insert this code into the HTML

<iframe src="INSERT FILE LOCATION HERE" width="600" height="780" style="position: absolute;top: 66px;bottom: 0px;right: 0px;width: 100%;border: none;margin: 0;padding: 0;overflow: hidden;z-index: 3;height: 100%;"></iframe>

It's not the cleanest implementation, and you'll probably have to adjust some of the style parameters to work with your own website style. But, it does give you a PDF that's fully hosted on your website.

I agree though, it would be nice to have this functionality out of the box.

[Pagenoi]

I completely agree with this suggestion and I don't think that it would be a massive change either. Often we have a blog that has a template or something that goes with it but the search engines won't index it properly as part of the page if we use the Iframe workaround. It'd be nice to get the benefits of having a fully embedded PDF document viewer that could be placed inline on a site.

[sarboledap]

Hi, I have problems with the PDF Viewer on android phones. It appears a button to download the file instead of the embed file. Do you know any solution to this?

[Pagenoi]

sarboledap,

I don't think there is any way to currently embed PDF files into site pages, they are all clickable download links, but they display on your desktop usually in a new browser window, where on a mobile OS they download to the devices default reader. As far as I know, there is no current solution that would make the PDF opens as a webpage vs a downloaded document.

[Gokoolrod]

This works! Hope this helps everyone else!

Insert an HTML Module into your page and then this code:

<object data="your_url_to_pdf" type="application/pdf">
<iframe width="100%" height="1000px" src="https://docs.google.com/viewer?url=INPUTYOURURLHERE&embedded=true"></iframe>
</object>

Replace the INPUTYOURURLHERE with your URL of the PDF

Please let me know if this works!

[sarboledap]

Hi @Gokoolrod, yes I did exactly the same and it works on IOS and desktop, but it doesn't work on Android phones.

[Gokoolrod]

@sarboledap 

Hmmm seems to be working fine on my Pixel 3 Android Phone. Maybe it has something to do with the PDF? Not too sure.

[Jpbsalibe]

Would be awesome to have something like this. I manage to do what Gokoolrod says, but I was trying to add some Hubspot fields (like URL or link) to see if I can aloud people who use the page from the front just putting the file link, and is not working, it shows a 404 error. 

[tjay]

I love Hubspot but there are a handful of small issues like this that are a real pain. Hubspot please implement ASAP.

[innovaxis]

We found that Adobe's free PDF embed tool worked perfectly to show PDFs on HubSpot pages.

One thing to keep in mind is that it may throw an error at you when you try to test it - this is totally fine. The reason for this is that you are trying to preview it on app.hubspot.com; it will only show correctly when displayed on a web page with the domain that you registered for the PDF tool with (ex: mysite.com).

I even inserted custom fields so that users on the front end can easily change PDFs and titles without the need for a new script:

Custom fields in PDF embedder module

Cheers!

Meredith Schraeder, Digital Marketing Manager

Innovaxis Marketing Consulting

[RGarb]

Ok, so after trying all of this, none of it was simple enough for a new coder to understand ie me. Keep in mind, this post is for May 11th, 2022 incase something changes locationwise down the road.

So here is the best solution i found that works for someone doing this their first time using a google drive file:

1. Open Hubspot and follow this selection: Marketing>Files and Templates>Design Tools
2. Once in design tools, click File>New File>"Module".
3. Select where the Module will be placed location wise, select Local Module, Name it, now click "Create".
4. Once in Design Tools, Paste the following code:

<center>
   <embed>
        <iframe src="INSERT GOOGLE EMBED CODE" width="1000" height="750" allow="autoplay"></iframe>
   </embed>
</center>

      5. Now you need to insert the embed code from your google based PDF.

• Go to you PDF in google drive and click the three dots at the top right
• Click OPEN IN NEW WINDOW
• Now click the three dots again and click "Embed Item" at the bottom of the list.
• Copy all of the code from that box and paste it where it says INSERT GOOGLE EMBED CODE between the quotation marks. Do NOT delete the quotation marks, it must be between them.

Now Label the module and click "Preview" to make sure it works then select "Publish Changes" to make sure it works.

Move back to website pages and Search the modules for the Label you gave your module, drop it in to your template, and you are good to go.

You will need to make a new module for each PDF doing it this way but you can just duplicate the one you just created and swap the embed code. 

Good luck!

[KAlico]

RGarb - The idea seems like a good one, but I have tried it with a few PDF's and keep getting the same error "Our website provider is having trouble loading this page" 

Any idea if I am doing something wrong?

K