{"id":1381,"date":"2013-11-01T19:24:35","date_gmt":"2013-11-01T19:24:35","guid":{"rendered":"https:\/\/haritomedia.ch\/plone-mailchimp-portlet\/"},"modified":"2020-01-04T13:13:02","modified_gmt":"2020-01-04T13:13:02","slug":"plone-mailchimp-portlet","status":"publish","type":"post","link":"https:\/\/haritomedia.ch\/en\/plone-mailchimp-portlet\/","title":{"rendered":"Plone Mailchimp Portlet"},"content":{"rendered":"

[et_pb_section fb_built=”1″ _builder_version=”4.0.9″ custom_padding=”1px|||||”][et_pb_row _builder_version=”4.0.9″][et_pb_column type=”4_4″ _builder_version=”4.0.9″][et_pb_text _builder_version=”4.0.9″]<\/p>\n

Plone and How to Create a Mailchimp Portlet\u00a0<\/h1>\n

[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=”4.0.9″][et_pb_column type=”4_4″ _builder_version=”4.0.9″][et_pb_image src=”https:\/\/haritomedia.ch\/wp-content\/uploads\/2020\/01\/MailChimp-meets-Plone.png” _builder_version=”4.0.9″][\/et_pb_image][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”3_5,2_5″ _builder_version=”4.0.9″][et_pb_column type=”3_5″ _builder_version=”4.0.9″][et_pb_text _builder_version=”4.0.9″]<\/p>\n

Create a Mailchimp Portlet in Plone in a few simple steps! You only need to have access to the Zope Management Interface of your Plone site; that\u2019s all. A MailChimp Plone integration that allows administators to set it up by themselves and then to choose this portlet\u00a0 from the drop-down list to inserting a portlet \u2013 without running a \u201cbuildout.\u201d
<\/strong><\/p>\n

Create a new page template<\/h3>\n

When logged in as a site administrator, in the ZMI add a new \u2018page template\u2019 that will be the portlet for this specific use. Access the Zope Management Interface (ZMI) of your Plone site. In folder \/portal\/portal_skins\/custom\/ create a new object \u201cPage Template\u201d using the \u201cADD\u201d pulldown (pulldown\/PageTemplate):<\/p>\n

[\/et_pb_text][\/et_pb_column][et_pb_column type=”2_5″ _builder_version=”4.0.9″][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=”4.0.9″][et_pb_column type=”4_4″ _builder_version=”4.0.9″][et_pb_image src=”https:\/\/haritomedia.ch\/wp-content\/uploads\/2020\/01\/Plone-add-page-template.png” _builder_version=”4.0.9″ border_width_all=”5px” border_color_all=”#b3b3b3″][\/et_pb_image][et_pb_text _builder_version=”4.0.9″]<\/p>\n

Insert a name for this template into the Id filed, portlet_mailchimp, as seen here in this screenshot:.<\/p>\n

[\/et_pb_text][et_pb_image src=”https:\/\/haritomedia.ch\/wp-content\/uploads\/2020\/01\/Plone-Mailchimp-Portlet-0.png” _builder_version=”4.0.9″ border_width_all=”5px” border_color_all=”#b3b3b3″][\/et_pb_image][et_pb_text _builder_version=”4.0.9″]<\/p>\n

Click \u201cAdd and Edit\u201c.<\/span><\/strong><\/p>\n

This adds the new template right into the \/portal_skins\/custom folder and brings you to an editable new page template with this code already in it:<\/p>\n

[\/et_pb_text][et_pb_text _builder_version=”4.0.9″ text_font=”Inconsolata||||||||” text_text_color=”#000000″ background_color=”#f4f4f4″ custom_padding=”7px|9px|7px|9px|true|true” border_width_all=”5px” border_color_all=”#b3b3b3″]<\/p>\n

<html> <head> <title tal:content=\"template\/title\">The title<\/title> <meta http-equiv=\"content-type\"
 content=\"text\/html;charset=utf-8\"> <\/head> <body> <h2><span tal:replace=\"here\/title_or_id\">content
 title or id<\/span> <span tal:condition=\"template\/title\" tal:replace=\"template\/title\">optional template title<\/span><\/h2>
 This is Page Template <em tal:content=\"template\/id\">template id<\/em>. <\/body> <\/html><\/pre>\n
[\/et_pb_text][et_pb_text _builder_version=”4.0.9″]Override that code by pasting the following code into your new page template:<\/strong>[\/et_pb_text][et_pb_text _builder_version=”4.0.9″ background_color=”#f4f4f4″ custom_padding=”9px|8px|9px|8px|true|true” border_width_all=”5px” border_color_all=”#b3b3b3″]<\/p>\n
<html<\/span><\/a> xmlns:tal=<\/span>\"http:\/\/xml.zope.org\/namespaces\/tal\"<\/span> xmlns:metal=<\/span>\"http:\/\/xml.zope.org\/namespaces\/metal\"<\/span> i18n:domain=<\/span>\"plone\"<\/span>><\/span>\n    <body<\/span><\/a>><\/span> <div<\/span><\/a> metal:define-macro=<\/span>\"portlet\"<\/span>><\/span> <div<\/span><\/a> id<\/span>=<\/span>\"portlet-signup\"<\/span>><\/span> [Add an id, for example 'portlet-signup']\n    <div<\/span><\/a>><\/span> <div<\/span><\/a>><\/span> <link<\/span><\/a> href<\/span>=<\/span>\"\/\/cdn-images.mailchimp.com\/embedcode\/classic-081711.css\"<\/span> rel<\/span>=<\/span>\"stylesheet\"<\/span> type<\/span>=<\/span>\"text\/css\"<\/span>><\/span>\n    <style<\/span><\/a> type<\/span>=<\/span>\"text\/css\"<\/span>><\/span> #mc_embed_signup{background:#FFF5D2; clear:left; font:12px Arial,sans-serif; width:200px;}\n    #mc_embed_signup .button {background-image: none;} #mc_embed_signup form {} #mc_embed_signup h2 {font-family:Arial,sans-serif;color:\n    #CC6600;border: 0 none;margin:0;padding: 0 0 15px;} #mc_embed_signup .asterisk {font-size: 110%;} #mc_embed_signup .mc-field-group\n    label {color: #666666;font-size: 90%;font-weight: normal;} #mc_embed_signup .indicates-required {color: #666666;font-size:\n    10px;}\n    \/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.\n    We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. *\/\n    <\/<\/span>style<\/span><\/a>><\/span> <div<\/span><\/a> id<\/span>=<\/span>\"mc_embed_signup\"<\/span>><\/span> <h5<\/span><\/a> style<\/span>=<\/span>\"padding:5px;color:#343434;\"<\/span>><\/span>Enter here the text to display\n    before the header, h2<\/<\/span>h5<\/span><\/a>><\/span>\n    [Add your own MailChimp action form code below:] \n    <form<\/span><\/a> action<\/span>=<\/span>\"http:\/\/yoururl.us1.list-manage.com\/subscribe\/post?u=creatednumbere&amp;id=dcreatednumber\"<\/span> method<\/span>=<\/span>\"post\"<\/span><\/span>\n    id<\/span>=<\/span>\"mc-embedded-subscribe-form\"<\/span> name<\/span>=<\/span>\"mc-embedded-subscribe-form\"<\/span> target<\/span>=<\/span>\"_blank\"<\/span> novalidate><\/span> <h2<\/span><\/a>><\/span>Enter Here Your\n    Title Text<\/<\/span>h2<\/span><\/a>><\/span> <div<\/span><\/a>><span<\/span><\/a>><\/span>*<\/<\/span>span<\/span><\/a>><\/span> indicates required<\/<\/span>div<\/span><\/a>><\/span> <div<\/span><\/a>><\/span> <label<\/span><\/a> for<\/span>=<\/span>\"mce-EMAIL\"<\/span>><\/span>Email\n    Address <span<\/span><\/a>><\/span>*<\/<\/span>span<\/span><\/a>><\/span> <\/<\/span>label<\/span><\/a>><\/span> <input<\/span><\/a> type<\/span>=<\/span>\"email\"<\/span> value<\/span>=<\/span>\"\"<\/span> name<\/span>=<\/span>\"EMAIL\"<\/span> id<\/span>=<\/span>\"mce-EMAIL\"<\/span>><\/span> <\/<\/span>div<\/span><\/a>><\/span>\n    <div<\/span><\/a>><\/span> <label<\/span><\/a> for<\/span>=<\/span>\"mce-FNAME\"<\/span>><\/span>First Name <span<\/span><\/a>><\/span>*<\/<\/span>span<\/span><\/a>><\/span> <\/<\/span>label<\/span><\/a>><\/span> <input<\/span><\/a> type<\/span>=<\/span>\"text\"<\/span> value<\/span>=<\/span>\"\"<\/span><\/span>\n    name<\/span>=<\/span>\"FNAME\"<\/span> id<\/span>=<\/span>\"mce-FNAME\"<\/span>><\/span> <\/<\/span>div<\/span><\/a>><\/span> <div<\/span><\/a>><\/span> <label<\/span><\/a> for<\/span>=<\/span>\"mce-LNAME\"<\/span>><\/span>Last Name <span<\/span><\/a>><\/span>*<\/<\/span>span<\/span><\/a>><\/span>\n    <\/<\/span>label<\/span><\/a>><\/span> <input<\/span><\/a> type<\/span>=<\/span>\"text\"<\/span> value<\/span>=<\/span>\"\"<\/span> name<\/span>=<\/span>\"LNAME\"<\/span> id<\/span>=<\/span>\"mce-LNAME\"<\/span>><\/span> <\/<\/span>div<\/span><\/a>><\/span> <div<\/span><\/a> id<\/span>=<\/span>\"mce-responses\"<\/span>><\/span>\n    <div<\/span><\/a> id<\/span>=<\/span>\"mce-error-response\"<\/span> style<\/span>=<\/span>\"display:none\"<\/span>><\/<\/span>div<\/span><\/a>><\/span> <div<\/span><\/a> id<\/span>=<\/span>\"mce-success-response\"<\/span> style<\/span>=<\/span>\"display:none\"<\/span>><\/<\/span>div<\/span><\/a>><\/span>\n    <\/<\/span>div<\/span><\/a>><\/span> <div<\/span><\/a>><input<\/span><\/a> type<\/span>=<\/span>\"submit\"<\/span> value<\/span>=<\/span>\"Subscribe\"<\/span> name<\/span>=<\/span>\"subscribe\"<\/span> id<\/span>=<\/span>\"mc-embedded-subscribe\"<\/span>><\/<\/span>div<\/span><\/a>><\/span>\n    <\/<\/span>form<\/span><\/a>><\/span> <\/<\/span>div<\/span><\/a>><\/span> <\/<\/span>div<\/span><\/a>><\/span> <\/<\/span>div<\/span><\/a>><\/span> <\/<\/span>div<\/span><\/a>><\/span> <\/<\/span>div<\/span><\/a>><\/span> <\/<\/span>body<\/span><\/a>><\/span> <\/<\/span>html<\/span><\/a>><\/span><\/pre>\n
[\/et_pb_text][et_pb_code _builder_version=”4.0.9″][\/et_pb_code][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”2_3,1_3″ _builder_version=”4.0.9″][et_pb_column type=”2_3″ _builder_version=”4.0.9″][et_pb_text _builder_version=”4.0.9″]<\/p>\n
Customize The CSS Code To Adjust The Portlet’s Look<\/h3>\n
Enter your custom changes to this newly created page template: adjust the CSS<\/span> to your needs and replace the code generated from your MailChimp form creator to < form action<\/span>= \u2026 .
 Give the portlet a relevant name, for example <div id=\u201dportlet-signup<\/span>\u201c> .<\/p>\n
Adjusting the CSS and entering your text inside the h2 and h5 tag, gives the look we want, as in this screenshot \u2013 or on the live site: http:\/\/ossfoundation.us\/<\/a><\/p>\n
[\/et_pb_text][\/et_pb_column][et_pb_column type=”1_3″ _builder_version=”4.0.9″][et_pb_image src=”https:\/\/haritomedia.ch\/wp-content\/uploads\/2020\/01\/Plone-Mailchimp-Portlet-02.png” _builder_version=”4.0.9″][\/et_pb_image][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=”4.0.9″ custom_padding=”||0px|||”][et_pb_column type=”4_4″ _builder_version=”4.0.9″][et_pb_text _builder_version=”4.0.9″]<\/p>\n
Add The MAilchimp Potlet\u00a0<\/h3>\n
[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”1_2,1_2″ _builder_version=”4.0.9″][et_pb_column type=”1_2″ _builder_version=”4.0.9″][et_pb_image src=”https:\/\/haritomedia.ch\/wp-content\/uploads\/2020\/01\/Google-Drive-Access-Denied-July-7-2015-at-1158-AM.png” _builder_version=”4.0.9″][\/et_pb_image][et_pb_text _builder_version=”4.0.9″]<\/p>\n
Navigate to the section on your Plone site where you would like to have the Mailchimp Portlet appear, for example on the home page, click the \u201cManage Portlets\u201d link in the side bar and chose from the pull-down menu to add a \u201cClassic Portlet.\u201d<\/p>\n
You could do this step also by adding this to your site\u2019s URL: \/@@manage-portlets<\/p>\n
[\/et_pb_text][\/et_pb_column][et_pb_column type=”1_2″ _builder_version=”4.0.9″][et_pb_text _builder_version=”4.0.9″]<\/p>\n
Enter the name of the template we created in step one \u201cportlet_mailchimp\u201d into the field \u201cTemplate,\u201d and leave the field \u201cMacro\u201d as \u201cportlet.\u201d<\/p>\n
[\/et_pb_text][et_pb_image src=”https:\/\/haritomedia.ch\/wp-content\/uploads\/2020\/01\/Plone-Mailchimp-Portlet-01.png” _builder_version=”4.0.9″][\/et_pb_image][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=”4.0.9″][et_pb_column type=”4_4″ _builder_version=”4.0.9″][et_pb_text _builder_version=”4.0.9″]If you are the site administrator of a Plone site and would like to understand how to manage the portlets in Plone version 3, this article from Rob Porter is helpful.<\/a><\/p>\n
If you have a Plone3 or Plone4 site and a MailChimp account go ahead and try it out and please share your feedback or input.[\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"
Plone and How to Create a Mailchimp Portlet\u00a0Create a Mailchimp Portlet in Plone in a few simple steps! You only need to have access to the Zope Management Interface of your Plone site; that\u2019s all. A MailChimp Plone integration that allows administators to set it up by themselves and then to choose this portlet\u00a0 from […]<\/p>\n","protected":false},"author":1,"featured_media":1354,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[24],"tags":[],"class_list":["post-1381","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-internet-en"],"_links":{"self":[{"href":"https:\/\/haritomedia.ch\/en\/wp-json\/wp\/v2\/posts\/1381","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/haritomedia.ch\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/haritomedia.ch\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/haritomedia.ch\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/haritomedia.ch\/en\/wp-json\/wp\/v2\/comments?post=1381"}],"version-history":[{"count":7,"href":"https:\/\/haritomedia.ch\/en\/wp-json\/wp\/v2\/posts\/1381\/revisions"}],"predecessor-version":[{"id":1597,"href":"https:\/\/haritomedia.ch\/en\/wp-json\/wp\/v2\/posts\/1381\/revisions\/1597"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/haritomedia.ch\/en\/wp-json\/wp\/v2\/media\/1354"}],"wp:attachment":[{"href":"https:\/\/haritomedia.ch\/en\/wp-json\/wp\/v2\/media?parent=1381"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/haritomedia.ch\/en\/wp-json\/wp\/v2\/categories?post=1381"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/haritomedia.ch\/en\/wp-json\/wp\/v2\/tags?post=1381"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}