
How to add mailchimp to gatsbyjs ?
This article show how you can add mailchimp to your gatsbyjs project.
First install mailchimp package using npm to gatsby project.
npm install gatsby-plugin-mailchimp
Add following config object to your gatsby-config.js
{
"resolve": "gatsby-plugin-mailchimp",
"options": {
"endpoint": "",
"timeout": 3500
}
}
- Login to mailchimp account.
- Then look for Audience > Embedded Forms.
- Click on Select
- Grab url in form action https://******.list-manage.com/subscribe/post?u=****************
- Paste that url into endpoint in gatsby-config.js

{
"resolve": "gatsby-plugin-mailchimp",
"options": {
"endpoint": "https://******.list-manage.com/subscribe/post?u=****************",
"timeout": 3500
}
}
Last create text field for adding email id.
import addToMailchimp from "gatsby-plugin-mailchimp"
export default class MyGatsbyComponent extends React.Component {
// Since `addToMailchimp` returns a promise, you
// can handle the response in two different ways:
// Note that you need to send an email & optionally, listFields
// these values can be pulled from React state, form fields,
// or wherever. (Personally, I recommend storing in state).
// 1. via `.then`
_handleSubmit = e => {
e.preventDefault()
addToMailchimp(email, listFields) // listFields are optional if you are only capturing the email address.
.then(data => {
// I recommend setting data to React state
// but you can do whatever you want (including ignoring this `then()` altogether)
console.log(data)
})
.catch(() => {
// unnecessary because Mailchimp only ever
// returns a 200 status code
// see below for how to handle errors
})
}
// 2. via `async/await`
_handleSubmit = async e => {
e.preventDefault()
const result = await addToMailchimp(email, listFields)
// I recommend setting `result` to React state
// but you can do whatever you want
}
render() {
return <form onSubmit={this._handleSubmit(email, { listFields })}>...</form>
}
}
Reference :- https://www.gatsbyjs.com/plugins/gatsby-plugin-mailchimp