top of page

How to embed a PDF on a Wix website or Wix Blog post

Updated: Feb 9, 2022


About

Since the Wix Blog is an app rather than a regular Wix page built directly on your Wix site, we are unable to add custom javascript code to each individual Blog post. Some users will opt to use Dynamic pages to customize their blog pages further by using the Wix Blog API and Wix Blog database connections available via the Wix editor.



By doing this you will sacrifice the ability to view your customized pages via the native Wix apps such as:


Basically, if you paid extra to remove branding or paid extra to brand your own website app your audience will not have access to any custom coded pages you created. For this reason, it is best to use the HTML code element from the blog in combination with your favorite PDF flipbook maker so that you are able to embed your PDF directly onto your native Wix blog post.



 

Good to Know #1

Do not embed a direct PDF file link from Wix


Do not attempt to use a URL for a file located in your Wix media folder or Wix account. It will not work with the HTML Code URL embed. This is a direct link to our PDF sample that is hosted on our Wix media folder:



You can click on the link to view a preview of the PDF or you can take a look at our screenshot below:




This is a real error message when we use this Wix file URL (or any other regular PDF URL) in the HTML Code component:



 

Good to Know #2

Hosting your PDF online


To convert a regular PDF file into an animated PDF flipbook, most converters ask you to host your PDF file somewhere. Other flipbook converters force you to upload your PDF file directly onto their own platform. As with any other apps or products, some converter apps are free, paid or have different limitations based on the premium account you choose. The most convenient and economical place to host your PDF file is inside of your own Wix media manager.


After you upload your PDF file onto your Wix media manager, click on the image settings and select Copy URL to obtain the direct URL path to the file.



 

Follow Along #1

Convert your PDF into a flipbook


You can search for your favorite flipbook converter online or you can try out the Code Queen app called Simple Flipbook (found on Totally Codable). To keep Simple Flipbook free to use we ask that you host your PDF file on your own. As mentioned above, you can host it conveniently within your Wix account via your media manager.


 

Follow Along #2

Add HTML Code component to Wix Blog post


As seen in the picture above, use the side panel of your Wix Blog editor to select HTML Code. Select Website Address URL and enter the URL for your PDF flipbook. Click Save then continue configuring the settings as shown below.




You can select full width by adjusting the size after clicking on the second icon of your HTML code component.



We recommend to adjust the height, as well, by selecting a number that will display the PDF flipbook in its full size.



 

Good to Know #3

Sample of real interactive PDF flipbook embed


We embedded our PDF using our own Code Queen app called Simple Flipbook. Below you will see what the PDF looks like on desktop and mobile. Feel free to test it out on multiple devices and browser windows.




Other embed examples of Simple Flipbooks:





 

Author

by Code Queen


Stuck on a project? Hire Code Queen, LLC!

Schedule a phone call or video call directly online. In a different time zone? No problem! Code Queen currently has clients around the world.


Online Booking: Discovery Session

Contact Form: Send project details

1,930 views3 comments

3 comentários


Membro desconhecido
25 de dez. de 2023

Hello! Thanks for the detailed explanation. Why don't you use videos instead of screenshots, because in my opinion it would be much more convenient! You could shorten your article several times, but leave the meaning the same. I think many readers would be more comfortable watching videos than screenshots. If you've never recorded a screen before, click here to learn more about screen recording software. This should make your work easier.

Curtir

I would like to know where is your free Simple Flipbook APP ???

Curtir
Code Queen
Code Queen
09 de jan. de 2022
Respondendo a

Hi there .... here is the direct link: https://velo.totallycodable.com/convert-pdf-to-simple-flipbook

Curtir

disclaimer

a quick note about our website content

Our free and premium content is non-exclusive, meaning you are not the only one with access to the content. You can customize our content to fit your end product. Redistribution of our content is strictly prohibited. This means you cannot make our content available to others as-is, stand-alone products or stock products in ANY LANGUAGE, regardless if you offer our content for free or not.

bottom of page