BlogApril 16, 2025

Set up Mailchimp and collect emails

Dubz

Mailchimp account

Sign up for a Mailchimp account and create a new list if you don't have one.

Embed form

Create a new embed form and copy the form URL to your Magic Portfolio config.

src/app/resources/config.js

const mailchimp = {
  action: 'https://url/subscribe/post?parameters',
  effects: {
    ...
  }
};

You can modify the headline and description in the content.js file.

src/app/resources/content.js

const newsletter = {
  display: true,
  title: <>Subscribe to {person.firstName}'s Newsletter</>,
  description: (
    <>
      I occasionally write about design, technology, and share thoughts on the intersection of creativity and engineering.
    </>
  ),
};

Background effect

There's a pre-configured background in Mailchimp.tsx that you can modify in the mailchimp object. Set graphic elements such as gradient, dots, lines, and grid and configure their appearance for the newsletter block.

src/app/resources/config.js

const mailchimp = {
  action: 'https://url/subscribe/post?parameters',
  effects: {
    mask: {
      cursor: false,
      x: 50,
      y: 0,
      radius: 100
    },
    gradient: {
      display: true,
      x: 50,
      y: -25,
      width: 100,
      height: 100,
      tilt: 0,
      colorStart: 'accent-background-strong',
      colorEnd: 'static-transparent',
      opacity: 50
    },
    dots: {
      display: true,
      size: 2,
      color: 'brand-on-background-weak',
      opacity: 20
    },
    lines: {
      display: false,
      color: 'neutral-alpha-weak',
      opacity: 100
    },
    grid: {
      display: false,
      color: 'neutral-alpha-weak',
      opacity: 100,
      width: 'var(--static-space-32)',
      height: 'var(--static-space-32)'
    }
}
}

Share this post:

Set up Mailchimp and collect emails

Mailchimp account

Embed form

Newsletter content

Background effect

Recent posts