Fragments personnalisables customizable-fragments

Lorsque des fragments sont utilisés dans un e-mail ou un modèle d’e-mail, ils sont verrouillés par défaut en raison de l’héritage, ce qui signifie que toutes les modifications apportées à un fragment sont automatiquement propagées à toutes les ressources où il est utilisé. Grâce aux fragments personnalisables, les champs spécifiques d’un fragment peuvent être définis comme modifiables lorsque le fragment est ajouté à un e-mail ou à un modèle d’e-mail. Par exemple, si vous disposez d’un fragment avec une bannière, du texte et un bouton, vous pouvez désigner certains champs, tels que l’image ou l’URL cible du bouton, comme modifiables.

Les fragments personnalisables vous permettent de gérer et de personnaliser le contenu sans créer de blocs de contenu entièrement nouveaux ou interrompre l’héritage des fragments. Les modifications apportées au niveau du fragment sont toujours propagées, tout en permettant la personnalisation au niveau de l’e-mail ou du modèle d’e-mail.

Les fragments visuels et d’expression peuvent être marqués comme personnalisables.

Ajouter des champs modifiables dans des fragments visuels visual

Pour rendre des parties d’un fragment visuel modifiables, procédez comme suit :

Après avoir ajouté le fragment à un e-mail, les utilisateurs et utilisatrices peuvent personnaliser tous les champs modifiables configurés dans le fragment.

Composants HTML modifiables dans les fragments editable-html

Dans un composant HTML, les types d’éléments suivants peuvent être rendus modifiables :

Chaque valeur de propriété CSS paramétrée doit être exactement {{{varName}}} : aucun suffixe, aucun texte supplémentaire, aucune variable multiple et aucune concaténation dans une seule propriété.

Pour paramétrer des propriétés multifaces telles que la marge intérieure, procédez de l’une des manières suivantes :

Fonctionnement des champs modifiables dans les composants HTML components

Les champs modifiables d’un composant HTML sont créés en déclarant des variables intégrées directement dans le code source du composant. Chaque variable possède un identifiant unique et une valeur par défaut. La variable est ensuite référencée là où la valeur modifiable doit apparaître dans le balisage.

Une fois le fragment enregistré et publié, chaque variable déclarée dans le composant HTML est automatiquement surfacée en tant que paramètre modifiable lorsque le fragment est ajouté à un email.

L’auteur d’e-mail peut alors remplacer la valeur par défaut de toute variable du Designer d’e-mail (par exemple, modifier une couleur d’arrière-plan, échanger une URL de CTA ou mettre à jour un titre) sans modifier l’HTML sous-jacent.

Référence de syntaxe syntax

Les champs modifiables sont définis et référencés à l’aide de deux modèles :

Déclaration d’une variable declaring

Utilisez la déclaration en ligne pour définir une variable avec un ID unique et une valeur par défaut :

{{#inline "variableID"}}default_value{{/inline}}

Remplacez variableID par un identifiant unique pour le champ modifiable. L’identifiant doit être unique dans le composant et ne doit pas contenir d’espaces.

Remplacez default_value par la valeur à utiliser si l’auteur de l’e-mail ne la remplace pas.

Référencer une variable referencing

Utilisez des accolades triples pour référencer la variable à l’endroit où sa valeur doit apparaître dans le balisage :

{{{variableID}}}

Le même ID de variable peut être référencé un certain nombre de fois dans l’HTML. Toutes les références sont résolues sur la valeur définie par l’auteur de l’e-mail (ou sur la valeur par défaut si aucun remplacement n’est fourni).

Paramètres facultatifs optional

La déclaration intégrée prend en charge des paramètres facultatifs qui modifient la manière dont le champ modifiable est présenté ou traité :

Ajout de champs modifiables à un composant HTML adding-editable-fields

Pour rendre modifiables des parties d’un composant HTML dans un fragment visuel, procédez comme suit :

Utilisation du fragment dans un email using-fragment

Une fois le fragment publié, toutes les variables déclarées dans ses composants HTML sont affichées en tant que paramètres modifiables dans le Designer d’e-mail.

Pour les personnaliser lors de l’utilisation du fragment dans un e-mail :

Le fragment s’affiche avec les valeurs personnalisées, tout en héritant des futures mises à jour structurelles apportées au fragment publié.

Exemple : fragment simple avec texte modifiable, couleur et URL example

L’exemple suivant crée une petite bannière promotionnelle avec quatre champs modifiables :

Après avoir publié le fragment, un auteur d’e-mail peut remplacer l’une de ces valeurs lors de l’ajout du fragment à un e-mail.

Bannière modifiable simple

<!-- Define editable variables -->
{{#inline "bgColor"}}#0057FF{{/inline}}
{{#inline "headlineText"}}Example Headline{{/inline}}
{{#inline "ctaText"}}Learn More{{/inline}}
{{#inline "ctaUrl" assetType="url"}}https://www.example.com{{/inline}}

<!-- Use the variables in the HTML -->
<table width="100%" cellpadding="0" cellspacing="0"
       style="background-color:{{{bgColor}}}; border-radius:8px;" >
  <tr>
    <td style="padding:30px; text-align:center; font-family:Arial,sans-serif;">
      <h2 style="color:#ffffff; font-size:24px; margin:0;">
        {{{headlineText}}}
      </h2>
      <a href="{{{ctaUrl}}}"
         style="display:inline-block; margin-top:16px; padding:12px 28px;
                background:#ffffff; color:{{{bgColor}}};
                font-weight:bold; border-radius:4px; text-decoration:none;">
        {{{ctaText}}}
      </a>
    </td>
  </tr>
</table>

Dans cet exemple :

Bonnes pratiques best-practices

Choses à savoir things-to-know