|
1 |
| -This Gatsby plugin helps you subscribe new email addresses to a Mailchimp email list. Mailchimp does not provide much direction on making clientside requests so the setup to achieve this with a static website (i.e. Gatsby) can be cumbersome. |
2 |
| - |
3 |
| -There are two primary steps involved. First, you have to set your global Mailchimp settings (account ID, user ID, list ID) via your projectʼs `gatsby-config.js`. Second, you import this plugin into the React components and pass an email and any other attributes (i.e. Mailchimp List Fields) youʼd like to save alongside the user. |
| 1 | +## Subscribe emails to your Mailchimp list |
4 | 2 |
|
| 3 | +This Gatsby plugin helps you subscribe new email addresses to a Mailchimp email list. Mailchimp does not provide much direction on making clientside requests so the setup to achieve this with a static website (i.e. Gatsby) can be cumbersome. |
5 | 4 |
|
6 | 5 | ## How It Works Under The Hood
|
7 | 6 | What this plugin does is scan your `gatsby-config` for your MC settings. Then, once you import and invoke the `addToMailchimp` method in your React component, it makes a jsonp request of the email/attributes to MC's server using your settings.
|
8 | 7 |
|
| 8 | +## Using Gatsby v2? |
| 9 | +If you are still on Gatsby v1, skip this section. The master branch of this repo (v3) is still meant for Gatsby v1 use. Once Gatsby releases their v2, I will upgrade this repo to be compatible and bump the version to v4. |
| 10 | + |
| 11 | +In the meantime, update your `package.json` to: |
| 12 | +```javascript |
| 13 | +"gatsby-plugin-mailchimp": "https://github.com/benjaminhoffman/gatsby-plugin-mailchimp.git#gatsby-v2", |
| 14 | +``` |
| 15 | + |
| 16 | +That branch should work fine in Gatsby v2 for now. [Read here](https://github.com/benjaminhoffman/gatsby-plugin-mailchimp/issues/21#issuecomment-417954338) for more context. NOTE: once v2 becomes the official release, I will merge the branch above into master and slowly drop support for v1. |
| 17 | + |
9 | 18 |
|
10 | 19 | ## Getting Started
|
11 |
| -Start by adding the plugin. In the root directory of your Gatsby project, run the following command in your terminal: |
12 |
| -`$ yarn add gatsby-plugin-mailchimp` |
| 20 | +There are three steps involved to getting started: |
| 21 | + |
| 22 | +1. add this plugin to your repo |
| 23 | + - In the root directory of your Gatsby project, run the following command in your terminal: `$ yarn add gatsby-plugin-mailchimp` |
| 24 | + - or if using Gatsby v2: `$ yarn add https://github.com/benjaminhoffman/gatsby-plugin-mailchimp.git#gatsby-v2` |
| 25 | +2. include your Mailchimp settings in your `gatsby-config.js` file |
| 26 | +3. import the `addToMailchimp` function to subscribe emails to your MC list |
13 | 27 |
|
14 |
| -Youʼll first have to add your Mailchimp account and list settings to your `gatsby-config.js` file. Next, youʼll have to import this plugin into each file youʼd like to use it with. |
15 | 28 |
|
16 | 29 | ## Gatsby Config Instructions
|
17 | 30 | You need to provide this plugin with your Mailchimp account and list details in order for it to know which endpoint to save the email address to. Follow these directions:
|
@@ -116,7 +129,7 @@ To see an example usage, look no further than Gatsbyʼs website. Here are some
|
116 | 129 |
|
117 | 130 |
|
118 | 131 | ## Gotchas
|
119 |
| -1. *email address*: pass in the email as normal (ie, `_you@gmail.com_`). Do _not_ encode or transform the email, as our plugin will do that for you! |
| 132 | +1. *email address*: pass in the email as normal (ie, `you@gmail.com`). Do _not_ encode or transform the email, as our plugin will do that for you! |
120 | 133 |
|
121 | 134 | 2. *listFields*: many times you want to collect more than just an email address (first/last name, birthday, page pathname). I like to store this info in React state and pass it in as list fields. See below.
|
122 | 135 |
|
|
0 commit comments