Wix Dynamic Page – How to embed a PDF using Wix Code (PDF Database)

hi Katrina Yeley in this short tutorial video I’m gonna show you how I created a website that has a PDF document database where I have embedded each PDF into a single dynamic page so that the WIC static information is hidden and the person can read the PDF without having to open it in a new tab but before I show you please subscribe to my youtube channel so you can get notified each time I release a Wix code video also if you have any
questions please join the Facebook group it is the community dedicated to Wix code and you will find many Wix users Wix coders and Wix experts that can help you if you’re looking to contact me visit my code cream com submit a request to let me know about your question or future project now let me show you the tutorial site from the video description click on tutorial site link and join me this is an index showing all of the documents in the
database once you find a document that you like you click on view and I’ll redirect you to a dynamic page this dynamic page has the cover image on the side the title of the document the title underneath the image and a small description it also shows the document embedded in the center of the page you will have an optional download button at the very top download this document again not redirecting the person to a separate tab always keeping them
on the same page this was super simple to make and I’m going to walk you through the code click on the code tab this is the code in the dynamic page we’re using import Wix data and Wix location on the ready we’re going to get the data set name this will be your dynamic data set and we’re going to get a variable called source for going to take the source link for this document from this button now I cheated just a little bit on this one because I
wanted to keep the code as short as possible so I’ll let you know what this actually looks like in the editor once I get the source link I’m going to get the name so I’m gonna split it and I’m gonna get this placement of the link then I will get another variable called URL from this same source link I’m gonna split it and I’m gonna get this placement this is actually the exact location in which the document is being hosted inside of the Wieck
static Docs server thing then I frame that I have in the middle of the page will be set to this exact source this is the pattern in which you need to write it when they click on the download button this has a on click event it will get the same name the URL and we’ll use the Wix location API to actually use this pattern and prompt the save window to open up instead of sending them to a different tab this pattern contains the URL and the name of
the document super simple now let me show you how I created that let’s jump into the editor I already have my dynamic page and from here I’ve added a single image there’s a text there’s another text element and the title text this button is the one that ever tells your that I cut a shaded on I have actually two buttons one button is called the Wix link and I’ve connected it to my data set on the dynamic page which is connected directly to the
document so that’s where it grabs the source of where the document is actually living of course I could have written a code to get it a different way but I decided to go this way then there is a download button which is connected to nothing nothing at all all I did was right click view proper and make sure that the on click event was activated for this button so once you click it then it’ll trigger the download if you click this button it’ll
actually open a different tab and show the regular Wix static URL and the regular PDF document it will not trigger the save window it’ll just open it up so that’s the difference between the two and that’s how I built it now this metal section is the HTML element I got this from the menu go to more and drag and drop embed a site because we’re going to be setting the source to be a specific URL a complete URL a secure URL which is actually an HTTP
format and that is how we’re able to see the document in this iframe I made it large enough so that it shows the entire PDF document and that way they don’t have to scroll side to side or up and down and that’s it that’s the entire tutorial should I make it longer was that too short now that you know how to do it go have fun create it don’t forget to subscribe up at the top just in case you missed it on the youtube web page and please join me in
the totally codable Facebook group I’ll see you soon I know I will I’m your code cream creating super easy Rick’s tutorials to show you how it is totally codable you