DEV Community

Jennifer Lacey for SparkPost

Posted on • Originally published at sparkpost.com on

Creating the Next Generation of Interactive Emails with Rebel Mail

**We are excited to announce our new partnership with Rebel. Rebel is disrupting the email marketing space and allows users to send interactive emails with no plug-ins required. This guest blog post, written by Manisha Shah highlights Rebel’s ease of use and their competitive edge in the market.

Integrate your email channel and app with in-email interactivity.

Email is one of the oldest communication protocols on the web. Unfortunately for the billions of people that use it to communicate, up until a few years ago, almost nothing has dramatically improved the user experience. After years of very little innovation, interactive email has created a flurry of exciting changes.

At Rebel, we don’t see stodgy, old email clients that are a nightmare to develop against. We see a brand new surface for your application to live on. Interactive email allows you to show a user the exact action you want them to take, without the need for a click or leave their inbox.

Taking advantage of these new opportunities for user actions is easier said than done. Coding normal emails remains a challenge for most developers due to the deep fragmentation in email clients. That’s why we believe the best way to take advantage is through our interactive email API.

It’s the only way of generating interactive emails on the fly, personalized to the user you are sending to. You don’t need to know the latest hacks to get the email rendering perfectly or the quirks of gathering data from inside an email client. All you need to know is the information you want to get from a user, and with a simple JSON request, you can get back ready-to-send interactive email HTML.

But what does that really mean?

If the above sounds fanciful and far-fetched to you, you’re not alone. However, it is that simple. All that you need to do is describe the functionality that you want to achieve in JSON and our API will convert it to HTML for you.

To prove that point we’re going to build a quick email that asks a user for some feedback on your app. It will contain stars for rating 1-5 and a text input for collecting general feedback.

The API call structure.

For this example, we’ll be looking at an abbreviated API call (I’ve taken out some of the options so that the information is clear), that will return to you HTML with two form fields, and a submit button.

As you can see below the JSON call includes an array at context.components.body.formfields, in that array there are two objects. Each describes one piece of functionality. One for the rating module and one for the text area. Here you place all the information you want to be covered displayed in the email and adjust and field-specific settings.

"context": {
    "components": [
      {
        "type": "form",
        "body": {
          "submitUrl": "http://rebelmail.com/review/",
          "id": "review-form",
          "formFields": [
            {
              "type": "rating",
              "variation": "star",
              "fluid": true,
              "layout": "stack",
              "name": "star-rating",
              "label": "How was the espresso?",
              "options": [
                {
                  "value": "1",
                  "text": "★"
                },
                {
                  "value": "2",
                  "text": "★"
                },
                {
                  "value": "3",
                  "text": "★"
                },
                {
                  "value": "4",
                  "text": "★"
                },
                {
                  "value": "5",
                  "text": "★"
                }
              ]
            },
            {
              "type": "textArea",
              "layout": "stack",
              "name": "comments",
              "label": "Anything else we should know?",
              "placeholder": "Leave your comments here...",
              "maxlength": "2000"

            }
          ],
          "submit": {
            "text": "Leave Your Review"
          }
        }
      }
    ],
Enter fullscreen mode Exit fullscreen mode

 

The above example is abbreviated for illustrative purposes, but generally, our API allows you to set the values and styles of any element inside our interactive modules.

What you get back.

Our /campaigns/:id/html endpoint will return to you HTML, completely ready to be delivered. No need to do anything to it, just send it out. Here is the email from the full request above as seen in Apple Mail:

Interactive email analytics.

Of course what good is new technology if you can’t tell if it’s adding value to your business. That’s why we built a robust analytics platform for recording every possible action a user takes within an email. If a user clicks a radio button or star rating, we record it. If they open the email on Outlook and see a beautifully rendered static fallback message, we record it.

All that actionable data is only good if you can consume it. That’s why we created a number of ways to have our data pushed to your servers (such as a webhook).

Go forth and interact.

These kinds of forms are one excellent way to allow users to interact with your app from within an email client, and there is a myriad of ways to apply this same technology. Responding to comments, prompting inactive users to post again for the first time, or allowing users to complete portions of their onboarding while verifying their email address, are all possible.

You can do even more than forms with our flexible API, Thanks to the various modules we have created, your users can take quizzes, research or filter products, and even shop directly in the inbox. All while our robust analytics allows you to gather every action and use it for things like progressive profiling and user recommendations.

The post Creating the Next Generation of Interactive Emails with Rebel Mail appeared first on SparkPost.

Top comments (0)