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:
Spaces by Wix for Website Members
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