Set up Mailchimp and collect emails

April 16, 2025

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)'
    }
}
}

On this page