Lets get started with building your first interactive email (We call them PowerEmails). The only requirements are Google Chrome, a Gmail account and about 5 minutes . If you run into any issues or need more info, please email devsupport@powerinbox.com

How do PowerEmails work?

At a high level, a PowerEmail is a normal email (StaticEmails) that runs a PowerEmail App inside it that contains interactive content. The PowerEmail App is rendered as an  IFRAME that loads a HTTPS URL you specify that replaces the body of your StaticEmails to convert them into PowerEmails. So when your users open your PowerEmail they see your interactive web content instead of StaticEmail content.

You turn your StaticEmails into a PowerEmail by inserting some non visible HTML into your email template. We refer to this non visible HTML as the PowerEmail App EmbedCode.

This PowerEmail App EmbedCode is not visible to the email recipient, but PowerInbox client uses the PowerEmail App EmbedCode to extract information including how to derive the URL for your interactive content. The PowerInbox client validates that the sender is approved to run interactive content and then replaces the body of the StaticEmail with an IFRAME that loads the HTTPS URL derived from the PowerEmail App EmbedCode.

Overview

1. First we get you setup with the PowerInbox Toolkit so you can start building PowerEmail Apps
2. Then we get you setup with the Developer Repository so that you can see your PowerEmails while you are building them
3. We then go ahead and build out your PowerEmail App so you can generate your PowerEmail App EmbedCode
4. Next we use the PowerEmail App EmbedCode to send your PowerEmail
5. And finally, you get to view your first PowerEmail running inside Gmail.

So, lets get started, shall we …

1. Set up the PowerInbox Toolkit

First you need to get the PowerInbox Toolkit. At present, this Toolkit is only available in the beta version of the PowerInbox extension for Chrome. Lets go ahead and setup the Toolkit.

1. In Chrome, go to http://powerinbox.com and install PowerInbox
2. Once PowerInbox is installed, open a new tab in Chrome and go to chrome://extensions/ to get to the list of extensions. Look for PowerInbox in that list and click the Options link
3. And now you are in the PowerInbox Toolkit

2. Enable the Developer repository

Next we need to enable the developer repository so that the PowerEmails you build are visible to you.

1. Open a new tab and login to Gmail
2. Open the PowerInbox Menu and enable Developer Mode
3. Click Manage Repositories and enable the Developer Team Apps repository
4. And now you are all set to see the PowerEmails you build

3. Build the PowerEmail App

Ok, now that setup is out of the way, lets build the PowerEmail App for your PowerEmail. Once you have the PowerEmail App you can get the PowerEmail App EmbedCode we discussed earlier.

Your first PowerEmail will enable a ‘game’ called HelloWorld to run inside your email. You can play HelloWorld on the web at https://apps.powerinbox.com/helloworld?appname={YOURFIRSTNAME} Go ahead and click the link to check out the game.

And we’re back, so lets see how we get this game running inside email

1. Switch to the tab that contains the PowerInbox Developer Toolkit and click the Create New App button to bring up the Configuration Screen for your PowerEmail App
2. Inside the General section
   1. Set the Name field to Hello World
   2. Set the Description field to This is my first PowerEmail
   3. Set the ServerURL to https://apps.powerinbox.com/helloworld/?poweremail=true (We set the query parameter poweremail to true so that the same webpage can be formatted differently to fit in email)
3. Inside the Contexts section
   1. Inside the embed context section
      1. Inside the Global Extractors section
         1. Set Pattern to a noreply@powerinbox.com (The . is not a typo, this is a regular expression that specifies the email address the PowerEmail will be sent from)
   2. Scroll down to find the inbox context. Inside the inbox context section
      1. Inside the Global Extractors section
         1. Set Pattern to a noreply@powerinbox.com
4. You are done with configuring the PowerEmail App so hit the Save and Close button at the top of the configuration screen
5. You will see a new App section appear called Local. Inside that section you will find Hello World, the PowerEmail App you just built.

Send the PowerEmail

Now that you have your PowerEmail App, lets get the PowerEmail App EmbedCode and send your first PowerEmail.

1. Click the Embed Code button
2. This will open the Generate Embed Code page in a new tab that contains the PowerEmail App EmbedCode
3. Set Email Address to your gmail address
4. Set Path to &appname=John&test=true .(Replace John with your first name)
5. Click the Send button to send the test email to your gmail account

View the PowerEmail

You are all done with building and sending your first PowerEmail, now its time to enjoy the fruits of your labor.

1. Open a new tab and go to the Gmail account you sent the test email to
2. Hit refresh until you see an email from PowerInbox with a subject that looks like DC9C9E1EA20E44F2818DECA1B6DB6239 Test Mail 3/9/2013 5:02:21 PM You will notice that in the inbox there is an icon for that email to draw attention to it and increase the open rate.
3. Open the email and you should see the Hello World game running inside it and you can play the game

Congrats!

You have just created and sent your first PowerEmail! This was just a tutorial so the next step is to get your existing product to send PowerEmails.