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

# Envoyer une sélection personnalisée

> Une campagne Batch, en push ou en e-mail, où chaque client voit les produits que Titane a choisis pour lui.

export const Logiciel = ({id}) => {
  const logiciels = {
    klaviyo: ["Klaviyo", "CRM et e-mailing"],
    brevo: ["Brevo", "CRM et e-mailing"],
    mailchimp: ["Mailchimp", "CRM et e-mailing"],
    batch: ["Batch", "CRM et e-mailing"],
    shopify: ["Shopify", "Boutique en ligne"],
    woocommerce: ["WooCommerce", "Boutique en ligne"],
    prestashop: ["PrestaShop", "Boutique en ligne"],
    magento: ["Magento", "Boutique en ligne"]
  };
  const [nom, famille] = logiciels[id] || [id, ""];
  return <div className="not-prose" style={{
    display: "flex",
    alignItems: "center",
    gap: 10,
    margin: "0 0 20px"
  }}>
      <img src={`/logos/${id}.png`} alt={nom} width={28} height={28} noZoom style={{
    width: 28,
    height: 28,
    margin: 0
  }} />
      <span style={{
    fontSize: 14
  }}>
        <strong>{nom}</strong>
        <span style={{
    opacity: 0.6
  }}> · {famille}</span>
      </span>
    </div>;
};

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 ApercuPush = ({titre, texte, image, logiciel, moment = "maintenant"}) => <div className="not-prose" style={{
  border: "1px solid rgba(127,127,127,0.25)",
  borderRadius: 14,
  overflow: "hidden",
  margin: "20px 0",
  maxWidth: 420
}}>
    <div style={{
  background: "linear-gradient(160deg, #2B3A37 0%, #1C1A16 100%)",
  padding: "26px 16px 22px"
}}>
      <div style={{
  textAlign: "center",
  color: "#F7F5F0",
  fontSize: 40,
  fontWeight: 300,
  letterSpacing: "-0.02em",
  marginBottom: 18
}}>9:41</div>
      <div style={{
  background: "rgba(247,245,240,0.94)",
  color: "#1C1A16",
  borderRadius: 18,
  overflow: "hidden",
  fontFamily: "Helvetica, Arial, sans-serif"
}}>
        <div style={{
  display: "flex",
  alignItems: "center",
  gap: 8,
  padding: "10px 12px 0",
  fontSize: 12
}}>
          <span style={{
  width: 20,
  height: 20,
  borderRadius: 5,
  background: "#1E4A45",
  color: "#F7F5F0",
  display: "inline-flex",
  alignItems: "center",
  justifyContent: "center",
  fontFamily: "Georgia, 'Times New Roman', serif",
  fontSize: 12
}}>p</span>
          <span style={{
  opacity: 0.7,
  letterSpacing: "0.04em",
  textTransform: "uppercase",
  fontSize: 11
}}>Pure</span>
          <span style={{
  marginLeft: "auto",
  opacity: 0.55,
  fontSize: 11
}}>{moment}</span>
        </div>
        <div style={{
  padding: "6px 12px 12px"
}}>
          <div style={{
  fontSize: 14,
  fontWeight: 700,
  lineHeight: 1.35
}}>{titre}</div>
          <div style={{
  fontSize: 14,
  lineHeight: 1.4,
  marginTop: 2
}}>{texte}</div>
        </div>
        {image ? <img src={image} alt="" noZoom style={{
  display: "block",
  width: "100%",
  aspectRatio: "3 / 2",
  objectFit: "cover",
  margin: 0
}} /> : null}
      </div>
    </div>
    {logiciel ? <div style={{
  padding: "8px 16px",
  fontSize: 12,
  opacity: 0.65
}}>Aperçu d'une notification envoyée depuis {logiciel}, marque de démonstration « Pure ».</div> : null}
  </div>;

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>;

<Logiciel id="batch" />

**L'objectif :** une campagne régulière, par exemple mensuelle, qui montre à chaque client **sa** sélection plutôt qu'une vitrine identique pour tous.

**Le modèle TITAN :** TITAN-REC, qui choisit la sélection personnalisée de chaque client.

**Ce qu'il vous faut :** les champs `titan_reco_*` sur vos profils, [confirmés](/crm/batch/index#confirmer-les-champs-titane) dans **Data** › **Profile data**.

**Temps :** 15 minutes pour le push, 30 minutes avec l'e-mail.

## Le résultat

Le même push, envoyé à toute la cible, montre à chacun son premier produit :

<ApercuPush logiciel="Batch" titre="On l'a choisi pour vous" texte="Sérum rééquilibrant niacinamide, 24,90 €. Il vous attend." image="https://mintcdn.com/titane-intelligence/0W4v7f6cGaRkxYCO/images/pure/serum.jpg?fit=max&auto=format&n=0W4v7f6cGaRkxYCO&q=85&s=a7984913c0d51a6d479f535c463ad51e" width="576" height="720" data-path="images/pure/serum.jpg" />

Et l'e-mail, ses quatre premiers produits :

<ApercuEmail colonnes={2} logiciel="Batch" objet="Votre sélection d'octobre" preheader="Quatre produits choisis pour vous." titre="Votre sélection personnalisée" accroche="Bonjour Hugo, voici quelques produits que nous avons choisis pour vous ce mois-ci." titreSelection="Votre sélection du moment" produits={[PRODUITS.serum, PRODUITS.huile, PRODUITS.solaire, PRODUITS.masque]} cta="Voir ma sélection" pied="Vous recevez cet e-mail parce que vous êtes client de Pure." />

## Le push, pas à pas

<Steps>
  <Step title="Créer la campagne">
    **Campaigns** › **New Campaign** › **Push**. Nommez-la « Sélection personnalisée · octobre ».
  </Step>

  <Step title="Cibler les clients qui ont une sélection">
    Dans le ciblage, **Add conditions** : l'attribut `titan_reco_1_nom` est **renseigné**.
  </Step>

  <Step title="Écrire le titre et le texte">
    Insérez les champs avec le bouton **`{...}`**, ou tapez-les :

    ```text theme={null}
    Titre : On l'a choisi pour vous
    Texte : {{ titan_reco_1_nom }}, {{ titan_reco_1_prix }}. Il vous attend.
    ```

    Si votre projet porte le prénom de vos clients, ajoutez-le au titre avec le même bouton.
  </Step>

  <Step title="Ajouter l'image et le lien">
    **Image** : choisissez une adresse d'image (media URL) et collez `{{ titan_reco_1_image }}`.

    **Deeplink URL** : `{{ titan_reco_1_url }}`, la fiche du produit.
  </Step>

  <Step title="Prévisualiser avec de vrais profils">
    Choisissez deux ou trois profils de la cible dans l'aperçu : le produit doit changer de l'un à l'autre. Envoyez-vous un test sur l'un d'eux.
  </Step>

  <Step title="Programmer">
    **Scheduled**, à l'heure locale du profil (**Profile's local time**) : chacun le reçoit à la même heure chez lui.
  </Step>
</Steps>

<Note>
  Batch affiche les grandes images en **paysage**. Une photo produit carrée ou en portrait peut être recadrée : vérifiez le rendu sur votre test avant de programmer.
</Note>

## L'e-mail, pas à pas

<Steps>
  <Step title="Créer la campagne">
    **Campaigns** › **New Campaign** › **Email**, avec le même ciblage : `titan_reco_1_nom` est renseigné.
  </Step>

  <Step title="Composer le bloc de produits">
    Dans l'éditeur, ajoutez un bloc de quatre produits. Pour chacun, de 1 à 4, l'image `{{ titan_reco_1_image }}`, le nom `{{ titan_reco_1_nom }}`, le prix `{{ titan_reco_1_prix }}` et le lien `{{ titan_reco_1_url }}`, en changeant le chiffre d'un produit à l'autre.
  </Step>

  <Step title="Masquer un produit absent">
    Un client peut avoir moins de quatre produits. Entourez chaque produit, à partir du deuxième, d'une condition :

    ```text theme={null}
    {% if titan_reco_2_nom %}
      … le deuxième produit …
    {% endif %}
    ```
  </Step>

  <Step title="Écrire vos textes, puis prévisualiser">
    Objet, préheader, accroche : dans votre ton. Prévisualisez avec deux ou trois profils, les produits doivent changer.
  </Step>

  <Step title="Programmer">
    Programmez l'envoi au jour et à l'heure qui conviennent à vos clients.
  </Step>
</Steps>

<Tip>
  Les prix sont **déjà mis en forme** (`24,90 €`) : affichez-les tels quels, sans format de nombre.
</Tip>

## Pour aller plus loin

<AccordionGroup>
  <Accordion title="Adapter le message au palier de valeur" icon="gem">
    Dupliquez la campagne : une version pour `titan_valeur` égal à `haute`, plus premium et sans remise, une autre pour le reste de votre base.
  </Accordion>

  <Accordion title="Envoyer au bon moment pour chacun" icon="clock">
    Ajoutez au ciblage `titan_contacter_sous_j` inférieur à 15, et refaites la campagne toutes les deux semaines.
  </Accordion>

  <Accordion title="Tester deux angles" icon="split">
    Activez l'A/B test du message : le produit au centre d'un côté, une accroche sur la saison de l'autre. Batch peut envoyer la version gagnante au reste de la cible.
  </Accordion>
</AccordionGroup>


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