HTML - Design - Guide - Seeuletter - Solutions d'envoi de courrier et de carte postale
Guide
Optimisez vos envois de courrier ou de carte postale.
Utilisez l'outil en ligne ou l'API d'envoi de courrier et de carte postale. 🚀
API
Mis à jour le 22 Novembre 2018 à 08h59

Design HTML : Les règles à respecter

Pour vous permettre de personnaliser au maximum vos courriers ou cartes postales pour chaque destinataire, vous pouvez envoyer du HTML qui sera converti en PDF.

Si vous travaillez avec un développeur, envoyez-lui ce guide. Il saura quoi faire .

Vous pouvez utiliser l'un des templates disponibles dans la collection pour vous inspirer lors de la création de vos designs.
Par exemple :

Les zones interdites

Courrier

Lors de l'envoi d'une lettre, l'adresse du destinataire est apposée sur le PDF. Il est donc nécessaire de laisser une zone vide.
Pour vous aider à visualiser les zones interdites, vous pouvez consulter le guide sur les zones d'écrasement - Courrier.

Important : vos courriers sont envoyés dans des enveloppes à fenêtre. L'adresse se trouve donc sur la première page du document. (Une option est disponible dans l'API pour ajouter une page "porte adresse")

Carte postale

Pour une carte postale la seule zone "interdite" est celle du timbre. Elle se trouve en haut à droite. Voir les zones d'écrasement - Carte Postale.

Moteur de rendu : Mustache.js

Grâce à la fusion de variable, lorsque vous envoyez une chaine de caractères HTML à l'API, celle-ci est "rendue" afin d'y incorporer les différentes variables que vous pouvez avoir définies. Le moteur de rendu utilisé est Mustache.js .

Ceci vous permet d'avoir un HTML propre, puis d'y ajouter des variables externes (que vous passez à l'aide de l'object variables).
Vous pouvez ainsi, très facilement, personnaliser vos courriers et cartes postales pour chacun de vos destinataires.

Consultez la documentation de Mustache.js pour découvrir toutes les options possibles pour les variables.

Exemple :
Si vous passez l'HTML suivant

source_file : `<html style='padding: 5px; font-size: 30px;'>HTML : {{nom_de_variable}}</html>`

 
Avec l'objet variables suivant

"variables" : {
  "nom_de_variable" : "Bonjour !"
}

La chaine entre accolades (nom_de_variable) sera remplacée par ce que vous avez passé comme variable.
Ainsi le PDF généré contiendra : "HTML : Bonjour !"

Pour en savoir plus sur les possibilités proposées par Mustache.js, consultez la documentation sur le projet GitHub .