Gmail Contextual Gadgets with GWT

Today we’ll create Gmail Contextual gadget with the help of GWT.
According to Google definition, Contextual gadget is “a gadget that is triggered by clues in Gmail, such as the contents of Subject lines and email messages. For example, Gmail already provides a YouTube contextual gadget. If the body of an email contains a link to a YouTube video, a clickable thumbnail view of the video appears at the bottom of the email.”

Gmail Contextual gadgets can work only with Google Apps for domain, you can’t set it up with your *@gmail.com account, because gadgets are available via Google Apps Marketplace only.

There are very good specs from Google about creating gadgets with pure JavaScript http://code.google.com/intl/en/apis/gmail/gadgets/contextual. I recommend to look through it, to understand, what we are doing.
GWT version has some differences with native JavaScript, we will take look at this.

Manifest

I take only Body Extractor, you can add any other.
Now, we need to define extractors for GWT application, create Extractors.xml in the same folder, where placed your main class with following lines:

To add multiply extractors use:

GWT application code

Then build the project and open xml file with main class, in my case it’s build/web/com.mozgoweb.demo.gadget/CtxGadgetEntryPoint.gadget.xml
Make sure, that your extractors are presented and add view=”card” to Content tag:

Card view is required for Contextual gadgets.
Now you need to upload builded gadgets (all files from folder, where located CtxGadgetEntryPoint.gadget.xml) to FTP or any other web storage, which we specified in Manifest.

Apps Marketplace

Login to Marketplace:
“My Vendor Profile” -> “Create a new listing”;
Check “My product may be directly installed into Google Apps domains”;
Fill “Application Manifest” with content from our Manifest.xml.

So, you’ve created application, now we need to connect it to domain.
Hit “Add it now” button and write your domain, then login with your domain admin credentials and activate application.
Thats all! Open any email and see how it works. Remember, that gadgets have very solid cache and it can take some time for your changes to be accepted, even with ?nogadgetcache=1 parameter.

My sample application searches words, starting with “@” in email body and shows twitter info for these users.

gadget_screen

I used Twitter + GWT example by Alex Moffat for this Demo Gadget.
You can find source code here.
Enjoy!

  • Pingback: Tweets that mention Gmail Contextual Gadgets with GWT | Mozgoweb -- Topsy.com

  • Pingback: Contextual Advertising Why? | Ezineboy

  • Pingback: What is Contextual Advertising? | Ezineboy

  • Ikhwani

    Hi Denis,
    Thank you very much for the gadget example.

    I’ve managed to get your example code running using gwt-gadgets 1.2.0 and GWT 2.1.1. But when using GWT 2.2 or 2.3, even with gwt-gadgets 1.2.1-rc1, the contextual gadget is not displayed. It looks like the problem is with the call to google.contentmatch.getContentMatches().

    Do you know if there should be an update to the example code to make it work with the newer libraries? Thank you. 🙂

  • http://www.koma.be Koen

    thxs !! helped alot.

    mainly this part :

    ….

    where dit you find documentation on that ?

  • http://www.koma.be Koen

    this part

    . Content type=”html” view=”card”

    (filtered out in previous comment )

  • Serge

    Hi !
    I’ve just added http://mozgoweb.com/gadget/CtxGadgetEntryPoint.gadget.xml as a gadget in gmail, but it is not visible in mails. What am I doing wrong ?

    • http://mozgoweb.com Denis Lunev

      Please see my reply in email.

  • http://www.koma.be Koen Maes

    Hey Dennis,

    Starting from this post, I am taking development of GWT gmail contextual gadget a bit further but I got stuck and no reply on the Google Groups. Desperately re-reading your article, I wonder maybe you can spot the problem. The post is here :
    https://groups.google.com/forum/#!topic/google-apps-gadgets-api/gxNoIQUVI4k

  • CWeb

    Little rectification to get it work, native method should be declared like this:

    native JsArray jsGetContentMatches() /*-{
    return $wnd.google.contentmatch.getContentMatches();
    }-*/;

  • Ricko Dayat

    According to Google definition, Contextual gadget is “a gadget that is triggered by clues in Gmail, such as the contents of Subject lines and email messages. For example, Gmail already provides a YouTube contextual gadget. If the body of an email contains a link to a YouTube video, a clickable thumbnail view of the video appears at the bottom of the email.”

    harga tablet Advan : http://hargatabletterbaru.net/harga-tablet-advan-vandroid-t4i.html