Skip to content

Instantly share code, notes, and snippets.

What would you like to do?

Dashing Mailchimp Widget


A Dashing widget to display email campaign information using the Mailchimp API and Gibbon


Mailchimp Widget


To use this widget, copy, mailchimp.html, and mailchimp.scss into the /widgets/mailchimp directory of your Dashing app. This directory does not exist in new Dashing apps, so you may have to create it. Copy the mailchimp.rb file into your /jobs folder, and include the Gibbon gem in your Gemfile. Edit the mailchimp.rb file to include your Mailchimp API key and, optionally, your Mailchimp campaign id.

To include the widget in a dashboard, add the following to your dashboard layout file:


  <li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
    <div data-id="mailchimp" data-view="Mailchimp" data-title="Mailchimp Campaign"></div>


class Dashing.Mailchimp extends Dashing.Widget
ready: ->
onData: (data) ->
<img class="logo" src="">
<h1 class="title" data-bind="title"></h1>
<ul class="list-nostyle">
<span class="column">Opens:</span>
<span class="value" data-bind="uniq_opens | raw"></span>
<span class="column">Clicks:</span>
<span class="value" data-bind="uniq_clicks | raw"></span>
<span class="column">Sent:</span>
<span class="value" data-bind="sent | raw"></span>
<span class="column">Unsubscribes:</span>
<span class="value" data-bind="unsubscribes | raw"></span>
require 'gibbon'
SCHEDULER.every '5m', first_in: 0 do |job|
gibbon =
gibbon.api_key = '' # <--- Enter your Mailchimp API key here
cid = gibbon.campaigns.list['data'][0]['id']
response = gibbon.reports.summary(cid: cid)
send_event('mailchimp', {
uniq_opens: response['unique_opens'],
uniq_clicks: response['unique_clicks'],
sent: response['emails_sent'],
unsubscribes: response['unsubscribes']
$background-color: #52bad5;
$full-color: rgba(255, 255, 255, 1);
$light-color: rgba(255, 255, 255, 0.7);
.widget-mailchimp {
background-color: $background-color;
color: $light-color;
padding: 0;
img {
margin-bottom: 20px;
height: 100px;
width: 100px;
.title {
font-size: 26px;
ul {
margin: 0px 15px;
text-align: left;
li {
margin: 7px 0;
.value {
float: right;
color: $full-color;
font-weight: 600;
font-size: 20px;
font-family: 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment