Didacticiel - Customizer 🎹
Simon Dubreucq avatar
Écrit par Simon Dubreucq
Mis à jour il y a plus d’une semaine

Description

La mĂ©canique du Customizer permet d’inviter vos utilisateurs Ă  personnaliser un visuel avec l'aide d'Ă©lĂ©ments tels que de la couleur, du texte ou des icĂŽnes. les applications sont nombreuses : dĂ©corer un produit de votre marque dĂ©jĂ  existant, demander aux utilisateurs de crĂ©er leur produit idĂ©al, dĂ©tourner une photo pour un faire un rendu inattendu, proposer Ă  des enfants un coloriage...

Ce module est idéal pour vos objectifs de qualification et pour obtenir des informations cruciales sur le type de produits/services/collections qui plairaient le plus à vos utilisateurs. Il répond également à vos objectifs d'engagement, en vous permettant de lancer des campagnes de co-branding communautaire (proposer à vos utilisateurs de personnaliser un produit qui sera commercialisé) et en générant des UGC (User Generated Contents) autour de votre univers de marque.

Design du Jeu

Avant de configurer votre campagne, il vous faudra avoir créé les différents éléments graphiques nécessaires. Pour commencer, veuillez consulter cette page qui vous donnera accÚs à toutes les informations essentielles pour la création graphique de votre campagne.

Installation des pages

Tout d'abord, cliquez sur Nouvelle campagne puis sélectionnez la mécanique Customizer.

Vous vous retrouvez ensuite dans l'éditeur de la campagne intégrant les 5 étapes de cette mécanique : Formulaire, Galerie Médias, Customizer, Remerciements et une page de fin de campagne. Vous pouvez aussi, si vous le souhaitez, ajouter une page de teasing et/ou une page d'Accueil.

N'oubliez pas de configurer vos paramÚtres de campagne dÚs à présent, en indiquant notamment les dates de la campagne et en important le rÚglement et la politique de confidentialité.

Installation des fonds d'Ă©crans

Importez vos fonds d'écrans Desktop en cliquant sur l'icÎne "+" dans Image de fond. Pour connaitre les spécifications graphiques des fonds pour ce module, veuillez vous référer à la partie "Design du jeu" de cet article. Vous avez aussi la possibilité d'ajouter une couleur de fond unie qui entourera vos pages de jeu - vous pouvez laisser la couleur de base ou choisir d'uniformiser votre campagne, avec une couleur qui rappelle votre marque ou vos pages de jeu par exemple.

Configuration du jeu

  • Participation limitĂ©e : si le toggle est dĂ©cochĂ© alors la participation est illimitĂ©e. S'il est cochĂ©, dĂ©finissez le nombre de participations par jour, semaine, mois ou campagne et par utilisateur, puis crĂ©ez et sĂ©lectionnez votre page DĂ©jĂ  JouĂ©. Si l’utilisateur tente de rejouer, il tombera directement sur cette page. IdĂ©alement, nous recommandons de d'activer l'option Participation limitĂ©e sur 1 fois par jour afin d'inciter l'utilisateur Ă  revenir rĂ©guliĂšrement pour ajouter de nouvelles crĂ©ations.

  • Activer le panel des couleurs : permet de donner Ă  l'utilisateur le choix de personnaliser l'image avec une/des couleur(s) parmi une liste que vous aurez crĂ©Ă©.

  • Activer le panel des stickets : permet de donner Ă  l'utilisateur le choix de personnaliser l'image avec une/des icĂŽne(s) parmi une liste que vous aurez crĂ©Ă©.

  • Afficher le panel du texte : permet de pouvoir ajouter du texte sur l'image Ă  personnaliser. La typo, la couleur et la taille du texte seront modifiables par l'utilisateur lors de la crĂ©ation de son visuel. Il n'y a pas de limite de caractĂšres, mais le texte ne pourra pas dĂ©border des contours du fond de jeu.

Contenu du module

Gestion des visuels : Ajoutez jusqu'à 4 visuels différents à personnaliser. L'utilisateur devra choisir son produit à customizer :

Visuel final : Le visuel final est celui qui sera affichĂ© au lancement du module (en cas de visuels multiples, une liste sera proposĂ©e Ă  l'utilisateur). Les dimensions du visuel doivent ĂȘtre similaires aux dimensions du jeu.

Gestion des calques : Les calques reprĂ©sentent les diffĂ©rentes parties modifiables du produit. Les calques sont au nombre maximum de 11 et peuvent ĂȘtre placĂ©s dans l'ordre souhaitĂ©. Dimension du calque : Largeur 1620px et Hauteur 1600px.

Par exemple, si vous souhaitez que l'image de base soit une basket, vous pouvez créer 11 calques différents à partir de l'image qui seront des zones de personnalisation différentes :

Image Ă  personnaliser

Image divisée en 11 calques

Le fait d'en créer plusieurs aide à donner plus d'options de création car chaque calque représente une "zone" d'édition. Les calques se superposent les uns sur les autres, il est donc important de bien les positionner dans l'éditeur : le calque le plus haut sera au premier plan, le calque le plus en bas sera en arriÚre-plan. Glissez et déposez les calques pour modifier l'emplacement.

Exemple de personnalisation des calques d'une basket :

Gestion des couleurs : Vous pouvez personnaliser les couleurs que vous souhaitez proposer Ă  vos utilisateurs.

Autoriser la gestion des couleurs : Vous pouvez autoriser la personnalisation des couleurs par vos utilisateurs qui pourront via un colorpicker apposer leurs propres couleurs :

Gestion des stickers : si vous avez activé le panel des icÎnes, l'éditeur vous propose alors de choisir les icÎnes que vous mettrez à disposition pour vos utilisateurs. Pour supprimer une icÎne du panel standard, cliquez simplement sur cette derniÚre. Pour ajouter une icÎne, cliquez sur le bouton "+" et importez votre image.

Afficher toujours au dessus : cette option permet d'afficher les textes et les icĂŽnes par dessus des calques. Si cette option n'est pas activĂ©e, les textes et icĂŽnes seront affichĂ©s dans les calques, et ne pourront donc pas ĂȘtre installĂ©s en dehors de leurs bordures.

Personnalisation du module

  • Choix des polices : Par dĂ©faut, le module proposera une liste de typo Ă  l'utilisateur (Arial, Comic Sans MS, Courier New, Georgia, serif, Helvetica, Impact, Lucida Sans Unico, Tahoma, Times New Roman, Trebuchet MS, Verdana), cependant vous pouvez choisir d'uploader une typo supplĂ©mentaire en format WOFF en l'important et la sĂ©lectionnant dans "Choix de police". Elle viendra s'ajouter en bas de la liste existante lors de la personnalisation des calques.

  • Visuel du fond du jeu : permet d'importer le fond de jeu sur lequel viendra s'installer l'image Ă  personnaliser.

  • ThĂšme du menu : Choisissiez une apparence light, dark ou personnalisĂ©e.

  • Visuel du bouton de validation : Personnalisation du bouton situĂ© en bas Ă  droite du module pour valider le mĂ©dia de l'utilisateur

  • Visuel du bouton "sauvegarder la couleur" : Ce bouton est personnalisable et permet aux participants d'ajouter une nnouvelle couleur de personnalisation (uniquement si l'option personnalisation des couleurs est activĂ©e)

  • Visuel du bouton "Je commence" : Ce bouton s'affiche uniquement si plusieurs visuels de Customizer ont Ă©tĂ© uploadĂ©s

Compatibilité avec le module Galerie

L'une des options possibles du module Customizer est la mise en valeur des création de vos utilisateurs à des fins de visibilité de votre marque, d'engagement de vos audiences et de viralisation de UGC (User Generated Contents). En effet, avec la configuration telle qu'elle est présentée dans le template de campagne Customizer (Formulaire > Galerie > Customizer > Remerciements), chaque visuel créé sera ajouté dans la Galerie automatiquement.

Vos utilisateurs peuvent donc par exemple partager le lien de la campagne à leurs amis/proches afin de les inciter à voter pour leur création et potentiellement gagner une récompense si celle-ci est désignée parmi les meilleurs choix de sélections.

Pour en savoir plus sur l'installation d'un concours photo, veuillez vous référer à l'article dédié.

Utilisation du Widget "Image dynamique"

L'autre possibilité qui s'offre à vous est d'utiliser le Widget "Image dynamique" présent dans l'onglet "Médias" :

Il vous permettra de mettre en avant l'image créée par l'utilisateur sur une page de remerciements par ex :

Installation de la partie Mobile

Une fois votre campagne Desktop configurĂ©e, il vous faut passer en vue Mobile afin d'importer les fonds dĂ©diĂ©s et de mettre en forme vos diffĂ©rentes pages pour ce support. Pour importer des fonds Mobile, suivez la mĂȘme procĂ©dure que pour les fonds Desktop.

⚠ La version mobile du Customizer ne contient pas les boutons "Valider" et "Annuler" comme sur la version Desktop. À la place, vous trouverez un bouton systĂšme "OK" qui permet de valider la crĂ©ation et passer Ă  l'Ă©tape suivante.

Publication et test de la campagne

Lorsque les deux versions Desktop et Mobile sont finalisées, vous pouvez lancer la publication de la campagne. N'oubliez pas d'effectuer la vérification de la campagne.

Autres options disponibles pour le module Customizer

Exemples de campagnes Customizer

Découvrez des exemples de scénarisation du module ci-dessous et dans notre espace "Inspiration"

Maxi Toys médiatise la sortie du second film La Reine des Neiges et les produits dérivés qu'il propose auprÚs de la cible enfants, par le bais d'un Customizer scenarisé : les utilisateurs sont invités à colorier la robe du personnage d'Elsa, via couleurs & stickers.

Moulinex mĂ©diatise son robot Cookeo Ă  l'occasion de la FĂȘte des MĂšres et propose Ă  ses utilisateurs de le customiser Ă  l'aide de couleurs, textes & stickers de son choix. L'engagement de la communautĂ© a Ă©tĂ© si fort via cette campagne, que Moulinex a produit & commercialisĂ© des planches de stickers dĂ©diĂ©es au robot, ayant Ă©tĂ© fortement plĂ©biscitĂ©es via le Jeu.

Athomédia médiatise la sortie du livre du chef cuisinier Olivier Streiff par le biais d'un Customizer scénarisé : l'utilisateur est invité à composé une assiette gastronomique, via l'ajout d'icÎne illustrant de grands mets. La marque réalise ensuite un tirage au sort parmi les plus belles compositions uploadées dans la galerie par les joueurs.

Laguiole, leader du couteau, médiatise ses services de personnalisation par le biais d'un Customizer scénarisé : les utilisateurs sont invités à créer leur couteau en sélectionnant le modÚle de leur choix, avant de pouvoir customiser la couleur de son manche & sa gravure via une zone de texte.

Avez-vous trouvé la réponse à votre question ?