SOMMAIRE
Étape 1 : Le mode parcours
Définir le style de son opération
Étape 2 : La personnalisation de vos pages
Personnalisation de l’élément Image
L'élément bouton
L’élément texte
L’élément HTML
L'élément timer
L’élément Partage
L’élément Pop-in
Étape 3 : Prévisualisation du jeu
Etape 1 : Le mode parcours
Lors de cette étape, vous allez devoir définir les pages qui vont construire le parcours de votre jeu.
Pour cela à partir du menu à gauche, vous allez pouvoir glisser la ou les page(s) à l’intérieur du parcours
L’affichage des flèches permet d’identifier le parcours. Elles sont visibles lorsque les redirections sur les boutons sont configurées.
Certaines typologies de pages sont disponibles pour que vous puissiez les ajouter dans votre parcours :
Page simple
Page gagné ( page à utiliser lors d’un instant gagnant)
Page perdu ( page à utiliser lors d’un instant gagnant, vous pouvez ajouter qu’une seule page perdu sur votre parcours de jeu )
Page de teasing (il s’agit d'une page indépendante*. Cette page d’annonce s'affiche si le jeu est en ligne avant la date officielle de lancement )
Page de fin d’opération (il s’agit d'une page indépendante*. Cette page s'affiche lorsque le jeu est terminé)
Page de maintenance (il s’agit d'une page indépendante*. Cette page s'affiche lorsque le jeu est momentanément indisponible pour les participants )
Page de double optin (il s’agit d'une page indépendante*. Cette page s'affiche lorsque vous mettez en place de la double confirmation d’optin )
*def : Une page indépendante est une page qui ne fait pas partie du parcours du jeu lors de la mise en ligne. Il s’agit d’une page qui s’affiche en dehors des périodes du jeu.
📢 La première page de votre parcours sera taguée comme page de “Début de parcours”. Il s’agit de la première page que les participants vont voir. Elle ne peut pas être supprimée et dupliquée. Elle peut contenir tous les éléments que vous souhaitez, texte, bouton, formulaire ..
Des actions sont réalisables sur la page : vous pouvez éditer, dupliquer et supprimer la page et accéder aux paramètres de la page.
Lorsque vous cliquez sur le bouton avec l'icône de la roue crantée, un onglet s’ouvre sur la droite.
Sur cet onglet, vous pouvez renommer le titre de la page,modifier les dimensions de la page soit la hauteur et la largeur en version desktop et mobile.
Vous pourrez ajouter notamment les images de fonds pour les deux formats de plateforme.
Définir le style de son opération
Lors de la construction du parcours de votre jeu, vous pourrez déterminer le style de votre opération.
Cette option va vous permettre de définir l’apparence de vos éléments en amont et s’appliquera sur chaque élément installé sur votre jeu.
Vous pourrez définir la couleur de vos boutons, textes et messages d’erreurs, définir la typographie de vos textes, la dimension de vos pages en desktop et mobile ainsi que les images de fond pour le format ordinateur et mobile ou bien ajouter une couleur qui s’appliquera sur l’ensemble de vos pages pour les deux formats.
Vous pouvez accéder au style à tout moment lors de la customisation des pages
Une fois que vous avez défini le chemin utilisateur de votre opération, vous pouvez concevoir la personnalisation de vos pages.
Etape 2 : La personnalisation de vos pages
En cliquant sur le bouton édition, vous accéderez à l’étape personnalisation de la page choisie
A partir du menu de gauche, vous retrouverez les éléments que vous pouvez ajouter à l’intérieur de votre page :
L’élément Texte
L’élément Image
L’élément Formulaire
L’élément Bouton
L’élément HTML
L’élément Timer
L’élément Image de la dotation ( le visuel est visible uniquement lorsque le jeu est en ligne et sur les pages gagnées)
L’élément code de dotation ( les codes doivent être importés lors de la configuration des dotations, l’élément permet de faire afficher le code sous format code barre ou Qr code )
L’élément de partage qui permet de partager le jeu sur les réseaux sociaux tels que Messenger, Instagram, Whatsapp ..
L’élément Pop-in
L’élément Captcha ( A venir ) peut être utilisé qu’une seule fois sur l’intégralité de l’opération. Conseil : Ajouter sur la première page du jeu, ou sur la page qui contient le formulaire
Astuce💡L’élément Captcha google peut être utilisé qu’une seule fois sur l’intégralité de l’opération. Nous recommandons de l’ajouter sur la première page du jeu ou sur la page qui contient le formulaire.
Astuce 💡 Vous pouvez sélectionner l’ensemble des éléments sur la page afin de pouvoir définir l’espace entre eux.
Vous aurez un accès rapide notamment à la liste des éléments qui figure sur votre page, cela vous permettra de gérer rapidement les éléments . Autrement dit, vous pouvez éditer, supprimer et aussi gérer le “niveau” de l’élément (contrôler l’ordre de superposition des éléments, premier plan ou arrière plan)
Ainsi qu’au presse-papier où se trouve tous les éléments copiés, lorsque vous collez un élément sur une page celui-ci reprend toute sa configuration de même que sa position sur la page.
↓ Action de copier un élément
↓ L'élément copié se situe sur le presse papier
Depuis la barre de menu en haut de votre écran, vous pourrez facilement revenir sur le mode parcours et sur le style de votre opération. De même que vous aurez accès à la customisation du pied de page. Vous trouverez une liste déroulante qui vous permettra de basculer facilement vers une autre page de votre parcours. De plus, vous pourrez changer rapidement de version desktop et mobile. L’accès aux paramètres de la page sera notamment accessible à partir de la personnalisation de la page.
📢 On vous donne la possibilité de personnaliser le pied de page qui est commun à l’ensemble des pages de votre opération. Il doit être configuré sur desktop et mobile . Les modifications s’appliqueront à toutes les pages. Vous pouvez insérer des liens, certains liens tels que cookies, règlement, mentions légales, politique de confidentialité ne peuvent être ajoutés qu’une seule fois dans le footer. Les liens des fichiers importés dans l’espace juridique seront automatiquement repris lors de la configuration du pied de page.
Astuce 💡 Lors de la personnalisation des formats desktop et mobile, vous pourrez facilement en un clic appliquer l’apparence d’une version vers l’autre version. Cela vous évitera de personnaliser de nouveau les éléments.
Il est possible dorénavant d’appliquer les propriétés de l’ensemble des éléments d’un format à un autre format.
Par exemple, lorsque vous êtes sur le format desktop, cliquez sur le bouton pour appliquer le style de des éléments mobile sur les éléments en format desktop.
1) Personnalisation de l’élément Image
Lors de l’ajout de l’élément, vous allez pouvoir le personnaliser en important un visuel depuis la bibliothèque Kimple ou depuis une url externe. Vous pourrez modifier sa position sur la page et sa taille.
💡Astuce Si vous souhaitez ne pas rendre visible l’élément sur le format, vous pouvez désactiver son affichage.
💡Astuce Si vous verrouillez le ratio de l’image, celle-ci est bloqué de ce fait les proportions largeur et hauteur de l’image sont conservées. Par exemple, une image de 200x200) restera dans ce format, même si on la redimensionne. Cela évite les déformations.
Si vous déverrouillez le ratio, celui-ci sera débloqué et vous pourrez modifier indépendamment la largeur et la hauteur de l’image. Par exemple, il est possible d’étirer l’image en largeur sans changer la hauteur. Cela peut être utile pour s’adapter à des formats spécifiques, mais l’image peut alors paraître déformée.
2) L'élément bouton
Vous pouvez définir le type de redirection du bouton vers une page, vers une url externe, vers une autre opération ou bien une redirection d’instant win .
N’oubliez pas de configurer une redirection sur vos boutons !
📢 Dans le cadre d’un jeu instant gagnant, il est essentiel d’activer l’instant win, cela va permettre de rediriger le participant vers la page gagnée ou perdu.
La redirection d’instant win doit être configurée sur le bouton de la page avant les pages gagnées et perdu ou sur la mécanique de jeu d’instant gagnant s’il n’y a pas de page intermédiaire entre la page de mécanique et les pages gagnée/perdu.
Deux options vous sont proposées pour l’apparence de votre bouton :
Classique
Vous pouvez personnaliser différents états du bouton
normal
Au survol (de la souris)
Au clic
En termes de personnalisation, vous pouvez modifier la couleur du fond du bouton, définir un contour, ajouter un arrondi et une ombre portée.
💡Astuce vous pouvez copier en un seul clic le style de l’état “normal” sur l’état “survol” et “clic”. Si besoin, vous pourrez réinitialiser son apparence.
Image
Vous pouvez définir un visuel pour le bouton en état normal et au survol.
Bien évidemment, vous avez accès aux fonctionnalités d’affichage et à l’ajout d’animations communes à une partie des éléments.
3) L’élément texte
Pour modifier le texte, vous devez cliquer sur la zone. La barre d’édition apparaîtra et vous permettra de personnaliser le texte, vous pourrez modifier la police du texte, la taille, la couleur ainsi que la disposition (à droite, centré, à gauche) et vous pouvez notamment appliquer des règles typographiques sur votre texte ainsi que des icônes, gérer l’interlignage et ajouter des liens hypertextes. De plus, il est possible d’ajouter des variables depuis un élément texte afin de personnaliser la page, par exemple pour faire afficher le prénom du participant. L’ajout de variable personnalisées peut être effectué uniquement sur les pages qui suivent le formulaire principal.
💡Astuce Il est possible d’appliquer des polices personnalisées sur les textes. Pour cela, il faut que vous ajoutiez les fonts dans votre bibliothèque dans la section “police”.
4) L’élément HTML
Pour insérer le code HTML, il vous suffit de cliquer sur l'icône représentée par les balises.
Un éditeur de code s’ouvre sur lequel vous allez pouvoir copier l’entièreté de votre code HTML.
Si vous souhaitez que le code s’active uniquement lorsque les cookies statistiques sont acceptés, vous pouvez activer l’option associée.
5) L'élément timer
Vous pouvez définir la durée du timer en minutes ou en secondes. Dans le cas où vous configurez en minutes le timer vous pouvez activer son affichage en secondes et définir une page de redirection lorsque le temps est écoulé.
Pour la personnalisation du timer vous pouvez choisir une apparence sous format compteur ou circulaire.
Pour l’affichage circulaire, vous pourrez configurer la couleur du cercle ainsi que son arrière-plan.
6) L’élément Partage
Vous permet de créer un bouton de redirection vers différents réseaux sociaux :
Messenger - ajouter l’url
Instagram - ajouter l’url et vous avez la possibilité de configurer une description de partage
Whatsapp - ajouter l’url et vous avez la possibilité de configurer une description de partage
Facebook - ajouter l’url et vous avez la possibilité de configurer une description de partage, un titre et une image
X - ajouter l’url et vous avez la possibilité de configurer une description de partage
Concernant l’apparence du bouton vous pouvez configurer sous forme classique en définissant sa customisation ou sous forme image.
📢 Les boutons de partage tels que instagram, messenger et whatsapp peuvent être utilisés que sur le format mobile. Pour cela nous vous recommandons de masquer les boutons sur la version desktop.
💡Astuce Tracker vos url de partages pour identifier les médias utilisés par vos participants pour accéder aux jeux. Il vous suffit d’insérer à la fin de chaque lien un utm de tracking
7) L’élément Pop-in
Le bouton pop-in permet d’afficher à l’intérieur de votre page un contenu texte sous forme de pop-in.
Lors de l’édition, il est possible d’ajouter un titre et le contenu du texte. Tout comme un éditeur de texte, vous êtes libre d' ajuster la police du texte, la taille et de modifier la couleur de la police ainsi que celle du fond de la pop-in.
↓ Editeur de la pop-in
↓ Résultat final après édition via l’aperçu du jeu
Étape 3 : Prévisualiser le jeu
A tout moment au cours de la configuration, vous pouvez consulter l’aperçu de votre jeu.
A partir de l’aperçu, vous avez un accès rapide à l’éditeur de code sur lequel vous pouvez ajouter du code css et js pour aller plus loin dans la personnalisation si besoin.
