> 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-gotw.md).

# Template GOTW

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

## Sections

1. [Habillage](#habillage)
2. [Animation](#animations)
3. [Dotations](#dotations)
4. [Résumé](#resume)
5. [Newsletter](#newsletter)

***

## Habillage

La template consiste, pour tous les écrans, en un container centré responsive. Par défaut, la campagne est aux couleurs d'Intermarché mais, sont personnalisables :

1. Le **fond de la page**
   * peut être une couleur unie (<mark style="color:$success;">Hexa, RGB ou CMYK</mark> à fournir) ;
   * et/ou une image (<mark style="color:$success;">jpeg, png ou gif</mark>, idéalement en <mark style="color:orange;">1920x1080px</mark> - attention au poids de l'image pour éviter un long temps de chargement côté clients, <mark style="color:$danger;">maximum 1.5Mo</mark>).
2. Le **logo**
   * <mark style="color:$success;">jpeg, png, gif ou svg</mark>, ne devrait pas dépasser <mark style="color:orange;">500px de large</mark> et <mark style="color:$danger;">maximum 0.35Mo</mark>.
3. Les **couleurs** du thème
   * Couleur 1 : background bouton initial ;
   * Couleur 2 : background survol bouton + background footer ;
   * Couleur 3 : couleur du texte (hors boutons et footer qui sont blancs).
4. Le(s) **picto(s)** de la (des) dotation(s)
   * <mark style="color:$success;">jpeg, png, gif ou svg</mark>, ratio 1:1 *(carré)*, ne devrait pas dépasser <mark style="color:orange;">300px de côté</mark> et <mark style="color:$danger;">maximum 0.25Mo</mark> chacun.
5. Les visuels de l'**animation** (voir [point dédié](#animation)).

<figure><img src="/files/VUY0p79ncSzr9mMVr7A6" alt=""><figcaption><p>Habillage par défaut (couleurs 1: rouge #E30613, 2: noir #000000 et 3: noir #000000)</p></figcaption></figure>

<figure><img src="/files/wmdiCH9LienmTQYcm2qx" alt=""><figcaption><p>Exemple Chiquita (avec logo png, fond png, pictos par défaut et couleurs 1: bleu #005CA8, 2: fushia #E6007E et 3: noir #000000)</p></figcaption></figure>

***

## Animation

Il est possible de choisir entre 3 animations <mark style="color:purple;">(1)</mark> pour la campagne, sans que cette décision n'influence la distribution des lots. Les spécificités de chacune sont comme suit :

{% tabs %}
{% tab title="Carte à gratter" %}
{% hint style="info" %}
Démo technique : <https://campaigns.lucky-cycle.com/utils/games?game=scratch-card>
{% endhint %}

Options de configuration <mark style="color:yellow;">(si souhaité, sinon utilisation des éléments</mark> <mark style="color:yellow;"></mark>*<mark style="color:yellow;">"par défaut"</mark>*<mark style="color:yellow;">)</mark> :

| Utilisation                   | Type                | Taille    | Spécificités                                              |
| ----------------------------- | ------------------- | --------- | --------------------------------------------------------- |
| Overlay (visuel à gratter)    | Image (jpeg ou png) | 550x380px | *<mark style="color:$danger;">Pas</mark> de transparence* |
| Win (affiché si jeu gagnant)  | Image (jpeg ou png) | 550x380px | /                                                         |
| Lose (affiché si jeu perdant) | Image (jpeg ou png) | 550x380px | /                                                         |
| Cursor (grattoir)             | Image (jpeg ou png) | 128x128px | Carré (ratio 1:1)                                         |

<div><figure><img src="/files/jEZOMhUYFceLLDlTgv1h" alt="" width="275"><figcaption><p>Overlay</p></figcaption></figure> <figure><img src="/files/8OhkMRm10qyHUtYq2Mgl" alt="" width="275"><figcaption><p>Win</p></figcaption></figure> <figure><img src="/files/M9RiC7gWOa0lJYBJsI2P" alt="" width="275"><figcaption><p>Lose</p></figcaption></figure> <figure><img src="/files/feLP4CIwEoKeVIMSBR9A" alt="" width="96"><figcaption><p>Cursor</p></figcaption></figure></div>
{% endtab %}

{% tab title="Puzzle" %}
{% hint style="info" %}
Démo technique : <https://campaigns.lucky-cycle.com/utils/games?game=swapper>
{% endhint %}

Options de configuration <mark style="color:yellow;">(si souhaité, sinon utilisation des éléments</mark> <mark style="color:yellow;"></mark>*<mark style="color:yellow;">"par défaut"</mark>*<mark style="color:yellow;">)</mark> :

| Utilisation                   | Type                | Taille    | Spécificités                                              |
| ----------------------------- | ------------------- | --------- | --------------------------------------------------------- |
| Overlay (visuel à assembler)  | Image (jpeg ou png) | 550x380px | *<mark style="color:$danger;">Pas</mark> de transparence* |
| Win (affiché si jeu gagnant)  | Image (jpeg ou png) | 550x380px | /                                                         |
| Lose (affiché si jeu perdant) | Image (jpeg ou png) | 550x380px | /                                                         |

<div><figure><img src="/files/jEZOMhUYFceLLDlTgv1h" alt="" width="275"><figcaption><p>Overlay</p></figcaption></figure> <figure><img src="/files/8OhkMRm10qyHUtYq2Mgl" alt="" width="275"><figcaption><p>Win</p></figcaption></figure> <figure><img src="/files/M9RiC7gWOa0lJYBJsI2P" alt="" width="275"><figcaption><p>Lose</p></figcaption></figure></div>
{% endtab %}

{% tab title="Roue de la Fortune" %}
{% hint style="info" %}
Démo technique : <https://campaigns.lucky-cycle.com/utils/games?game=wheel>
{% endhint %}

Options de configuration <mark style="color:yellow;">(si souhaité, sinon utilisation des éléments</mark> <mark style="color:yellow;"></mark>*<mark style="color:yellow;">"par défaut"</mark>*<mark style="color:yellow;">)</mark> :

| Utilisation               | Type                | Taille    | Spécificités                                                                                                                                                                                                                                                                                                  |
| ------------------------- | ------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Wheel (visuel de la roue) | Image (jpeg ou png) | 550x550px | *Le visuel doit être <mark style="color:$danger;">carré</mark> (ratio 1:1) avec la <mark style="color:$danger;">roue centrée.</mark> Les quartiers doivent tous être <mark style="color:$danger;">de taille égale</mark>, et <mark style="color:$danger;">débuter "à midi" (ligne verticale centrée)</mark>*. |
| Pin (curseur)             | Image (jpeg ou png) | 120x120px | /                                                                                                                                                                                                                                                                                                             |

<div><figure><img src="/files/EqoF0RolsGrPr1YQQjZo" alt="" width="275"><figcaption><p>Wheel</p></figcaption></figure> <figure><img src="/files/zDJs3TylUtdyxDr7m7VF" alt="" width="90"><figcaption><p>Pin</p></figcaption></figure></div>
{% endtab %}
{% endtabs %}

***

## Dotations

Il est possible de distribuer jusqu'à 3 dotations "bon de réduction" différentes <mark style="color:purple;">(1-3)</mark> par campagne, et, sont à préciser pour chacune :

* la valeur (€) ;
* la quantité à mettre en jeu ;
* les libellés (FR+NL) à afficher au client ;
* *Optionnel :* nom du visuel à utiliser comme picto <mark style="color:purple;">(visuel à fournir, voir</mark> [*<mark style="color:purple;">Habillage</mark>*](#habillage)*<mark style="color:purple;">, point 4</mark>*<mark style="color:purple;">)</mark>.

***Exemple de tableau basé sur les données de l'exemple plus haut :***

<table data-full-width="false"><thead><tr><th data-type="number">Valeur</th><th data-type="number">Quantité</th><th>Libellé FR</th><th>Libellé NL</th><th>Visuel Picto</th></tr></thead><tbody><tr><td>1.5</td><td>100</td><td>1,50€ de réduction</td><td>€1,50 korting</td><td><em>mon_picto_perso_1.png</em></td></tr><tr><td>3</td><td>50</td><td>3€ de réduction</td><td>€3 korting</td><td>/ <mark style="color:yellow;">(défaut)</mark></td></tr></tbody></table>

***

## Résumé

<mark style="color:$danger;">Obligatoire</mark> :

* [x] Animation : choix parmi la liste ;
* [x] Dotations : listing avec valeur, quantité et libellés.

<mark style="color:blue;">Optionnel</mark> :

* [ ] Fond de la page : couleur et/ou image ;
* [ ] Logo : image ;
* [ ] Couleurs du thème ;
* [ ] Animation : visuels personnalisés ;
* [ ] Picto(s) de la (des) dotation(s) *+ préciser à quel lot rattacher*.

## Newsletter

Pour la newsletter qui redirigera les clients vers le jeu, sont à prévoir :

| **Visuel** (FR+NL si texte inclus) | ![](/files/gjziREPuQ9yTiX6OY6W0)                                                                                                                                                                                                                                                                                                | / *<mark style="color:yellow;">(idem FR car pas de texte à traduire dans l'image)</mark>*                                                                                                                                                                                                      |
| ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Titre court** (FR+NL)            | Jouez & gagnez jusqu’à 300€ de shopping chez LolaLiza 👗                                                                                                                                                                                                                                                                        | Speel mee & win tot €300 shopping bij LolaLiza 👗                                                                                                                                                                                                                                              |
| **Texte** (FR+NL)                  | <p>Découvrez <strong>LolaLiza</strong>, la <strong>marque belge</strong> aux <strong>looks tendances et féminins</strong>.</p><p></p><p>Participez maintenant, grattez votre carte <strong>100% gagnante</strong> et découvrez immédiatement votre prix.<br><br><strong>Jusqu'à 300€ de crédit shopping à gagner !</strong></p> | <p>Ontdek <strong>LolaLiza</strong>, het <strong>Belgische merk</strong> met <strong>trendy en vrouwelijke looks</strong>.</p><p></p><p>Doe nu mee, kras uw <strong>100% winnende</strong> kaart en ontdek meteen uw prijs.<br><br><strong>Tot wel €300 shoppingtegoed te winnen!</strong></p> |
| **CTA** (FR+NL)                    | JE PARTICIPE                                                                                                                                                                                                                                                                                                                    | IK DOE MEE                                                                                                                                                                                                                                                                                     |

<figure><img src="/files/UHqjYzbv4Ee7CuPSLzDe" alt="" width="375"><figcaption><p>Exemple de blocs newsletter Intermarché.</p></figcaption></figure>