Book a call with an Expert

Starting a new venture? Need to upgrade your web app? RapidDev builds application with your growth in mind.

How to build Newsletter subscriptions with Lovable?

Setting Up Your Lovable Project Environment

Log into your Lovable account and create a new project using the Lovable dashboard.
Choose a project name that reflects the newsletter subscription feature (for example, “NewsletterSubscription”).
After the project is created, you will have a code editor view where you can add HTML, CSS, and JavaScript files.

Adding Dependencies Directly in Code

Since Lovable does not have a terminal, you must include dependencies via code. In your main HTML file (commonly named index.html), add the following script tag inside the <head> section. This example uses Axios to send requests to our backend:


<head>
  <meta charset="UTF-8">
  <title>Newsletter Subscription</title>
  <!-- Include Axios from CDN for AJAX requests -->
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <link rel="stylesheet" href="styles.css">
</head>

This script tag will automatically "install" the Axios dependency, making it available in your JavaScript code.

Creating the Newsletter Subscription Form

Open or create the index.html file in your Lovable project.
Add the following HTML code within the <body> tag to create a simple subscription form:


<body>
  <h1>Subscribe to Our Newsletter</h1>
  <form id="subscription-form">
    <input type="email" id="email" name="email" placeholder="Enter your email address" required>
    <button type="submit">Subscribe</button>
  </form>
  <div id="message"></div>
  <script src="subscribe.js"></script>
</body>

This form includes an input field for the email and a submit button. The subscribe.js file (created in the next step) will handle the submission.

Implementing the Subscription Form Logic

Create a new file named subscribe.js in your Lovable project’s file panel.
Insert the following JavaScript code into subscribe.js. This code captures the form submission, sends the email data to the backend endpoint using Axios, and displays a success or error message:


document.getElementById('subscription-form').addEventListener('submit', function(e) {
  e.preventDefault();
  var email = document.getElementById('email').value;
  
  // Send the subscription data to the backend via POST request
  axios.post('/api/subscribe', { email: email })
    .then(function(response) {
      document.getElementById('message').innerText = 'Thank you for subscribing!';
    })
    .catch(function(error) {
      document.getElementById('message').innerText = 'Subscription failed. Please try again later.';
    });
});

This code attaches an event listener to the form; when the user clicks "Subscribe," it prevents the default page reload and sends the email to the backend endpoint.

Creating the Backend Subscription Endpoint

Since Lovable uses a no-code approach and does not have a traditional terminal, backend logic is implemented using built-in serverless functions.
In your Lovable project dashboard, locate the section for serverless functions and create a new function file named subscribeFunction.js.
Insert the following code into subscribeFunction.js to handle incoming POST requests. This function simulates saving the email subscription (in a real-world scenario, you might connect to a database or an external email service):


exports.handler = async function(request, response) {
  // Parse the request body (assumes JSON format)
  try {
    const data = JSON.parse(request.body);
    const email = data.email;
    
// Simulate saving the email address (replace this with database logic)
console.log('New subscription: ' + email);

return response.status(200).json({ message: 'Subscription successful' });

  }
  catch (error) {
    return response.status(400).json({ message: 'Invalid request' });
  }
};

Ensure that the Lovable platform routes requests from /api/subscribe to this serverless function. Use the Lovable dashboard configuration to map the endpoint accordingly.

Connecting the Frontend to the Backend

In the Lovable dashboard, configure the routing so that any POST request to /api/subscribe is handled by the subscribeFunction.js function.
This integration is done through Lovable’s built-in routing settings. Follow the platform's guide to add a new route with the URL pattern /api/subscribe and assign it to your newly created function.

Testing the Newsletter Subscription Feature

Save all changes made to your files.
Click the Run button provided in the Lovable dashboard to start your project.
Open your application’s URL in a web browser, enter an email address in the subscription form, and click Subscribe.
Check that the success message "Thank you for subscribing!" appears. If there is an error, the failure message will display instead.
You can verify subscriptions through the Lovable function logs or any configured external service.

Final Adjustments and Deployment

Review your code and verify that all file paths match the ones referenced in your HTML (for example, subscribe.js).
Make any necessary styling changes in the styles.css file if you want to adjust the appearance of your form.
Once testing is complete and the subscription process works as expected, use Lovable’s deployment feature to make your project live.

How to handle Lovable webhook events for newsletter subscriptions


const express = require('express');
const crypto = require('crypto');
const router = express.Router();
const bodyParser = require('body-parser');

router.use(bodyParser.json({
  verify: (req, res, buf, encoding) => {
    req.rawBody = buf.toString(encoding || 'utf8');
  }
}));

const LOVABLE_WEBHOOK_SECRET = process.env.LOVABLE_WEBHOOK_SECRET || 'your_webhook_secret\_here';

async function updateSubscriptionRecord(subscriptionId, newStatus) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({ id: subscriptionId, status: newStatus });
    }, 300);
  });
}

router.post('/api/lovable-webhook', async (req, res) => {
  try {
    const providedSignature = req.headers['x-lovable-signature'];
    if (!providedSignature) {
      return res.status(400).json({ error: 'Missing signature header.' });
    }

    const expectedSignature = crypto
      .createHmac('sha256', LOVABLE_WEBHOOK_SECRET)
      .update(req.rawBody)
      .digest('hex');

    if (providedSignature !== expectedSignature) {
      return res.status(401).json({ error: 'Signature verification failed.' });
    }

    const { subscriptionId, eventType, timestamp } = req.body;
    if (!subscriptionId || !eventType) {
      return res.status(400).json({ error: 'Invalid webhook payload.' });
    }
    
    let statusUpdate = 'active';
    switch (eventType) {
      case 'subscription\_confirmed':
        statusUpdate = 'active';
        break;
      case 'subscription\_canceled':
        statusUpdate = 'canceled';
        break;
      case 'subscription\_error':
        statusUpdate = 'error';
        break;
      default:
        statusUpdate = 'pending';
    }

    const updatedSubscription = await updateSubscriptionRecord(subscriptionId, statusUpdate);

    res.status(200).json({
      message: 'Webhook processed successfully.',
      subscription: updatedSubscription,
      receivedAt: timestamp || new Date().toISOString()
    });
  } catch (err) {
    res.status(500).json({ error: 'Internal server error.' });
  }
});

module.exports = router;

How to Update Your Newsletter Subscription Preferences with Lovable


const express = require('express');
const axios = require('axios');
const router = express.Router();
const bodyParser = require('body-parser');

router.use(bodyParser.json());

router.post('/api/update-preferences', async (req, res) => {
  try {
    const { subscriptionId, preferencesUpdate } = req.body;
    if (!subscriptionId || !preferencesUpdate || typeof preferencesUpdate !== 'object') {
      return res.status(400).json({ error: 'Invalid request payload.' });
    }

    // Simulate retrieving the current subscription data from the database
    const currentSubscription = await fetchSubscription(subscriptionId);
    if (!currentSubscription) {
      return res.status(404).json({ error: 'Subscription not found.' });
    }

    const updatedPreferences = { ...currentSubscription.preferences, ...preferencesUpdate };

    // Update preferences in Lovable's system via API call
    const lovableResponse = await axios.post('https://api.lovable.io/v1/subscriptions/update', {
      subscriptionId,
      preferences: updatedPreferences
    }, {
      headers: { 'Authorization': `Bearer ${process.env.LOVABLE_API_TOKEN}` }
    });

    if (!lovableResponse.data || !lovableResponse.data.success) {
      return res.status(502).json({ error: 'Failed to update preferences on Lovable.' });
    }

    // Simulate updating the subscription record in the local database
    const updatedSubscription = await updateLocalSubscription(subscriptionId, updatedPreferences);

    res.status(200).json({
      message: 'Subscription preferences updated successfully.',
      subscription: updatedSubscription
    });
  } catch (error) {
    res.status(500).json({ error: 'Internal server error.' });
  }
});

function fetchSubscription(id) {
  return new Promise(resolve => {
    setTimeout(() => {
      // Simulated subscription record
      resolve({ id, preferences: { frequency: 'weekly', topics: ['news', 'tech'] } });
    }, 300);
  });
}

function updateLocalSubscription(id, preferences) {
  return new Promise(resolve => {
    setTimeout(() => {
      // Simulate saving updated preferences to local database
      resolve({ id, preferences });
    }, 300);
  });
}

module.exports = router;

Book a call with an Expert

Starting a new venture? Need to upgrade your web app? RapidDev builds application with your growth in mind.

Book a free No-Code consultation

Best Practices for Building a Newsletter subscriptions with AI Code Generators

Understanding Your Newsletter Objectives

Clarify why you are building a newsletter subscription system – whether it is for customer engagement, product updates, or content marketing.
Identify your target audience and understand the type of content that appeals to them.
Establish clear goals like increasing subscribers, enhancing open rates, or driving website traffic.

Choosing the Right Tools and Platforms

Select a newsletter service provider (e.g., Mailchimp, Sendinblue) that meets your needs.
Decide on your website or landing page builder (e.g., WordPress, Wix, or custom code) where the subscription form will live.
Choose an AI Code Generator tool such as ChatGPT, GitHub Copilot, or other AI platforms to assist in generating code snippets for your project.

Integrating AI Code Generators

Learn the basics of your chosen AI Code Generator through its documentation or tutorials.
Experiment with prompts that ask the AI to generate HTML, CSS, or JavaScript for subscription forms, data validation, and backend integration.
Review and refine the AI-generated code to ensure it fits your design and security standards.

Building a Subscription Form Code

Create a new file dedicated to the newsletter subscription form.
Ask your AI Code Generator for a basic subscription form. For instance, instruct it with: "Generate HTML code for a newsletter subscription form with name and email fields styled with basic CSS."
Copy the generated code and adjust it if required to include your brand’s colors, fonts, and layout preferences.
Embed the subscription form on your website where visitors can easily find it.

Example Code for a Simple Newsletter Subscription Form





  
  Subscribe to Our Newsletter

How to build Newsletter subscriptions with Lovable?

How to build Newsletter subscriptions with Lovable?

Want to explore opportunities to work with us?

How to build a newsletter subscription endpoint with Lovable

How to handle Lovable webhook events for newsletter subscriptions

How to Update Your Newsletter Subscription Preferences with Lovable

Want to explore opportunities to work with us?

Best Practices for Building a Newsletter subscriptions with AI Code Generators