Building AMP questionnaires with Stripo by using pre-built modules

Hello, everyone.

Today we start our tutorial series where we'll show how to build AMP emails sooner than you write a paragraph of promo text.

Short introduction

As you probably know, we ran our Stripo AMP Quiz series last month. It consisted of 3 emails, each containing elements of gamification. The goal of this campaign was to demonstrate some capabilities of the AMP technology to our recipients. 

As a result, we received thousands of requests literally, like "How do I build such emails for my campaigns?".

This is why we decided to make these tutorials.

Let's start with the AMP questionnaire, as it was the first email from our Quiz series...

Watch our short video or keep reading the post to learn to build questionnaires fast.

How to build AMP questionnaires with Stripo

Normally, to build this email element, you would have to cope with AMP code, embed multiple amp-components in your emails, and connect them to your servers with the help of your developers to enable AMP in emails. With us, it's become much easier...

Just follow our step-by-step guide, and you'll design this email for your campaigns by yourself.

Step 1. Pulling a prebuilt AMP module in your template

I've built a ready-to-use "AMP Questionnaire" module for your convenience. It consists of three questions. In fact, as a base, we used our email 1 from the series, removed all the Stripo identity, and our intro. That's it.

So your module will have three sections for questions.

You pull this module in your template. It is included in the AMP HTML version by default. 

To pull the module into a template, please:

• drag a 1-container template in your email;
• go to the "Modules" section;
• enter the "Pre-built" tab;
• enter "Questionnaire";
• just drag this module into your template.

Here, you can edit colors, colors for the "Question" word and its background, and colors for the fields with answers.

To do so, click the "Structure" icon, then open the code editor as shown below:

Editing the "Question word" section

You need to replace existing colors with the colors you need by pasting colors' numbers from our palette.

To get the color's number, start editing text/designing buttons, and in the color palette, copy the necessary color number.

Editing the "Answers" fields design

In the "Answers" fields, you show if the answer was correct or incorrect.

To find them in your code, scroll down:

• where "a1" is meant for the correct answer;
• "a0" is meant for an incorrect answer.

Here you can replace a background color and a border color.

By default, when users give an incorrect answer, the "Answer field" gets red; when users give a correct answer — it gets green.

What about other elements, like questions themselves, images, and a number of sections? You edit them in your JSON file.

BTW, this module is already connected with the JSON file. You do not need to change anything in it. We'll work on the JSON file only.

Step 2. Working on questions/Editing a JSON file

Yes, you need a JSON file for creating your Data Source — the questionnaire itself.

This file will pull information/questions from your servers into emails.

As your JSON file, use the code sample given below (the one we used for our campaign):

{
   "items":[
      {
         "questions":[
            {
               "id":1,
               "img":"https://kvlya.stripocdn.email/content/guids/CABINET_8cd672fef378e9b5999e0b2fa77c95f6/images/29111588071244597.jpeg",
               "question":"How to pronounce our service’s name?",
               "text":"Fun fact. Initially, our service's name was Stripe, but when we found out that this name had been already taken, we quickly changed it. And yes, it happened on the first day at an international exhibition.",
               "wrongtext":"Oops. The correct answer is |strɪpe-oh| (|straɪp-oʊ|).<br>Fun fact. Initially, our service's name was Stripe, but when we found out that this name had been already taken, we quickly changed it. And yes, it happened on the first day at an international exhibition.",
               "correct":"1",
               "answers":[
                  {
                     "ida":1,
                     "answer":"|strɪpe-oh| ( |straɪp-oʊ| )"
                  },
                  {
                     "ida":2,
                     "answer":"|strɪp-oh| ( |strɪp-oʊ| )"
                  }
               ]
            },
            {
               "id":2,
               "img":"https://kvlya.stripocdn.email/content/guids/CABINET_8cd672fef378e9b5999e0b2fa77c95f6/images/83411588071269619.jpeg",
               "question":"What is the most popular email client in the world?",
               "text":"According to studies conducted by Litmus in April 2020, Gmail is the most popular email client. Please find the detailed results of the studies <a href='http://emailclientmarketshare.com/' target='_blank'>here</a>.",
               "wrongtext":"Oops. The correct answer is “Gmail”.<br>According to studies conducted by Litmus in April 2020, Gmail is the most popular email client. Please find the detailed results of the study <a href='http://emailclientmarketshare.com/' target='_blank'>here</a>.",
               "correct":"2",
               "answers":[
                  {
                     "ida":1,
                     "answer":"Outlook"
                  },
                  {
                     "ida":2,
                     "answer":"Gmail"
                  },
                  {
                     "ida":3,
                     "answer":"Apple iPhone"
                  },
                  {
                     "ida":4,
                     "answer":"Apple Mail"
                  }
               ]
            },
            {
               "id":3,
               "img":"https://kvlya.stripocdn.email/content/guids/CABINET_8cd672fef378e9b5999e0b2fa77c95f6/images/64191588071296283.jpeg",
               "question":"How to update a header or a footer in a hundred emails with Stripo at once?",
               "text":"Indeed, with Stripo, you can update any number of emails at once with a few clicks by using synchronized modules. Find more details on the feature <a href='https://stripo.email/blog/synchronized-modules-or-how-to-update-all-your-emails-at-once/' target='_blank'>in our article</a>.<br>P.S. You can always email our support team. We’re there for you ;)",
               "wrongtext":"Oops. The correct answer is “Use synchronized modules”.<br>Indeed, with Stripo, you can update any number of emails at once with a few clicks by using synchronized modules. Find more details on the feature <a href='https://stripo.email/blog/synchronized-modules-or-how-to-update-all-your-emails-at-once/' target='_blank'>in our article</a>.<br>P.S.: You can always email our support team. We’re there for you ;)",
               "correct":"3",
               "answers":[
                  {
                     "ida":1,
                     "answer":"Email our support team, they’ll do it for you"
                  },
                  {
                     "ida":2,
                     "answer":"Use smart elements"
                  },
                  {
                     "ida":3,
                     "answer":"Use synchronized modules"
                  },
                  {
                     "ida":4,
                     "answer":"Hire a team of 100 people"
                  }
               ]
            }
         ],
         "results":[
            {
               "titleWrong":"Good job.",
               "textWrong":"Everything is 10% off with this discount code:",
               "promocodeWrong":"SALE10",
               "outlookText":"Check your answers and get a discount. Correct answers: 1a, 2b, 3с.",
               "titleRight":"Amazing!",
               "textRight":"Everything is 30% off with this discount code:",
               "promocodeRight":"MEGASALE"
            }
         ]
      }
   ]
}

Where “id” is the section with questions:

• “id1” — is the section with question 1. All elements from “id1” to “id2” belong to question 1;

• “img” — link to the image you are about to use in the questionnaire;

• “question” — is the question itself;

• ”wrongtext” — is the text your users will see if they give an incorrect answer;

• "correct" — is the text your users will see if they give a correct answer;

• “ida1-4” — is the answer option given to users.

Edit this info manually:

• “img": “link to your image,”

• "question": "Your question?",

• "text": "text that appears once a user has answered,"

• "wrongtext": "this is what users see when they give an incorrect answer,"

• "correct": this is what users see when they give a correct answer,"

•  “ida": 1,
  "answer": "answer option 1"

•   "ida": 2,
  "answer": "answer option 2"

Do the same for each section.

Our code contains three question sections. Please remove the highlighted text from your JSON file if you want just two.

If you want all your questions to include 4 answer options, then in the JSON code, please remove section 1 and duplicate section 2. 

Step 3. Connecting emails to a data source

This step is required for pulling data from JSON files into our questionnaires; also for showing users if their answers were correct or incorrect (users submit responses, and our Data Source shows if the answer was correct and gives users the correct answer)

• open the “Data” tab;

• go to the “Data Sources” section;

• create a new data source;

• enter the name of this campaign (it can be, in fact, anything);

• in a new section below, paste your JSON file;

• copy URL address.

Step 4. Working on data storage/Choosing where to deliver users' responses to

We need to create a data service — a place for storing users' responses.

If you want to put data on Stripo servers, please toggle the “Stripo storage” button.

If you plan to store data in Google Drive (Spread Sheets), please follow the steps in our “Stripo Data Service” blog post.

Step 5. Inserting endpoints in emails

Now to connect our survey to servers and data storage — to actually enable the AMP questionnaire in our emails, we need to insert the endpoints that we've just built:

• click the ⚡ HTML "Structure" icon;
• open code editor;

• replace the link that goes after "action-xhr" in the <form id...> line with the URL address you generated in Step 4;
• replace the source link that goes after "src=" in the <amp-list...> line with the URL address you generated in Step 3;

• that's it.

Step 6. Building a fallback/HTML version of a questionnaire

We must build a fallback/HTML version of the quiz for those whose email clients do not support AMP yet.

Previously, you would add a link to the web version of the email or code a fallback on your own so that recipients could answer the questions in the quiz and have some fun.

Now we developed a Fallback Generator to help you build fallbacks for your quizzes within seconds without the need to deal with the code.

Important to note:

Currently, this generator works for questionnaires only. In the future, it will cover way more games.

How this generator works:

• paste the data source link you generated in Step 3 into the input field given below instead of our placeholder link;
• click the "Generate" button;
• copy the code.

Copy Code
Copied

To add this fallback to your questionnaire emails, please:

• drag the 1-container structure right under/above the structure that contains your AMP HTML quiz;

• drop the "HTML" basic block within this 1-container structure;

• click on this block and open the code editor;

• paste the code;

• select “HTML” in the “Include in” section of the "Structure" settings.

Please be advised this fallback will work:

• as an interactive email in Apple Mail;
• as a text with answer options in Outlook.

Yes, in Outlook, your recipients will not be able to play the game, yet they will see questions and answers and will see the promo code at the end of the email.

Important to note:

All other elements of this email, like the logo, footer, and contact information, will be included in both versions of this campaign.

If you want your users to see the Survey we’ve just created in Step 5, you may include the link to the web version of our AMP email instead of the link to Google Forms.

To get this link, please:

• enter the Preview mode;

• click “AMP HTML” in the top right-hand corner;

• click the “Copy” icon.

Important to note:

Sharing preview links is not available for the Free plan. 

Word of advice

We talked a lot about AMP emails and how to use them.

Here's just a friendly reminder. To be able to send AMP content, you need to:

• get whitelisted with Google;
• fix all the bugs if any occur. You will see them in the Preview mode (otherwise, users will see HTML email);
• add the fallback — HTML version — in this email. We talked about it above;
• make sure that your ESP/CRM is capable of sending AMP emails;
• keep in mind that currently, only Gmail and Yahoo are capable of rendering AMP emails;
• AMP emails lose their AMP components if you forward them.

Final thoughts

We've just built a questionnaire email. It works, like all AMP elements, in Gmail and Mail.ru. Other users will see your survey fallback.