Configuring the Newsletter Component

In this guide, you'll learn how to configure the newsletter component in your Shipixen-generated website.
If you haven't signed up for a newsletter provider yet, you can sign up for a free account at EmailOctopus (note: most providers will take a few hours to approve your account).

Configuration guide

The newsletter component is a simple component that allows you to add a newsletter signup form to your website.

To configure the newsletter component, you need to:

Configure your newsletter provider in data/config/site.settings.js

const siteConfig = {
  //...

  newsletter: {
    provider: 'emailoctopus'
    // Currently supported: 'buttondown' | 'convertkit' | 'klaviyo' | 'mailchimp' | 'emailoctopus'
  }
}

Add the required environment variables to your .env file, depending on the provider you chose:

# EmailOctopus
EMAILOCTOPUS_API_KEY=your-api-key
EMAILOCTOPUS_LIST_ID=your-list-id

# Buttondown
BUTTONDOWN_API_KEY=your-api-key

# Convertkit
CONVERTKIT_API_KEY=your-api-key
CONVERTKIT_FORM_ID=your-form-id

# Klaviyo
KLAVIYO_API_KEY=your-api-key
KLAVIYO_LIST_ID=your-list-id

# Mailchimp
MAILCHIMP_API_KEY=your-api-key
MAILCHIMP_API_SERVER=your-list-id
MAILCHIMP_AUDIENCE_ID=your-audience-id

Use the newsletter component in your website. For example if adding to the landing page:

<section
  className={'w-full flex justify-center items-center flex-col bg-primary-100/20 dark:bg-primary-900/10 py-4 md:py-12'}
>
  <div className="flex items-center justify-center max-w-[200px] sm:max-w-lg">
    <NewsletterForm {...NewsletterFormProps} />
  </div>
</section>

That's all! Newsletter submissions will be sent to your newsletter provider and you can view them in your provider's dashboard.

It is also possible to create a custom newsletter component by using the LandingNewsletterSection.

Before you continue, make sure you have the latest version of LandingNewsletterSection and LandingNewsletterInput.
You can get the latest versions from Page UI:
LandingNewsletterSection
LandingNewsletterInput

👉 You still need to configure the newsletter provider in data/config/site.settings.js and add the required environment variables to your .env file as shown in Step 1 and Step 2 above.

You'll need to make the submission request yourself and handle the response as shown in the example below.

custom-newsletter-section.tsx

'use client';
import { LandingNewsletterSection } from '@/components/landing/newsletter/LandingNewsletterSection';
import { useState } from 'react';

export const CustomNewsletterSection = () => {
  const [isLoading, setIsLoading] = useState(false);
  const [isSubmitted, setIsSubmitted] = useState(false);
  const [error, setError] = useState('');

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();

    const form = e.currentTarget;
    const formData = new FormData(form);
    const email = formData.get('email') as string;

    if (!email) {
      setError('Please enter a valid email address');
      return;
    }

    setIsLoading(true);
    setError('');

    try {
      const response = await fetch('/api/newsletter', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ email }),
      });

      const data = await response.json();

      if (!response.ok) {
        throw new Error(data.error || 'Something went wrong');
      }

      setIsSubmitted(true);
      form.reset();
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Failed to subscribe');
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <LandingNewsletterSection
      title="Never miss an update!"
      description="Subscribe to our newsletter to get the latest announcements, news and exclusive offers."
      buttonLabel={isLoading ? 'Subscribing...' : 'Subscribe'}
      onSubmit={handleSubmit}
      withBackground
      withAvatars
      disabled={isLoading || isSubmitted}
    >
      {error && <p className="text-sm text-red-500">{error}</p>}
      {isSubmitted && (
        <p className="text-sm text-green-500">You've been subscribed! 🎉</p>
      )}
    </LandingNewsletterSection>
  );
};

The component will automatically handle the form data collection and pass it to your onSubmit handler. You can customize the styling and behavior by adjusting the props passed to LandingNewsletterSection.

Remember to configure the newsletter provider in data/config/site.settings.js and add the required environment variables to your .env file.