Building a Greeting Card Generator with the Lovable Twilio Connector

Building a Greeting Card Generator with the Lovable Twilio Connector

Lovable recently released their Twilio Integration, making it straightforward to add Twilio-powered communications workflows to your Lovable apps. AI, and AI-powered app builders like Lovable, have made it possible for individuals who have never written a line of code to build fully functioning demos. Today, if you have an idea and a set of requirements, you can quickly build and iterate on a working prototype.

In this post, I’m going to show you how to build your own greeting card generator with Lovable and Twilio, then tell you a little bit about how we’re using the Lovable integration inside Twilio.

Architecting a greeting card generator with Lovable and Twilio

Twilio is a remote-first company which means that I’m coming to you from Mallorca, Spain. March 19th was Father’s Day here, which served as my inspiration to create a greeting card generator, which I felt was the perfect project to show you how you can add Twilio flows to your Lovable apps.

Lovable is an AI-powered application development platform that enables anyone to build software, and with the addition of their Twilio integration, you can now quickly connect communications workflows to your web applications.

The web application I’m building is a greeting card generator – I call it Scribble – intended to allow a user to fully customize a greeting card on the website and then deliver it to their loved ones via WhatsApp, SMS, or MMS, 3 channels supported by us at Twilio.

I didn’t have a clear idea of the stack I wanted to use to build this application. Lovable, in “plan mode” (top tip - this doesn’t use your credits!) helped me decide on the specific tools, and this is how the architecture turned out:

• Client layer — The React app walks users through occasion → template → card editor. The editor uses Fabric.js for the interactive canvas (drag-and-drop, drawing, emoji, image cropping).
• Sending flow — When the user hits Send, the canvas is exported as a PNG, uploaded to the card-images storage bucket, and a public URL is generated.
• Backend function — The send-card edge function receives the phone number, message text, delivery method (WhatsApp or SMS), and the image URL. It forwards everything to the Twilio API via the connector gateway.
• Delivery — Twilio delivers the card as a WhatsApp message with inline image, or as an MMS/SMS to the recipient's phone.

Feels good? Let’s build it for the vibes ✨

Prerequisites

Before you start to build your greeting card generator, you’ll need to set up a few accounts, a Twilio phone number and your WhatsApp Sandbox.

• A Twilio account
  - If you haven’t signed up yet, you can sign up for free here.
• A phone number with SMS and MMS capabilities
  - Learn how to search for and buy a Twilio Phone number
• A WhatsApp phone number (with Sandbox activated and joined)
• A Lovable account

And with that, we can build together. Let’s do it…

Build the greeting card generator

Building with Lovable starts with a prompt. I asked it to build me a “digital card web application”. The main requirements I included were:

1. It should have options for different celebrations
2. A degree of customization for the user to make it their own and upload images
3. The ability to deliver it to the recipient via SMS, MMS, or WhatsApp.

Lovable quickly generated a well-designed, neutral greeting card generator for a selection of occasions:

Next up, I asked it to add a few additional celebrations, and enable the Twilio connector. To do so, it required me to set up Lovable Cloud (powered by Supabase) and a Twilio edge function.

The Twilio connection led me to a separate window within Lovable cloud, with a short list of credentials (Twilio Account SID, API Key SID, and API Key Secret) which I copy and pasted from my Twilio Console.

In my Twilio account, I had to set up a dedicated API Key SID for this project and give it access to the product features lovable needs access to. ( Learn more about Twilio SPI Keys here.) In this case, I enabled read, create, and edit permissions for Messaging and WhatsApp, and gave it access to my phone numbers.

Lovable defaulted to the WhatsApp Sandbox. If you want to enable SMS in your app, you need to add a TWILIO_SMS_FROM Secret within Lovable Cloud to define your Twilio phone number.

If you don’t have a Twilio account, you can sign-up here.

And with a few lines in the Lovable chat, you are now ready to generate the preview. Let’s talk about that, next.

Run and test the greeting card generator

Once I added all the details and created the connection, it was time to test out my app.

And getting to the magic was quick: I selected the Father’s Day card, uploaded an image, and hit Send card! For the purpose of testing, I did this in WhatsApp and SMS, and this was the result:

And with that, you’re all set! You just built your very own greeting card generator with a strong idea, a few credentials, and a few lines of chat.

You don’t need to stop here – both Lovable and Twilio are highly customizable, so you can take this foundation and build whatever you want – the sky is the limit (and maybe not even the sky?). I have plans to add a canvas editor to my greeting card generator for even more customization, as well as the ability to send voice notes attached to the card. All you need is a strong vision and the curiosity to build!

Troubleshooting

If you run into issues with Twilio connection, check the error code and accompanying documentation. I had to enable permissions for active phone numbers from within my API Key’s SID settings.

The Twilio Sandbox for WhatsApp (the Sandbox) acts as your WhatsApp sender. You can test messaging without waiting for your WhatsApp sender registration and verification. This test requires you to text the WhatsApp phone number from the recipient's phone so that they can receive messages from the sandbox.

Before you deploy…

Like what you’ve built? You’ve now got a demo application you can share with a trusted audience. You are set to share it with your friend, family, or coworkers and start incorporating feedback - this is a fun stage!

I should mention here, however, that before publishing your Lovable application to the open web, you would need to take a number of steps to productize your app: everything from building registration and login flows, to trial and plan experience, to fraud, rate limiting, and abuse considerations to ensure the security and functionality of your product. In production, I’d also suggest you look at usage based triggers with your Twilio account (and with other tools and services you integrate).

Lovable the inspiration

At Twilio, we’re already seeing our team use the Lovable connector. Internally, our Solutions Engineers and Architects are showing our customers working prototypes of the solutions they are looking to build with Twilio. Alongside that, we’ve seen our team build fun projects – including an app that enables you to send your favourite songs to friends and family, and an event RSVP web application.

The speed at which Lovable enables you to take an idea to a working prototype with the added layer of communications Twilio brings is magic. It’s an exciting time to be a builder!

Additional resources

• Lovable Twilio Connector
• Twilio WhatsApp Sandbox
• Twilio Communications Channels

Chiara Massironi is the Head of Developer Network at Twilio, where she leverages more than a decade of expertise to build authentic connections with technical audiences. Throughout her career, she has remained dedicated to fostering developer growth and leading multidisciplinary developer relations teams. For a change of pace, Chiara loves to unplug by perfecting her risotto recipe with her toddler and watching true crime