Skip to main content
  1. Posts/

Implementing and Triggering Google Now Cards & Gmail actions from Email

··928 words·5 mins·
Tips & How-To's Programmming
Table of Contents

For every Barcamp event that comes and goes by, I try to think of what new thing I can do to make it a bit better. Off late, I’ve been using Inbox by Gmail almost exclusively. I love the product, particularly for the cards that show up that gives you a brief info about the mail(ex: Event reservation details/Flight details etc) without even opening the email.

I noticed that Meetup does the same. So I thought to myself, why not implement this for the mailer we send out to folks who have RSVP’d for the event? We do sent a short ‘here’s what you should look forward to’ email, it’d be cool to add the event details so that people using Google Now would get notification and the Now card as well.

The biggest problem when I started looking out was that I didn’t even know what they were known as! After bit of searching with various keywords (“triggering Google now cards”, “Inbox cards”, “Inbox mail preview”) I found that the actual term is “Gmail actions". Gmail actions use markup from schema.org for powering these snippets.

The good thing is that a single markup is enough to power the various places the cards summary will be shown:

Google has a clear demarcation between Actions and Highlights - Actions are when you need to do something(for example: Confirm/cancel reservations) which Highlights are what you will see on Inbox by Gmail and the Google Now cards.

Furthermore, actions can be InApp actions - the most common example is how you can opt to unsubscribe from mailing list without having to go to the site, enter your email and again confirm these). Using the provided markup, you can define how these actions can be handled. Google has extensive documentation on how to handle these, I’d recommend reading these to give you an idea of how to proceed.

Writing the Markup
#

The markup is actually pretty simple and Google gives you an option to write it in JSON-LD or Microdata. Google gives templates for different events:

and many, many others that you can use. Check Google’s Reference guides here. I used JSON-LD because it seemed more intuitive concise to me.

Extracting the markup
#

Alternatively, if you don’t wish to write the Markup, Google offers a way where you can post the HTML of the email and it will attempt to extract the structured data and generate the Markup. This approached worked fairly well, though I’d still suggest you write the Markup by yourself with the help of existing templates.

Validating the Markup
#

Simply writing the markup isn’t enough, you will need to validate the markup, else Google will reject your application for whitelisting(will mention this later). Thankfully, Google provides a Markup validator to ensure that your Markup is correct.

Testing the Markup
#

Since these markups need to be registered, validated and whitelisted by Google, you cannot simply whip up an email from your production server and send an email to your test account. However, you can test for these integrations by creating an email containing the final Markup and send it to yourself. Since these emails need to be in HTML format, you can not use Gmail webapp. You can use this Google Apps Script or the Gmail Actions Email app to send emails to yourself. Alternatively, an HTML mail from desktop mail clients should also work(though I have not tested).

All set for production run!
#

Well, not quite. Google needs to whitelist your email address before these actions/highlights can be seen in your emails. You will need to send an email from your production server to schema.whitelisting+sample@gmail.com and fill in the registration form.

Tips for getting whitelisted:

  • Make sure you meet all guidelines listed, especially that your email address is authenticated with SPF check/DKIM signatures. See this guide for more info. Don’t even bother if SPF/DKIM is not set.
  • Google mentions “Consistent history of sending a high volume of mail from your domain (order of hundred emails a day minimum to Gmail) for a few weeks at least” - though we send thousands of mails, especially when a new event is announced, I don’t think this is that high of a requirement.
  • All that matters that your sending quality should be high, zero(or minimal) complaints and Bulk Sender Guidelines adhered to.

Markup from Barcamp Bangalore
#

This was the markup that I finally used.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
  {
      "@context":https://schema.org",
      "@type":EventReservation",
      "reservationNumber":30042016017",
      "reservationStatus":https://schema.org/Confirmed",
      "underName":{
          "@type":Person",
          "name":"[FIRST_NAME]"
      },
      "reservationFor":{
          "@type":Event",
          "name":Barcamp Bangalore Spring 2016",
          "startDate":2016-04-30T08:00:00+05:30",
          "location":{
              "@type":Place",
                  "name":CMR Institute of Technology",
                  "address":{
                      "@type":PostalAddress",
                      "streetAddress":No. 132, AECS Layout, ITPL Main Road, Kundalahalli",
                      "addressLocality":Bangalore",
                      "addressRegion":Karnataka",
                      "postalCode":560037",
                      "addressCountry":in"
                  }
              }
          }
  }

How long till production?
#

Google took about 7 days to respond to my application, and I had given up hope that I could get the whitelisting done on time - only to be pleasantly surprised and see that it was ready when the mailers were sent.

So how did it look like?
#

This is how it ended up looking like across devices:

Inbox Web app

Inbox Web app
Inbox Android App
Inbox Android App

 

Google Now Card

Google Now Card

Overall, I was pretty happy with this. I know there aren’t too many Inbox by Gmail users, but for the few folks that do use, this looks pretty good and is quite handy

Sathyajith Bhat
Author
Sathyajith Bhat
Author, AWS Container Hero and DevOps Specialist.

Related

Getting php mail() function running on Windows 8.1 with WAMP Server and configuring it to use Gmail’s SMTP servers
··289 words·2 mins
Tips & How-To's PHP Sendmail
With the next Barcamp Bangalore looming round the corner, I’d pitched in to help with some of the website tasks. I installed the traditional WAMP stack with WAMP Server for Windows and started working with WordPress. Needed to get the email notifications working, saw that it wasn’t. Bit of research & found that I’d need a SMTP server or an equivalent of sendmail. All the cool kids seem to be using Fake sendmail - I tried it to use with Gmail’s SMTP servers which uses authentication & TLS.
Reviving my dead Windows 8 install with no bootable USB/DVD and Linux Mint & Cr48
··680 words·4 mins
News Tips & How-To's Cr48 Linux Mint Windows
Couple of months ago, just about a month before #cpgweds - the engagement my Envy 14 laptop started showing signs of dying - weird noises coming from the vents, system freezing arbitrarily, system getting incredibly hot - and that’s really unusual because the Envy’s cooling system is probably one of the best that I’ve seen in a laptop. Soon enough, it became clear that a fan was not working - my idle temperatures hit 85 degrees C, and start any game or even xbmc, and the temperatures would hit 95-100 and shutdown sooner or later.
SSH into your servers from Unity using unity-sshsearch-lens
··120 words·1 min
Tips & How-To's Ubuntu
I love Unity, especially the lens feature. While going through the Ubuntu store, found this neat little lens for initiating an SSH connection. The lens parses your ~/.ssh/known_hosts & ~/.ssh/config files and provides you with a list of servers that you can connect to. Just install the lens, logout & login back to your desktop and you're good to go. To search, just bring up Unity dash by hitting the Super (aka Windows) key, type either the username or host and just hit enter to initiate the connection.