Embedding MailChimp Archive into a Google Site for NPO

19 Mar 2013 – Grant Dickson

 

PoD_mailchimp-logo

As part of my annual CSR, I volunteer to a Non Profit High School Parents Teachers Association (PTA)  and perform some IT related tasks for them – one recent task was to build a Google site for them (it’s free) that would allow PTA members to edit, update and inform parents on the fly about what they’re up to.  The site included a public Google calendar (it’s free) and pages about initiatives the PTA is currently undertaking.

 

To compliment the free Google site, I also created and setup a free MailChimp account with Campaign templates, subscription and response forms etc, which allows the PTA to send up to 2000 emails in a single day, to an active contact list of up to 2500 Parents & Caregivers – and up to 12,000 emails in a month… a pretty amazing FREE service I think for a small Non Profit Organisation (or even SME !) .

 

I wanted to embed and display the contents of a MailChimp Archive folder of Email Campaigns previously sent to parents on the PTA Google Site, HOWEVER this typically requires embedding a Javascript, (provided by MailChimp) into a website page ….. something that Google Sites does not allow!  After some investigations I generated a simple solution – I created a customised Google Gadget – which takes about 1 minute to make and can be completed by ANYONE who can copy and paste.  Here’s a Step by Step guide on How to Embed a MailChimp Archive folder into a Google Site.

 

Embedding MailChimp Archive to a Google Site

To display a MailChimp Archive folder on a Google site requires making a custom Google Gadget that contains the MailChimp Javascript – there is no other way around it, however it’s super simple and here’s how.

 

Gadgets are small HTML and JavaScript applications that offer cool and dynamic content that can be placed on any page on the web. Gadgets are written in a module language using XML that wraps HTML and JavaScript. To add gadgets to your Google Site page click Edit page ? Insert ? More gadgets ? Public and look for them through the Google gadgets directory.

Here’s how to create a Google Gadget that will display the contents of a MailChimp Archive Folders on your Google Site :

Create your Google Gadget:

  • Replace Hello, world! on line 6 with the MailChimps Folder Archive Code – E.g.:

<style type=”text/css”>

<!–

.display_archive {font-family: arial,verdana; font-size: 12px;}

.campaign {line-height: 125%; margin: 5px;}

//–>

</style>

<script language=”javascript” src=”http://us6.campaign-archive2.com/generate-js/?u=2413e7c7822f50932192bbf47&fid=1949&show=10″ type=”text/javascript”></script>

    • Note: A common mistake to avoid is replacing the whole GGE code with yours – only replace Hello World.
  • Click the File menu ? Save As ? enter a new file name, e.g. your-gadget.xml ? click OK.
  • Right-click on the gadget File Name, which is at the top-right corner of GGE, and copy its Link / URL. For example:
    http://hosting.gmodules.com/ig/gadgets/file/102493921541441143368/your-gadget.xml
  • Get back to your Google Site ? click Edit page ? Insert ? More gadgets ? Add gadget by URL
  • PASTE your newly created Gadgets URL / Link copied from the GGE Page
  • Click ? Add
  • Customize the gadget width and height (i.e 850px x 800px), Scroll bar options etc Click ? OK
  • ? Save your Google Site page and your MailChimp Folder archive list will be displayed.

Simple!

Enjoy….