Display Your Gmail Inbox Count in Your Website

Share this:

Google Script has really made me crazy. It's support for Gmail, Analytics, Calendar etc. are truly amazing. I love programming and this tendency helped me a lot to dig more into Google Script. Still there are miles to walk, but when I see back I realize, whatever I have learned in past 6 years, 50% of credit goes only to Google. Thanks Google for your presence.

This time I came back with a tricky way to display your Gmail Inbox counter in your website or blog. Many people send you email but they never get confirmed whether the email has been delivered or not. But imagine, if a counter is there which displays the email count from your inbox in real time i.e number of read and unread messages from your Gmail then it might help them to get acknowledged about the delivery of the email.

Lets have a live example. Following image shows a real time inbox counter for hdas89@gmail.com. If you don't believe then send an email to the same address and refresh this page after 2 minutes to verify the counter. This image shows the total number of emails I have received today, how many are unread and when I got the last email.

Today's inbox count

How to get the count from Gmail


Without Google Script this would be really very difficult. Here are the processes which is done in the background to fetch the count from Gmail.
  • I have created a Google Script which can read your Gmail and filters only those email which has been received today.
  • Then it increases the counters accordingly, Ex: If it finds an unread email it increases the unread counter by one.
  • Then I created a timer in the Google Script which runs the program in every 1 minute thus it increases the count real time.
  • All these counts are stored in a Google Spreadsheet.
  • Now our browsers access the Google Spreadsheet with JavaScript to get those counts on client side.

How to show your own count in your blog

  • Make a new copy of this spreadsheet (Go to File-->Make a copy...)
  • Go to File-->Share..., and share the spread sheet as public on web
  • To publish the spreadsheet to web, go to File-->Publish to the web...-->Start publishing
  • Go to Tools-->Script Editor to open the script editor
  • In script editor go to Resources-->All your triggers...
  • Create a trigger with following settings (Please grant access while creating the trigger)

  • Now you are almost done. Close the script editor.

Image Counters

To show image counters copy and paste the following code in a notepad and save as .html. Replace the spreadsheet key (red text) with your own key.
<script type='text/javascript'>
	function getReply(data) {
		var allMessages = data.feed.entry[0].gsx$allmessages.$t;
		var unreadMessages = data.feed.entry[0].gsx$unreadmessages.$t;
		var lastMsgReceived = data.feed.entry[0].gsx$lastmsgreceived.$t;
		
		document.getElementById("pinned_c").innerHTML="<img src=' https://chart.googleapis.com/chart?chst=d_fnote_title&chld=pinned_c|1|004400|h|Total: "+allMessages+"|Unread:"+unreadMessages+"|Last email|"+lastMsgReceived+"'/>";		
	}
</script> 

<table style="margin-left:auto;margin-right:auto;">
	<tr>
		<td>
			<div id="pinned_c"></div>
		</td>
	</tr>
</table>
<script type="text/javascript" src="https://spreadsheets.google.com/feeds/list/0AlecLd2XqOqEdGRudnFnNDVKU3FRSFFmUXo0Y0Q1VkE/od6/public/values?alt=json-in-script&callback=getReply"></script>


Textual Counters

To show textual counters copy and paste the following code in a notepad and save as .html. Replace the spreadsheet key (red text) with your own key.

<script type='text/javascript'>
	function getReply(data) {
		var allMessages = data.feed.entry[0].gsx$allmessages.$t;
		var unreadMessages = data.feed.entry[0].gsx$unreadmessages.$t;
		var lastMsgReceived = data.feed.entry[0].gsx$lastmsgreceived.$t;
		
		document.getElementById("textualCounter").innerHTML="<b>Total: "+allMessages+"</b><br/>Unread: "+unreadMessages+"<br/>Last email<br/>"+lastMsgReceived;		
	}
</script> 

<table style="margin-left:auto;margin-right:auto;">
	<tr>
		<td>
			<div style="border:1px solid #c0c0c0; padding:5px;" id="textualCounter"></div>
		</td>
	</tr>
</table>
<script type="text/javascript" src="https://spreadsheets.google.com/feeds/list/0AlecLd2XqOqEdGRudnFnNDVKU3FRSFFmUXo0Y0Q1VkE/od6/public/values?alt=json-in-script&callback=getReply"></script>