> ## Documentation Index
> Fetch the complete documentation index at: https://docs.titane-intelligence.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Les modèles d'e-mail Titane

> Des modèles prêts à l'envoi, à votre marque, dont le bloc de produits change pour chaque destinataire.

export const PRODUITS = {
  serum: {
    nom: "Sérum rééquilibrant niacinamide",
    prix: "24,90 €",
    image: "/images/pure/serum.jpg"
  },
  gel: {
    nom: "Gel nettoyant doux",
    prix: "14,90 €",
    image: "/images/pure/gel-nettoyant.jpg"
  },
  solaire: {
    nom: "Lait frais solaire SPF 50",
    prix: "19,90 €",
    image: "/images/pure/solaire.jpg"
  },
  baume: {
    nom: "Baume lèvres repulpant",
    prix: "8,90 €",
    image: "/images/pure/baume-levres.jpg"
  },
  huile: {
    nom: "Huile corps nourrissante",
    prix: "22,90 €",
    image: "/images/pure/huile-corps.jpg"
  },
  dentifrice: {
    nom: "Dentifrice éclat minéral",
    prix: "6,90 €",
    image: "/images/pure/dentifrice.jpg"
  },
  deodorant: {
    nom: "Déodorant stick néroli blanc",
    prix: "11,90 €",
    image: "/images/pure/deodorant-stick.jpg"
  },
  recharge: {
    nom: "Recharge déodorant roll-on 24 h",
    prix: "7,90 €",
    image: "/images/pure/recharge-roll-on.jpg"
  },
  masque: {
    nom: "Masque stick argile rose",
    prix: "16,90 €",
    image: "/images/pure/masque-stick.jpg"
  },
  duo: {
    nom: "Duo rituel du matin",
    prix: "29,90 €",
    image: "/images/pure/duo-matin.jpg"
  }
};

export const ApercuEmail = ({objet, preheader, titre, accroche, titreSelection, produits = [], cta = "Découvrir", pied, logiciel, colonnes}) => <div className="not-prose" style={{
  border: "1px solid rgba(127,127,127,0.25)",
  borderRadius: 14,
  overflow: "hidden",
  margin: "20px 0",
  maxWidth: 640
}}>
    <div style={{
  background: "rgba(127,127,127,0.08)",
  padding: "12px 16px",
  fontSize: 13,
  lineHeight: 1.5
}}>
      <div><span style={{
  opacity: 0.6
}}>De :</span> Pure &lt;bonjour@pure.example&gt;</div>
      <div><span style={{
  opacity: 0.6
}}>Objet :</span> <strong>{objet}</strong></div>
      {preheader ? <div style={{
  opacity: 0.6
}}>{preheader}</div> : null}
    </div>
    <div style={{
  background: "#F7F5F0",
  color: "#1C1A16",
  padding: "28px 20px",
  fontFamily: "Helvetica, Arial, sans-serif"
}}>
      <div style={{
  textAlign: "center",
  fontFamily: "Georgia, 'Times New Roman', serif",
  fontSize: 34,
  letterSpacing: "-0.02em",
  marginBottom: 22
}}>pure</div>
      <div style={{
  textAlign: "center",
  fontSize: 22,
  fontWeight: 700,
  marginBottom: 10
}}>{titre}</div>
      <div style={{
  textAlign: "center",
  fontSize: 15,
  lineHeight: 1.6,
  maxWidth: 440,
  margin: "0 auto 22px"
}}>{accroche}</div>
      <div style={{
  textAlign: "center",
  fontSize: 12,
  letterSpacing: "0.12em",
  textTransform: "uppercase",
  opacity: 0.7,
  marginBottom: 14
}}>{titreSelection}</div>
      <div style={{
  display: "grid",
  gridTemplateColumns: `repeat(${colonnes || Math.min(produits.length, 3) || 1}, minmax(0, 1fr))`,
  gap: 14
}}>
        {produits.map(p => <div key={p.nom} style={{
  background: "#FFFFFF",
  borderRadius: 10,
  padding: 10,
  textAlign: "center"
}}>
            <img src={p.image} alt={p.nom} style={{
  width: "100%",
  aspectRatio: "4 / 5",
  objectFit: "cover",
  borderRadius: 6,
  margin: 0
}} />
            <div style={{
  fontSize: 13,
  fontWeight: 600,
  marginTop: 8,
  lineHeight: 1.35
}}>{p.nom}</div>
            <div style={{
  fontSize: 13,
  marginTop: 4
}}>{p.prix}</div>
          </div>)}
      </div>
      <div style={{
  textAlign: "center",
  marginTop: 22
}}>
        <span style={{
  display: "inline-block",
  background: "#1E4A45",
  color: "#F7F5F0",
  padding: "12px 26px",
  borderRadius: 999,
  fontSize: 14,
  fontWeight: 600
}}>{cta}</span>
      </div>
      {pied ? <div style={{
  textAlign: "center",
  fontSize: 11,
  opacity: 0.6,
  marginTop: 24,
  lineHeight: 1.5
}}>{pied}<br />Se désinscrire</div> : null}
    </div>
    {logiciel ? <div style={{
  padding: "8px 16px",
  fontSize: 12,
  opacity: 0.65
}}>Aperçu d'un envoi depuis {logiciel}, marque de démonstration « Pure ».</div> : null}
  </div>;

Au passage en [mode réel](/demarrer/mode-reel), Titane pose dans votre CRM des modèles d'e-mail nommés « Titane… ». Chacun contient un **bloc de produits** qui lit les recommandations du profil : un même envoi montre des produits différents à chaque destinataire.

## Les modèles dans Klaviyo

Dans **Content › Templates** :

| Modèle | Ce que montre le bloc de produits | Tutos |
| - | - | - |
| Titane - Recos personnalisées | les 5 produits de la sélection personnalisée | [Sélection personnalisée](/crm/klaviyo/selection-personnalisee), [Reconquête](/crm/klaviyo/reconquete), [Deuxième commande](/crm/klaviyo/deuxieme-commande) |
| Titane - Recos complémentaires | 5 compléments du dernier achat | [Ouvrir une nouvelle catégorie](/crm/klaviyo/complements) |
| Titane - Recos post-achat | 5 compléments du dernier achat, avec un message de remerciement | [Après l'achat](/crm/klaviyo/post-achat) |
| Titane - Réassort | les 2 produits à racheter | [Rappeler un réassort](/crm/klaviyo/reassort) |
| Titane - Pack personnalisé | une composition autour de la sélection personnalisée | |

## Les modèles dans Brevo

Dans **Campagnes** › **Modèles**, dix modèles « Titane · … » : Sélection personnalisée, Reconquête, Réactivation, Deuxième commande, Réassort à échéance, Compléments d'achat, Nouvelle catégorie, Panier abandonné, Première commande, Groupe de clients. Chacun montre les **quatre premiers produits de la sélection personnalisée** du destinataire, avec un texte adapté à son usage. Voir [Brevo : bien démarrer](/crm/brevo/index).

## Chez Mailchimp

Titane ne pose pas de modèle chez Mailchimp : vous insérez les champs Titane dans vos propres modèles, et chaque destinataire voit ses propres produits. La grille prête à coller est dans [Envoyer une sélection personnalisée](/crm/mailchimp/selection-personnalisee).

## À quoi ressemble un e-mail

<ApercuEmail logiciel="Klaviyo, modèle « Titane - Recos personnalisées »" objet="Camille, votre sélection du moment" preheader="Quelques produits choisis pour vous." titre="Votre sélection personnalisée" accroche="Bonjour Camille, nous avons choisi pour vous quelques produits qui devraient vous plaire." titreSelection="Votre sélection du moment" produits={[PRODUITS.serum, PRODUITS.gel, PRODUITS.solaire, PRODUITS.huile, PRODUITS.baume, PRODUITS.masque]} cta="Voir toute la boutique" pied="Vous recevez cet e-mail parce que vous êtes client de Pure." />

## Ce qui vous appartient

* **Les textes.** Titre, accroche, titre de la sélection, bouton, pied : réécrivez-les dans votre ton.
* **La marque.** Titane pose ses modèles à votre marque. Vérifiez une fois votre logo et vos couleurs, et corrigez-les si besoin.
* **L'expéditeur.** C'est le vôtre, jamais « Titane ».
* **L'envoi.** Titane ne programme et n'envoie rien.

Un modèle que vous avez modifié est **gardé tel quel** : Titane ne le réécrit pas.

<Warning>
  Gardez le **bloc de produits** tel qu'il est : c'est lui qui va chercher, pour chaque destinataire, les produits que Titane a choisis. Vous pouvez changer son titre et son style, pas les balises qu'il contient.
</Warning>

## Toujours prévisualiser avec un vrai profil

Avant d'envoyer, prévisualisez l'e-mail avec deux ou trois profils de votre audience. Les produits doivent **changer d'un profil à l'autre**. Si le bloc est vide pour un profil, ce client n'a pas encore de sélection : excluez-le de l'envoi en ajoutant la condition `titan_reco_1_id` renseigné à votre segment.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.