How to Build Labyrinth_Featured Image
30 October 2020

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

Gamify emails to WOW your customers
Table of contents
  1. What makes this gamification mechanic good? 
  2. How to build a maze/puzzle with Stripo
  3. Examples of AMP puzzles 
  4. Word of advice
  5. Final thoughts
1.
What makes this gamification mechanic good? 

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?

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.

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;

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”.

(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.

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.

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. 

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.

(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.

(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?

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) 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
Was this article helpful?
Tell us your thoughts
Thanks for your feedback!
4 comments
Nikolos Black 11 months ago
Підкажіть чи можливо і як зробити гру пазл у Еспутнику?
Hanna Kuznietsova 10 months ago
Nikolos, добрий день. Stripo вбудований в eSputnik як плагін, через що створювати листи та ігри, в т.ч. на основі АМР, можна так само, як і в Stripo. Тобто, мануал, наданий в цій статті, має підійти і для редактору eSputnik. Якщо виникнуть питання, пишіть, будь ласка, нам на пошту contact@stripo.email або просто комент тут. Будемо раді допомогти.
Eugene Fesyuk 3 years ago
Спасибо за крутой гайд! Вопрос: Как сделать резервный вариант правильно, там где кнопка "view in browser"? Потому как у меня по ссылке для веб-версии АМП не работает.
Hanna Kuznietsova 3 years ago
Eugene, Добрый день. Благодарим за столь приятный отзыв и за вопрос )) По идее, ваш ESP должен предоставить вам AMP-версию письма, чтоб использовать ее как фолбек. Если же технически это невозможно, то можно использовать АМР-версию вашего письма из Stripo. Конечно, статистику переходов с веб-версии на сайт мы не предоставим, но ваш ESP предоставит статистику по кол-ву переходов на саму веб-версию письма. Чтоб ее получить, нужно: * перейти в режим предпросмотра письма, как показно на скрине https://prnt.sc/vqlrhu ; * далее выбрать АМР-версию письма; * скопировать ссылку https://prnt.sc/vqlvhr . Надеемся, что смогли вам помочь. Если появились новые вопросы - задавайте, пожалуйста. Будем рады ответить ))
Type
Industry
Seasons
Integrations
Stripo editor
Simplify email production process.
Stripo plugin
Integrate Stripo drag-n-drop editor to your web application.
Order a Custom Template
Our team can design and code it for you. Just fill in the brief and we'll get back to you shortly.