Implement a newsletter on static websites with Mailchimp or HubSpot

Hey everyone! I’m Tudor, and I’m part of the Genezio development team. Lately, I’ve been on a mission to find the easiest way to add a newsletter section to The Bucharest Hackathon website – it’s gonna be a cool hackathon taking place in Bucharest.

Prerequisites

If you don’t already have them, you’ll need to install the following tools:

• Node.js
• Npm

Getting Started

Initiate the installation of Genezio via npm and execute it in your terminal. Later on, Genezio comes in handy to deploy and host your web applications in the cloud.

npm install -g genezio

After installing genezio, you can create a new Genezio project by running the following command in an empty new folder:

genezio create backend --backend=ts --name=newsletter-app --region=us-east-1
cd ./newsletter-app

We are also going to use axios for sending the request from the Genezio backend to the newsletter provider API.

npm install axios

Setting up your newsletter endpoint

Next, create a new file called newsletter.ts in the root directory of your project. Open newsletter.ts in your IDE and add the following code:

newsletter.ts

import { GenezioDeploy, GenezioMethod } from "@genezio/types";
import { GenezioHttpRequest, GenezioHttpResponse } from "@genezio/types";
import axios, { AxiosResponse } from "axios";

@GenezioDeploy()
export class NewsLetterService {
  @GenezioMethod({ type: "http" })
  async addContact(request: GenezioHttpRequest) {}
}

In this example, we’re creating a function and we expose an HTTP endpoint that we will later call from our static website. If you want to learn more about HTTP Calls with Genezio check our docs .

Handle Mailchimp API

In this section of the article, I will walk you through the process of incorporating newsletter functionality using Mailchimp.

To begin, you’ll need to acquire an API key from Mailchimp as well as a list ID. You can obtain the API key by generating one here , and for the list ID, refer to the instructions provided in this tutorial .

After obtaining your own Mailchimp key, make sure to create a .env file in the root of your project and place the key inside it.

.env

MAILCHIMP_KEY=Bearer pat-eu1-2221****-613f-****-a6ed-********

Now, you’ve got to update your backend method. Don’t forget to swap out the URL for one with your list ID, too.

newsletter.ts

@GenezioDeploy()
export class NewsLetterService {
  @GenezioMethod({ type: "http" })
  async addContact(request: GenezioHttpRequest) {
    const config = {
      method: "post",
      url: "https://us18.api.mailchimp.com/3.0/lists/<listId>/members",
      headers: {
        "Content-Type": "application/json",
        Authorization: process.env.MAILCHIMP_KEY,
      },
      data: {
        email_address: request.body.email,
        status: "subscribed",
      },
    };

    const res: AxiosResponse = await axios.request(config);
    const genezioResponse: GenezioHttpResponse = {
      body: res.data,
      headers: { "content-type": "application/json" },
      statusCode: "200",
    };

    return genezioResponse;
  }
}

And that concludes the Mailchimp implementation. Now you have a working function that adds contacts from your request to the Mailchimp list.

Handle HubSpot API

In this section of the article, I’ll guide you through integrating newsletter functionality using HubSpot.

The initial step involves obtaining an API key from HubSpot. You can find a brief tutorial on acquiring it here .

After obtaining your own HubSpot key, make sure to create a .env file in the root of your project and place the key inside it.

.env

HUBSPOT_KEY=Bearer pat-eu1-2221****-613f-****-a6ed-********

newsletter.ts

@GenezioDeploy()
export class NewsLetterService {
  @GenezioMethod({ type: "http" })
  async addContact(request: GenezioHttpRequest) {
    const config = {
      method: "post",
      url: "https://api.hubapi.com/crm/v3/objects/contacts",
      headers: {
        "Content-Type": "application/json",
        Authorization: process.env.HUBSPOT_KEY,
      },
      data: {
        properties: {
          email: request.body.email,
        },
      },
    };
    const res: AxiosResponse = await axios.request(config);
    const genezioResponse: GenezioHttpResponse = {
      body: res.data,
      headers: { "content-type": "application/json" },
      statusCode: "200",
    };

    return genezioResponse;
  }
}

And that concludes the HubSpot implementation. Now you have a working function that adds contacts from your request to the HubSpot list.

Test your Endpoint

To test your backend on a local server, execute the genezio local command in the root folder.

genezio local

In the terminal output, you’ll discover the endpoint for adding a new contact to the list, along with a link to our test interface for code-testing purposes.

HTTP Methods Deployed:

- NewsLetterService.addContact: http://127.0.0.1:8083/NewsLetterService/addContact

Test your code at http://localhost:8083/explore

Deploy your Backend

Now that everything is configured, it’s time to deploy the application to the Genezio cloud with just one straightforward command. Run this command in the root folder of your project:

genezio deploy --env .env

After the deployment process completes in your terminal, you’ll discover the URL for our ‘addContact’ method, which we’ll utilize to send API requests from our static website. It might look similar to this:

HTTP Methods Deployed: - NewsLetterService.addContact:
 https://4eyuye4ixxiv2ia525dbilm6xa0ugvxq.lambda-url.us-east-1.on.aws/NewsLetterService/addContact

Handle request in your website

Now, the final step is to send the request from your client. For testing purposes, I prepared this static website where I use my Genezio URL to send the request. If you want to use this template, change the request. If you don’t, feel free to use your own client.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Newsletter Signup</title>
  </head>
  <body>
    <h2>Subscribe to Our Newsletter</h2>
    <form>
      <label for="email">Email:</label>
      <input type="email" id="email" name="email" required /><br /><br />
      <button type="button" onclick="sendData()">Subscribe</button>
    </form>
  </body>

  <script>
    function sendData() {
      var email = document.getElementById("email").value;
      var data = { email: email };

      fetch("https://addYourOwnURL.lambda-url.us-east-1.on.aws/NewsLetterService/addContact", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(data),
      })
        .then((response) => {
          if (!response.ok) {
            throw new Error("Network response was not ok");
          }
          alert("Subscription successful!");
          document.getElementById("email").value = ""; // Clear input field after successful submission
        })
        .catch((error) => {
          console.error("There was an error!", error);
        });
    }
  </script>
</html>

Conclusion

Congratulations! 🥳

You’ve just seamlessly integrated newsletter functionality without the need to grapple with the complexities of setting up and hosting your backend.

I hope you enjoyed this tutorial and I encourage you to check out our other tutorials for more tips and tricks on improving your software engineering skills. 🥷 💻

Also, I invite you to check our examples on GitHub .