> For the complete documentation index, see [llms.txt](https://doc.lucky-cycle.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://doc.lucky-cycle.com/campaigns/index/template-standard.md).

# Template Standard

{% hint style="info" %}
Démo technique : <https://campaigns.lucky-cycle.com/template>
{% endhint %}

## Sections

1. [Ecrans](#ecrans)
2. [Squelette](#squelette)
3. [Personnalisation](#personnalisation-contenu) (contenu)
4. [Personnalisation](#personnalisation-habillage) (habillage)

***

## Ecrans

La template vient avec les écrans de parcours suivants :

1. [Bienvenue](#bienvenue)
2. [Formulaire](#formulaire)
3. [Preuve d'achat](#preuve-dachat)
4. [Animation / Jeu](#animation-jeu)
5. [Remerciements](#remerciements)

Et quatre écrans spéciaux :

* [Trop tôt](#trop-tot)
* [En pause](#en-pause)
* [Trop tard](#trop-tard)
* [Inéligible](#ineligible)

{% hint style="warning" %}
A noter que tous les écrans de parcours sont techniquement <mark style="color:orange;">optionnels</mark>, mais qu'une campagne nécessite un minimum d'écrans pour être viable.
{% endhint %}

***

### Bienvenue

* [x] **Slug :** /
* [x] **Accès :** Ouvert (si opération en cours, pages [*trop tôt*](#trop-tot) ou [*trop tard*](#trop-tard) sinon)
* [x] **Objectif :** Présenter l'opération et ses dotations

<figure><img src="/files/tZDICtiwd3SeTGBLzWXF" alt=""><figcaption><p>Bienvenue</p></figcaption></figure>

***

### Formulaire

* [x] **Slug :** /inscription
* [x] **Accès :** Ouvert (si opération en cours, pages [*trop tôt*](#trop-tot) ou [*trop tard*](#trop-tard) sinon)
* [x] **Objectif :** Récolte de données-client

<figure><img src="/files/wpgj7KXMUur4LyaAN6dl" alt=""><figcaption><p>Formulaire</p></figcaption></figure>

***

### Preuve d'achat

* [x] **Slug :** /preuve
* [x] **Accès :** Restreint, nécessite la complétion du [*formulaire*](#formulaire)
* [x] **Objectif :** Vérification de l'éligibilité d'un client

<figure><img src="/files/vg5NRFW0uRQ815JBWvPT" alt=""><figcaption><p>Preuve d'achat</p></figcaption></figure>

***

### Animation / Jeu

* [x] **Slug :** /jeu
* [x] **Accès :** Restreint, nécessite la complétion du [*formulaire*](#formulaire) (et soumission de la [*preuve d'achat*](#preuve-dachat) si applicable)
* [x] **Objectif :** Récompense, dévoilement de la dotation du client (si applicable)

<figure><img src="/files/npAlqMtqtHoxrA4fth6Z" alt=""><figcaption><p>Animation / Jeu</p></figcaption></figure>

***

### Remerciements

* [x] **Slug :** /merci
* [x] **Accès :** Restreint, nécessite la complétion du [*formulaire*](#formulaire) (et soumission de la [*preuve d'achat*](#preuve-dachat) si applicable)
* [x] **Objectif :** Distribution du coupon (si applicable), options de redirection et/ou de partage social

<figure><img src="/files/UObhsNwgPyr7kMwKUnlE" alt=""><figcaption><p>Remerciements</p></figcaption></figure>

***

### Trop tôt

* [x] **Slug :** /tot
* [x] **Accès :** Ouvert (défaut si tentative d'accès à l'opération avant son lancement)
* [x] **Objectif :** Prévenir le client qu'il pourra revenir participer ultérieurement

<figure><img src="/files/kLQA8MKd8k6Wqrh8apMB" alt=""><figcaption><p>Trop tôt</p></figcaption></figure>

***

### En pause

* [x] **Slug :** /pause
* [x] **Accès :** Ouvert (défaut si tentative d'accès à l'opération alors qu'elle est en maintenance)
* [x] **Objectif :** Prévenir le client que la campagne est en pause, mais qu'il pourra participer dans quelques minutes

<figure><img src="/files/UqDBDPl1nEy072ThjrXg" alt=""><figcaption><p>En pause</p></figcaption></figure>

***

### Trop tard

* [x] **Slug :** /tard
* [x] **Accès :** Ouvert (défaut si tentative d'accès à l'opération après qu'elle soit terminée)
* [x] **Objectif :** Prévenir le client que la campagne est clôturée

<figure><img src="/files/FbUmVAE0mdbSufessvVP" alt=""><figcaption><p>Trop tard</p></figcaption></figure>

***

### Inéligible

* [x] **Slug :** /ineligible
* [x] **Accès :** Ouvert (défaut si participation invalide en fonction de règles)
* [x] **Objectif :** Rediriger le client qui n'est pas éligible vers le règlement de la campagne

<figure><img src="/files/bo4weore3USuJHJrhtJx" alt=""><figcaption><p>Inéligible</p></figcaption></figure>

***

## Squelette

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

* [Structure](#structure)
* [Rendu](#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)*

{% tabs %}
{% tab title="Header" %}

* Comprend le logo du client et/ou de la campagne, ainsi que les dates de cette dernière.
* Est affiché au dessus du *contenu* en mode une seule colonne, mais à gauche sur *desktop* en mode deux colonnes (voir dans [Rendu](#rendu)).
* Peut être masqué.
  {% endtab %}

{% tab title="Contenu" %}

* Consiste en le contenu de l'écran courant, le contenu peut être un formulaire, une boîte de jeu, du texte, etc.
* Est-affiché en dessous du *header* et au dessus du *footer*.
* Centré en mode une seule colonne, mais à droite sur desktop en mode deux colonnes (voir dans [Rendu](#rendu)).
  {% endtab %}

{% tab title="Footer" %}

* Comprend les liens légaux de la campagne (règlement, mentions légales, politique de confidentialité, cookies, etc.).
* Est toujours affiché en bas de page, en dessous du *header* et *contenu*.
* Peut *techniquement* être masqué.
  {% endtab %}
  {% endtabs %}

<div data-full-width="false"><figure><img src="/files/h0sOiZmC3NZm7anmRbOR" alt=""><figcaption><p>Structure (Header -> Contenu -> Footer)</p></figcaption></figure></div>

***

### Rendu

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

1. [Une seule colonne](#une-seule-colonne) *(défaut)*
2. [Deux colonnes](#deux-colonnes) *(classique)*
3. [Deux colonnes](#deux-colonnes) *(inversé)*

{% hint style="warning" %}
A noter que le choix une colonne / deux colonnes est <mark style="color:orange;">global</mark> à l'opération, et n'est pas précisable par écran.
{% endhint %}

***

#### Une seule colonne

Mode par défaut, <mark style="color:green;">centre le contenu avec une largeur maximale de 900px</mark>.

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.

<figure><img src="/files/989R5tzButzxgWYdZP6L" alt=""><figcaption><p>Mode une seule colonne (desktop / mobile)</p></figcaption></figure>

***

#### Deux colonnes

Cette variante d'affichage permet de <mark style="color:green;">scinder les écrans en deux colonnes de tailles égales</mark> (à l'exception du *footer*), permettant d'avoir un visuel d'un côté, et le contenu de l'autre.

{% hint style="warning" %}
A noter que le header est par défaut déplacé dans la colonne vide (peut être masqué) et que, <mark style="color:orange;">sur mobile, les colonnes sont affichées les unes en dessous des autres</mark>.
{% endhint %}

<figure><img src="/files/pWE8puKB7FaE1sdDGzHx" alt=""><figcaption><p>Mode deux colonnes (classique)</p></figcaption></figure>

Il est également possible d'<mark style="color:green;">inverser les colonnes</mark> (sur *desktop* uniquement) si souhaité.

<figure><img src="/files/9NEfV9KwEra2n01DI1RM" alt=""><figcaption><p>Mode deux colonnes (inversé)</p></figcaption></figure>

***

## 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-generique)
* [Contenu spécifique](#contenu-specifique)

***

### 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 :

```json
{
  "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 :

<details>

<summary>Bienvenue</summary>

```json
{
  "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&nbsp;joue",
  "mentions": []
}
```

</details>

<details>

<summary>Formulaire</summary>

```json
{
  "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&nbsp;valide",
  "mentions": [
    "Lorem ipsum dolor sit amet, consectetur adipisicing elit [...]"
  ]
}
```

</details>

<details>

<summary>Preuve d'achat</summary>

```json
{
  "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&nbsp;: 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&nbsp;valide",
  "mentions": []
}
```

</details>

<details>

<summary>Animation / Jeu</summary>

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

</details>

<details>

<summary>Remerciements</summary>

```json
{
  "title": "Merci de votre participation&nbsp;!",
  "subtitle": "",
  "content": [],
  "mentions": []
}
```

</details>

<details>

<summary>Trop tôt</summary>

<pre class="language-json"><code class="lang-json">{
  "title": "Un peu de patience, le jeu n'a pas encore débuté.",
  "subtitle": "Revenez le XX/XX pour participer&#x26;nbsp;!",
<strong>  "content": [],
</strong>  "mentions": []
}
</code></pre>

</details>

<details>

<summary>En pause</summary>

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

</details>

<details>

<summary>Trop tard</summary>

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

</details>

<details>

<summary>Inéligible</summary>

```json
{
  "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": []
}
```

</details>

***

### 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 <mark style="color:red;">(maximum 1 utilisation par champ)</mark> :

<table><thead><tr><th width="237">Champ (libellé)</th><th width="150">Type</th><th>Spécificités</th></tr></thead><tbody><tr><td>Civilité</td><td>"Radio"</td><td><em>Valeurs possibles : Mme / Mr</em></td></tr><tr><td>Nom</td><td>Texte</td><td></td></tr><tr><td>Prénom</td><td>Texte</td><td></td></tr><tr><td>Email</td><td>Email</td><td></td></tr><tr><td>Téléphone</td><td>"Tel"</td><td></td></tr><tr><td>IBAN</td><td>Texte</td><td></td></tr><tr><td>Date de naissance</td><td>Texte</td><td></td></tr><tr><td><p>Adresse</p><ul><li><em>Code postal</em></li><li><em>Ville</em></li><li><em>Voie</em></li><li><em>Numéro</em></li><li><em>Bâtiment/Résidence</em></li></ul></td><td>Texte</td><td><p>Choix entre :</p><ul><li><em>Hexavia</em></li><li><em>Google Address</em></li><li><em>Standard (champs ouverts)</em></li></ul></td></tr><tr><td>Règlement</td><td>Case à cocher</td><td><strong>Forcément obligatoire</strong></td></tr><tr><td>Opt-in</td><td>Case à cocher</td><td><em>Devrait être optionnel</em><br><em><mark style="color:purple;">Ce champ peut être utilisé jusqu'à 3 fois</mark></em></td></tr></tbody></table>

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

* [x] Obligatoire, ou non
* [x] Libellé personnalisable
* [x] Sous-libellé (optionnel), comme par exemple pour la date de naissance : *(jj/mm/aaaa)*

***

#### Preuve d'achat

Choix parmi les options suivantes <mark style="color:red;">(maximum 1)</mark> :

<table><thead><tr><th>Formulaire (libellés des champs)</th><th width="109.33333333333331">Type</th><th>Spécificités</th></tr></thead><tbody><tr><td><strong>A1:</strong> Facture ou ticket de caisse</td><td>Fichier</td><td><p>Nom du fichier précisable, défaut : </p><ul><li><em>TC_001</em></li></ul></td></tr><tr><td><p><strong>B1:</strong> Facture ou ticket de caisse</p><p><strong>B2:</strong> Code-barres </p></td><td>Fichier<br>Fichier</td><td><p>Nom des fichiers précisables, défaut :</p><ul><li><em>TC_001</em></li><li><em>GC_001</em></li></ul></td></tr><tr><td><strong>C1:</strong> Code de participation</td><td>Texte</td><td>Comparé avec une liste <em><mark style="color:orange;">(.CSV fourni en amont du lancement)</mark></em><br><br>Peut être à <strong>usage unique</strong> (brûlé après utilisation) ou <strong>générique</strong> (un même code est valable plusieurs fois)</td></tr></tbody></table>

{% hint style="warning" %}
Formats acceptés pour les fichiers : **JPG, JPEG, PNG, GIF et PDF**. Le poids d'un fichier ne peut en outre pas dépasser **2Mo**.
{% endhint %}

***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**)*.

<figure><img src="/files/kO31dyyClXR0RQgoXnbE" alt=""><figcaption><p>Info-bulle sur l'écran de preuve d'achat</p></figcaption></figure>

***

#### Animation / Jeu

Nous classons les animations en 3 catégories :

<table data-view="cards"><thead><tr><th></th><th></th><th></th></tr></thead><tbody><tr><td><strong>Chance</strong></td><td>Animation servant à dévoiler le résultat <strong>pré-déterminé</strong> du jeu.</td><td></td></tr><tr><td><strong>Adresse</strong></td><td>Jeu à l'issue duquel le participant va se voir attribuer un <strong>score</strong>, score pouvant conditionner le résultat.</td><td></td></tr><tr><td><strong>Réflexion</strong></td><td>Animations à vocation plus éducative, dans lesquelles les <strong>actions</strong> du participant sont enregistrées, et peuvent conditionner le résultat.</td><td></td></tr></tbody></table>

{% hint style="success" %}
La seule différence "technique" entre ces catégories est que le résultat du jeu est calculé **avant le jeu dans le premier cas**, tandis qu'il est déterminé **après dans les deux autres**.\
\
Il est toutefois possible de ne **pas** utiliser le score du joueur dans les algorithmes pour les jeux d'adresse et de réflexion *(ce qui les ramène dans ce cas à des jeux de chance en ce qui concerne l'assignation des dotations)*.
{% endhint %}

Choix de l'animation parmi les options suivantes <mark style="color:red;">(maximum 1)</mark> :

{% tabs %}
{% tab title="Chance" %}

* [Black-Jack](/games/index/black-jack.md)
* [Brelan](/games/index/brelan.md)
* [Flip Cards](/games/index/flip-card.md)
* [Grabber](/games/index/grabber.md)
* [Pinata](/games/index/pinata.md)
* [Scratch Card](/games/index/scratch-card.md)
* [Scratch Nine](/games/index/scratch-nine.md) *(and -Triple)*
* [Shooter](/games/index/shooter.md)
* [Short](/games/index/short.md)
* [Shuffler](/games/index/shuffle.md)
* [Slot Machine](/games/index/slot-machine.md)
* [Vintage Wheel](/games/index/vintage-wheel.md)
* [Wheel](/games/index/wheel.md)
  {% endtab %}

{% tab title="Adresse" %}

* [Candy Crush](/games/index/candy-crush.md)
* [Catch'Em All!](/games/index/catch-all.md)
* [Dino Run](/games/index/dino-run.md)
* [Endless Runner](/games/index/endless.md)
* [Hidden Object](/games/index/hidden-object.md)
* [Paper Toss](/games/index/paper-toss.md)
* [Penalty](/games/index/penalty.md)
* [Slicer](/games/index/slicer.md)
* [Snake](/games/index/snake.md)
  {% endtab %}

{% tab title="Réflexion" %}

* [Memory](/games/index/memory.md)
* [Millionaire](/games/index/millionaire.md)
* [Personality](/games/index/personality.md)
* [Tinder](/games/index/tinder.md)
  {% endtab %}
  {% endtabs %}

{% hint style="info" %}
Il est possible de ne **pas** utiliser d'animation dans la template.\
\
Dans ce cas, le client passera directement du [formulaire](#formulaire) (ou de la [preuve d'achat](#preuve-dachat) en fonction du paramétrage) à l'écran de [remerciements](#remerciements).
{% endhint %}

***

#### 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)*

<table><thead><tr><th width="163">Paramètre</th><th width="119.33333333333331">Type</th><th>Spécificités</th></tr></thead><tbody><tr><td>Titre</td><td>Texte</td><td>Optionnel, affiché au dessus des icônes</td></tr><tr><td>Icônes</td><td>Booléen</td><td><p>Icônes avec pop-up de partage s'ouvrant au clic<br><br>Choix parmi :</p><ul><li><em>Facebook</em></li><li><em>Twitter</em></li><li><em>WhatsApp</em></li></ul></td></tr></tbody></table>

```json
{
  "title": "Partagez le jeu avec vos amis&nbsp;!",
  "facebook": true,
  "twitter": false,
  "whatsapp": false
}
```

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

<table><thead><tr><th width="160.33333333333331">Paramètre</th><th width="126">Type</th><th>Spécificités</th></tr></thead><tbody><tr><td>Titre</td><td>Texte</td><td>Optionnel, affiché au dessus des icônes</td></tr><tr><td>Réseaux</td><td>Texte (URL)</td><td><p>Icônes avec ouverture du lien précisé au clic<br><br>Réseaux supportés :</p><ul><li><em>Facebook</em></li><li><em>Instagram</em></li><li><em>Twitter</em></li></ul></td></tr></tbody></table>

```json
{
  "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

<table><thead><tr><th width="161.33333333333331">Paramètre</th><th width="127">Type</th><th>Spécificités</th></tr></thead><tbody><tr><td>Libellé</td><td>Texte</td><td>Libellé du CTA</td></tr><tr><td>Lien</td><td>Texte (URL)</td><td>Lien ouvert au clic du CTA</td></tr><tr><td>Cible</td><td>Texte</td><td>Comportement au clic : ouverture dans le même onglet (défaut) ou dans un nouvel onglet</td></tr></tbody></table>

```json
{
  "text": "Retour&nbsp;au&nbsp;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)~~ *<mark style="color:yellow;">Impossible actuellement</mark>*
* 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](#contenu-generique), que du [contenu spécifique](#contenu-specifique).

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 :

<details>

<summary>Remerciements</summary>

```json
{
  "0": {
    "title": "Merci de votre participation&nbsp;!",
    "subtitle": "",
    "content": [],
    "share": {
      "title": "",
      "facebook": false,
      "twitter": false,
      "whatsapp": false
    },
    "social": {
      "title": "",
      "facebook": "",
      "instagram": "",
      "twitter": ""
    },
    "cta": {
      "text": "",
      "href": "",
      "target": ""
    },
    "mentions": []
  },
  "1": {
    "title": "Félicitations&nbsp;!",
    "subtitle": "",
    "content": [],
    "share": {
      "title": "",
      "facebook": false,
      "twitter": false,
      "whatsapp": false
    },
    "social": {
      "title": "Suivez nos actualités&nbsp;!",
      "facebook": "https://www.facebook.com/luckycycle523/",
      "instagram": "",
      "twitter": ""
    },
    "cta": {
      "text": "Retour&nbsp;au&nbsp;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é&nbsp;!"
      }
    ],
    "share": {
      "title": "",
      "facebook": false,
      "twitter": false,
      "whatsapp": false
    },
    "social": {
      "title": "Suivez nos actualités&nbsp;!",
      "facebook": "https://www.facebook.com/luckycycle523/",
      "instagram": "",
      "twitter": ""
    },
    "cta": {
      "text": "Retour&nbsp;au&nbsp;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&nbsp;!"
      }
    ],
    "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": []
  }
}
```

</details>

####

***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*](#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 :

```json
{
  "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"
}
```

<div data-full-width="false"><figure><img src="/files/4JAFcLJy190Aaoc7lEJX" alt=""><figcaption><p>Contenu dynamique lié à une dotation</p></figcaption></figure></div>

{% hint style="warning" %}
A noter que, s'il est bien possible de passer des balises HTML dans le contenu dynamique des dotations, certaines limitations (de caractères, comme les *`&nbsp;`*&#x6E;otamment, ou de longueur) s'appliquent.
{% endhint %}

***

#### 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 :

<table><thead><tr><th width="161.33333333333331">Paramètre</th><th width="106">Type</th><th>Spécificités</th></tr></thead><tbody><tr><td>Type</td><td>Sélection</td><td>Choix entre <strong>pop-in</strong> dans la page ou <strong>lien externe</strong> (ouvert dans un nouvel onglet)</td></tr><tr><td>Titre</td><td>Texte</td><td>Message affiché au client</td></tr><tr><td>Lien</td><td>Texte</td><td>Lien du document (si pop-in souhaitée, doit impérativement être un fichier <strong>PDF</strong>)</td></tr></tbody></table>

```json
{
  "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-generique)
* [Habillage spécifique](#habillage-specifique)

***

### 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](#police)
* [Couleurs](#couleurs)
* [Fond](#fond) *(couleur et image)*
* [Boutons](#boutons) *(CTAs)*
* [Langues](#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](https://fonts.google.com/) sont à privilégier car
   * [x] Elles sont conçues pour fonctionner sur tous les *devices* et *OS* <mark style="color:red;">(ce qui n'est pas le cas d'autres polices, qui peuvent avoir un rendu totalement différent en fonction des clients !)</mark>
   * [x] 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 <mark style="color:orange;">chaque police supplémentaire ajoute du temps de chargement additionnel à la page</mark>, ce qui peut s'avérer critique sur les connexions à bas débit.

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

* [Montserrat](https://fonts.google.com/specimen/Montserrat)
* [Raleway](https://fonts.google.com/specimen/Raleway)
* [Roboto](https://fonts.google.com/specimen/Roboto)
* [Ubuntu](https://fonts.google.com/specimen/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 :

<table><thead><tr><th width="241.5">Attribut</th><th>Correspondance</th></tr></thead><tbody><tr><td><em>--color-primary</em></td><td>Couleur des titres, sous-titres et de la croix des pop-ins, couleur de fond des boutons et du footer</td></tr><tr><td><em>--color-secondary</em></td><td>Couleur de la croix des pop-ins et couleur de fond des boutons et du footer <strong>au survol</strong> <em>("hover")</em></td></tr><tr><td><em>--color-text</em></td><td>Couleur par défaut des textes (appliqué partout sauf indication plus précise, comme pour les titres et sous-titres par exemple)</td></tr><tr><td><em>--color-dual-right</em></td><td><mark style="color:orange;">Spécifique au mode deux colonnes,</mark> couleur des textes dans le bloc de contenu <em>(optionnel)</em></td></tr><tr><td><em>--background-dual-right</em></td><td><mark style="color:orange;">Spécifique au mode deux colonnes,</mark> couleur de fond du bloc de contenu <em>(optionnel)</em></td></tr></tbody></table>

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

{% hint style="success" %}
En CSS, les couleurs peuvent au choix être précisées en hexadécimal *(#FF0000)*, en RG&#x42;*(-A, rgba(255, 0, 0, 1))* ou en anglais *(pour les couleurs de base uniquement, black / white)*.
{% endhint %}

***

#### Fond

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

<table><thead><tr><th width="230.5">Attribut</th><th>Correspondance</th></tr></thead><tbody><tr><td><em>background-image</em></td><td>URL de l'image de fond</td></tr><tr><td><em>background-size</em></td><td>Indique si l'image doit couvrir le fond <em>(défaut)</em>, ou être contenue dans la page</td></tr><tr><td><em>background-position</em></td><td>Précise l'alignement (aussi bien horizontal que vertical) de l'image</td></tr><tr><td><em>background-repeat</em></td><td>Indique si l'image doit être appliquée plusieurs fois (uniquement si plus petite que la page, utilisé pour créer des mosaïques notamment)</td></tr><tr><td><em>background-color</em></td><td>Couleur de fond se trouvant derrière l'image, est utile lors du chargement de cette dernière, ou s'il n'y a pas d'image</td></tr></tbody></table>

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

{% hint style="success" %}
Nous recommandons une image de **1920x1080px** pour un fond devant couvrir la page. Il convient également de **compresser l'image** pour qu'elle ne dépasse pas 500ko, et de s'assurer qu'**aucun contenu important ne se trouve sur les côtés** gauche et droite, qui seront par défaut masqués sur petits écrans *(position center)*.
{% endhint %}

***

#### Boutons

Comme mentionné dans les [couleurs](#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 :

<table><thead><tr><th width="203.5">Attribut</th><th>Correspondance</th></tr></thead><tbody><tr><td><em>padding</em></td><td>Marges internes (permet d'avoir de l'espace autour du texte dans le bouton)</td></tr><tr><td><em>margin</em></td><td>Marges externes (permet d'éviter que le bouton ne soit collé à d'autres éléments)</td></tr><tr><td><em>text-transform</em></td><td>Forçage des majuscules, minuscules, première lettre en majuscule, etc.</td></tr><tr><td><em>border-radius</em></td><td>Arrondi des coins (peut être exagéré pour avoir un ovale ou un rond en fonction du contenu)</td></tr><tr><td><em>font-size</em></td><td>Taille de la police (utile principalement pour grossir le bouton par rapport au reste du contenu)</td></tr><tr><td><em>font-weight</em></td><td>Graisse de la police (dépend des styles inclus dans une police, mais permet de préciser une épaisseur de trait)</td></tr></tbody></table>

***

#### 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](#couleurs) que les CTAs, il peuvent être [personnalisés](#boutons) de la même manière que ces derniers.

{% hint style="warning" %}
Si activés, les boutons de langue sont affichés sur tous les écrans, mais **la participation sera enregistrée dans la langue active au moment de la soumission du formulaire**.\
\
Tout changement ultérieur de langue ne sera sauvé que localement et ne pourra être restitué à l'issue de la campagne.
{% endhint %}

***

### Habillage spécifique

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

* [Carte](#carte) *(container -> tous les écrans)*
* [Explosion](#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](#formulaire), de la [preuve d'achat](#preuve-dachat) et des [remerciements](#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.

```html
<!-- Contenu normal -->

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

<!-- Contenu normal -->
```

***

#### Explosion

La page de [jeu](#animation-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 :

<figure><img src="https://campaigns.lucky-cycle.com/assets/explosion/particles.png" alt=""><figcaption><p>Sprite pour l'explosion (300x50px)</p></figcaption></figure>

{% hint style="success" %}
Les éléments peuvent être de taille et de forme différentes, tant qu'ils respectent la contrainte du carré de 50x50px.
{% endhint %}