Collecting Email Signups With the Notion API

This tutorial demonstrates building a newsletter signup system using a Jamstack architecture, integrating Netlify Functions, the Notion API, and Mailgun. Let's explore how to collect email subscribers directly, offering a free, self-hosted alternative to established newsletter platforms.

Many individuals create newsletters today, leveraging services like Substack, MailChimp, Revue (Twitter), and even Facebook. Others opt for self-managed WordPress solutions such as MailPoet. This tutorial presents a different approach: a custom system for collecting email addresses using an HTML form, a serverless function, and a database. This method avoids the costs associated with many existing platforms.

This tutorial builds a system using Netlify Functions, a Notion database, and Mailgun (though any API-enabled email service could be substituted). All services offer free tiers (with limitations). The complete code is available on GitHub.

Notion: Your Database Solution

Notion serves as our database. It's a versatile workspace for note-taking, project management, and more. Its database functionality, accessible via a user-friendly interface, is ideal for storing our email subscriptions. We'll create a table (database) called "Newsletter Emails," with a simple "Email" column and Notion's built-in "Created time" property.

Notion API Token and Integration

To connect to the Notion database, create a Notion integration (not within your Notion account, but on the Notion website while logged in). Name it "Newsletter Signups" and obtain the Internal Integration Token (API Token). Crucially, share the "Newsletter Emails" database with this integration to grant access.

Netlify Functions: Serverless Power

Netlify Functions provide serverless API endpoints. While Netlify Forms could be used, the free tier limits submissions to 100 per month. Netlify Functions, however, offer a much higher invocation limit (125,000 per month on a free plan), making them suitable for handling a larger volume of email signups.

Setting up the Netlify Project

Install the Netlify CLI (npm install netlify-cli -g), create a project directory, initialize npm (npm init), and authenticate with Netlify. A netlify.toml file is needed to specify the functions directory (functions = "functions").

The Netlify Function (index.js)

This function handles form submissions. Install the @notionhq/client package (npm install @notionhq/client --save). Create a .env file with your Notion API token (NOTION_API_TOKEN) and database ID (NOTION_DATABASE_ID). The database ID is found in the database's Notion URL.

The index.js function validates email addresses, uses the Notion API to add emails to the database, and returns a success or error response.

The HTML Form (index.html)

A simple HTML form with an email input and a submit button is created. JavaScript code validates the email and sends a POST request to the Netlify function (/.netlify/functions/index). Bootstrap 5 is used for styling.

Mailgun Integration (welcome.js)

To send confirmation emails, integrate Mailgun (or a similar service). Obtain your Mailgun API key and domain from the Mailgun dashboard, adding them to your .env file as MAILGUN_API_KEY and MAILGUN_DOMAIN.

Install the mailgun-js package (npm install mailgun-js --save). Create a welcome.js Netlify function to fetch new signups from Notion (within the last 30 minutes) and send confirmation emails using the Mailgun API.

Testing and Next Steps

Test the form, verify database entries, and send a POST request to the welcome function using a tool like Postman. Remember to check your spam folder for confirmation emails.

Future improvements include implementing a scheduled task (e.g., using GitHub Actions) to regularly send welcome emails and adding security measures to the welcome endpoint.

This tutorial provides a robust, cost-effective, and educational approach to building a newsletter signup system. The process demonstrates the power of combining various services and APIs to create a functional application.

The above is the detailed content of Collecting Email Signups With the Notion API. For more information, please follow other related articles on the PHP Chinese website!