Render Mailchimp newsletter signup form.
yarn add webiny-integration-mailchimp
To setup, you must register a set of plugins. For more information on plugins, please visit Webiny documentation.
import mailchimpPlugins from "webiny-integration-mailchimp/plugins/api"
import { registerPlugins } from "webiny-plugins";
registerPlugins(...mailchimpPlugins);
Exposes necessary GraphQL fields that handle integration settings and newsletter signup form submits.
import mailchimpPlugins from "webiny-integration-mailchimp/plugins/admin"
import { registerPlugins } from "webiny-plugins";
registerPlugins(...mailchimpPlugins);
Enables management of Mailchimp settings, which can be accessed via Settings section in the main menu. You will paste your Mailchimp API key here (this is required in order for the integration to work properly).
Additionally, this will also register Mailchimp element in CMS editor, which will enable you to insert newsletter signup forms in your pages. The element will be registered under the "Form" element category.
To complete the admin setup, register one or more newsletter signup forms. Registration is done via CMS theme.
For example in demo-theme/src/index.js
:
import * as React from "react";
import { MailchimpDefaultForm } from "webiny-integration-mailchimp/render/components";
export default {
fonts: {
...
},
colors: {
...
},
elements: {
pagesList: {
...
},
mailchimp: {
components: [
{
name: "default",
title: "Default page list",
component: MailchimpDefaultForm
},
{
name: "custom",
title: "Custom page list",
component: (props: *) => {
const { Bind, submit } = props;
return (
<div>
<Bind name={"email"} validate={["required"]}>
<Input label={"Your e-mail"} />
</Bind>
<ButtonPrimary onClick={submit}>Submit</ButtonPrimary>
</div>
);
}
}
]
}
},
styles: {
...
}
};
Use Bind
component to bind form elements and submit
callback to submit the form.
import mailchimpPlugins from "webiny-integration-mailchimp/plugins/render"
import { registerPlugins } from "webiny-plugins";
registerPlugins(mailchimpPlugins);
Enables Mailchimp newsletter signup form render in your public website.