Constructing AMP questionnaires with Stripo through the use of pre-built modules — Stripo.electronic mail

Howdy, everybody.

At this time we begin our tutorial sequence the place we’ll present construct AMP emails earlier than you write a paragraph of promo textual content.

Brief introduction

As you in all probability know, we ran our Stripo AMP Quiz sequence final month. It consisted of three emails, every containing parts of gamification. The purpose of this marketing campaign was to exhibit some capabilities of the AMP know-how to our recipients. 

Consequently, we acquired hundreds of requests actually, like “How do I construct such emails for my campaigns?”.

That is why we determined to make these tutorials.

Let’s begin with the AMP questionnaire, because it was the primary electronic mail from our Quiz sequence…

Watch our quick video or preserve studying the publish to be taught to construct questionnaires quick.

The best way to construct AMP questionnaires with Stripo

Usually, to construct this electronic mail factor, you would need to deal with AMP code, embed a number of amp-components in your emails, and join them to your servers with the assistance of your builders to allow AMP in emails. With us, it is grow to be a lot simpler…

Simply observe our step-by-step information, and you will design this electronic mail on your campaigns by your self.

Step 1. Pulling a prebuilt AMP module in your template

I’ve constructed a ready-to-use “AMP Questionnaire” module on your comfort. It consists of three questions. In reality, as a base, we used our electronic mail 1 from the sequence, eliminated all of the Stripo id, and our intro. That is it.

So your module may have three sections for questions.

You pull this module in your template. It’s included within the AMP HTML model by default. 

To drag the module right into a template, please:

• drag a 1-container template in your electronic mail;
• go to the “Modules” part;
• enter the “Pre-built” tab;
• enter “Questionnaire”;
• simply drag this module into your template.

Right here, you’ll be able to edit colours, colours for the “Query” phrase and its background, and colours for the fields with solutions.

To take action, click on the “Construction” icon, then open the code editor as proven beneath:

Modifying the “Query phrase” part

It is advisable exchange current colours with the colours you want by pasting colours’ numbers from our palette.

To get the colour’s quantity, begin enhancing textual content/designing buttons, and within the colour palette, copy the mandatory colour quantity.

Modifying the “Solutions” fields design

Within the “Solutions” fields, you present if the reply was right or incorrect.

To seek out them in your code, scroll down:

• the place “a1” is supposed for the right reply;
• “a0” is supposed for an incorrect reply.

Right here you’ll be able to exchange a background colour and a border colour.

By default, when customers give an incorrect reply, the “Reply discipline” will get purple; when customers give an accurate reply — it will get inexperienced.

What about different parts, like questions themselves, pictures, and plenty of sections? You edit them in your JSON file.

BTW, this module is already linked with the JSON file. You don’t want to vary something in it. We’ll work on the JSON file solely.

Step 2. Engaged on questions/Modifying a JSON file

Sure, you want a JSON file for creating your Knowledge Supply — the questionnaire itself.

This file will pull info/questions out of your servers into emails.

As your JSON file, use the code pattern given beneath (the one we used for our marketing campaign):

{
   "objects":[
      {
         "questions":[
            ).<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":[
                  strɪpe-oh,
                   )"
                  
               ]
            ,
            {
               "id":2,
               "img":"https://kvlya.stripocdn.electronic mail/content material/guids/CABINET_8cd672fef378e9b5999e0b2fa77c95f6/pictures/83411588071269619.jpeg",
               "query":"What's the hottest electronic mail shopper on the planet?",
               "textual content":"In keeping with research carried out by Litmus in April 2020, Gmail is the preferred electronic mail shopper. Please discover the detailed outcomes of the research <a href="http://emailclientmarketshare.com/" goal="_blank">right here</a>.",
               "wrongtext":"Oops. The right reply is “Gmail”.<br>In keeping with research carried out by Litmus in April 2020, Gmail is the preferred electronic mail shopper. Please discover the detailed outcomes of the research <a href="http://emailclientmarketshare.com/" goal="_blank">right here</a>.",
               "right":"2",
               "solutions":[
                  {
                     "ida":1,
                     "answer":"Outlook"
                  },
                  {
                     "ida":2,
                     "answer":"Gmail"
                  },
                  {
                     "ida":3,
                     "answer":"Apple iPhone"
                  },
                  {
                     "ida":4,
                     "answer":"Apple Mail"
                  }
               ]
            },
            {
               "id":3,
               "img":"https://kvlya.stripocdn.electronic mail/content material/guids/CABINET_8cd672fef378e9b5999e0b2fa77c95f6/pictures/64191588071296283.jpeg",
               "query":"The best way to replace a header or a footer in 100 emails with Stripo directly?",
               "textual content":"Certainly, with Stripo, you'll be able to replace any variety of emails directly with just a few clicks through the use of synchronized modules. Discover extra particulars on the function <a href="https://stripo.electronic mail/weblog/synchronized-modules-or-how-to-update-all-your-emails-at-once/" goal="_blank">in our article</a>.<br>P.S. You possibly can at all times electronic mail our help staff. We’re there for you ;)",
               "wrongtext":"Oops. The right reply is “Use synchronized modules”.<br>Certainly, with Stripo, you'll be able to replace any variety of emails directly with just a few clicks through the use of synchronized modules. Discover extra particulars on the function <a href="https://stripo.electronic mail/weblog/synchronized-modules-or-how-to-update-all-your-emails-at-once/" goal="_blank">in our article</a>.<br>P.S.: You possibly can at all times electronic mail our help staff. We’re there for you ;)",
               "right":"3",
               "solutions":[
                  {
                     "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"
                  }
               ]
            }
         ],
         "outcomes":[
            {
               "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"
            }
         ]
      }
   ]
}

The place “id” is the part with questions:

• “id1” — is the part with query 1. All parts from “id1” to “id2” belong to query 1;

• “img” — hyperlink to the picture you’re about to make use of within the questionnaire;

• “query” — is the query itself;

• ”wrongtext” — is the textual content your customers will see if they offer an incorrect reply;

• “right” — is the textual content your customers will see if they offer a right reply;

• “ida1-4” — is the reply possibility given to customers.

Edit this information manually:

• “img”: “hyperlink to your picture,”

• “query”: “Your query?”,

• “textual content”: “textual content that seems as soon as a consumer has answered,”

• “wrongtext”: “that is what customers see once they give an incorrect reply,”

• “right”: that is what customers see once they give a right reply,”

•  “ida”: 1,
  
  “reply”: “reply possibility 1”

•   “ida”: 2,
  
  “reply”: “reply possibility 2”

Do the identical for every part.

Our code comprises three query sections. Please take away the highlighted textual content out of your JSON file if you’d like simply two.

If you need all of your questions to incorporate 4 reply choices, then within the JSON code, please take away part 1 and duplicate part 2. 

Step 3. Connecting emails to a information supply

This step is required for pulling information from JSON information into our questionnaires; additionally for displaying customers if their solutions had been right or incorrect (customers submit responses, and our Knowledge Supply exhibits if the reply was right and offers customers the right reply)

• open the “Knowledge” tab;

• go to the “Knowledge Sources” part;

• create a brand new information supply;

• enter the title of this marketing campaign (it may be, the truth is, something);

• in a brand new part beneath, paste your JSON file;

• copy URL handle.

Step 4. Engaged on information storage/Selecting the place to ship customers’ responses to

We have to create an information service — a spot for storing customers’ responses.

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

In case you plan to retailer information in Google Drive (Unfold Sheets), please observe the steps in our “Stripo Knowledge Service” weblog publish.

Step 5. Inserting endpoints in emails

Now to attach our survey to servers and information storage — to truly allow the AMP questionnaire in our emails, we have to insert the endpoints that we have simply constructed:

• click on the ⚡ HTML “Construction” icon;
• open code editor;

• exchange the hyperlink that goes after “action-xhr” within the <kind id…> line with the URL handle you generated in Step 4;
• exchange the supply hyperlink that goes after “src=”https://stripo.electronic mail/weblog/building-questionnaires-with-stripo/within the <amp-list…> line with the URL handle you generated in Step 3;

Step 6. Constructing a fallback/HTML model of a questionnaire

We should construct a fallback/HTML model of the quiz for these whose electronic mail purchasers don’t help AMP but.

Beforehand, you’ll add a hyperlink to the net model of the e-mail or code a fallback by yourself in order that recipients might reply the questions within the quiz and have some enjoyable.

Now we developed a Fallback Generator that can assist you construct fallbacks on your quizzes inside seconds with out the necessity to cope with the code.

Essential to notice:

At the moment, this generator works for questionnaires solely. Sooner or later, it is going to cowl far more video games.

How this generator works:

• paste the information supply hyperlink you generated in Step 3 into the enter discipline given beneath as an alternative of our placeholder hyperlink;
• click on the “Generate” button;
• copy the code.

So as to add this fallback to your questionnaire emails, please:

• drag the 1-container construction proper below/above the construction that comprises your AMP HTML quiz;

• drop the “HTML” fundamental block inside this 1-container construction;

• click on on this block and open the code editor;

• paste the code;

• choose “HTML” within the “Embody in” part of the “Construction” settings.

Please be suggested this fallback will work:

• as an interactive electronic mail in Apple Mail;
• as a textual content with reply choices in Outlook.

Sure, in Outlook, your recipients will be unable to play the sport, but they’ll see questions and solutions and can see the promo code on the finish of the e-mail.

Essential to notice:

All different parts of this electronic mail, like the brand, footer, and get in touch with info, will likely be included in each variations of this marketing campaign.

If you need your customers to see the Survey we’ve simply created in Step 5, chances are you’ll embody the hyperlink to the net model of our AMP electronic mail as an alternative of the hyperlink to Google Types.

To get this hyperlink, please:

Essential to notice:

Sharing preview hyperlinks shouldn’t be obtainable for the Free plan. 

Phrase of recommendation

We talked rather a lot about AMP emails and use them.

This is only a pleasant reminder. To have the ability to ship AMP content material, it’s essential:

• get whitelisted with Google;
• repair all of the bugs if any happen. You will note them within the Preview mode (in any other case, customers will see HTML electronic mail);
• add the fallback — HTML model — on this electronic mail. We talked about it above;
• ensure that your ESP/CRM is able to sending AMP emails;
• remember the fact that presently, solely Gmail and Yahoo are able to rendering AMP emails;
• AMP emails lose their AMP parts in case you ahead them.

Remaining ideas

We have simply constructed a questionnaire electronic mail. It really works, like all AMP parts, in Gmail and Mail.ru. Different customers will see your survey fallback.