Browse Resources By:

Resource Center

How to Display Your MailChimp Stats in a Netvibes Widget

In this tutorial, you will learn how to write a Netvibes Widget that lists your mailing list statistics through the use of MailChimp. We will use Netvibes Studio, the web-based IDE provided by eXo, in order to quickly create a Netvibes widget directly in the cloud.

Note: Since we'll create our gadget using JavaScript, your API key (which gives access to your MailChimp account) will be visible to all. We only recommend using this gadget in an intranet context.

Step 1: Get your Mailchimp API key

Mailchimp require that you have an API key to access your data. To get it, login to MailChimp and go to API Keys and Info and add a key for your new app. Copy and save the new generated API key as you will need it later.

Step 2: Create the widget

Open you IDE and create a new Netvibes Widget ("Files" > "New" > "Netvibes Widget").

As you can see, the document is simply an HTML file. Update the meta information and the title of the document with your information as follows:

 <meta name="author" content="Jeremi Joslin" />
    <meta name="description" content="MailChimp Widget" />
    <title>MailChimp stats</title>

Step 3: Write the integration

MailChimp provides APIs for nearly anything you want. We are going to use the list function.

Here is the code to do the request:

// widget.onLoad is the first method called,
 // nothing can be done without it,
 // the rest of the code must be triggered from here - not <body onload="">.
 widget.onLoad = function() {
    //We load the list of mailing list we have
     var url = "http://us2.api.mailchimp.com/1.3/?method=lists&apikey=" + api_key + "&output=json";
     UWA.Data.request(
     url, {
        method: 'get',
        proxy: 'ajax',
        type: 'json',
        cache: 3600,
        onComplete: Mailchimp.display
    });
}

And here is the code to generate the html that shows the result:

Mailchimp.display = function(res) {
     //we are going to draw the UI
     //data contains the list of mailing list
     var data = res.data,
        html = [], i, avg_sub_rate_color;
        // we are iterating over the mailing list and show a box for each of them
           for (i = 0; i < data.length; i++) {
         // each item in data contains details about the list
         //depending if we match our target growth, the indicator is going to be green or red.
         avg_sub_rate_color = data[i].stats.avg_sub_rate >= data[i].stats.target_sub_rate ? "#77AB13": "#AE432E";
         //we show the name of the list and a link to it
         html.push("<div class=\"box\"><h3><a href=\"https://us2.admin.mailchimp.com/lists/dashboard/overview?id=", data[i].web_id, "\">", data[i].name, "</a></h3>");
         // How many members our list has
         html.push("<div><span class=\"big\">", data[i].stats.member_count, "</span> <span>Subscribers</span></div>");
         // What is our registration rate
         html.push("<div><span class=\"mid-size\" style=\"color: ", avg_sub_rate_color, "\">", data[i].stats.avg_sub_rate || 0, "</span> <span>subscribe rate</span></div>");
         // how many people unsubscribed since our last email
         html.push("<div><span class=\"mid-size\" >", data[i].stats.unsubscribe_count_since_send, "</span> <span>unsubscribe since last mail</span></div>");
         html.push("</div>");
    }
     html.push("<br style=\"clear:both;\"/>");
     // We add everything to the DOM
     document.getElementById("result").innerHTML = html.join("");}

You can download the full code here.

Step 4: Deployment

To deploy your widget, you can follow these steps:

Get the url of your Netvibes widget. To do this, Select your widget and click on the menu “View” > “Get URL”. Copy the url.
Go to the netvibes ecosystem, click on “Create or submit” and “Submit Widget”.
Paste the url of your gadget, and don’t forget to remove the “/private” part from it. If you do not do this, Netvibes will not be able to access it.
Fill-in the form and finish the process. The widget is now available in the ecosystem and can now be inserted to your dashboard.

Be careful, if you publish your gadget to the ecosystem, anybody will be able to install it. If you want to be the only one who can access it, select "Don't publish this widget in ecosystem (for me only)" in the privacy settings.

Note: if you want to test your gadget in Netvibes, disable the cache of the widget in the edit menu.

That's it, you've learned how to create a Netvibes Widget and how to deploy it. You can continue to explore the MailChimp API to create beautiful widgets.