Description
The Swiper is an engaging module that allows you to ask your community for feedback on your brand, products, commercial offers or services in a very simple and dynamic way using the "swipe" functionality (mouse/finger movement to the left or right) made popular by the Tinder application. Offer your users the opportunity to like or dislike a visual by simply "sliding" it to the left or right, and give them the opportunity to reinforce their choice by offering them options such as the "Super Like" or the "Joker". Thanks to its accessibility, this module is perfectly suited for "Mobile first" campaigns.
Summary
Game design
Before setting up your campaign, you must create the necessary graphic elements.
Please check this article that will explain all the essential information for the graphic creation of your campaign: Creating your games graphics.
To create custom elements for the Swiper module, please see this article: Swiper module graphic specifications
If you want to include game variables on your wallpaper, consider leaving them a space in the graphic design:
Now it's time to set up your campaign!
Page setup
First of all, click on ' New Campaign' and select the Swiper mechanism.
You will reach the campaign editor, where you will find the mechanism's 6 pages: Home (optional); Form; Swiper; and the Result page.
If you want, you can also add a teaser page and/or an end of campaign page.
Don't forget to set up your campaign settings now, by entering the campaign dates and importing the Rules and Privacy Policy.
Background image setup
| Upload your desktop background images by clicking on the '+' icon under ' Background Image'.
To find out the graphics specifications for this module's background images, please check the 'Game design' section in this article.
You can also add a solid background color to surround your game pages - you can keep the default color or standardize your campaign with a color that reflects your brand or your game pages, for instance. |
Game settings
| Number of participation: Set the number of games per day, week, month, campaign, or user; then create and select your 'Already Played' page. If users try to replay the game, they will be redirected to this page. Ideally, we recommend one game per day in order to encourage users to return to your campaign on a regular basis.
Swipe action right / left: choose which action, between "I like" and "I don't like", will correspond to dragging the visual to the left or right. By default, the "Like" action is defined as a swipe to the right.
Show swipe buttons: allows you to display / materialize the "I like" and "I don't like" buttons, and therefore to customize them via a visual for example. These buttons are optional and the possibility of swiping from left to right on the visual itself will always be possible. Important: if you disable these buttons, this will be effective on both Desktop and Mobile views.
Limit the number of visuals displayed: enable this option if you want to define a specific number of visuals to be displayed, after which the user part is stopped. If this option is not enabled, the game will stop as soon as all uploaded images are passed.
Minimum number of visuals to be displayed to users: 1 (however, we advise you to display at least 10 in order to have a better weighting)
To know the format of the visuals to upload and their maximum number, please consult the Swiper module graphic specifications article for this module.
Enable the Joker option: creates a customizable button that allows the user to pass a visual without swiping / pronouncing (= neither "I like" nor "I don't like"). This action will not give any points for this visual and you will need to define a maximum number of uses for this option. By default, a weighted visual such as a Joker will appear at the top of the game area. Important: if the option to limit the displayed visuals has been enabled, a visual "past" through the use of a Joker will still be counted as "displayed".
Enable Super Like option: creates a customizable button for the user to highlight their choice to like a given visual. This action will assign 2 points to the corresponding visual and you will need to define a maximum number of uses for this option. By default, a weighted visual like a Super Like will come out to the right (like a classic Like).
Display the result page: Select the desired result page, such as a "Thank you" page, or a "Top 3 most popular visuals" page using the dedicated variables. There is no notion of score on this module, so the "Score to achieve" and "Win/lose" result pages are not available. |
How to calculate points on the Swiper module
The points on the Swiper do not have a scoring function for the player, but allow to weight / rank the users' preferences. Depending on the options you have activated, some user actions will be worth more or less points in a game.
The points accumulated by each content of your game will be found in your export information via the CRM section and in your campaign statistics via the Insights section, and will allow you to analyze the attractiveness of your community for this content.
Here is the detail below.
"I like" | 1 point |
"I Super like" | 2 points |
"I don't like" | -1 point |
Joker | 0 point |
Please note that only "positive" scores will be shown to the user on your campaign if you use variables containing "numberLikes", "numberDislikes" and "numberSuperLikes" - "negative" scores will be shown as having "0 point" to avoid devaluing your content.
On the other hand, negative scores will be shown as such in the export "All participations", so that you can establish a ranking of your products / services:
Swiper Content
| Use the media page: Select the "None" choice for this option if you choose to import all the photos that users will be able to see and vote on. To start uploading, click on the "Import content" button in the "Media" section of your campaign - see the Import your visuals section in this article.
 If you want to retrieve media from another page of your campaign (for example if you have asked your users to upload their own photos), select the Upload Media page that you will have previously installed. You can also select a Customizer page, Shopping List or any other creation module if your Swiper offers to vote on creations made by users.
Filter by category (only if a page is associated in "Use page media"): displays the list of categories configured in the Upload Media module - see the dedicated page for more information on this subject.
Show only accepted media (only if a page is associated in "Use page media"): this means that when a person uploads their photo, you will have to accept whether or not it appears in the gallery, via a moderation action on your part. Until you accept or reject the media in question, the photo will not be displayed in the gallery. This requires regular moderation from your team. If you do not enable this option, all photos uploaded by users will appear directly in the media gallery, and by extension, in the Swiper.
Enable random display of content: if enabled, this option ensures that at each part the contents will be mixed and will not appear in the order in which you imported them. If a user plays several times on the campaign, the module will display first the visuals that have not yet been seen (if the email address used is the same as in the first part). |
Import your visuals
Important: before you can import your media, you must absolutely publish your campaign a first time, otherwise you won't get access to the Users, Medias and Emails Management tools.
If you choose in advance the photos that your users will have to "like", you will have to import them this way:
Go to the "Users" section or click on the "Import content" button
Select the "Media" tab and click on "Import media".
Upload your images (free size, however, we recommend limiting the weight of your visuals to a maximum of 400 kb in order to obtain greater fluidity). They will appear automatically in your gallery.
Fill in the information necessary to identify your photo (name, description, long description, category, URL, language, point of sale,...). Importing via the configuration file will help you save time in this step if you have a large number of visuals to describe.
Your photos are now installed on your campaign and ready to be configured.
Note: the selected visuals are not viewable in the preview of the game engine within the editor, so it will be necessary to check that the rendering is the one desired via the test and/or distribution of the game.
Here is an overview of an import file (find the explanations for each column in this article):
You can download this file here :
In addition to the usual columns for this type of module with media import, there is a new column called "Tag" which is essential for vote tracking.
It allows you to categorize each imported visual element under a certain tag that will go up in the statistics present in Insight, allowing you to refine customer preferences by tag. This can be useful to assist in the analysis of data by content type.
Example: as part of a Swiper campaign on beauty products, we can see the number of "Like" or "Dislike" on products in the Anti-Aging range, those in the Moisturizing range, etc...
This data is displayed in the statistics as follows:
| Graph "Number of clicks" Allows to display the percentage of "Like", "Super Like", "Dislike" and "Joker" per visual - it is possible to view the global number of clicks per visual, or to divide them by page (within the framework of several Swiper modules on the same campaign) or by tag. |
| Graph "Top 10 contents" Allows to display the favorite visuals of the campaign and the points associated with them - it is possible to visualize the global number of clicks per visual, or to divide them by page (within the framework of several Swiper modules on the same campaign) or by tag. |
Visuals: example of several Swipers on the same campaign
It is quite possible to have several Swiper modules with different types of visuals for each module on a single campaign. In this case, it will be necessary to divide the visuals categories between each Swiper.
Here is in detail the procedure to follow (example with 2 Swipers installed):
1. Install a "Upload Media" page at the end of your campaign: this Upload Media page is only used to upload the different categories of visuals and will not be visible to your users but must however remain permanently installed.
2. Activate the "Category" field on the "Upload Media" page and click on it. Enter the names of all the categories you will use in "List of categories". Example: I create a "Nature" category and an "Animal" category on the same Upload Media page.
3. Go to the "Content" tab of the first Swiper page and select the "Upload Media" page. Filter the desired category (you should select one only) and do the same with the second Swiper. In the example below, I want my 1st Swiper to show landscape visuals, so I will use the media on the "Upload Media" page and select the "Nature" category. On the 2nd Swiper, I want to show animal visuals, so I will use the media on the "Upload Media" page and select the "Animal" category. Publish the campaign.
4. Import your visuals from the "Media" tab of the "Users" section (link to do) and refresh the page.
For each visual, select the "Upload Media" page and then the category to which it corresponds. Once this operation is completed, your visuals will be visible to the user on each corresponding Swiper. Warning: you will have to refresh the page after selecting the "Upload Media" page of the first visual so that the categories are always available.
Visuals : example of a multilingual campaign
If you want to install a multilingual Swiper campaign, you will need to pay particular attention to the visuals you will import. Indeed, it will be necessary to separate the visuals by language from the "Media" section. For this purpose:
Install all the desired languages on the editor.
Import the data file without filling in the "lang" column and by duplicating with different names the visuals that will be present in several languages at the same time.
In the "Media" tab, choose the appropriate flag for each visual: it is this action that will define in which language each visual will appear on the campaign.
Be careful, you can only choose one language per visual, hence the fact of duplicating an existing visual on several languages.
Customizing the appearance
| Outline type: you can simply display your visual or choose to surround it with an outline among the 3 choices offered:
 You can then customize this outline with the color of your choice, as well as manage its size and roundness for an optimal result. See the section Define the visuals format for more information on this subject.
Drop Shadow: Allows you to add a shadow under your visual to give you an idea of depth.
Enable like / Super Like animations: this option allows you to dynamize and highlight the user's appreciation of the visual by adding specific shapes and animations for the chosen visuals. You will find an overview of all the possibilities in the Forms and animations of "Like" visuals in this article.
Visual appearance: you can choose how the visuals will appear when the Swiper game is launched via an input animation that can be done:
To see the visual representation of each appearance/animation, see the Appearance and animation of the swiped visuals section below. |
Appearance and animation of the swiped visuals
Below are listed all the forms of appearances and animations for your visuals :
Visuals appearance :
| 
| 
| 
| 
| 
|
fade in | from above | from below | from the right | from the left | from each side |
Swiped visuals animation :
| 
| 
| 
| 
| 
|
fade out | bounce - the visual will bounce on the game screen bottom | fall | rotation | scale | rubber stamp - a rubber stamp will appear on the visual's top corner |
Define the visuals format
It is possible to import visuals in any format (Portrait, Landscape, Square,...), the module will then adapt the rendering according to the outline format you have customized.
Example below with a visual in portrait format and one in a square format :
To create the frame of your choice and define the rendering of your visuals:
1. Define the height and width of the visual outline from the configuration screen by moving the sides of the outline.
2. Change the size of the outline to give the final shape of your visual appearance. Please note that the number of pixels indicated corresponds to the distance between the edge of the outline and the edge of the visual.
Example :
Forms and animations of "Like" & "Super Like" visuals
If you enable Like and Super Like animations, you can choose to customize the shape of the visual once Liked / Super Liked, as well as a short animation to highlight the corresponding choice.
Below are all the possibilities available to you:
Form of the Liked / Super Liked visual
| 
| 
| 
| 
|
Heart | Star | Dot | Diamond | Square |
Effects on Liked / Super Liked visual
| 
| 
|
Beats | Shake | Glitter |
Note: the selected animations are not viewable in the preview of the game engine within the editor, so it will be necessary to check that the rendering is the one desired via the test and/or distribution of the game.
Example of a result page for a Swiper (use of variables)
The Swiper module allows you to display a lot of information about your campaign's contents, in real time or in general (e.g. number of votes, Super Likes,...). Here is how to use the editor's possibilities to optimize the result page:
1. Display the visuals (most) appreciated by the user
Bring vlue to the choices made by the user by showing him/her the visuals he/she liked, thanks to the dynamic image:
Go to the "Media" tab in the editor
Select "Add the dynamic visual" and drag it where you want it
Click on the image and set up as in the example below by modifying the "Image to display" part by any visual you want to show to the user:
2. Display the names of the content (most) appreciated by the user
Highlight the most important content for the user by displaying their names via the %swiper_content_name_X% game variable that displays the name associated with a visual on the result page, taking into account only the votes of the current user.
Replace "X" with the number associated with the content rating, for example %swiper_content_name_1% for the content that received the highest number of votes from the user, %swiper_content_name_2% for the content that received the second highest rate of votes from the user, and so on...
3. Create a redirection to a URL linked to content
Boost traffic to your site by inserting a button that will allow redirection to a URL link defined when importing information related to your content.
Go to the "Buttons" tab in the editor
Create a button and place it where you want it
Click on the button and set up as in the example below by modifying the "Choice of URL" part by any visual you want to show to the user:
Here is an example of how to install these 3 options used simultaneously in the editor:
Mobile version setup
Once your desktop campaign has been set up, you must switch to Mobile view in order to import the dedicated background images and format your pages for this device.
To import Mobile background images, follow the same procedure as for Desktop backgrounds.
Campaign launch and test
Once the desktop and mobile versions have been finalized, you can publish the campaign.
Don't forget to check your campaign.
About the export files for Users & Media
Below is a description of the result columns specific to the Swiper module for the two possible types of exports:
Export of unique participants
joker_number : indicates the number of contents that have been marked "Joker" on the campaign
superlike_number : indicates the number of contents that have been marked "Super Like" on the campaign
dislike_number : indicates the number of contents that have been marked "I don't like" on the campaign
like_number : indicates the number of contents that have been marked "I like" on the campaign
most_liked_content : indicates the name of the content that was most liked by the user on the campaign
superliked_content : indicates the name of the content that has been "Super liked" by the user on the campaign
liked_content : indicates the name of the content that was liked by the user on the campaign. This column displays a maximum of 10 content names, in order of appearance.
content _joker : indicates the name of the content that have been marked "Joker" by the user on the campaign
content_superlike / content_dislike / content_like / content_name / content_value / tag_name : these columns are not applicable to this export and will therefore remain empty.
Export of participations
Each line represents the information corresponding to each content viewed on the campaign by the user:
content_name : indicates the name of the given content for this result line
content_superlike : indicates if the content was "Super liké" on the campaign (1 = yes, 0 = no)
content_dislike : indicates if the content has been marked "I don't like" on the campaign (1 = yes, 0 = no)
content_like : indicates if the content has been marked "I like" on the campaign (1 = yes, 0 = no)
content _joker : indicates if the content has been marked "Joker" on the campaign (1 = yes, 0 = no)
content_value : indicates the number of points awarded to this content
tag_name : indicates the tag corresponding to this content
joker_number / superlike_number / dislike_number / like_number / most_liked_content / superliked_content / liked_content : these columns are not applicable to this export and will therefore remain empty.
Other options available for this module
The visuals used in this article are courtesy of Stanley Chow