.env.example

@@ -16,4 +16,7 @@ BUTTONDOWN_API_KEY=
 CONVERTKIT_API_URL=https://api.convertkit.com/v3/
 CONVERTKIT_API_KEY=
 // curl https://api.convertkit.com/v3/forms?api_key=<your_public_api_key> to get your form ID 
-CONVERTKIT_FORM_ID= 
+CONVERTKIT_FORM_ID= 
+
+KLAVIYO_API_KEY=
+KLAVIYO_LIST_ID=

README.md

@@ -55,7 +55,7 @@ I wanted it to be nearly as feature-rich as popular blogging templates like [bea
 - Blog templates
 - TOC component
 - Support for nested routing of blog posts
-- Newsletter component with support for mailchimp, buttondown and convertkit
+- Newsletter component with support for mailchimp, buttondown, convertkit and klaviyo
 - Supports [giscus](https://github.com/laymonage/giscus), [utterances](https://github.com/utterance/utterances) or disqus
 - Projects page
 - SEO friendly with RSS feed, sitemaps and more!

data/siteMetadata.js

@@ -23,7 +23,7 @@ const siteMetadata = {
     googleAnalyticsId: '', // e.g. UA-000000-2 or G-XXXXXXX
   },
   newsletter: {
-    // supports mailchimp, buttondown, convertkit
+    // supports mailchimp, buttondown, convertkit, klaviyo
     // Please add your .env file and modify it according to your selection
     provider: 'buttondown',
   },

pages/api/klaviyo.js

@@ -0,0 +1,34 @@
+export default async (req, res) => {
+  const { email } = req.body
+  if (!email) {
+    return res.status(400).json({ error: 'Email is required' })
+  }
+
+  try {
+    const API_KEY = process.env.KLAVIYO_API_KEY
+    const LIST_ID = process.env.KLAVIYO_LIST_ID
+    const response = await fetch(
+      `https://a.klaviyo.com/api/v2/list/${LIST_ID}/subscribe?api_key=${API_KEY}`,
+      {
+        method: 'POST',
+        headers: {
+          Accept: 'application/json',
+          'Content-Type': 'application/json',
+        },
+        // You can add additional params here i.e. SMS, etc.
+        // https://developers.klaviyo.com/en/reference/subscribe
+        body: JSON.stringify({
+          profiles: [{ email: email }],
+        }),
+      }
+    )
+    if (response.status >= 400) {
+      return res.status(400).json({
+        error: `There was an error subscribing to the list.`,
+      })
+    }
+    return res.status(201).json({ error: '' })
+  } catch (error) {
+    return res.status(500).json({ error: error.message || error.toString() })
+  }
+}