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

Hiya, everybody.

In the present day we begin our tutorial collection the place we’ll present how you can construct AMP emails before you write a paragraph of promo textual content.

Brief introduction

As you in all probability know, we ran our Stripo AMP Quiz collection final month. It consisted of three emails, every containing components of gamification. The objective of this marketing campaign was to show some capabilities of the AMP expertise to our recipients. 

Because of this, we obtained 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 e mail from our Quiz collection…

Watch our quick video or maintain studying the publish to study to construct questionnaires quick.

How you can construct AMP questionnaires with Stripo

Usually, to construct this e mail ingredient, 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 change into a lot simpler…

Simply comply with our step-by-step information, and you will design this e mail in 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 in your comfort. It consists of three questions. In reality, as a base, we used our e mail 1 from the collection, eliminated all of the Stripo id, and our intro. That is it.

So your module could have three sections for questions.

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

To tug the module right into a template, please:

• drag a 1-container template in your e 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 under:

Enhancing the “Query phrase” part

You could substitute 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 shade palette, copy the mandatory shade quantity.

Enhancing the “Solutions” fields design

Within the “Solutions” fields, you present if the reply was appropriate 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 substitute a background shade and a border shade.

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

What about different components, like questions themselves, photographs, and quite a lot of sections? You edit them in your JSON file.

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

Step 2. Engaged on questions/Enhancing a JSON file

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

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

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

{
   "gadgets":[
      {
         "questions":[
            strɪpe-oh,
            {
               "id":2,
               "img":"https://kvlya.stripocdn.e mail/content material/guids/CABINET_8cd672fef378e9b5999e0b2fa77c95f6/photographs/83411588071269619.jpeg",
               "query":"What's the hottest e mail consumer on this planet?",
               "textual content":"In accordance with research performed by Litmus in April 2020, Gmail is the most well-liked e mail consumer. 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 accordance with research performed by Litmus in April 2020, Gmail is the most well-liked e mail consumer. Please discover the detailed outcomes of the research <a href="http://emailclientmarketshare.com/" goal="_blank">right here</a>.",
               "appropriate":"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.e mail/content material/guids/CABINET_8cd672fef378e9b5999e0b2fa77c95f6/photographs/64191588071296283.jpeg",
               "query":"How you can replace a header or a footer in 100 emails with Stripo without delay?",
               "textual content":"Certainly, with Stripo, you'll be able to replace any variety of emails without delay with a couple of clicks through the use of synchronized modules. Discover extra particulars on the characteristic <a href="https://stripo.e 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 e mail our help group. 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 without delay with a couple of clicks through the use of synchronized modules. Discover extra particulars on the characteristic <a href="https://stripo.e 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 e mail our help group. We’re there for you ;)",
               "appropriate":"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 components from “id1” to “id2” belong to query 1;

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

• “query” — is the query itself;

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

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

• “ida1-4” — is the reply choice 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 person has answered,”

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

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

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

•   “ida”: 2,
  
  “reply”: “reply choice 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 would 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 exhibiting customers if their solutions had been appropriate or incorrect (customers submit responses, and our Knowledge Supply exhibits if the reply was appropriate and offers customers the right reply)

• open the “Knowledge” tab;

• go to the “Knowledge Sources” part;

• create a brand new information supply;

• enter the identify of this marketing campaign (it may be, actually, something);

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

• copy URL deal with.

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

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

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

In the event you plan to retailer information in Google Drive (Unfold Sheets), please comply with 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;

• substitute the hyperlink that goes after “action-xhr” within the <type id…> line with the URL deal with you generated in Step 4;
• substitute the supply hyperlink that goes after “src=”https://stripo.e mail/weblog/building-questionnaires-with-stripo/within the <amp-list…> line with the URL deal with 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 e mail purchasers don’t help AMP but.

Beforehand, you’d add a hyperlink to the online 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 in your quizzes inside seconds with out the necessity to take care of the code.

Vital to notice:

Presently, 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 subject given under as an alternative of our placeholder hyperlink;
• click on the “Generate” button;
• copy the code.