Template Standard

Sections

1. Ecrans

2. Squelette

3. Personnalisation (contenu)

4. Personnalisation (habillage)

Ecrans

La template vient avec les écrans de parcours suivants :

1. Bienvenue

2. Formulaire

3. Preuve d'achat

4. Animation / Jeu

5. Remerciements

Et quatre écrans spéciaux :

• Trop tôt

• En pause

• Trop tard

• Inéligible

Bienvenue

• Slug : /

• Accès : Ouvert (si opération en cours, pages trop tôt ou trop tard sinon)

• Objectif : Présenter l'opération et ses dotations

Formulaire

• Slug : /inscription

• Accès : Ouvert (si opération en cours, pages trop tôt ou trop tard sinon)

• Objectif : Récolte de données-client

Preuve d'achat

• Slug : /preuve

• Accès : Restreint, nécessite la complétion du formulaire

• Objectif : Vérification de l'éligibilité d'un client

Animation / Jeu

• Slug : /jeu

• Accès : Restreint, nécessite la complétion du formulaire (et soumission de la preuve d'achat si applicable)

• Objectif : Récompense, dévoilement de la dotation du client (si applicable)

Remerciements

• Slug : /merci

• Accès : Restreint, nécessite la complétion du formulaire (et soumission de la preuve d'achat si applicable)

• Objectif : Distribution du coupon (si applicable), options de redirection et/ou de partage social

Trop tôt

• Slug : /tot

• Accès : Ouvert (défaut si tentative d'accès à l'opération avant son lancement)

• Objectif : Prévenir le client qu'il pourra revenir participer ultérieurement

En pause

• Slug : /pause

• Accès : Ouvert (défaut si tentative d'accès à l'opération alors qu'elle est en maintenance)

• Objectif : Prévenir le client que la campagne est en pause, mais qu'il pourra participer dans quelques minutes

Trop tard

• Slug : /tard

• Accès : Ouvert (défaut si tentative d'accès à l'opération après qu'elle soit terminée)

• Objectif : Prévenir le client que la campagne est clôturée

Inéligible

• Slug : /ineligible

• Accès : Ouvert (défaut si participation invalide en fonction de règles)

• Objectif : Rediriger le client qui n'est pas éligible vers le règlement de la campagne

Squelette

La template est construite sur base d'un seul et unique squelette HTML / CSS, se déclinant comme suit :

• Structure

• Rendu

Structure

Chaque écran est séparé en trois composants avec, dans l'ordre :

1. Header (commun à tous les écrans)

2. Contenu (variable)

3. Footer (commun à tous les écrans)

Rendu

Si la structure des écrans est absolue, ces derniers peuvent être affichés de trois façons différentes :

1. Une seule colonne (défaut)

2. Deux colonnes (classique)

3. Deux colonnes (inversé)

Une seule colonne

Mode par défaut, centre le contenu avec une largeur maximale de 900px.

En d'autres termes, sur grand écrans, le contenu sera accompagné de marges (identiques) à gauche et à droite, tandis que sur mobile, le contenu fera toute la largeur de l'écran.

Deux colonnes

Cette variante d'affichage permet de scinder les écrans en deux colonnes de tailles égales (à l'exception du footer), permettant d'avoir un visuel d'un côté, et le contenu de l'autre.

Il est également possible d'inverser les colonnes (sur desktop uniquement) si souhaité.

Personnalisation (contenu)

La template peut être personnalisée, aussi bien en terme de visuels que de contenu. Ci-dessous se trouve la liste (non exhaustive, mais extensive) des options actuellement disponibles :

• Contenu générique

• Contenu spécifique

Contenu générique

Le contenu textuel est intégralement personnalisable et, même s'il peut varier en fonction des spécificités de certains écrans, tous respectent à minima la template suivante :

{
  "title": "",     // Texte enrichi
  "subtitle": "",  // Texte enrichi
  "content": [],   // Texte(s) enrichi(s) et/ou image(s)
  "cta": "",       // Texte enrichi
  "mentions": []   // Texte(s) enrichi(s)
}

Pour référence, voici les configurations (simplifiées) par défaut de la template :

{
  "title": "Votre texte de présentation",
  "subtitle": "avec des infos complémentaires",
  "content": [
    {
      "src": "/statics/demo/LC_welcome_fr.png",
      "alt": "Lots à gagner"
    }
  ],
  "cta": "Je joue",
  "mentions": []
}

{
  "title": "Inscription",
  "subtitle": "",
  "content": [
    {
      "text": "Pour participer au jeu, saisissez vos informations personnelles."
    },
    {
      "text": "Tous les champs marqués d'un * sont nécessaires et obligatoires pour valider votre participation."
    },
    {
      "text": "La saisie d'informations erronées ou un remplissage incomplet du formulaire entraînera une annulation de votre participation."
    }
  ],
  "cta": "Je valide",
  "mentions": [
    "Lorem ipsum dolor sit amet, consectetur adipisicing elit [...]"
  ]
}

{
  "title": "Je télécharge ma preuve d'achat",
  "subtitle": "",
  "content": [
    {
      "text": "Téléchargez la photocopie de votre facture ou du ticket de caisse dans son intégralité, en entourant impérativement au préalable : la date d'achat, le libellé et le prix des produits achetés porteurs de l'offre."
    },
    {
      "text": "Téléchargez la photocopie ou la photographie du code-barres de votre produit en vous assurant que les chiffres soient bien lisibles."
    },
    {
      "text": "(Seuls les formats jpeg, png, gif ou pdf sont acceptés. La taille du document ne doit pas dépasser 2Mo.)"
    }
  ],
  "cta": "Je valide",
  "mentions": []
}

{
  "title": "Grattez la carte pour découvrir si vous avez gagné !",
  "subtitle": "",
  "content": [],
  "mentions": [
    "Notre catalogue de jeux est disponible <a href=\"/game-demo/\" target=\"_blank\">ici</a>."
  ]
}

{
  "title": "Merci de votre participation !",
  "subtitle": "",
  "content": [],
  "mentions": []
}

{
  "title": "Un peu de patience, le jeu n'a pas encore débuté.",
  "subtitle": "Revenez le XX/XX pour participer !",
  "content": [],
  "mentions": []
}

{
  "title": "Le jeu est actuellement en maintenance.",
  "subtitle": "Revenez dans quelques minutes pour participer !",
  "content": [],
  "mentions": []
}

{
  "title": "C'est fini pour cette fois.",
  "subtitle": "A bientôt pour d'autres jeux !",
  "content": [],
  "mentions": []
}

{
  "title": "Vous n'êtes malheureusement pas éligible au jeu.",
  "subtitle": "",
  "content": [
    {
      "text": "Consultez le <a class=\"modal-link\" data-modal=\"reglement\" href=\"https://box.lucky-cycle.com/tc/247ebdf960616e8b70fc97caf637a068/fr\" target=\"_blank\">règlement</a> du jeu pour plus d'informations."
    }
  ],
  "mentions": []
}

Contenu spécifique

En complément des contenus "génériques", certains écrans viennent avec des options spécifiques, listées ci-dessous (et toujours regroupées par écran) :

Formulaire

Choix parmi les champs suivants (maximum 1 utilisation par champ) :

Chaque champ du tableau ci-dessus vient également avec ces paramètres :

• Obligatoire, ou non

• Libellé personnalisable

• Sous-libellé (optionnel), comme par exemple pour la date de naissance : (jj/mm/aaaa)

Preuve d'achat

Choix parmi les options suivantes (maximum 1) :

Aide (info-bulle)

Il est également possible d'ajouter une info-bulle permettant de donner au client un exemple de ticket de caisse (variantes A et B) et/ou d'emballage de produit avec code-barres (variantes B et C).

Animation / Jeu

Nous classons les animations en 3 catégories :

Choix de l'animation parmi les options suivantes (maximum 1) :

Remerciements

Le contenu de l'écran de remerciements comprend certains blocs spécifiques, et peut être en outre personnalisé en fonction du résultat de la participation.

Blocs spécifiques

• Partage social (textes du partage à préciser séparément)

{
  "title": "Partagez le jeu avec vos amis !",
  "facebook": true,
  "twitter": false,
  "whatsapp": false
}

• Redirection vers les comptes du client (incompatible avec le partage social)

{
  "title": "Suivez nos actualités",
  "facebook": "https://www.facebook.com/luckycycle523/?utm_source=lck-demo",
  "instagram": "",
  "twitter": ""
}

• CTA avec redirection vers une page au choix

{
  "text": "Retour au site",
  "href": "https://www.luckycycle.com?utm_source=lck-demo",
  "target": "_top"
}

Résultat

Une participation peut avoir 6 statuts sur la template :

• Non jouée (0)

• Gagnée (1)

• Perdue (2)

• Mauvaise réponse (3) Impossible actuellement

• Inéligible (4)

• En erreur (5)

En fonction du statut de la participation, il est possible d'afficher au client un contenu différent sur l'écran de remerciements, aussi bien pour ce qui est du contenu générique, que du contenu spécifique.

Ainsi, voici, à nouveau pour référence, la configuration (simplifiée) par défaut de la template avec, pour chaque statut, sa configuration spécifique :

{
  "0": {
    "title": "Merci de votre participation !",
    "subtitle": "",
    "content": [],
    "share": {
      "title": "",
      "facebook": false,
      "twitter": false,
      "whatsapp": false
    },
    "social": {
      "title": "",
      "facebook": "",
      "instagram": "",
      "twitter": ""
    },
    "cta": {
      "text": "",
      "href": "",
      "target": ""
    },
    "mentions": []
  },
  "1": {
    "title": "Félicitations !",
    "subtitle": "",
    "content": [],
    "share": {
      "title": "",
      "facebook": false,
      "twitter": false,
      "whatsapp": false
    },
    "social": {
      "title": "Suivez nos actualités !",
      "facebook": "https://www.facebook.com/luckycycle523/",
      "instagram": "",
      "twitter": ""
    },
    "cta": {
      "text": "Retour au site",
      "href": "https://www.luckycycle.com?utm_source=lck-demo",
      "target": "_top"
    },
    "mentions": []
  },
  "2": {
    "title": "Dommage",
    "subtitle": "Vous avez perdu…",
    "content": [
      {
        "text": "Merci d'avoir participé !"
      }
    ],
    "share": {
      "title": "",
      "facebook": false,
      "twitter": false,
      "whatsapp": false
    },
    "social": {
      "title": "Suivez nos actualités !",
      "facebook": "https://www.facebook.com/luckycycle523/",
      "instagram": "",
      "twitter": ""
    },
    "cta": {
      "text": "Retour au site",
      "href": "https://www.luckycycle.com?utm_source=lck-demo",
      "target": "_top"
    },
    "mentions": []
  },
  "3": {
    "title": "Malheureusement,",
    "subtitle": "ce n'était pas la bonne réponse.",
    "content": [
      {
        "text": "Merci de votre participation !"
      }
    ],
    "share": {
      "title": "",
      "facebook": false,
      "twitter": false,
      "whatsapp": false
    },
    "social": {
      "title": "",
      "facebook": "",
      "instagram": "",
      "twitter": ""
    },
    "cta": {
      "text": "",
      "href": "",
      "target": ""
    },
    "mentions": []
  },
  "4": {
    "title": "Vous n'êtes malheureusement pas éligible au jeu.",
    "subtitle": "",
    "content": [
      {
        "text": "Consultez le <a class=\"modal-link\" data-modal=\"reglement\" href=\"https://box.lucky-cycle.com/tc/247ebdf960616e8b70fc97caf637a068/fr\" target=\"_blank\">règlement</a> du jeu pour plus d'informations."
      }
    ],
    "share": {
      "title": "",
      "facebook": false,
      "twitter": false,
      "whatsapp": false
    },
    "social": {
      "title": "",
      "facebook": "",
      "instagram": "",
      "twitter": ""
    },
    "cta": {
      "text": "",
      "href": "",
      "target": ""
    },
    "mentions": []
  },
  "5": {
    "title": "Une erreur est survenue,",
    "subtitle": "veuillez réessayer plus tard.",
    "content": [],
    "share": {
      "title": "",
      "facebook": false,
      "twitter": false,
      "whatsapp": false
    },
    "social": {
      "title": "",
      "facebook": "",
      "instagram": "",
      "twitter": ""
    },
    "cta": {
      "text": "",
      "href": "",
      "target": ""
    },
    "mentions": []
  }
}

Cas particulier : Dotation

En complément du contenu mentionné ci-dessus, il est également possible de personnaliser l'écran de fin pour les gagnants d'une dotation.

En effet, la page de remerciements est conçue de manière à permettre l'ajout d'un nom, d'une description et d'un visuel pour chaque lot, tout en stylisant leur contenu (via des balises HTML et classes CSS).

Voici un exemple (simplifié) pour la dotation gagnante de la démo :

{
  "title": "Vous avez gagné un super prix !",
  "description": "<i>Sous réserve de la validité des <strong>preuves d'achats</strong> soumises.</i>",
  "image": "[...]/LC_prize_fr.png"
}

Header

Possibilité de préciser un logo ainsi que les dates de la campagne.

Footer

Listing des liens légaux avec, pour chacun, les paramètres suivants :

{
  "type": "modal",
  "title": "Règlement",
  "link": "https://box.lucky-cycle.com/tc/247ebdf960616e8b70fc97caf637a068/fr"
}

Personnalisation (habillage)

Indépendamment du contenu, la template peut également être personnalisable graphiquement. A noter que certains paramètres, comme la police choisie ou les couleurs, sont prévus pour être globaux, mais il est toujours possible de préciser une variante sur tel ou tel écran.

• Habillage générique

• Habillage spécifique

Habillage générique

Afin d'éviter de perdre les clients, les éléments suivants sont pensés pour être communs à tous les écrans et ainsi offrir une expérience unifiée tout au long du parcours :

• Police

• Couleurs

• Fond (couleur et image)

• Boutons (CTAs)

• Langues (toggle)

Police

La template accepte toutes les polices possibles (sous réserve de pouvoir fournir un fichier TTF, OTF, WOFF ou WOFF2), toutefois, deux éléments sont à prendre en compte :

1. Les polices Google Fonts sont à privilégier car

   • Elles sont conçues pour fonctionner sur tous les devices et OS (ce qui n'est pas le cas d'autres polices, qui peuvent avoir un rendu totalement différent en fonction des clients !)

   • Si une police Google Fonts a déjà été chargée (sur un autre site qu'il visite) par le client, elle devient automatiquement disponible sur le nôtre (pas de chargement)

2. Plusieurs polices peuvent être chargées en parallèle (par exemple pour avoir une police spécifique aux titres), mais chaque police supplémentaire ajoute du temps de chargement additionnel à la page, ce qui peut s'avérer critique sur les connexions à bas débit.

Polices courantes (et complètes) suggérées :

• Montserrat

• Raleway

• Roboto

• Ubuntu

Couleurs

Il est évidemment possible de préciser une couleur spécifique pour un élément donné, mais la template inclut une palette de 5 couleurs par défaut, qui sont appliquées sur tous les écrans :

{
  --color-primary: #222243;
  --color-secondary: #25306D;
  --color-text: white;
  --color-dual-right: black;
  --background-dual-right: white;
}

Fond

Il est possible de préciser une couleur et/ou une image de fond, avec les paramètres suivants :

{
  background-image: url([...]/LC_background.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #8CCFBC;
}

Boutons

Comme mentionné dans les couleurs, les boutons viennent avec deux couleurs de fond globalisées (états normal et survol), et un texte blanc (ou noir, adapté par notre équipe en fonction des couleurs de fond). Il est toutefois possible de modifier le rendu des CTAs en précisant les paramètres suivants :

Langues

Dans le cas d'une opération multi-langues, il est possible d'afficher au client un (ou plusieurs) bouton(s, en fonction du nombre de langues disponibles) lui permettant de changer la langue d'affichage.

Si ces bouton reprennent, par défaut, les mêmes couleurs que les CTAs, il peuvent être personnalisés de la même manière que ces derniers.

Habillage spécifique

Ci-dessous sont listées les mises en page spécifiques pouvant être appliquées sur certains écrans :

• Carte (container -> tous les écrans)

• Explosion (post-animation -> écran jeu)

Carte

La template propose un système de carte (box-container) pouvant englober du contenu, et ce, afin de le mettre en évidence.

Ceci est notamment utilisé sur les écrans du formulaire, de la preuve d'achat et des remerciements afin de faire ressortir certains éléments du fond de la page.

Les cartes peuvent être ajoutées autour de n'importe quel contenu, mais attention que certains éléments (comme les formulaires) viennent en un bloc et ne peuvent être dissociés.

<!-- Contenu normal -->

<div class="box-container">
  <!-- Contenu de carte -->
</div>

<!-- Contenu normal -->

Explosion

La page de jeu peut déclencher une animation d'explosion à l'issue du jeu. Cette courte animation peut, au choix, être activée :

• Pour les gagnants uniquement (résultat : 1, win)

• Pour les perdants uniquement (résultat : 2, lose)

• Pour tout le monde

• Pour personne (désactivée)

Dans les trois premiers cas, l'image utilisée doit impérativement être un fichier .PNG avec fond transparent comprenant 6 blocs de 50x50px chacun, alignés horizontalement comme suit :