webiny-integration-mailchimp
v1.10.5
Published
Render Mailchimp newsletter signup form.
Downloads
19
Readme
webiny-integration-mailchimp
Render Mailchimp newsletter signup form.
Installation
yarn add webiny-integration-mailchimp
Setup
To setup, you must register a set of plugins. For more information on plugins, please visit Webiny documentation.
API
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.
Admin
1. Register plugins
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.
2. Register newsletter signup form component
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.
Site
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.