Design Marketing How-to AMP
~ 14 min read
1 comments
1483 views
rate it
30 October

Building Mazes and Puzzles for Emails with Stripo in Under an Hour

Stripo / Blog / Building Mazes and Puzzles for Emails with Stripo in Under an Hour

What do you think when looking at this email sample? I’m pretty sure it’s something like “The game element is complex, it must take marketers hours or even days to implement this”. Even my team, that deals with AMP every day, thought so...

But what if I tell you that you can build a similar one in like 30 minutes?

Father Day_Labirynth

In this post, I will show you two ways to build a similar email: 

  • without the notification message at the end — just by means of AMP carousel. No codings skills at all;

  • with the notification message at the end — you will need to insert links to images into HTML code. No need to code anything. We will provide you with the prebuilt email module with the necessary code inserted.

But I will not show you how to build a maze — I will show you how to implement this gamification mechanics, which is way better.

What makes this gamification mechanic good? 

The best thing about these gamification mechanics is that it can be reused over and over again. Which makes it cheap, and fast to utilize in emails.

But it does not necessarily have to be a maze. You can actually build anything:

  • the face of a person — for instance, you may ask your recipients to “put together” a photo of a singer. And those who do guess who this person is — win;

  • hide a new product you are going to launch in this puzzle;

  • a map of a town/country users can win a trip to if they give correct answers to the questions in other emails in a series.

Mazes_Letting People Guess What Country They May Flight to

Such carousels can go with the arrows or without them — it’s totally at your discretion.

How to build a maze/puzzle with Stripo

Like we said, there are two types of puzzles of this kind: 

Puzzle 1. Without the notification message at the end

Let’s call it a simple one.

Building it does not require any coding skills at all.

Step 1. Preparing images

Find or draw a necessary image. Cut it into 9 square-shaped pieces. Meaning, their width, and height should be totally equal. 

Piece 1 and 9 remain the way they are. And pieces 2-8 you need to duplicate 3 times each and rotate by 90, 180, and 270 degrees. In this simple way, we got 3 incorrect and one correct square-shaped piece. We will need to upload these images into necessary carousels. That’s it.

Step 2. Building the puzzle  

Option 1. With our pre-built module
The puzzle itself

We’ve prepared a ready-to-use module for your convenience. It already consists of 9 containers: 3 rows with 3 containers each. Container 1 in the first row and container 3 in the third row have the “Image” block, while other containers have AMP carousels with 4 slides each.

Carousels in this module also have our custom arrows, and the design is set.

You will just need to replace our images with your own.

To add this module into your template, you need to:

  • go the “Modules” section;

  • enter the “Pre-Built” tab;

  • in the search field, enter “Labyrinth, Example 1”;

  • drag this module into your template;

  • upload your images;

Adding Maze with No Notification Messages

Important:

Like we said, pieces 1 and 9 are fixed — they don’t move. So you upload them as regular images. And you upload other elements in, say, 4 variants: one correct and 3 incorrect. 

For each carousel, you upload respective images in random order. Meaning, you do not need to start with a correct image. Then:

  • enable this puzzle in AMP version of email only by clicking the “Include in AMP HTML”;

Enabling The Entire Stripe for AMP Verion Only

  • preview your email. In the preview section, you will be able to click the arrows to choose the right image orientation for each carousel.

Working on the arrows (optional)

We need arrows here in the puzzle so users know where to click and what to do. And like we said in our blog post on Gamification, a manual is mandatory to make a game successful.

The featured module already contains custom arrows. You can replace them with yours if you like.

To do so, you:

  • click the “AMP HTML” figure that does not belong to any carousel, meaning it is located above all carousels, in the module — to open a part of the code where all the styles for this module are put;

Clicking on the HTML Icon to Open Code Part with Styles

  • in the code editor, you need to replace existing links with the links to your images, where instead of link 1 you put a link to the image of an arrow that says “Previous”;

Replacing Links to Images with Arrows in the Editor

  • instead of link 2, you add a link to an image with the arrow that says “Next”.

Replacing Images with Pointing Arrows in Emails

(In this GIF we show how to open the code editor and replace a link)

These arrows will be applied to all the carousels in this module, no matter how many carousels you have added.

Option 2. Building the puzzle from scratch

If you do not want to use our pre-built module because of the styles we set or for any other reason, you may want to build one on your own.

The puzzle itself

So, here’s what you need to do:

  • drag three 3-columns structures into your HTML email template;

Adding 3-Coumn Structures in Emails

  • into container 1 in the first row and container 3 in the third row, drag the “Image” block. This way you add two fixed images into your emails — the opening and the closing ones — so users know where to start;

  • pull the AMP Carousel block in all other columns;

Pulling the AMP Carousel Block into HTML Email Templates

  • disable the “Preview image” option for each carousel;

  • now you need to add 4 slides into each! carousel. Like we said above, for each carousel, you upload respective images in random order. Meaning, you do not want to start each carousel with the image with a correct rotation;

Adding Slides to Carousel

  • include all these structures with carousels into AMP HTML as shown above;

  • check your carousel in preview mode.

Here’s an example of what your puzzle will look like when it’s solved if you build your fully custom one.

Christmas Gaification_Email Design Ideas_Stripo

Important:

You can build just a two-row puzzle, or a four-row one. It’s totally up to you. 

Working on the arrows

Our editor by default adds arrows “Left” and “Right” to all carousels to ensure recipients always know what to do to see the next slide.

Arrows Our Editor Adds to Carousels by Default

Puzzle 2. With the notification message at the end

If you use this kind of puzzle, your users will see a notification message at the end. It can say anything, like “You won”, “Here’s your coupon”, etc. When we start working on images for this puzzle, you will see why exactly we need to work with the code here.

Step 1. Adding the puzzle with notification in your template

To start working on this puzzle:

  • drag a 1-column structure into your HTML email template;

  • go to the “Module” section in the side panel;

  • in the “Pre-Built” tab, in the search field, enter “Labyrinth, example 2”;

  • drag it into your template.

Adding Modules into Email

Step 2. Uploading images

First of all, we need to do everything as described in the “Step 1” section, Puzzle 1.

Upload your images and copy the links. We will need them.

Adding images that will stay fixed

To upload image 1 and 9 (the opening and the closing images) you need to:

  • click the image 1 in the template (not somewhere near it);

Uploading Images 1 and 9 As Fixed Images

  • in the settings panel, upload the image as you normally would when working in Stripo;

  • do the same to image 9.

Adding images to carousels
To upload images for carousels 4 and 7, you need to:
  • click the “AMP HTML” figure right in the first column — the code editor for these particular slides will open automatically;

Clicking the AMP HTML Sign for Uploading Images

  • there you will see two sections with amp images. Replace our links with yours.

Carousel 4 and 7_Replacing Links

I’ve underlined the links that need to be replaced.

Important

Upload respective “incorrect” images to particular carousels in random order. But please remember that “correct” images need to be uploaded exactly in order specified below:

  • # 4 for carousel 4;

  • # 2 for the carousel 7.

Later we will explain why we care so much about the order of images. Now just please stick to the order.

Approximate order for your images

Carousel 4: image 1 = rotation by 90°, image 2 =  rotation by 180°, image 3 = rotation by 270°, image 4 = correct image (important!).

Carousel 7: image 1 = rotation by 270°, image 2 = correct image (important!), image 3 = rotation by 180°, image 4 = rotation by 90°.

To upload images for carousels 2, 5, and 8, you need to:
  • click the “AMP HTML” figure in column 2 — code editor will open automatically;

Clicking the AMP HTML Sign for Working on Carousels 2, 5, and 8

  • replace existing links with yours.

Important

Again, upload respective “incorrect” images to particular carousels in random order. While “correct” images need to be uploaded exactly in the order specified below:

  • # 4 for carousels 2, 5, and 8. 

Approximate order for your images

Carousel 2: image 1 = rotation by 90°, image 2 =  rotation by 180°, image 3 = rotation by 270°, image 4 = correct image (important!). 

Carousel 5: image 1 = rotation by 270°, image 2 =  rotation by 180°, image 3 = rotation by 90°, image 4 = correct image (important!).

Carousel 8: image 1 = rotation by 180°, image 2 =  rotation by 900°, image 3 = rotation by 270°, image 4 = correct image (important!).

We did it for your and our convenience. When working on the carousels in column 2, you just hide “correct” images behind the last link in a carousel.

To upload images for carousels 3, and 6, you need to:
  • click the “AMP HTML” figure in column 3 — code editor will open automatically;

Working on Carousels 3 and 6

  • replace links.

Same here: Upload respective “incorrect” images to particular carousels in random order. “Correct” images need to be uploaded exactly in the order specified below:

#3 for carousels 3 and 6.

Approximate order for your images

Carousel 3: image 1 = rotation by 270°, image 2 =  rotation by 90°, image 3 = correct image (important!), image 4 = rotation by 180°.

Carousel 6: image 1 = rotation by 180°, image 2 =  rotation by 90°, image 3 = correct image (important!), image 4 = rotation by 270°.

Why care so much about the order of images in carousels

As long as we want the email to tell our users that they’ve solved the puzzle, we need somehow to let the system know when exactly to show those notifications.

The only way to do it is to tie it to the images.

All the images have:

  • the “loop” attribute which makes them cycled;

  • and the on="slideChange:AMP.setState({answer3: +event.index })" line — this means that every slide has its number, and the number get put down into a carousel variable “answer#”. Each carousel has its own variable (answer 1, answer 2, ... , answer 7). 

When the numbers from variables coincide with the numbers that we’ve set in this puzzle, users see the notification message.

Variables in the Code

This is why we need to put “correct” images in the right places.

Working on the arrows (optional)

As we said, arrows are required in puzzles so users know where to click and what to do.

The module we’ve been working with already contains custom arrows. You can replace them with yours if you like.

To do so, you:

  • click the “AMP HTML” figure in column 1 — code editor for this email element will open automatically;

  • scroll down a little;

  • link 1 is meant for the “Rotate counterclockwise” arrow — replace it with yours;

  • link 2 is meant for the “Rotate clockwise” arrow — also, replace it with yours.

Replacing Images with Arrows

Working on the notification message

Ours now says “The puzzle is done”.

To edit the copy, you need to:

  • click on the “AMP HTML” figure right below the row with carousels;

  • open code editor;

Opening Code Editor to Work on Notification Messages

  • in the editor, replace the text written in white with your own copy.

Editing Notification Messages

Now please include this entire module in AMP HTML version on your emails only.

Including Modules with Puzzles with Notifications into AMP HTML Only

Building a fallback

This step is meant for both types of puzzles.

Those users whose email clients do not support AMP HTML yet, will see our fallback.

Normally, we recommend doing something similar to the AMP element. But in this case, it is impossible.

This is why the best solution here would be to just let users know they should view the web version of our email to experience the beauty of AMP and have some fun.

Fallback with the View in Browser Link_Builing Puzzles with Stripo

How to build a fallback with Stripo:

  • build an email element that would serve as a fallback for your users;

  • include the entire row/stripe into HTML only.

Including Fallabck in HTL Version Only_Building Puzzles with Stripo

Important

All other email elements are included (by default) in both versions of your email. 

Examples of AMP puzzles 

As long as this gamification mechanics is pretty new, there are only a few companies who use it for their newsletters. But we managed to find some really cool examples ;)

Example 1. Stripo

This is just an example of what your puzzle can look like if you are looking for new ways to announce a product launch or sale launch. It’s not a real email. 

Puzzles and Image Carousels for Product Launch Announcement Emails

The notification says that the Presentation of a new car will take place on 10/10/2021.

Example 2. Mindbox 

The Mindbox team for its client Bausch + Lomb built this puzzle. 

Users were supposed to put slides in the right order to see the photo of a famous scientist who invented contact lenses.

Maze with Stripo_Photos of People

(Source: Email from Bausch + Lomb, built by Mindbox)

As you can see, instead of the message “You did it right”, Bausch + Lomb told their users a short bio of the scientist.

Example 3. Mindbox

In the same email, Bausch + Lomb suggested that their users would solve the puzzle to see the sketch of the first optical device ever.

Puzzle with Carousel

(Source: Email from Bausch + Lomb, built by Mindbox)

It’s amazing to see such historical things.

This Puzzle has only two rows, but it doesn’t make the puzzle any less interesting.

Example 4. Stripo

Wanna celebrate the day when Neil Armstrong and his team stepped on the Moon?

Example of a Maze for Astronauts

Word of advice

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

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 occurs. You will see them in the Preview mode (otherwise users will see HTML email);
  • add the fallback — HTML version — in this email;
  • make sure that your ESP/CRM is capable of sending AMP emails;
  • keep in mind that currently only Gmail (both web and mobile apps on all OSs) and Mail.ru are capable of rendering AMP emails. Yahoo will join the list soon;
  • AMP emails lose their AMP components if you forward them.

Final thoughts

We do believe that gamification is the key strategy to entertain and WOW our customers. And we know that all relations need to be spiced up a little. Even relations between customers and brands ;)

Especially now, when it comes to holidays.

Gamify emails to WOW your customers

Eugene Fesyuk 4 hours ago

Спасибо за крутой гайд! Вопрос: Как сделать резервный вариант правильно, там где кнопка "view in browser"? Потому как у меня по ссылке для веб-версии АМП не работает.

You might be interested in

← previous next →
Email Marketing Specialist_Cover Image
9 days ago · 11 min read
Useful Resources for Email Marketers: Blogs, YouTube Channels, and More

This compilation of educational resources will help anyone become an email marketing expert right away. Also, it will be useful for professionals who look for new ideas. You will learn how to launch your first campaign, will learn about best email marketing practices, and will meet top experts. An exciting journey awaits you! Email marketing blogs 1. Stipo The Stripo team is always happy to share with you their diverse experience in email design and email marketing. Their blog contains checklists,...

Marketing
04 November · 17 min read
Christmas Email Marketing 2020-2021: Guide with Ideas and Examples

Christmas is the best time of the year. People are full of expectations and hopes for miracles and happiness to come or stay. And marketers are full of hopes to break their selling record ;)  (Source: Email template by Stripo) How can you make your Christmas marketing emails stand out among thousands of offers provided by other brands? It’s not that difficult. The key to success in Christmas email marketing is simple — do not sell your products, put a...

Design Marketing Templates How-to
Be always wide awake in recent email marketing news, guides, articles and how-to’s