Configurer un module

Last updated:

Lorsque vous créez un module, vous disposez d'un certain nombre d'options qui ont un impact sur l'endroit où le module est visible, la façon dont il est identifié et la façon dont il est modifié.

Lors du développement local, les modules sont stockés sous forme de dossiers avec un suffixe .module. Ces dossiers contiennent les fichiers qui constituent les paramètres du module et le code utilisé pour le restituer. La configuration d'un module est conservée dans le fichier meta.json, tandis que les champs sont configurés séparément dans un fichier fields.json.

La plupart des configurations peuvent également être modifiées à l'aide de l'éditeur de module dans le gestionnaire de conception

Structure du dossier du module affichée localement

À un niveau élevé, vous configurez les options de module localement dans le fichier meta.json, qui peut inclure les propriétés suivantes :

ParameterTypeDescription Default
icon
Chaîne

URL d'une image à utiliser comme icône pour un module.

label
Chaîne

Label utilisé lorsque les modules sont affichés dans les éditeurs de contenu.

module_id
Nombre

Identifiant unique pour le module qui est indépendant du chemin.

is_available_for_new_content
Booléen

La 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
global
Booléen

Indique si le module est global ou non.

false
host_template_types
Tableau

Un 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_assets
Tableau

Un 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_options
Objet

Définissez si le module CSS est restitué de manière asynchrone avec async : true ou false

{"async": false}
js_assets
Tableau

Un 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_options
Objet

Modifie 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_text
Chaîne

Texte 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_language
Chaîne

Lorsque les traductions sont activées, le code de la langue dans laquelle les champs du module ont été écrits à l'origine.

Par exemple, en.

placeholder
Objet

Dé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.
categories
Tableau

Un tableau contenant jusqu'à trois catégories de module.

Par exemple : 

"categories":["FORMS_AND_BUTTONS"]
content_tags
Tableau

Un 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 :

  1. In your HubSpot account, navigate to Marketing > Files and Templates > Design Tools

  2. Use the left sidebar to locate the module you want to edit, then click the module name.
  3. In the right sidebar of the module editor, click the icon next to the module title. 
  4. Upload/select your icon. After publishing your changes, the icon will appear within the page editors and design manager.
edit-module-icon-crop

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é

Le libellé utilisé lorsque les modules sont affichés dans l'éditeur peut être modifié séparément du nom du module. Cela est utile lors du développement local, car vous pouvez avoir un nom qui a du sens pour vous tout en ayant un nom différent pour les créateurs de contenu.

Localement, vous modifiez le paramètre label pour définir le libellé. Dans le gestionnaire de conception, un champ dans l'éditeur de module est présent en dessous du nom du module.

edit-module-label

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égorie Description
blog Modules spécifiques au blog, tels qu'un listing des publications récentes.
body_content Modules formatés pour présenter graphiquement le contenu, comme une galerie d'images.
commerce Modules spécifiques au domaine commercial, tels que les cartes de prix.
design Modules qui affectent la structure et la mise en page du contenu, tels que les accordéons.
functionality Modules qui incluent des réponses dynamiques ou un comportement sur la page, tels que des menus.
forms_and_buttons Modules qui permettent aux visiteurs du site de saisir et soumettre des données.
media Modules contenant des éléments tels que des images, des icônes, des vidéos et des bannières.
social Modules spécifiques aux réseaux sociaux, tels que le partage social.
text Modules 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

Cet article vous a-t-il été utile ?
Ce formulaire est destiné à recueillir les avis sur la documentation pour les développeurs. Si vous souhaitez faire part de votre avis sur les produits HubSpot, veuillez le partager sur le forum des idéesde la communauté.