In this tutorial, Dennis H. Lewis demonstrates how Bubble developers can quickly add personalized, auto‑generated images to their apps to drive virality. He introduces the low‑cost service Templated.io, showing how to design templates (layers, named fields, auto‑fit text) and import designs from Canva. He walks through creating a template (e.g., a certificate or blog thumbnail), testing it, and copying the generated cURL request. Then he shows how to import that cURL into Bubble’s API Connector, set up placeholders for dynamic data, and initialize the call. Next, he integrates the API call into a backend workflow, passes in parameters (donation amount, donor name, etc.), stores the returned image URL in the database, and presents it to the user with share buttons. Throughout, he highlights practical use cases—certificates, thank‑you cards, AI‑generated mockups, quiz results—and explains how sharing these branded images creates a viral loop, community engagement, and user‑generated content. The video ends with calls to action for ratio.dev resources, design services, and community links.
Chapters
Welcome to another ratio.dev video. And in this video, I'm going to show you how you can in an hour, 2 hours tops, add a feature to your Bubble application that can help you go viral. And the key here is that we are going to incorporate custom images into your Bubble application. Most Bubble app developers have zero idea that this is even possible. And the ones who know about it, they're quietly using it to make their apps feel like they were built by a team 10 times bigger. So let's pull back the curtain and let's jump right into this because sometimes the simplest innovations generate the most enormous returns. So personalized auto-generated images are important because they actually feel relevant to the user. So this could be a certificate that they— you give somebody when they finish taking a course. It could be a thank you card. Yeah. Card for signing up for something on your application. It could be some sort of a funny AI-generated mockup of them looking like Santa Claus for Christmas. I don't know. You can come up with a million different ideas. You're giving the user something unique to them. And then you suggest that they share it. And if it's, you know, subtly branded or people start asking, hey, where'd you get that? That's really cool. It can create buzz and it can drive traffic back to your application. And there are just so many different ways of doing this. And the cool thing is, is that it's really not that hard. So there's a few moving pieces and I'm going to walk you through them so you understand how they work. And then I'm going to let you go and you can start making your application go viral. But before you do that, hit pause and go to ratio.dev and sign up for our free no-code resource center. That's where we put all of the vetted plugins we've tested, how-to guides, our podcast episodes, great books to read. It's updated weekly. It doesn't cost you anything. It's just your name and your email. And I promise you it will be very useful for you. So go do that. And the tool that we're going to use in today's video is called Template It. So you're going to go to templated.io. You can sign up for an account. You'll get some free credits to use. So you don't— you can make sure this is all going to work perfectly for your use case. It's not an expensive tool. It can do a lot of stuff. You can also import designs from Canva, which is really cool because you can go to Canva and build something, you know, an image that's really spectacular, import it into the system and then make it customizable for your users. So. I'm going to jump in here to our template here, and you can see some of the templates that we've created for different applications. For example, one of these, which is a certificate that somebody gets when they make a donation on this platform called Feed Us, which is a great platform, and proud that they're good customer of ours. So when you do this, I'm going to just show you one here of, for example, a thumbnail for a blog post. And let's open this up in the editor. And you can see here that you can have, you know, all sorts of different layers in your, in your templates. So here I have an image, which is called image. You're going to want to set these, the names of the ones that you're going to be using to something that's meaningful for you. Here I've got the title and I've got this little Ratio logo up here in the, in the top. I could put as much stuff in there as I want, you know, but in this case, it's just as simple as going to have an image and a title. And the way this works is you can have texts which are called auto-fit. For example, here, I don't know how long the title's going to be. So do I use a big font? Do I have to make it smaller? Well, by using auto-fit, it will automatically adjust the font size so that it fits into this square. So you don't have to worry about that when you generate the thumbnail. You just pass it the title and you know it's going to fit in there. It's not going to, it's not going to come over here, overlaying over the image, or, you know, It's just, if it, if it's too long, it'll just make the font smaller. And then when you've done that, you have a lot of different ways you can test it here. So I can, I could come in here and say, this is an awesome blog post about Tim Blythitt. It's going to generate this here so you can see what that is going to look like. And you can see how it's adapted the font size here. And if I were to upload an image and put the, or the URL of an image in here, then it would have substituted this out for it for an image. And there's a lot of ways that you can then integrate this into all sorts of different platforms. But the one that we are going to look about— look at mostly is you're going to want to come to cURL. And you can just copy and paste this here. Just using the button. You could connect it to an ADN or Zapier if you want. In our case, we're just doing a straight API call. So the curl is going to be perfect for us. Copy that. And now let's go jump into the Bubble Builder and see what we've done there. You're going to want to create an API call here. You're going to have in this case a collection. And then I just imported in my, the curl to create a new API call. And it filled pretty much all of this out, except it didn't put these placeholders in. Into the JSON structure, you're going to have your API key. In there and it's application/json. And then when you come in here, in this case, this was a donation certificate. So I have a donation amount and then I put inside brackets here, amount, donor name, acknowledgement, blah, blah, blah, blah. There's some images there that I can change. And you will just initialize this and it will automatically generate one for you. And now you have an API call that you can use anywhere you want inside your Bubble application. For example, in a backend workflow. Mm-hmm. That could be called donation certificate. Here, this is a custom event that's inside of a— I call it from another, from a backend workflow. And all this does is it calls the API call and I pass it in the parameters. And then I can take that and the result of that, and I just store it in my database. So anytime I call this API, I pass it in the parameters that I've set up. In this case, I'm just passing it a sales log and here it's going ahead. And from that, it's pulling in all the data it needs. And it's creating that, that custom certificate. Then you present that to the user. You put in some share buttons and boom, they have something they can be proud of. Like I said, it could be at the end of a course. It could be from a contest. It could be the results of a quiz. So they take a quiz and maybe you've got 5 or 6 different categories and each one has its own fun custom image that they can share that, you know, says, hey, I am a— I am a rockstar singer. I am a, you know, whatever it is the quiz comes out and then they can share that on their social media with links back to take the quiz. And that will create a viral loop that people will be able to really take advantage of. As you can see, this isn't complicated to do. It's powerful. It's fun. It helps generate community. It helps create user-generated content, which is Awesome. And it's also, you know, awesome tool for promoting your application and creating bonds with your users. So, not overly complicated. I hope this has been a fun video for you. If you have any questions or you want us to set this up for you, even though it's not that hard, just give us a call and we'll, at ratio.dev, we'll be happy to help you. We have a design team that can help build the templates for you as well, if you like. And yeah. Awesome. Give this video a like, subscribe to our channel if you, if you've enjoyed the video, that means the world to us. We really appreciate that. Don't forget to go to rayshow.dev and sign up for the No-Code Resource Center. There's also a link to our school community in the description below. So if you want, you know, lots of great information about how to build AI-powered, social-powered applications using Bubble, definitely a place to go. And thanks for listening in, and I'll see you on the next video.
