Set up Mailchimp and collect emails

Mailchimp account

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

Set up Mailchimp and collect emails

Mailchimp account

Embed form

Newsletter content

Background effect