Dennis H. Lewis walks through generating PDFs from Bubble apps using PDF Potion. Install the plugin, get an API key, then set up a two-step backend workflow: send the page URL to PDF Potion, handle the callback that returns your PDF link. Supports repeating groups and custom formatting.
Chapters
Hey, I'm Dennis Lewis from Ratio.dev and in this video I want to walk you through, step by step, on how to create amazing PDF files inside your Bubble application using a tool called PDF Potion. One of the most important things that you may want your application to be able to do is to send your users documents that they may want to use outside the application. You may want to send them invoices, or you may create some sort of a report that you want them to be able to download in PDF format. Or there could be hundreds of use cases of how you could enhance the user experience from your application by creating custom PDF documents that include data from your Bubble application. And that's exactly what I'm going to show you how to do in this video. So we're going to go over a brief overview of what PDF Potion is. I am going to show you how you design the PDF file that you're going to be creating inside your Bubble application. I'm going to walk you through the bubble workflows that you're going to need to set up how the API functions. You're going to need to set up all the little pieces, pieces that you're going to need to make this work. Then we're going to wrap it up with a bow and I'm going to send you on your way. So let's start off by talking about PDF Potion. And here you have their website. You can see this is a tool that was created just for bubble applications if you look at their pricing. And obviously this can change. But right now, for the free plan, you get 50 PDF documents generated per month. Once you go over that limit for 29amonth, you can have 1500 generated every month, which is reasonably priced. It's easy to set up. So you're just going to go into your dashboard and all you need to do is create an account, go into your dashboard and copy the API key that you'll find inside your dashboard. It will be here in my account. There. It'll show you that you just copy that token, because that's what you're going to need inside your Bubble application. One of the cool things about PDF Potion is that it works in the background, so you can, through any workflow in your application, launch a backend workflow and generate a PDF file that you can then show to your user once it's created in the background, so it won't slow down the user experience. You can create pretty complex PDF documents as just about anything that you want to create in a PDF file. You can put into the PDF files you create in your bubble application. Let's jump in and go into the bubble builder and let's start seeing exactly what you need to do to create awesome PDFs in your bubble application. Here I am in the first thing you're going to want to do is you're going to go to the plugin section and you're going to install the PDF Potion plugin. It's very lightweight, it's not going to slow your bubble application down. All you have to do is install it and you're ready to start getting things set up in your application. The first thing you need to do is create the design for your PDF file. And the cool thing about this is, is that each PDF document that you're going to send, you're going to create a separate bubble page for that PDF document. So here I have a cover page and then I have a plan page. This uses AI. It creates a plan for the user and it embeds into this second page of markdown the AI has created. Even if it grows over multiple pages long, it'll just separate itself out. And you can have as many pages here as you want. You can use repeating groups, so you could have a repeating group where each row of the repeating group is actually a separate page in your PDF document. And then inside that you could have all sorts of elements, you could have charts, you can put an embedded HTML in there. Anything that you could put onto a bubble page, you can stick in here in your PDF document. So that gives you total liberty for how your PDF is going to end up looking. But the next thing that we have to do is we have to create the process that actually generates the PDF. This is a two step process. And so I've set it up here, backend workflows and I'm going to look at the PDF generation folder that I have here. And basically this works with two backend workflows that you're going to need to create for each separate PDF document that you're going to use in your bubble application. API workflow is to generate the PDF document and the second is the receives from PDF Potion the link to that generated PDF. So a two step process. First you send it off to PDF to PDF Potion and PDF Potion will respond back to you with the link and then you can do whatever you want with it. So here's our first workflow which is going to, in this case, I've called it Gen BP PDF and it's going to take two parameters. One is an ID which can just be the unique ID of whatever file or table you're using to log these PDF generations in your application. And the other is the project name, which I'm going to pass through so that I can use this. So if you want to pass in specific data to that report that you've created that page, then that's perfectly fine. And this is the ID for the unique ID for whatever data type you associated the page with. So in my page here, you'll see that this has a type of content which is called lead. And so I'm going to pass it the unique ID of the lead through to generate the PDF file. So let's go back to the workflow. What this is going to be is just one single step to generate the PDF file. And what it's going to take, you're going to pass it the URL for your application. So just website home URL. That way, if it's version live or test, you go through correctly, you're going to send it the page name with a forward slash and then the id. So now you're sending it the data that it needs to populate that page with. You're going to give it the ID as the identifier, because that's going to be your job id. Here's the name of the document that it's going to create. So the file name that it's going to create and then you're going to pass it the callback URL. And this is going to be the API URL for the second backend workflow that we're going to see in just a minute. So you're here. It's going to be your home site URL. It's always going to have API forward/1.1 forward/WF. And then the name of this second workflow that we're going to see in just a minute here. We can set the page format letter A4, whatever it is, you can do custom sizes as well. If it's portrait, if it's landscape, you can do a margins, you can put in footer content here. I'm putting in the page number at the bott so that, so that it is. It'll automatically number the pages for me and you can give it the margins and just some font colors and sizes and stuff here. And you can dig in here deeper if you want. If you need for this page to use privacy rules, then you, you can do that as well using what would be is called a magic login link. So you would create a magic link in step one, and then you would pass it here, the result of that step into this field and that way it would actually use Bubble's native privacy rules to make sure that they only have access to data that they're supposed to get access for. This creates the API call that goes to PDF Potion and PDF Potion does its magic. And what it does is it responds back to this second workflow that we've created. And this one is important that it be exposed publicly that it doesn't use privacy rules. And all it's going to receive are exactly two parameters. One is the id, which is the same ID that we gave it before, and the second one is a link text, that is the actual link to the PDF file that PDF Pollution has created for us. So once you do that, then the next thing you'll do is once inside here, you do what you need to do. So in my case, I'm just going back to that lead and I'm storing that link into its PDF link data field in that table and I'm also logging it to my backend log. But that is up to you. You can do whatever you want here. Now, you could trigger off of this from a database trigger or in a front end trigger so that when this link is populated, it automatically displays to the to the user it downloads in their browser. I could send them an email, it could do all of those, basically anything that you want that functionality to be for your bubble application. And in a nutshell, that is the entire process from beginning to end on how to incorporate cutting edge and stunning PDF documents into your bubble application. Hope you've enjoyed this video and I will see you on the next one.
