How to Add Actions to Gmail Inbox

To make it more convenient for customers to interact with your emails in Gmail, you can add Gmail Inbox Actions – buttons that allow you to perform a certain action inside Gmail without opening the email itself. Many companies already use this feature: AliExpress and Amazon offer to track the order, Asana – to view the task, Linkedin – to RSVP, Spotify – to listen to the song directly in Gmail, etc.

Types of Actions

• One-Click Actions – confirm subscription, add a song to the listen queue, etc.
• RSVP Actions – notify on whether you’re going to attend the event. Three response options are available: Yes, No, Maybe.
• Go-To Actions – track the order, go to the website, etc.

To send campaigns with markup, you need:

1. Register with Gmail. For this, you need to meet their registration requirements.
2. Create and send a test email.

1. How to Create an Email with Actions Markup

Gmail uses Microdata to create markup. Microdata is HTML with a series of specialized attributes. It consists of items defined according to a vocabulary. A collection of commonly used markup vocabularies is provided by Schema.org.

The basic syntax includes itemscope, an attribute to define an item, and itemprop, an attribute to describe one of the item's properties. Data types are specified using the itemtype attribute and can transfer values ​​defined in the selected vocabulary. For example, Schema.org defines such types as Person or PostalAddress.

To add markup to your email, you need to insert the code into the body. To copy the code snippets, go to Gmail for Developers.

Let’s try creating an email with an RSVP button. Add the following code to the email:

<div itemscope itemtype="http://schema.org/EmailMessage">
    	<!--#if($data.get('additionalInfo').get('trackingUrl').contains('tracking'))--> <!-- (If there is a dynamic link to track the package, then display all the code below, up to #else) -->
    	<meta itemprop="description" content="Track the package">
    	<div itemprop="potentialAction" itemscope itemtype="http://schema.org/ViewAction">
        	<link itemprop="target" href="$data.get('additionalInfo').get('trackingUrl')">
        	<meta itemprop="name" content="Track the package">
        	<link itemprop="url" href="$data.get('additionalInfo').get('trackingUrl')">
    	</div>
    	<!--[endif]---->
    	<div itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
        	<meta itemprop="name" content="Company name">
        	<link itemprop="url" href="Company website">
    	</div>
	</div>
	<div itemprop="customer" itemscope itemtype="http://schema.org/Person">
    	<meta itemprop="name" content="$!data.get('firstName') $!data.get('lastName')">
	</div>
	<div itemscope itemtype="http://schema.org/Order">
    	<div itemprop="merchant" itemscope itemtype="http://schema.org/Organization">
        	<meta itemprop="name" content="Company name">
    	</div>
    	<link itemprop="orderStatus" href="http://schema.org/OrderProcessing">
    	<meta itemprop="priceCurrency" content="Currency">
    	<meta itemprop="price" content="$data.get('totalCost')">
    	<div itemprop="acceptedOffer" itemscope itemtype="http://schema.org/Offer">
        	<div itemprop="itemOffered" itemscope itemtype="http://schema.org/Product">
            	<meta itemprop="name" content="The product category">
        	</div>
        	<meta itemprop="price" content="$data.get('totalCost')">
        	<meta itemprop="priceCurrency" content="Currency">
        	<div itemprop="eligibleQuantity" itemscope itemtype="http://schema.org/QuantitativeValue">
            	<meta itemprop="value" content="Number of items in the order">
        	</div>
    	</div>
    	<div itemprop="potentialAction" itemscope itemtype="http://schema.org/ViewAction">
        	<link itemprop="url" href="$data.get('additionalInfo').get('trackingUrl')">
    	</div>
    	<link itemprop="url" href="$data.get('additionalInfo').get('trackingUrl')">
    	<!--[endif]---->
    	<div itemprop="priceSpecification" itemscope itemtype="http://schema.org/PriceSpecification">
        	<meta itemprop="validFrom" content="2020-11-05T21:00:00-12:00">
        	<meta itemprop="price" content="$data.get('totalCost')">
        	<meta itemprop="priceCurrency" content="Currency">
    	</div>
	</div>
	<!--#else--> <!-- (If there is no link, then display all the code below) -->
	<!--[endif]---->
	<div itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
    	<meta itemprop="name" content="Company name">
    	<link itemprop="url" href="Company website">
	</div>
	<div itemprop="customer" itemscope itemtype="http://schema.org/Person">
    	<meta itemprop="name" content="$!data.get('firstName') $!data.get('lastName')">
	</div>
	<div itemscope itemtype="http://schema.org/Order">
    	<div itemprop="merchant" itemscope itemtype="http://schema.org/Organization">
        	<meta itemprop="name" content="Company name">
    	</div>
    	<link itemprop="orderStatus" href="http://schema.org/OrderProcessing">
    	<meta itemprop="priceCurrency" content="UAH">
    	<meta itemprop="price" content="$data.get('totalCost')">
    	<div itemprop="acceptedOffer" itemscope itemtype="http://schema.org/Offer">
        	<div itemprop="itemOffered" itemscope itemtype="http://schema.org/Product">
            	<meta itemprop="name" content="The product category">
        	</div>
        	<meta itemprop="price" content="$data.get('totalCost')">
        	<meta itemprop="priceCurrency" content="Currency">
        	<div itemprop="eligibleQuantity" itemscope itemtype="http://schema.org/QuantitativeValue">
            	<meta itemprop="value" content="Number of items in the order">
        	</div>
    	</div>
    	<!--[endif]---->
    	<div itemprop="priceSpecification" itemscope itemtype="http://schema.org/PriceSpecification">
        	<meta itemprop="validFrom" content="2020-11-05T21:00:00-12:00">
        	<meta itemprop="price" content="$data.get('totalCost')">
        	<meta itemprop="priceCurrency" content="Currency">
    	</div>
	</div>
	<!--#end-->

In Gmail, it will look as follows

Upon clicking the button, the customer will see the event info and available options and will be able to select their response.

2. How to Register with Gmail

To send emails with markup, you need to get whitelisted by Gmail.

1. Create a test email with markup and make sure you meet Gmail’s guidelines and requirements.
2. Validate markup in the markup tester.
3. Send the email to schema.whitelisting+sample@gmail.com.
4. Fill out the application form. You need to create a test email and fill a form for each markup type.

After your application is accepted, you’ll get a link to the feedback form.

If Gmail has any questions or comments regarding the design of your test email, they will specify it in this form. When the application is approved, you will also receive a notification by email. Whitelisting a sender can take one day to three weeks.