Le but de cette section est de vous guider dans la construction d'un template email Koban.

Nota : Vous devez avoir des connaissances en HTML pour construire vous-même un template email.

Organisation générale

Un template email est composé de trois composants :

  • Le Header
  • Le corps
  • Le pied de page
Le corps comprend l'ensemble des zones pilotables par Koban. Chaque zone apparait dont l'une en dessous de l'autre dans ce corps.
Pour repérer ce corps, il convient de placer sur la balise TD correspondante l'attribut suivant :
<td data-type="body"></td>



Chaque zone est repérée également par un attribut. Pour repérer une zone (située obligatoirement dans le corps), il convient de placer sur la balise TABLE correspondante l'attribut suivant :
<table data-type="layout" data-zid="ORDRE"></td>

La valeur de ORDRE est un nombre correspondant à la position initiale de la zone dans le template (1, 2, 3...)

Les composants d'une zone

Chaque zone peut être composée d'éléments de texte, d'images ou de bouton

Texte

Un texte est repéré par un attribut sur la balise TD encapsulant le texte
<td data-type="text"></td>

Image

Une image est repérée par un attribut sur la balise TD encapsulant l'image. A l'intérieur de cette balise, un élément IMG doit obligatoirement être présent
<td data-type="image"></td>

Les dimensions de l'image peuvent être signalées à l'utilisateur. Pour cela, il convient de placer un attribut sur la balise IMG
<img data-dim="65 x 28 px" src="..."/>

La dimension des images est forcée par l'éditeur de Koban en hauteur et en largeur. Si vous souhaitez dimensionner automatiquement l'image par rapport au terminal, utilisez dans la balise image l'attribut css height:auto !important.

Bouton

Un bouton est repéré par un attribut sur la balise TD encapsulant le bouton. A l'intérieur de cette balise, un élément A doit obligatoirement être présent
<td data-type="button"></td>

Composants spéciaux

Logo

Le logo, situé dans le header est repéré par un attribut sur la balise TD correspondante. Cette balise doit encapsuler un élément A et un élément IMG.
<td data-type="logo"></td>

Résumé

Le résumé, situé dans le header est repéré par un attribut sur la balise TD correspondante.
<td data-type="summary"></td>

Chapo

Le chapo, situé également dans le header est repéré par un attribut sur la balise TD correspondante.
<td data-type="chapo"></td>

Liens spéciaux

Version en ligne

Pour afficher le lien permettant de consulter la version en ligne, il faut simplement repérer le lien A associé de cette manière :
<td data-type="online"><a id="showinline">Afficher en ligne</a></td>

Lien de désinscription

Pour afficher le lien permettant de se désinscrire, il faut simplement repérer le lien A associé de cette manière :
<a id="unsuscribe">Se désinscrire</a>

Gestion de la palette de couleur et de la police

Au niveau des zones

Sur chaque zone, les couleurs peuvent être modifiables par l'utilisateur. Cependant, il convient de repérer dans chaque zone les éléments constitutifs suivants : Fond, Titre, Texte.
Pour cela, sur chaque élément portant la couleur, il convient d'ajouter les attributs suivants:

Pour les boutons, les couleurs de fond et de texte peuvent être modifiées. De la même manière, on peut repérer les éléments concernés de la manière suivante :

Au niveau du template

Les couleurs et la police du template peuvent être déclarées à l'aide d'un élément spécifique : colorscheme, généralement placé au début du body html. <span id="colorscheme" data-fontsize="16px" data-fontfamily="'Segoe UI',sans-serif" data-color="#666666" data-title="#333333" data-bgcolor="#FFFFFF" data-link="#000000" data-altbgcolor="#5D9CEC" data-altcolor="#FFFFFF"></span>

Les éléments suivants sont définis:

Revenir à la liste des méthodes