Dernière modification : 28 août 2025
Découvrez ci-dessous les modules par défaut fournis par HubSpot pour la création de modèles de pages de site web, d’articles de blog et de pages de listing de blog. Vous trouverez également des modules par défaut qui peuvent être utilisés pour créer des modèles de devis. Lorsque vous développez localement, vous pouvez récupérer un module par défaut spécifique en utilisant le chemin d’accès au module (par exemple : hs fetch @hubspot/linked_image.module). Pour afficher le code d’un module par défaut, vous pouvez afficher et cloner le module dans le dossier @hubspot du gestionnaire de conception. Dans le code, certains modules par défaut utilisent l’ID de compte par défaut 7052064, plutôt que celui appartenant au compte courant.
design-manager-default-modules

Remarque :

Les modules web par défaut sont différents des modules d’e-mail par défaut, qui sont destinés aux modèles d’e-mail. Si vos modèles d’e-mails comprennent l’un des modules web par défaut suivants, vous devez les remplacer par le module spécifique d’e-mail correspondant :
  • cta
  • header
  • linked_image
  • logo
  • post_filter
  • post_listing
  • section_header
  • social_sharing
  • text

Commentaires de blog

Pris en charge dans les articles de blog et les listings de blog.
{% module "blog_comments" path="@hubspot/blog_comments" %}

Abonnement par e-mail au blog

Pris en charge dans les pages, les articles de blog et les listings de blog.
{% module "blog_subscribe" path="@hubspot/blog_subscribe" %}
ParamètreTypeDescriptionPar défaut
select_blogBlogLe blog à utiliser pour le module.
titleChaîneTitre du module (enveloppé dans une balise h3)Abonnez-vous ici !
response_messageTexte enrichiLe message qui s’affiche lors de l’envoi du formulaire.Merci pour votre abonnement !

Articles de blog

Ajoutez ce module aux pages de listing de blogs pour afficher des aperçus d’articles de blog contenant le titre, l’image en vignette, l’auteur ou encore la date de publication à l’aide d’un bouton cliquable qui permet d’accéder à l’article. Ce module par défaut a été créé à l’aide de React, et vous pouvez consulter son code source sur GitHub.

Remarque :

  • Ce module n’est pas accessible depuis le gestionnaire de conception. Le module peut être référencé avec HubL dans des modèles codés et ajouté dans l’éditeur de page de listing de blog.
  • Ce module remplace le module précédent obsolète blog_listing.
{% module "blog_posts"
  path="@hubspot/blog_posts"
  layout="grid",
  columns=4,
  displayForEachListItem=[
   "image",
   "title",
   "authorName",
   "tags",
   "publishDate",
   "description",
   "button"
  ]
%}
ParamètreTypeDescriptionPar défaut
layoutChoixLa mise en page du contenu pour chaque aperçu d’article de blog.
  • grid (par défaut) : aligne les articles dans une grille de base.
  • singleColumn : aligne les articles sur une seule colonne, avec des images en vignette sur leur propre ligne au-dessus du reste du contenu de l’article.
  • sideBySide : aligne les articles dans une colonne avec des images en vignette alignées horizontalement avec le contenu de l’article.
grid
columnsNombreLors de l’utilisation de la mise en page grid, le nombre d’articles par ligne. Peut être 2, 3, ou 4.3
alternateImageBooléenLorsque vous utilisez la mise en page sideBySide, définissez sur true pour aligner les images en vignette à droite et à gauche de l’aperçu de l’article, en alternance.false
fullImageBooléenLorsque vous utilisez les mises en page grid ou singleColumn, définissez ce champ sur true pour faire de l’image en vignette l’arrière-plan de l’aperçu du post.false
displayForEachListItemTableauLe contenu à inclure dans l’aperçu de chaque article de blog. Les choix incluent :
  • image : l’image en vignette de l’article.
  • title : le titre de l’article.
  • authorImage : l’image de l’auteur de l’article.
  • authorName : le nom de l’auteur de l’article.
  • tags : les balises du blog de l’article.
  • publishDate : la date de publication de l’article.
  • description : la méta-description de l’article.
  • button : le bouton « En savoir plus » qui renvoie à l’article de blog.
[ 'image', 'title', 'authorImage', 'authorName', 'tags', 'publishDate', 'description', 'button' ]
buttonTextChaîneLe texte qui s’affiche sur le bouton « En savoir plus », le cas échéant.En savoir plus

Filtre d’article de blog

Pris en charge dans les pages, les listings de blog et les articles de blog.
{% module "post_filter" path="@hubspot/post_filter" %}
ParamètreTypeDescriptionPar défaut
select_blogBlogSélectionnez un blog à afficher. Par défaut, utiliser le blog actuel lorsqu’il est utilisé dans un modèle de blog ou le blog principal lorsqu’il est utilisé ailleurs.
filter_typeChoixType de filtrage des liens à afficher. Les choix comprennent :
  • tag
  • month
  • author
tag
order_byChoixOrdre pour les valeurs des liens de filtre. Les choix comprennent :
  • post_count
  • name
post_count
list_titleTexteUn en-tête H3.Articles par balise
max_linksNombreNombre de liens de filtre à afficher. Laisser vide pour tout afficher.5
expand_link_textTexteTexte à afficher si une valeur à afficher et supérieure à max_links est disponible.Voir tout

Listing d’article de blog

Pris en charge dans les pages, les listings de blog et les articles de blog.

Remarque :

Une nouvelle version de ce module a été publiée fin mars 2024. Découvrez-en davantage sur le nouveau module de listing d’articles par défaut.
{% module "post_listing" path="@hubspot/post_listing" %}
ParamètreTypeDescriptionPar défaut
select_blogBlogSélectionnez un blog à afficher. Par défaut, utiliser le blog actuel lorsqu’il est utilisé dans un modèle de blog ou le blog principal lorsqu’il est utilisé ailleurs.
listing_typeChoixLe type de listing pour vos articles. Les choix comprennent :
  • recent : le plus récent.
  • popular_all_time : le plus populaire de tous les temps.
  • popular_past_year : le plus populaire l’année dernière.
  • popular_past_six_months : le plus populaire les six derniers mois.
  • popular_past_month : le plus populaire le mois dernier.
recent
list_titleTexteUn en-tête H3.Articles récents
max_linksNombreLe nombre maximal d’articles à afficher.5

Bouton

Pris en charge dans les pages, les articles de blog et les listings de blog.
{% module "button" path="@hubspot/button" %}
ParamètreTypeDescriptionPar défaut
linkLienL’URL vers laquelle le bouton redirige.{ "url": { "type": "EXTERNAL", "href": "www.hubspot.com", "content_id": null }, "open_in_new_tab": false, "no_follow": false }
button_textTexteLe texte qui sera affiché sur le bouton.Ajouter un bouton de lien ici
styleObjet
  • override_default_style (Booléen)
  • button_font (Police)
  • button_color (Couleur)
  • text_hover_color (Couleur)
  • button_hover_color (Couleur)
{ "override_default_style": false, "button_font": { "color": "#FFFFFF", "size_unit": "px" }, "button_color": { "color": "#000000", "opacity": 100 }, "text_hover_color": { "color": "#000000", "opacity": 100 }, "button_hover_color": { "color": "#CCCCCC", "opacity": 100 } }

Call-to-action

Pris en charge dans les pages, les listings de blog et les articles de blog.
{% module "cta" path="@hubspot/cta" %}
ParamètreTypeDescription
guidChaîneGUID (identifiant général unique) du CTA.

Supprimer les données

Depuis le 26 mai 2025, ce module est devenu obsolète au profit de la fonctionnalité de page de demande de confidentialité des données. Les informations de référence concernant ce module ont été déplacées dans la documentation sur les modules obsolètes.

Séparateur

Pris en charge dans les pages. Il existe une nouvelle version de ce module disponible pour les comptes créés après le 25 août 2022. En savoir plus sur ce changement.
{% module "divider" path="@hubspot/divider" %}
ParamètreTypeDescriptionPar défaut
heightNombreHauteur en pixels (px) de la ligne de séparation.1
widthNombreLargeur en pourcentage (%) de la ligne de séparation.50
colorCouleurCouleur (hex) et opacité (nombre) de la ligne de séparation.{ "color": "#000000", "opacity": 100 }
line_typeChoixType de ligne. Les choix comprennent :
  • solid
  • dotted
  • dashed
solid
alignmentChoixAlignement horizontal de la ligne de séparation. Les choix comprennent :
  • left
  • center
  • right
center
show_paddingBooléenAfficher/masquer les marges supérieures et inférieures sur le séparateur.false
paddingNombreValeur en pixels (px) des marges en haut et en bas de la ligne de séparation. Option disponible lorsque show_padding est égal à true.5

Télécharger les données

Depuis le 26 mai 2025, ce module est devenu obsolète au profit de la fonctionnalité de page de demande de confidentialité des données. Les informations de référence concernant ce module ont été déplacées dans la documentation sur les modules obsolètes.

Formulaire

Pris en charge dans les pages, les articles de blog et les listings de blog.
{% module "form"
 path="@hubspot/form"
 form={
  "form_id": "9e633e9f-0634-498e-917c-f01e355e83c6",
  "response_type": "redirect",
  "message": "Thanks for submitting the form.",
  "redirect_id": null,
  "redirect_url": "http://www.google.com"
 }
%}
ParamètreTypeDescriptionPar défaut
titleTexteEn-tête H3
formObjetObjet du formulaire comprenant :
  • form_id : ID du formulaire à utiliser
  • response_type : ce que le visiteur verra après avoir soumis le formulaire :
    • inline
    • redirect
  • message : message intraligne si response_type est défini sur inline
  • redirect_id : ID de la page vers laquelle être redirigé si response_type est défini sur redirect.
  • redirect_url : URL vers laquelle être redirigé si response_type est défini sur redirect
{ "form_id": "", "response_type": "redirect", "message": "Thanks for submitting the form.", "redirect_id": null, "redirect_url": "http://www.google.com" }
notifications_are_overriddenBooléenE-mail auquel envoyer une notification de formulaire au lieu des formulaires par défaut.false
notifications_override_email_addressesE-mailListe d’e-mails à envoyer, séparés par des virgules, quand notifications_are_overridden est égal à true.
follow_up_type_simpleBooléenActive l’envoi d’un e-mail de suivi.false
simple_email_for_live_idE-mail de suiviID de l’e-mail de suivi. Disponible lorsque follow_up_type_simple est égal à true.
sfdc_campaignCampagne SalesforceLorsque l’intégration Salesforce est active, l’ID de campagne.

En-tête

Pris en charge dans les pages, les listings de blog et les articles de blog.
{% module "header" path="@hubspot/header" %}
ParamètreTypeDescriptionPar défaut
valueTexteTexte de l’en-tête.Un en-tête clair et percutant
header_tagChoixChoisir un niveau d’en-tête. Les choix comprennent h1 à h6.h1

Espacement horizontal

Pris en charge dans les pages, les listings de blog, les articles de blog et les e-mails.
{% module "horizontal_spacer" path="@hubspot/horizontal_spacer" %}

Icône

Pris en charge dans les pages, les listings de blog et les articles de blog. Les icônes peuvent être extraites des ensembles d’icônes Font Awesome 5.0.10 et 5.14.0.
{% module "icon" path="@hubspot/icon" %}
ParamètreTypeDescriptionPar défaut
nameChaîneLe nom de l’icône."hubspot"
purposeChoixUne option d’accessibilité qui catégorise l’objectif de l’icône pour les lecteurs d’écran. Les valeurs disponibles sont :
  • decorative: ignorées par le lecteur d’écran.
  • semantic: lues par le lecteur d’écran.
"decorative"
titleChaîneUne option d’accessibilité qui attribue un titre à l’icône.
styleChaîneLe type d’icône. Peut être solid, regular, light, thin ou duotone."solid"
unicodeChaîneLa valeur unicode de l’icône.f3b2

Image

Pris en charge dans les pages, les listings de blog et les articles de blog.
{% module "linked_image" path="@hubspot/linked_image" %}
ParamètreTypeDescriptionPar défaut
imgImageObjet image contenant :
  • src : URL de l’image
  • alt : texte alternatif pour l’image
  • loading : les options de chargement asynchrone incluent :
    • disabled
    • lazy
  • width : valeur px
  • height : valeur px
{ "src": "https://static.hubspot.com/final/img/content/email-template-images/placeholder_200x200.png", "alt": "placeholder_200x200", "loading": "disabled", "width": 200, "height": 200 }
linkTexte : lien facultatif pour l’image.
targetBooléenOuvre le lien dans un nouvel onglet.false

Grille d’image

Pris en charge dans les pages, les listings de blog et les articles de blog.
{% module "image_grid" path="@hubspot/image_grid", label="image_grid.module" %}
ParamètreTypeDescriptionPar défaut
slidesObjetObjet contenant des informations pour chaque diapositive. L’objet contient :
  • img : URL de l’image.
  • link_url : URL où la diapositive doit être liée.
  • hover_messages : texte superposé sur l’image au survol.
[ { "show_caption": false, "open_in_new_tab": false } ]
display_modeChoixMode d’affichage de la galerie d’images. Les choix comprennent :
  • standard : curseur standard.
  • thumbnail : navigateur de vignettes.
  • lightbox : galerie de la lightbox.
standard
lightboxRowsNombreNombre de lignes dans la galerie de la Lightbox lorsque display_mode est égal à lightbox.3
loop_slidesBooléenActive la boucle dans les diapositives avec suivant ou précédent quand display_mode est égal à standard ou thumbnail.true
auto_advanceBooléenAvance automatiquement sur la diapositive suivante lorsque display_mode est égal à standard ou thumbnail.true
num_secondsNombreDurée (en secondes) entre l’avancement à la diapositive suivante lorsque display_mode est égal à standard ou thumbnail.5
show_paginationBooléenAffiche les boutons de navigation lorsque display_mode est égal à standard ou thumbnail.true
sizingChoixDéfinit la hauteur des diapositives lorsque display_mode est égal à standard ou thumbnail. Les choix comprennent :
  • static : hauteur fixe.
  • resize : hauteur variable.
static
transitionChoixStyles de transition de diapositive lorsque display_mode est égal à standard ou thumbnail. Les choix sont les suivants :
  • slide : transition par glissage.
  • fade : transition de fondu.
slide
caption_positionChoixPosition des légendes des diapositives lorsque display_mode est égal à standard ou thumbnail. Les choix comprennent :
  • below : toujours garder les légendes sous l’image.
  • superimpose : superposer les légendes au-dessus des images.
below

Galerie d’images

Pris en charge dans les pages, les articles de blog et les listings de blog.
{% module "gallery" path="@hubspot/gallery" %}
ParamètreTypeDescriptionPar défaut
slidesObjetObjet contenant des informations pour chaque diapositive. L’objet contient :
  • img : URL de l’image.
  • show_caption : booléen pour afficher la légende de la diapositive.
  • caption : texte enrichi pour la légende.
  • link_url : URL où la diapositive doit être liée.
  • open_in_new_tab : booléen pour indiquer si le lien doit s’ouvrir dans un nouvel onglet.
[ { "show_caption": false, "open_in_new_tab": false } ]
display_modeChoixMode d’affichage de la galerie d’images. Les choix comprennent :
  • standard : curseur standard.
  • thumbnail : navigateur de vignettes.
  • lightbox : galerie de la lightbox.
standard
lightboxRowsNombreNombre de lignes dans la galerie de la Lightbox lorsque display_mode est égal à lightbox.3
loop_slidesBooléenActive la boucle dans les diapositives avec suivant ou précédent quand display_mode est égal à standard ou thumbnail.true
auto_advanceBooléenAvance automatiquement sur la diapositive suivante lorsque display_mode est égal à standard ou thumbnail.true
num_secondsNombreDurée (en secondes) entre l’avancement à la diapositive suivante lorsque display_mode est égal à standard ou thumbnail.5
show_paginationBooléenAffiche les boutons de navigation lorsque display_mode est égal à standard ou thumbnail.true
sizingChoixDéfinit la hauteur des diapositives lorsque display_mode est égal à standard ou thumbnail. Les choix comprennent :
  • static : hauteur fixe.
  • resize : hauteur variable.
static
transitionChoixStyles de transition de diapositive lorsque display_mode est égal à standard ou thumbnail. Les choix sont les suivants :
  • slide : transition par glissage.
  • fade : transition de fondu.
slide
caption_positionChoixPosition des légendes des diapositives lorsque display_mode est égal à standard ou thumbnail. Les choix comprennent :
  • below : toujours garder les légendes sous l’image.
  • superimpose : superposer les légendes au-dessus des images.
below

Galerie de curseur d’images

Pris en charge dans les pages, les articles de blog et les listings de blog.
{% module "unique_name"
    path="@hubspot/image_slider_gallery",
    slides=[
        {
        "img": {
            "src": "",
            "alt": "Default image alt text"
        },
        "caption": "<strong>1</strong> An optional caption for the image that will be added to the gallery. Enter any descriptive text for this image that you would like visitors to be able to read.",
        "link_url": ""
        },
        {
        "img": {
            "src": "",
            "alt": "Default image alt text"
        },
        "caption": "<strong>2</strong> An optional caption for the image that will be added to the gallery. Enter any descriptive text for this image that you would like visitors to be able to read.",
        "link_url": ""
        }
    ]
    slideshow_settings={
        "slides": {
        "per_page": 1,
        "sizing": "natural",
        "aspect_ratio": "16/9",
        "show_captions": true,
        "caption_position": "below"
        },
        "movement": {
        "transition": "slide",
        "loop_slides": false,
        "auto_advance": false,
        "auto_advance_speed_seconds": 5
        },
        "navigation": {
        "show_main_arrows": true,
        "show_thumbnails": false,
        "show_dots": false
        }
    }
%}
ParamètreTypeDescription
slidesGroupe de champsUn groupe de champs contenant les champs suivants :
  • img : URL de l’image.
  • caption : texte enrichi pour la légende de l’image.
  • link_url : URL à laquelle la diapositive renvoie.
slideshow_settingsGroupe de champsLe groupe de champs des paramètres du curseur d’image. Comprend les groupes de champs suivants :
  • slides : paramètres de diapositives, y compris :
    • per_page : nombre de diapositives par page.
    • sizing : taille de l’image.
    • aspect_ratio : rapport hauteur/largeur de l’image.
    • show_captions : un booléen
  • movement : paramètres de comportement de glissement de l’image.
  • navigation : paramètres de navigation de l’image.
default_textGroupe de champsLes éléments de texte par défaut du module, y compris :
  • default_caption : légende de l’image.
  • default_image_alt_text : texte de l’image.
  • slider_aria_label : libellé aria par défaut du module.
  • arial_label_thumbnails : vignette aria par défaut du module.
  • slider_nav_aria_label : libellé aria par défaut de la navigation du module.
  • prev : texte de la diapositive précédente.
  • next : texte de la diapositive suivante.
  • first : aller au texte de la première diapositive.
  • slideX : aller au texte de la diapositive X.
  • pageX : aller au texte de la diapositive X.
  • play : démarrer la lecture automatique du texte.
  • pause : mettre en pause le texte de lecture automatique.
  • carousel : texte du carrousel.
  • select : texte pour sélectionner une diapositive à afficher.
  • slide : texte de la diapositive.
  • slidelabel : libellé de la diapositive.

Sélecteur de langue

Pris en charge dans les pages.
{% module "language_switcher" path="@hubspot/language_switcher" %}
ParamètreTypeDescriptionPar défaut
display_modeChoixLa langue du texte dans le sélecteur de langue. Les options comprennent :
  • pagelang : les noms des langues s’afficheront dans la langue de la page sur laquelle se trouve le sélecteur.
  • localized : le nom de chaque langue s’affichera dans cette langue.
  • hybrid : une combinaison des deux.
localized
Pris en charge dans les pages, les listings de blog et les articles de blog.
{% module "logo" path="@hubspot/logo" %}
ParamètreTypeDescriptionPar défaut
imgImageObjet image contenant :
  • override_inherited_src : remplace le logo par défaut des paramètres
  • src : URL de l’image
  • alt : texte alternatif du logo
{ "override_inherited_src": false, "src": null, "alt": null }
linkTexteLien facultatif pour le logo. Si aucune URL n’est spécifiée, votre logo sera lié à l’URL du logo définie dans les paramètres de votre marque.
open_in_new_tabBooléenOuvre le lien dans un nouvel onglet.false
suppress_company_nameBooléenMasquer le nom de l’entreprise lorsqu’aucune image n’est sélectionnée.true
heading_levelChoixChoisissez un niveau d’en-tête lorsqu’aucune image n’est sélectionnée et suppress_company_name est égal à false. Les choix comprennent h1 à h6.h1
Une grille personnalisable de conteneurs pour afficher les logos de manière uniforme. Pris en charge dans les pages, les listings de blog et les articles de blog.
{% module "logo grid"
  path="@hubspot/logo_grid"
  group_logos=[
    {
      "logo": {
        "loading": "lazy",
        "alt": "company_logo",
        "src": "https://www.example.com/Logos/color/logo.png"
      }
    },
    {
      "logo": {
        "loading": "lazy",
        "alt": "company2_logo",
        "src": "https://www.example.com/Logos/color/logo2.png"
      }
    },
    {
      "logo": {
        "alt": "lorem-logo",
        "height": 40,
        "loading": "lazy",
        "max_height": 40,
        "max_width": 175,
        "src": "https://www.example.com/Logos/color/logo3.png",
        "width": 175
      }
    }
  ],
  styles={
    "group_logo": {
      "group_background": {
        "aspect_ratio": "1/1",
        "background_color": {
          "color": "#8E7CC3",
          "opacity": 100
        }
      },
      "group_spacing": {
        "padding": {
          "padding": {
            "bottom": {
              "units": "px",
              "value": 75
            },
            "left": {
              "units": "px",
              "value": 75
            },
            "right": {
              "units": "px",
              "value": 75
            },
            "top": {
              "units": "px",
              "value": 75
            }
          }
        }
      },
      "max_logo_height": 85
    },
    "group_logo_grid": {
      "column_count": 3,
      "grid_gap": 54
    }
  }
%}
ParamètreTypeDescription
group_logosTableauUn tableau contenant un objet pour chaque logo de la grille.
logoObjetDans group_logos, un objet pour chaque logo de la grille. Chaque logo peut inclure les paramètres suivants :
  • src : le chemin d’accès au fichier du logo.
  • loading : le comportement de chargement asynchrone du logo.
  • alt : le texte alternatif du logo.
  • height : la hauteur du logo.
  • width : la largeur du logo.
  • max_height : la hauteur maximale du logo.
  • max_width : la largeur maximale du logo.
stylesTableauUn tableau contenant les champs de style qui affectent la disposition de la grille, les conteneurs de logo et les images de logo. Ce tableau contient les groupes de styles suivants :
  • group_logo : les styles qui affectent les conteneurs de logo et les images de logo. Contient les éléments suivants :
    • group_background : styles qui définissent le rapport hauteur/largeur et la couleur d’arrière-plan des conteneurs de la grille. Les rapports hauteur/largeur comprennent : 1/1, 4/3, 16/9.
    • group_spacing : styles qui définissent le remplissage interne du conteneur de logo. Pour les logos plus larges, une valeur de remplissage plus élevée peut réduire la largeur du logo.
    • max_logo_height : la hauteur maximale de chaque logo.
  • group_logo_grid : les styles qui définissent la disposition de la grille, y compris :
    • column_count : le nombre de colonnes dans la grille.
    • grid_gap : l’espacement entre les éléments de la grille.

Réunions

Pris en charge dans les pages, les articles de blog et les listings de blog.
{% module "meetings" path="@hubspot/meetings" %}
ParamètreTypeDescription
meetingRéunionSélectionner un lien de prise de rendez-vous.

Connexion des membres à des réseaux sociaux

Fournit les options de connexion Google et Facebook pour les pages de contrôle d’accès. L’utilisateur doit se connecter avec un compte lié à l’adresse e-mail de sa fiche d’informations d’un contact dans le CRM. Vous pouvez choisir les connexions aux réseaux sociaux à activer. Pris en charge dans les pages de connexion au contrôle d’accès.
{% module "social" path="@hubspot/membership_social_logins",
        clientid=""
        appid=""
        facebook_enabled=true
        google_enabled=true
        %}
Facebook nécessite d’avoir un compte de développeur Facebook et la création d’une application Facebook avec des paramètres de base. Une fois que vous réalisez cette étape, vous transmettrez votre ID d’application au module.Google exige un compte Google et des informations d’identification d’autorisation créées, et une fois que possédez ces informations, vous transmettrez votre ID de client de l’application au module.
ParamètreTypeDescriptionPar défaut
facebook_appidChaîneVotre ID d’application Facebook.
facebook_enabledBooléenActive le bouton de connexion Facebook. facebook_appid est obligatoire.False
google_clientidChaîneVotre identifiant de client Google.
google_enabledBooléenPermet d’activer le bouton de connexion Google. google_clientid est obligatoire.False
Pris en charge dans les pages, les articles de blog et les listings de blog. Vous cherchez à créer votre propre menu personnalisé ? Essayez notre fonction menu().
{% module "menu" path="@hubspot/menu" %}
ParamètreTypeDescriptionPar défaut
idMenuID du menu.
root_typeChoixType de menu avancé. Les choix comprennent :
  • site_root : toujours afficher les pages de premier niveau dans le menu.
  • top_parent : afficher les pages du menu relatives à la section consultée.
  • parent : afficher les pages du menu qui sont liées à la page consultée.
  • breadcrumb : menu de style fil d’Ariane (utilise le flux horizontal).
site_root
max_levelsChoixDétermine le nombre d’arborescences de menu enfant qui peuvent être étendues dans le menu Les choix compris sont de 1 à 102
flowChoixOrientation du menu. Les choix comprennent :
  • horizontal
  • vertical
horizontal
flyoutsBooléenLa fonctionnalité de survol est activée pour les éléments de menu enfants.true

Pied de page

Pris en charge dans les pages, les listings de blog et les articles de blog.
{% module "page_footer" path="@hubspot/page_footer" %}

Invite de mot de passe

Pris en charge dans les pages, les articles de blog et les listings de blog.
{% module "password_prompt" path="@hubspot/password_prompt" %}
ParamètreTypeDescriptionPar défaut
submit_button_textTexteTexte qui apparaît sur le bouton d’envoi.Soumettre
password_placeholderTexteTexte d’espace réservé pour le champ du mot de passe.Mot de passe
bad_password_messageTexte enrichiMessage pour afficher lorsqu’un mot de passe n’est pas saisi correctement.Veuillez ressayer

Outils de paiement

Pris en charge dans les pages, les articles de blog et les listings de blog.
{% module "payments" path="@hubspot/payments" %}
ParamètreTypeDescriptionPar défaut
paymentChaînePour configurer le module afin qu’il utilise un lien de paiement spécifique, incluez l’ID du lien de paiement. Vous pouvez trouver l’ID dans l’URL lorsque vous modifiez le lien de paiement.
checkout_locationChaîne : définissez si le formulaire de paiement s’ouvre dans un nouvel onglet ou dans une superposition. Les valeurs disponibles sont les suivantes :
  • new_tab : ouvre le formulaire de paiement dans un nouvel onglet.
  • overlay : ouvre le formulaire de paiement dans une superposition glissante.
"new_tab"
button_textChaîneDéfinit le texte du bouton de paiement."Checkout"
button_targetChoixIndique si le bouton utilise un lien de paiement HubSpot ou un lien externe. Les choix comprennent :
  • payment_link
  • custom_link
"payment_link"
button_linkLienQuand button_target est défini sur custom_link, il définit la destination du lien externe. Les types pris en charge comprennent :
  • EXTERNAL
  • CONTENT
EXTERNAL

Produit

Affiche un produit de la bibliothèque de produits du compte. Pris en charge dans les pages, les articles de blog et les listings de blog.
{% module
  path="@hubspot/product",
  product={
    "id" : 2124070179
  },
  group_button={
    "button_text" : "Buy",
    "override_product_button" : true,
    "button_override" : {
      "no_follow" : false,
      "open_in_new_tab" : false,
      "sponsored" : false,
      "url" : {
        "href" : "https://www.test.com",
        "type" : "EXTERNAL"
      }
  },
  group_description={
    "description_override" : "Monthly gym membership with access to shared locker facilities.",
    "override_product_description" : true
  },
  group_name={
    "heading_level" : "h3",
    "name_override" : "Gym membership",
    "override_product_name" : true
  },
  group_image={
    "image_override" : {
      "alt" : "360_F_317724775_qHtWjnT8YbRdFNIuq5PWsSYypRhOmalS",
      "height" : 360,
      "loading" : "lazy",
      "src" : "https://2272014.fs1.hubspotusercontent-na1.net/hubfs/2272014/360_F_317724775_qHtWjnT8YbRdFNIuq5PWsSYypRhOmalS.jpg",
      "width" : 640
    },
    "override_product_image" : true
  }
%}
ParamètreTypeDescription
productProduitLe produit à afficher, spécifié par l’ID du produit.
group_buttonGroupe de champsPar défaut, le module inclut un bouton qui dirige les utilisateurs vers l’URL définie du produit. Pour personnaliser la destination du bouton, incluez ce groupe de champs facultatif avec les champs suivants :
  • button_text : une chaîne qui définit le texte du bouton.
  • override_product_button : défini sur true pour remplacer les paramètres de lien de bouton par défaut. Puis, ajoutez un objet button_override. Découvrez-en davantage sur button_override ci-dessous.
button_overrideObjetDans le groupe de champs group_button, cela définit le comportement de l’URL du bouton lorsque override_product_button est défini sur true. Inclut les champs suivants :
  • no_follow : champ booléen pour le comportement du lien no_follow.
  • open_link_in_new_tab : champ booléen pour le comportement ouvert du lien.
  • url : un objet qui spécifie la destination du bouton.
Dans le champ url, vous pouvez définir le type de destination via le champ type, qui prend en charge les types de contenu suivants :
  • EXTERNAL : une URL standard. Inclure l’URL dans un champ href.
  • CONTENT : une page HubSpot. Incluez l’ID de la page dans un champ content_id.
  • PAYMENT : un lien de paiement. Incluez le lien de paiement dans un champ href.
  • EMAIL_ADDRESS : une adresse e-mail. Incluez l’adresse dans un champ href.
group_nameGroupe de champsPar défaut, le module affichera le nom du produit en haut du module sous la forme h3. Pour personnaliser le nom, incluez ce groupe de champs facultatif avec les champs suivants :
  • heading_level : la taille de l’en-tête. Peut être h1 - h6.
  • override_product_name : défini sur true pour spécifier le texte plutôt que le nom du produit.
  • name_override : la chaîne que vous souhaitez afficher en haut du module.
group_descriptionGroupe de champsPar défaut, le module affichera la description de l’ensemble de produits. Pour personnaliser la description, incluez ce groupe de champs facultatif avec les champs suivants :
  • override_product_description : définit sur true pour personnaliser la description du produit.
  • description_override : une chaîne contenant votre nouvelle description.
group_imageGroupe de champsPar défaut, le module affichera l’image définie du produit. Pour personnaliser cette image, incluez ce groupe de champs facultatif avec les champs suivants :
  • override_product_image : défini sur true pour indiquer une nouvelle image.
  • image_override : un objet qui spécifie la nouvelle image, y compris les propriétés suivantes :
    • alt
    • height
    • loading
    • src
    • width

Téléchargement du devis

Pris en charge dans les modèles de devis.
{% module "download" path="@hubspot/quote_download" %}
ParamètreTypeDescriptionPar défaut
button_textChaîneLe texte affiché sur le bouton de téléchargement.Download
download_errorChaîneUn message d’erreur qui s’affiche en cas d’échec du téléchargement.There was a problem downloading the quote. Please try again.

Paiement du devis

Pris en charge dans les modèles de devis.
{% module "payment" path="@hubspot/quote_payment" %}
ParamètreTypeDescriptionPar défaut
heading_textChaîneL’en-tête affiché au-dessus de la section de paiement d’un modèle de devis.Payment
heading_tagChoixLe type d’en-tête utilisé pour afficher heading_text. Les valeurs comprennent : h1, h2, h3, h4, h5, h6.h3
checkoutChaîneLe texte du bouton de paiement.Pay now
needs_signatureChaîneTexte du bouton de chaîne lorsqu’une signature est requise.Le paiement ne peut être effectué car le devis n’est pas signé.
checkout_errorTexte enrichiMessage qui s’affiche en cas d’erreur lors du paiement.Un problème est survenu lors de la configuration du paiement. Veuillez contacter la personne qui vous a envoyé cette facture.
payment_status_errorTexte enrichiMessage qui s’affiche en cas d’erreur lors d’une tentative de paiement.Un problème est survenu lors du chargement du statut du paiement concernant ce devis. Veuillez essayer d’actualiser la page.
paidChaîneUn indicateur de statut de paiement réussi.Paid
payment_processingChaîneUn indicateur de l’état du traitement des paiements.Payment processing

Signature du devis

Pris en charge dans les modèles de devis.
{% module "signature" path="@hubspot/quote_signature" %}
Lorsqu’un devis nécessite une signature électronique, les champs suivants sont disponibles dans un objet esignature :
ParamètreTypeDescriptionPar défaut
pretextTexte enrichiTexte d’explication de la signature électronique.Avant de signer votre devis, un email doit vous être envoyé pour vérifier votre identité. Trouvez votre profil ci-dessous pour demander un e-mail de vérification.
verify_buttonChaîneTexte qui s’affiche sur le bouton de vérification.Vérifier pour signer
failureChaîneTexte d’alerte qui s’affiche lorsque les informations de signature ne peuvent pas être récupérées.Un problème est survenu lors de la récupération des informations sur la signature. Veuillez recharger la page.
verification_sentChaîneIndicateur de statut qui apparaît lorsque la demande de vérification a été envoyée avec succès au signataire du devis.Verification sent
signedStringTexte qui s’affiche lorsque le devis a été signé avec succès.Signé
Lorsqu’un devis nécessite une signature imprimée, les champs suivants sont disponibles dans un objet print_signature :
ParamètreTypeDescriptionPar défaut
headerTexte enrichiTexte affiché en haut de la section de signature.Signature
signatureChaîneTexte qui s’affiche à côté du champ de signature.Signature
dateChaîneTexte qui s’affiche à côté du champ de date.Date
printed_nameChaîneTexte qui s’affiche à côté du champ de nom imprimé.Nom (en majuscules)
countersignatureObjetUn objet contenant du contenu pour la section de contre-signature. Cet objet peut contenir les champs suivants :
  • header : texte qui s’affiche en haut de la section de contre-signature.
  • countersignature : texte qui s’affiche à côté du champ de contre-signature.
  • date : texte qui s’affiche à côté du champ de date.
  • printed_name : texte qui s’affiche à côté du champ de nom imprimé.
Signed

Lignes de produit

Pris en charge dans les modèles de devis. Ce module inclut également le texte par défaut utilisé sur les devis personnalisés.
{% module "module_165350106057652" path="@hubspot/line_items", label="line_items.module" %}
ParamètreTypeDescriptionPar défaut
titleTexteLe titre de la colonne de la ligne de produit.Description de la colonne
use_additional_product_propertyBooléenCase à cocher pour permettre aux utilisateurs de sélectionner des colonnes de lignes de produit supplémentaires à partir des propriétés du produit.False
additional_product_propertiesChoixUne propriété de produit. Les choix comprennent :
  • price : prix de la ligne de produit.
  • item_description : description de la ligne de produit.
  • quantity : nombre de lignes de produit.
  • amount : coût total des lignes de produits.
  • hs_recurring_billing_start_date : date de début de facturation pour les lignes de produits récurrentes.
  • discount : le montant de la remise s’applique à la ligne de produit.
crm_product_propertyPropriété d’objet CRMSélectionnez une propriété de produit à afficher en tant qu’en-tête de colonne de ligne de produit.

Texte enrichi

Pris en charge dans tous les types de modèles.
{% module "rich_text" path="@hubspot/rich_text" %}
ParamètreTypeDescriptionPar défaut
htmlTexte enrichiBloc HTML. ## Something Powerful \n ### Tell The Reader More \n The headline and subheader tells us what you're [offering](https://developers.hubspot.fr/docs\"#\"), and the form header closes the deal. Over here you can explain why your offer is so great it's worth filling out a form for. \n Remember: \n<ul>\n<li>Bullets are great</li>\n<li>For spelling out [benefits](https://developers.hubspot.fr/docs\"#\") and</li>\n<li>Turning visitors into leads.</li>\n</ul>

Listing RSS

Pris en charge dans les pages, les listings de blog et les articles de blog.
{% module "rss_listing" path="@hubspot/rss_listing" %}
ParamètreTypeDescriptionPar défaut
titleTexteUn en-tête H3."Test"
rss_feed_typeChoixType de flux RSS. Les choix comprennent :
  • blog - blog hébergé par HubSpot.
  • external - un flux RSS externe.
blog
rss_urlTexteURL RSS à utiliser lorsque rss_feed_type est égal à external.
content_group_idBlogID du blog à utiliser si rss_feed_type est égal à blog.
topic_idBalise(facultatif) ID de la balise à filtrer quand rss_feed_type est égal à blog.
number_of_itemsNombreLe nombre maximal d’articles à afficher.5
include_featured_imageBooléenInclure l’image en vignette.false
show_authorBooléenAffiche le nom de l’auteur.true
attribution_textTexteTexte qui attribue un auteur à un article. S’affiche lorsque show_author est égal à true."by"
show_detailBooléenAffiche le résumé de l’article.true
limit_to_charsNombreLimite la longueur du texte récapitulatif lorsque show_detail est égal à true.200
click_through_textTexteTexte qui s’affiche pour le lien d’un clic publicitaire à la fin d’un résumé d’article lorsque show_detail est égal à true.En savoir plus
show_dateBooléenAffiche la date de publication.true
publish_date_formatChoixFormat de la date de publication lorsque show_date est égal à true. Les choix comprennent :
  • short (par exemple : 11/06/06 12 h 00)
  • medium (par exemple : le 6 juin 2006 12 h 00 : 00)
  • long (par exemple : le 6 juin 2017 12 h 00 : 00 HAE)
  • MMMM d, yyyy 'at' h:mm a (par exemple : le 6 juin 2006 à 12 h 00)
  • h:mm a 'on' MMMM d, yyyy (par exemple : à 12 h 00 le 6 juin 2006)
short
publish_date_textTexteTexte indiquant le moment où un article a été publié lorsque show_date est égal à true.posté le

Champ de recherche de site

Pris en charge dans les pages, les articles de blog et les listings de blog.
{% module "search_input" path="./local-search_input"
  placeholder="Search"
  include_search_button=true
  results={
   "use_custom_search_results_template": "true",
   "path_id": "77977569400"
  }
%}
ParamètreTypeDescriptionPar défaut
field_labelTexteTexte du libellé du champ de recherche
placeholderTexteTexte d’espace réservé pour le champ de saisie.Recherche
include_search_buttonBooléenInclut un bouton de recherche.false
content_typesObjetLes types de contenu à inclure dans les résultats de recherche. L’objet contient les clés suivantes avec des valeurs booléennes :
  • website_pages
  • landing_pages
  • blog_posts
  • knowledge_articles
{ "website_pages": true, "landing_pages": false, "blog_posts": true, "knowledge_articles": false }
resultsObjetUn objet qui active les contrôles pour l’utilisation d’une page de résultats de recherche personnalisée. Comprend les propriétés suivantes :
  • use_custom_search_results_template (booléen) : si cette propriété est définie sur true, les utilisateurs peuvent sélectionner une page de résultats de recherche personnalisée. La valeur par défaut est false.
  • path_id (chaîne) : l’ID de la page qui sera utilisée pour les résultats de recherche. La page référencée doit contenir le module de résultats de recherche.

Résultats de recherche

Pris en charge dans les pages, les articles de blog et les listings de blog.
{% module "search_results" path="@hubspot/search_results" %}
ParamètreTypeDescriptionPar défaut
display_featured_imagesBooléenAffiche les images en vignette pour les éléments.false

En-tête de section

Pris en charge dans les pages, les listings de blog et les articles de blog.
{% module "section_header" path="@hubspot/section_header" %}
ParamètreTypeDescriptionPar défaut
headerTexteContenu du titre de section.Un en-tête clair et percutant
heading_levelChoixNiveau d’en-tête pour header. Les choix comprennent h1 à h6.h1
subheaderTexteParagraphe du texte du sous-titre pour la section.Un en-tête plus discret
Pris en charge dans les pages, les listings de blog et les articles de blog.
{% module "simple_menu" path="@hubspot/simple_menu" %}
ParamètreTypeDescriptionPar défaut
menu_treeMenu simpleObjet de menu simple.[]
orientationChoixOrientation du menu. Les choix comprennent :
  • horizontal
  • vertical
horizontal

Suivi sur les réseaux sociaux

Ajoutez des liens vers vos profils de réseaux sociaux, avec une réorganisation par glisser-déposer dans l’éditeur de contenu. Insère automatiquement des icônes en fonction de l’URL des réseaux sociaux, mais les icônes peuvent être remplacées. Pris en charge dans les pages, les listings de blog et les articles de blog.
{% module "social_follow" path="@hubspot/social_follow" %}
ParamètreTypeDescriptionPar défaut
linkTexteLe lien de destination pour la page de réseaux sociaux ajouté dans l’éditeur.
open_in_new_windowBooléenLorsqu’il est défini sur false, le lien s’ouvrira dans le même onglet du navigateur.true
is_podcastBooléenDéfini sur true pour afficher une icône « podcast » au lieu d’une icône par défaut ou personnalisée.false
customize_alt_textBooléenPar défaut, un texte alternatif est généré automatiquement. Si défini sur true, vous pouvez remplacer le texte alternatif par défaut par une valeur personnalisée à l’aide du champ aria_label.false
aria-labelChaîneLorsque customize_alt_text est définit sur true, ce champ définit le texte alternatif de l’icône (par exemple : Follow us on Facebook). Ceci est utilisé par les lecteurs d’écran pour décrire l’icône aux utilisateurs malvoyants.False
customize_iconBooléenPar défaut, les icônes sont renseignées automatiquement en fonction de l’URL du lien. Si défini sur true, vous pouvez utiliser le champ custom_icon pour sélectionner l’une des autres icônes fournies (Font Awesome 6.4.2).false
custom_iconIcôneLorsque customize_icon est défini sur true et is_podcast sur false, utilisez ce champ pour spécifier une icône personnalisée à partir de l’ensemble fourni. Les icônes disponibles proviennent de Font Awesome 6.4.2.

Partage sur les réseaux sociaux

Pris en charge dans les pages, les listings de blog et les articles de blog.
{% module "social_sharing" path="@hubspot/social_sharing" %}
Remarque : la variable social_link_url dans la colonne par défaut ci-dessous a la même valeur que le paramètre link.
ParamètreTypeDescriptionPar défaut
linkTexteIl s’agit du lien de destination qui sera raccourci afin de faciliter les partages sur les réseaux sociaux.
facebookObjetObjet contenant :
  • enabled : booléen pour activer l’élément de réseaux sociaux
  • custom_link_format : URL personnalisée pour l’URL de partage de réseaux sociaux
{ "enabled": false, "custom_link_format": "http://www.facebook.com/share.php?u={{ social_link_url }}" }
twitterObjetObjet contenant :
  • enabled : booléen pour activer l’élément de réseaux sociaux
  • custom_link_format : URL personnalisée pour l’URL de partage sur les réseaux sociaux
{ “enabled”: false, “custom_link_format”: “https://twitter.com/intent/tweet?original_referer=\{\{ social_link_url }}&url={{ social_link_url }}&source=tweetbutton&text={{ social_page_title|urlencode }}” }
linkedinObjetObjet contenant :
  • enabled : booléen pour activer l’élément de réseaux sociaux
  • custom_link_format : URL personnalisée pour l’URL de partage de réseaux sociaux
{ "enabled": false, "custom_link_format": "http://www.linkedin.com/shareArticle?mini=true&url={{ social_link_url }}" }
pinterestObjetObjet contenant :
  • enabled : booléen pour activer l’élément de réseaux sociaux
  • custom_link_format : URL personnalisée pour l’URL de partage de réseaux sociaux.
  • pinterest_media : objet d’image qui comprend :
    • src : URL d’image.
    • alt : texte alternatif pour l’image.
{ "enabled": false, "custom_link_format": "http://pinterest.com/pin/create/button/?url={{ social_link_url }}&media={{ pinterest_media }}", "pinterest_media": { "src": "", "alt": null } }
emailObjetObjet contenant :
  • enabled : booléen pour activer l’élément de réseaux sociaux
  • custom_link_format : URL personnalisée pour l’URL de partage de réseaux sociaux
{ "enabled": false, "custom_link_format": "mailto:?subject=Check out {{ social_link_url }} &body=Check out {{ social_link_url }}" }

Carte mise en onglet

Pris en charge dans les pages, les listings de blog et les articles de blog.
{% module
  path="@hubspot/tabbed_card",
  tabs=[
   {
    "content" : "<p>This is the descriptive text contained in tab 1.</p>",
    "tab_label" : "Tab 1 label"
   },
   {
    "content" : "<p>This is the descriptive text contained in tab 2.</p>",
    "tab_label" : "Tab 2 label"
   }
  ],
  fixed_height=false
%}
ParamètreTypeDescriptionPar défaut
tabsGroupe de champsUn groupe de champs qui contient le libellé de chaque onglet et le contenu textuel de chaque onglet. Contient les champs suivants :
  • tab_label : le libellé de l’onglet.
  • content : le contenu en texte enrichi de l’onglet.
"Some additional information in one line"
fixed_heightBooléenPar défaut, les onglets seront définis à une hauteur fixe afin que la hauteur du conteneur reste la même lorsque vous passez d’un onglet à l’autre. Vous pouvez définir ceci sur false si vous souhaitez que la hauteur du conteneur de cartes mis en onglet soit basée sur le contenu de l’onglet actif.False

Une ligne de texte

Pris en charge dans les pages, les listings de blog et les articles de blog.
{% module "text" path="@hubspot/text" %}
ParamètreTypeDescriptionPar défaut
valueTexteAjoutez votre texte à ce paramètre.Informations supplémentaires dans une ligne

Vidéos

Pris en charge dans les pages, les listings de blog et les articles de blog.
{% module "video" path="@hubspot/video" %}
ParamètreTypeDescriptionPar défaut
video_typeChoixType de vidéo. Les choix comprennent :
  • embed : code intégré d’une source externe.
  • hubspot_video : vidéo hébergée par HubSpot.
embed
hubspot_videoLecteur vidéoVidéo hébergée par HubSpot. Utilisé lorsque video_type est égal à hubspot_video.
embed_fieldIntégrerPrend en charge les types d’intégration :
  • oembed
    • video : URL pour la vidéo.
  • html : code d’intégration pour la vidéo.
oembed_thumbnailImageRemplace l’image miniature oembed lorsque video_type est égal à embed et embed_field est égal à oembed.
style_optionsObjetObjet contenant oembed_thumbnail_play_button_color - Champ de couleur.{"oembed_thumbnail_play_button_color":"#ffffff"}
placeholder_fieldsObjetObjet contenant :
  • placeholder_title : champ de texte
  • placeholder_description : champ de texte.
{"placeholder_title":"No video selected", "placeholder_description":"Select a video type in the sidebar."}

Intégrer une vidéo (page de destination)

Pris en charge dans les pages.
{% module "video_embed_lp" path="@hubspot/video_embed_lp" %}
ParamètreTypeDescriptionPar défaut
urlTexteURL pour la vidéo. Les URL de Vimeo et YouTube sont prises en charge."https://www.youtube.com/watch?v=X1Rr5BFO5rg"
is_full_widthBooléenDéfinit la vidéo en pleine largeur (true) ou définit manuellement la largeur et la hauteur (false).true
max_widthNombreLargeur maximale (px)800
max_heightNombreHauteur maximale (px)450

Lien WhatsApp

Pris en charge dans les pages, les articles de blog et les pages de listing de blog. Nécessite un canal WhatsApp connecté.
{% module "whatsapp_link" path="@hubspot/whatsapp_link", label="whatsapp_link" %}
ParamètreTypeDescriptionPar défaut
whatsapp_numberURLSélectionne l’un des canaux WhatsApp connectés au compte.
optin_textChoixLe texte d’inscription et de désinscription.
whatsapp_displayChoixSélectionne si le bouton affiche du texte, une icône WhatsApp ou les deux. Les choix comprennent :
  • text_and_icon
  • text
  • icon
text_and_icon
icon_positionChoixLa position de l’icône sur le bouton. Les choix comprennent left et right.left
button_textChaîneLe texte du bouton.Chat on WhatsApp
whatsapp_icon_titleChaîneLe texte de l’icône pour les lecteurs d’écran.WhatsApp Icon