ShipTanStarter Docs

export const websiteConfig = {
  // ...other config
  newsletter: {
    enable: true,
    provider: 'resend',
    autoSubscribeAfterSignUp: true, // Auto-subscribe users after registration
  },
  // ...other config
}

Beehiiv

Create Beehiiv Account

Create a Beehiiv account at beehiiv.com.

Get API Key and Publication ID

Go to Settings > API to generate an API key. Get your Publication ID from the URL or settings page.

Configure Environment Variables

Add the following to your .env file:

.env

BEEHIIV_API_KEY=your-beehiiv-api-key
BEEHIIV_PUBLICATION_ID=your-beehiiv-publication-id

Update Website Configuration

Update the website configuration to use Beehiiv for newsletter management:

src/config/website.ts

export const websiteConfig = {
  // ...other config
  newsletter: {
    enable: true,
    provider: 'beehiiv',
    autoSubscribeAfterSignUp: true, // Auto-subscribe users after registration
  },
  // ...other config
}

If you are setting up your environment, you can now go back to the Environment Configuration and continue. The rest of this document can be read later.

Environment Configuration

Set up environment variables

Customization

Creating a Custom Provider

If you need to use a different newsletter service, you can create a custom provider:

Create a new file in the src/newsletter/provider directory
Implement the NewsletterProvider interface

src/newsletter/provider/custom-provider.ts

import type {
  CheckSubscribeStatusParams,
  NewsletterProvider,
  SubscribeNewsletterParams,
  UnsubscribeNewsletterParams,
} from '@/newsletter/types';

export class CustomNewsletterProvider implements NewsletterProvider {
  constructor() {
    // Initialize your newsletter service provider
  }

  public getProviderName(): string {
    return 'custom';
  }

  async subscribe({ email }: SubscribeNewsletterParams): Promise<boolean> {
    // Subscribe user implementation
    return true;
  }

  async unsubscribe({ email }: UnsubscribeNewsletterParams): Promise<boolean> {
    // Unsubscribe user implementation
    return true;
  }

  async checkSubscribeStatus({ email }: CheckSubscribeStatusParams): Promise<boolean> {
    // Check subscription status implementation
    return true;
  }
}

src/newsletter/index.ts

import { CustomNewsletterProvider } from './provider/custom-provider';

const providerRegistry: Record<NewsletterProviderName, ProviderFactory> = {
  resend: () => new ResendNewsletterProvider(),
  beehiiv: () => new BeehiivNewsletterProvider(),
  custom: () => new CustomNewsletterProvider(),
};

Next Steps

Now that you understand how to use newsletter subscriptions in ShipTanStarter, you might want to explore these related features:

Email

Configure email services

Authentication

Configure user authentication

Analytics

Configure analytics services

Storage

Configure storage services

Newsletter

Environment Configuration

Email

Authentication

Analytics

Storage

On this page