Dernière modification : 28 août 2025
À un niveau élevé, vous configurez les options de module localement dans le fichier meta.json, qui peut inclure les propriétés suivantes :
ParameterTypeDescriptionDefault
iconChaîneURL d’une image à utiliser comme icône pour un module.
labelChaîneLabel utilisé lorsque les modules sont affichés dans les éditeurs de contenu.
module_idNombreIdentifiant unique pour le module qui est indépendant du chemin.
is_available_for_new_contentBooléenLa valeur du bouton à bascule dans l’angle supérieur droit de l’éditeur de module dans HubSpot. Détermine si le module peut être utilisé dans le contenu.true
globalBooléenIndique si le module est global ou non.false
host_template_typesTableauUn tableau array des types de contenu dans lesquels le module peut être utilisé. Un ou plusieurs des éléments [ "PAGE", "BLOG_POST", "BLOG_LISTING", "EMAIL" ].
css_assetsTableauUn tableau array des fichiers CSS dont dépend le module. Les chemins relatifs sont pris en charge.Par exemple : "css_assets" : [{ "path" : "../path/to/file.css" }].[]
css_render_optionsObjetDéfinissez si le module CSS est restitué de manière asynchrone avec async : true ou false.{"async": false}
js_assetsTableauUn tableau array des fichiers JavaScript dont dépend le module. Les chemins relatifs sont pris en charge.Par exemple : "js_assets" : [{ "path" : "../path/to/file.js" }].[]
js_render_optionsObjetModifie la balise JavaScript du module ajoutée à la page restituée. Les options comprennent :
  • position : head/footer
  • async : true/false
  • defer : true/false
  • type : string
{"position":"footer"}
inline_help_textChaîneTexte d’aide qui sera affiché en haut du module dans une boîte d’information bleue (limite de 300 caractères).Fournit les informations nécessaires à l’utilisation du module. Si vous avez des informations de texte d’aide spécifiques au champ à transmettre, reportez-vous à la documentation sur le champ de texte d’aide.null
master_languageChaîneLorsque les traductions sont activées, le code de la langue dans laquelle les champs du module ont été écrits à l’origine.Par exemple, en.
placeholderObjetDéfinit le contenu de variable pour le module. Comprend les propriétés suivantes :
  • show_module_icon : indique si l’icône du module s’affiche (true/false).
  • title : le titre qui apparaît sur le module dans l’éditeur. Chaîne.
  • description : la description qui apparaît sur le module dans l’éditeur. Chaîne.
categoriesTableauUn tableau contenant jusqu’à trois catégories de module.Par exemple : "categories":["FORMS_AND_BUTTONS"]
content_tagsTableauUn tableau d’objets de balise de module contenant le nom de balise et la source de "USER".Par exemple : "content_tags": [{ "name" : "BUTTONS", "source" : "USER"``}]
Ci-dessous, découvrez-en davantage sur les options de configuration des modules individuels.

​
Ajout d’une icône

Les modules peuvent inclure une icône qui apparaît dans le gestionnaire de conception ainsi que dans les éditeurs de page et d’e-mail pour fournir un contexte visuel aux créateurs de contenu. Il est recommandé d’avoir différentes icônes pour les différents types de module de votre thème. Pour les fournisseurs de marketplace, ces icônes sont obligatoires. Il y a deux façons d’ajouter une icône : via le gestionnaire de conception ou l’ILC CMS. Les icônes de module doivent être des fichiers .svg et leur taille ne doit pas dépasser 10 ko. Pour de meilleurs résultats, votre icône doit être simple et n’utiliser qu’une seule couleur. Les icônes qui utilisent plus d’une couleur seront automatiquement converties pour vous. L’icône du module qui s’affiche par défaut est une icône de clé à molette et de pinceau. Pour ajouter une icône à l’aide du gestionnaire de conception : Pour ajouter une icône lors du développement local, ouvrez le fichier meta.json du module et ajoutez ou modifiez la valeur du paramètre icon pour qu’il soit au format SVG à partir du gestionnaire de fichiers. 
// meta.json
{
  "global": false,
  "host_template_types": ["PAGE"],
  "icon": "http://example.com/hubfs/code.svg",
  "label": "Code block",
  "smart_type": "NOT_SMART",
  "is_available_for_new_content": true,
  "inline_help_text": "This module is for code snippets."
}

​
Modification du libellé

​
Transformer en module global

Pour les modules normaux, le contenu de chaque instance d’un module dans une page, un e-mail ou un modèle est indépendant. Pour certains cas d’utilisation, il est utile de pouvoir faire en sorte que toutes les instances d’un module partagent le même contenu. Lors du développement local, vous pouvez rendre un module global en définissant global sur true. Vous pouvez également convertir des modules dans un modèle de glisser-déposer en global via le gestionnaire de conception.

​
Contrôle de l’endroit où un module peut être utilisé

Lors du développement local, vous pouvez contrôler les types de contenu dans lesquels un module peut être utilisé via la propriété hostTemplateTypes. Découvrez-en davantage sur les types de modèles disponibles. Il est également possible de masquer les modules afin qu’ils ne puissent pas être ajoutés directement aux pages en définissant la valeur false pour is_available_for_new_content. Par exemple, cela peut être utile pour les modules conçus pour les menus de navigation et la recherche. Vous pouvez mettre à jour cela dans le gestionnaire de conception en cliquant sur l’option Type de modèle dans la barre latérale droite.
edit-module-template-type

​
Ajout de dépendances CSS et JavaScript

En plus de l’utilisation de module.css et module.js pour ajouter des éléments CSS et JavaScript qui seront ajoutés à toutes les pages qui incluent une instance de module, les dépendances qui sont partagées entre les modules peuvent être jointes à l’aide de css_assets et js_assets. Les chemins peuvent être absolus ou relatifs au fichier meta.json. 
// meta.json
{
  "css_assets": [{ "path": "../path/to/file.css" }],
  "js_assets": [{ "path": "../path/to/file.js" }]
}
Attention : Lorsque vous utilisez des chemins relatifs pour référencer les dépendances, l’exécution de hs fetch --overwrite pour mettre à jour le module pour le développement local remplacera les chemins relatifs par des chemins absolus.
À l’aide du gestionnaire de conception, vous pouvez lier des fichiers CSS et JavaScript à un module à l’aide de la section Fichiers liés dans la barre latérale droite de l’éditeur de module.
edit-module-linked-files

​
Ajouter des catégories et des balises

Vous pouvez affecter des catégories et des balises aux modules pour les organiser dans les outils HubSpot :
  • Catégories : assignez des catégories à un module pour les organiser en groupes au sein de l’interface utilisateur de l’éditeur de contenu. Cela permet aux créateurs de contenu de trouver des modules plus facilement tout en créant du contenu dans HubSpot. Notez ce qui suit à propos des catégories :
    • Un module peut avoir jusqu’à trois catégories, qui sont prédéfinies et ne peuvent pas être personnalisées.
    • Actuellement, les catégories ne sont pas affichées dans l’interface utilisateur de l’éditeur de contenu. Cependant, vous pouvez attribuer des catégories lorsque la catégorisation est disponible dans les éditeurs.
    • Les modules non classés seront disponibles dans une catégorie Tous.
  • Balises : assignez des balises pour organiser les modules dans le gestionnaire de conception. Cela vous permet de trouver des modules plus facilement lors de la création de modèles.
Dans le gestionnaire de conception, vous pouvez attribuer des catégories et des balises à l’aide de la section Filtrer les balises de la barre latérale droite dans l’éditeur de module. Découvrez-en davantage sur les catégories et les balises disponibles ci-dessous.
edit-module-filter-tags
Localement, vous pouvez ajouter des catégories et des balises au fichier meta.json d’un module comme suit : 
// meta.json
{
  "label": "Custom module",
  "categories": ["image_and_video", "commerce"],
  "content_tags": [
    {
      "name": "BUTTONS",
      "source": "USER"
    },
    {
      "name": "CTA",
      "source": "USER"
    }
  ],
  "is_available_for_new_content": true
}

​
Catégories

Le tableau categories d’un module peut contenir jusqu’à trois des catégories suivantes (insensibles à la casse) :
CatégorieDescription
blogModules spécifiques au blog, tels qu’un listing des publications récentes.
body_contentModules formatés pour présenter graphiquement le contenu, comme une galerie d’images.
commerceModules spécifiques au domaine commercial, tels que les cartes de prix.
designModules qui affectent la structure et la mise en page du contenu, tels que les accordéons.
functionalityModules qui incluent des réponses dynamiques ou un comportement sur la page, tels que des menus.
forms_and_buttonsModules qui permettent aux visiteurs du site de saisir et soumettre des données.
mediaModules contenant des éléments tels que des images, des icônes, des vidéos et des bannières.
socialModules spécifiques aux réseaux sociaux, tels que le partage social.
textModules qui ne contiennent que du texte.

​
Balises

Le tableau content_tags d’un module peut contenir l’un des objets de balise de module suivants (sensible à la casse) : Types de contenu :
  • ACCORDION
  • ANIMATION
  • BLOG_POST
  • BUTTONS
  • CODE
  • CTA
  • FEED
  • FORM
  • ICON
  • IMAGE
  • LISTS
  • LOGO
  • MENU
  • RICH_TEXT
  • SLIDER
  • TEXT
  • VIDEO
Fonctions :
  • BANNER
  • BLOG
  • BRANDING
  • CALCULATOR
  • CONVERSION
  • email
  • GALLERY
  • HEADERS
  • INTERACTION
  • LAYOUT
  • MAP
  • MULTIMEDIA
  • NAVIGATION
  • PROGRESS_BAR
  • SEARCH
  • SETTINGS
  • social
  • TRANSLATION