Dernière modification : 8 octobre 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.
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ètre | Type | Description | Par défaut |
---|
select_blog | Blog | Le blog à utiliser pour le module. | |
title | Chaîne | Titre du module (enveloppé dans une balise h3) | Abonnez-vous ici ! |
| | | |
response_message | Texte enrichi | Le 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ètre | Type | Description | Par défaut |
---|
layout | Choix | La 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 |
columns | Nombre | Lors de l’utilisation de la mise en page grid , le nombre d’articles par ligne. Peut être 2 , 3 , ou 4 . | 3 |
alternateImage | Booléen | Lorsque 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 |
fullImage | Booléen | Lorsque 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 |
displayForEachListItem | Tableau | Le 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' ] |
buttonText | Chaîne | Le 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ètre | Type | Description | Par défaut |
---|
select_blog | Blog | Sé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_type | Choix | Type de filtrage des liens à afficher. Les choix comprennent : | tag |
order_by | Choix | Ordre pour les valeurs des liens de filtre. Les choix comprennent : | post_count |
list_title | Texte | Un en-tête H3. | Articles par balise |
max_links | Nombre | Nombre de liens de filtre à afficher. Laisser vide pour tout afficher. | 5 |
expand_link_text | Texte | Texte à 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.
{% module "post_listing" path="@hubspot/post_listing" %}
Paramètre | Type | Description | Par défaut |
---|
select_blog | Blog | Sé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_type | Choix | Le 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_title | Texte | Un en-tête H3. | Articles récents |
max_links | Nombre | Le 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ètre | Type | Description | Par défaut |
---|
link | Lien | L’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_text | Texte | Le texte qui sera affiché sur le bouton. | Ajouter un bouton de lien ici |
| | | |
style | Objet | 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ètre | Type | Description |
---|
guid | Chaîne | GUID (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ètre | Type | Description | Par défaut |
---|
height | Nombre | Hauteur en pixels (px) de la ligne de séparation. | 1 |
width | Nombre | Largeur en pourcentage (%) de la ligne de séparation. | 50 |
color | Couleur | Couleur (hex) et opacité (nombre) de la ligne de séparation. | { "color": "#000000", "opacity": 100 } |
line_type | Choix | Type de ligne. Les choix comprennent : | solid |
alignment | Choix | Alignement horizontal de la ligne de séparation. Les choix comprennent : | center |
show_padding | Booléen | Afficher/masquer les marges supérieures et inférieures sur le séparateur. | false |
padding | Nombre | Valeur 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.
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ètre | Type | Description | Par défaut |
---|
title | Texte | En-tête H3 | |
form | Objet | Objet du formulaire comprenant :form_id : ID du formulaire à utiliserresponse_type : ce que le visiteur verra après avoir soumis le formulaire :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_overridden | Booléen | E-mail auquel envoyer une notification de formulaire au lieu des formulaires par défaut. | false |
notifications_override_email_addresses | E-mail | Liste d’e-mails à envoyer, séparés par des virgules, quand notifications_are_overridden est égal à true . | |
follow_up_type_simple | Booléen | Active l’envoi d’un e-mail de suivi. | false |
simple_email_for_live_id | E-mail de suivi | ID de l’e-mail de suivi. Disponible lorsque follow_up_type_simple est égal à true . | |
sfdc_campaign | Campagne Salesforce | Lorsque 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ètre | Type | Description | Par défaut |
---|
value | Texte | Texte de l’en-tête. | Un en-tête clair et percutant |
header_tag | Choix | Choisir 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ètre | Type | Description | Par défaut |
---|
name | Chaîne | Le nom de l’icône. | "hubspot" |
purpose | Choix | Une 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" |
title | Chaîne | Une option d’accessibilité qui attribue un titre à l’icône. | |
style | Chaîne | Le type d’icône. Peut être solid , regular , light , thin ou duotone . | "solid" |
unicode | Chaîne | La 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ètre | Type | Description | Par défaut |
---|
img | Image | Objet image contenant :src : URL de l’imagealt : texte alternatif pour l’imageloading : les options de chargement asynchrone incluent :width : valeur pxheight : 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 } |
link | Texte | : lien facultatif pour l’image. | |
target | Booléen | Ouvre 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ètre | Type | Description | Par défaut |
---|
slides | Objet | Objet 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_mode | Choix | Mode d’affichage de la galerie d’images. Les choix comprennent : standard : curseur standard.thumbnail : navigateur de vignettes.lightbox : galerie de la lightbox.
| standard |
lightboxRows | Nombre | Nombre de lignes dans la galerie de la Lightbox lorsque display_mode est égal à lightbox . | 3 |
loop_slides | Booléen | Active la boucle dans les diapositives avec suivant ou précédent quand display_mode est égal à standard ou thumbnail . | true |
auto_advance | Booléen | Avance automatiquement sur la diapositive suivante lorsque display_mode est égal à standard ou thumbnail . | true |
num_seconds | Nombre | Durée (en secondes) entre l’avancement à la diapositive suivante lorsque display_mode est égal à standard ou thumbnail . | 5 |
show_pagination | Booléen | Affiche les boutons de navigation lorsque display_mode est égal à standard ou thumbnail . | true |
sizing | Choix | Définit la hauteur des diapositives lorsque display_mode est égal à standard ou thumbnail . Les choix comprennent :static : hauteur fixe.resize : hauteur variable.
| static |
transition | Choix | Styles 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_position | Choix | Position 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ètre | Type | Description | Par défaut |
---|
slides | Objet | Objet 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_mode | Choix | Mode d’affichage de la galerie d’images. Les choix comprennent : standard : curseur standard.thumbnail : navigateur de vignettes.lightbox : galerie de la lightbox.
| standard |
lightboxRows | Nombre | Nombre de lignes dans la galerie de la Lightbox lorsque display_mode est égal à lightbox . | 3 |
loop_slides | Booléen | Active la boucle dans les diapositives avec suivant ou précédent quand display_mode est égal à standard ou thumbnail . | true |
auto_advance | Booléen | Avance automatiquement sur la diapositive suivante lorsque display_mode est égal à standard ou thumbnail . | true |
num_seconds | Nombre | Durée (en secondes) entre l’avancement à la diapositive suivante lorsque display_mode est égal à standard ou thumbnail . | 5 |
show_pagination | Booléen | Affiche les boutons de navigation lorsque display_mode est égal à standard ou thumbnail . | true |
sizing | Choix | Définit la hauteur des diapositives lorsque display_mode est égal à standard ou thumbnail . Les choix comprennent :static : hauteur fixe.resize : hauteur variable.
| static |
transition | Choix | Styles 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_position | Choix | Position 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ètre | Type | Description |
---|
slides | Groupe de champs | Un 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_settings | Groupe de champs | Le 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_text | Groupe de champs | Les é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ètre | Type | Description | Par défaut |
---|
display_mode | Choix | La 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 |
Logo
Pris en charge dans les pages, les listings de blog et les articles de blog.
{% module "logo" path="@hubspot/logo" %}
Paramètre | Type | Description | Par défaut |
---|
img | Image | Objet image contenant :override_inherited_src : remplace le logo par défaut des paramètressrc : URL de l’imagealt : texte alternatif du logo
| { "override_inherited_src": false, "src": null, "alt": null } |
link | Texte | Lien 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_tab | Booléen | Ouvre le lien dans un nouvel onglet. | false |
suppress_company_name | Booléen | Masquer le nom de l’entreprise lorsqu’aucune image n’est sélectionnée. | true |
heading_level | Choix | Choisissez 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 |
Grille de logo
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ètre | Type | Description |
---|
group_logos | Tableau | Un tableau contenant un objet pour chaque logo de la grille. |
logo | Objet | Dans 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.
|
styles | Tableau | Un 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ètre | Type | Description |
---|
meeting | Réunion | Sé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
%}
Paramètre | Type | Description | Par défaut |
---|
facebook_appid | Chaîne | Votre ID d’application Facebook. | |
facebook_enabled | Booléen | Active le bouton de connexion Facebook. facebook_appid est obligatoire. | False |
google_clientid | Chaîne | Votre identifiant de client Google. | |
google_enabled | Booléen | Permet 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ètre | Type | Description | Par défaut |
---|
id | Menu | ID du menu. | |
root_type | Choix | Type 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_levels | Choix | Détermine le nombre d’arborescences de menu enfant qui peuvent être étendues dans le menu Les choix compris sont de 1 à 10 | 2 |
flow | Choix | Orientation du menu. Les choix comprennent : | horizontal |
flyouts | Booléen | La 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ètre | Type | Description | Par défaut |
---|
submit_button_text | Texte | Texte qui apparaît sur le bouton d’envoi. | Soumettre |
password_placeholder | Texte | Texte d’espace réservé pour le champ du mot de passe. | Mot de passe |
bad_password_message | Texte enrichi | Message 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ètre | Type | Description | Par défaut |
---|
payment | Chaîne | Pour 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_location | Chaî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_text | Chaîne | Définit le texte du bouton de paiement. | "Checkout" |
button_target | Choix | Indique si le bouton utilise un lien de paiement HubSpot ou un lien externe. Les choix comprennent : | "payment_link" |
button_link | Lien | Quand button_target est défini sur custom_link , il définit la destination du lien externe. Les types pris en charge comprennent : | 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ètre | Type | Description |
---|
product | Produit | Le produit à afficher, spécifié par l’ID du produit. |
group_button | Groupe de champs | Par 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_override | Objet | Dans 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_name | Groupe de champs | Par 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_description | Groupe de champs | Par 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_image | Groupe de champs | Par 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 :
|
Téléchargement du devis
Pris en charge dans les modèles de devis.
{% module "download" path="@hubspot/quote_download" %}
Paramètre | Type | Description | Par défaut |
---|
button_text | Chaîne | Le texte affiché sur le bouton de téléchargement. | Download |
download_error | Chaîne | Un 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ètre | Type | Description | Par défaut |
---|
heading_text | Chaîne | L’en-tête affiché au-dessus de la section de paiement d’un modèle de devis. | Payment |
heading_tag | Choix | Le type d’en-tête utilisé pour afficher heading_text . Les valeurs comprennent : h1 , h2 , h3 , h4 , h5 , h6 . | h3 |
checkout | Chaîne | Le texte du bouton de paiement. | Pay now |
needs_signature | Chaîne | Texte du bouton de chaîne lorsqu’une signature est requise. | Le paiement ne peut être effectué car le devis n’est pas signé. |
checkout_error | Texte enrichi | Message 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_error | Texte enrichi | Message 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. |
| | | |
paid | Chaîne | Un indicateur de statut de paiement réussi. | Paid |
payment_processing | Chaîne | Un 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ètre | Type | Description | Par défaut |
---|
pretext | Texte enrichi | Texte 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_button | Chaîne | Texte qui s’affiche sur le bouton de vérification. | Vérifier pour signer |
| | | |
failure | Chaîne | Texte 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_sent | Chaîne | Indicateur de statut qui apparaît lorsque la demande de vérification a été envoyée avec succès au signataire du devis. | Verification sent |
signed | String | Texte 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ètre | Type | Description | Par défaut |
---|
header | Texte enrichi | Texte affiché en haut de la section de signature. | Signature |
signature | Chaîne | Texte qui s’affiche à côté du champ de signature. | Signature |
date | Chaîne | Texte qui s’affiche à côté du champ de date. | Date |
printed_name | Chaîne | Texte qui s’affiche à côté du champ de nom imprimé. | Nom (en majuscules) |
| | | |
countersignature | Objet | Un 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ètre | Type | Description | Par défaut |
---|
title | Texte | Le titre de la colonne de la ligne de produit. | Description de la colonne |
| | | |
use_additional_product_property | Booléen | Case à 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_properties | Choix | Une 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_property | Propriété d’objet CRM | Sé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ètre | Type | Description | Par défaut |
---|
html | Texte enrichi | Bloc 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> |
Pris en charge dans les pages, les listings de blog et les articles de blog.
{% module "rss_listing" path="@hubspot/rss_listing" %}
Paramètre | Type | Description | Par défaut |
---|
title | Texte | Un en-tête H3. | "Test" |
rss_feed_type | Choix | Type de flux RSS. Les choix comprennent :blog - blog hébergé par HubSpot.external - un flux RSS externe.
| blog |
rss_url | Texte | URL RSS à utiliser lorsque rss_feed_type est égal à external . | |
content_group_id | Blog | ID du blog à utiliser si rss_feed_type est égal à blog . | |
topic_id | Balise | (facultatif) ID de la balise à filtrer quand rss_feed_type est égal à blog . | |
number_of_items | Nombre | Le nombre maximal d’articles à afficher. | 5 |
include_featured_image | Booléen | Inclure l’image en vignette. | false |
show_author | Booléen | Affiche le nom de l’auteur. | true |
attribution_text | Texte | Texte qui attribue un auteur à un article. S’affiche lorsque show_author est égal à true . | "by" |
show_detail | Booléen | Affiche le résumé de l’article. | true |
limit_to_chars | Nombre | Limite la longueur du texte récapitulatif lorsque show_detail est égal à true . | 200 |
click_through_text | Texte | Texte 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_date | Booléen | Affiche la date de publication. | true |
publish_date_format | Choix | Format 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_text | Texte | Texte 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ètre | Type | Description | Par défaut |
---|
field_label | Texte | Texte du libellé du champ de recherche | |
placeholder | Texte | Texte d’espace réservé pour le champ de saisie. | Recherche |
include_search_button | Booléen | Inclut un bouton de recherche. | false |
content_types | Objet | Les 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 } |
results | Objet | Un 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ètre | Type | Description | Par défaut |
---|
display_featured_images | Booléen | Affiche 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ètre | Type | Description | Par défaut |
---|
header | Texte | Contenu du titre de section. | Un en-tête clair et percutant |
heading_level | Choix | Niveau d’en-tête pour header . Les choix comprennent h1 à h6 . | h1 |
subheader | Texte | Paragraphe 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ètre | Type | Description | Par défaut |
---|
menu_tree | Menu simple | Objet de menu simple. | [] |
orientation | Choix | Orientation du menu. Les choix comprennent : | 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ètre | Type | Description | Par défaut |
---|
link | Texte | Le lien de destination pour la page de réseaux sociaux ajouté dans l’éditeur. | |
open_in_new_window | Booléen | Lorsqu’il est défini sur false , le lien s’ouvrira dans le même onglet du navigateur. | true |
is_podcast | Booléen | Défini sur true pour afficher une icône « podcast » au lieu d’une icône par défaut ou personnalisée. | false |
customize_alt_text | Booléen | Par 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-label | Chaîne | Lorsque 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_icon | Booléen | Par 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_icon | Icône | Lorsque 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ètre | Type | Description | Par défaut |
---|
link | Texte | Il s’agit du lien de destination qui sera raccourci afin de faciliter les partages sur les réseaux sociaux. | |
facebook | Objet | Objet contenant :enabled : booléen pour activer l’élément de réseaux sociauxcustom_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 }}" } |
twitter | Objet | Objet contenant :enabled : booléen pour activer l’élément de réseaux sociauxcustom_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 }}” } |
linkedin | Objet | Objet contenant :enabled : booléen pour activer l’élément de réseaux sociauxcustom_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 }}" } |
pinterest | Objet | Objet contenant :enabled : booléen pour activer l’élément de réseaux sociauxcustom_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 } } |
email | Objet | Objet contenant :enabled : booléen pour activer l’élément de réseaux sociauxcustom_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ètre | Type | Description | Par défaut |
---|
tabs | Groupe de champs | Un 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_height | Booléen | Par 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ètre | Type | Description | Par défaut |
---|
value | Texte | Ajoutez 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ètre | Type | Description | Par défaut |
---|
video_type | Choix | Type 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_video | Lecteur vidéo | Vidéo hébergée par HubSpot. Utilisé lorsque video_type est égal à hubspot_video . | |
embed_field | Intégrer | Prend en charge les types d’intégration :oembed video : URL pour la vidéo.
html : code d’intégration pour la vidéo.
| |
oembed_thumbnail | Image | Remplace l’image miniature oembed lorsque video_type est égal à embed et embed_field est égal à oembed . | |
style_options | Objet | Objet contenant oembed_thumbnail_play_button_color - Champ de couleur. | {"oembed_thumbnail_play_button_color":"#ffffff"} |
placeholder_fields | Objet | Objet contenant :placeholder_title : champ de texteplaceholder_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ètre | Type | Description | Par défaut |
---|
url | Texte | URL pour la vidéo. Les URL de Vimeo et YouTube sont prises en charge. | "https://www.youtube.com/watch?v=X1Rr5BFO5rg" |
is_full_width | Booléen | Définit la vidéo en pleine largeur (true ) ou définit manuellement la largeur et la hauteur (false ). | true |
max_width | Nombre | Largeur maximale (px) | 800 |
max_height | Nombre | Hauteur 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ètre | Type | Description | Par défaut |
---|
whatsapp_number | URL | Sélectionne l’un des canaux WhatsApp connectés au compte. | |
optin_text | Choix | Le texte d’inscription et de désinscription. | |
whatsapp_display | Choix | Sélectionne si le bouton affiche du texte, une icône WhatsApp ou les deux. Les choix comprennent : | text_and_icon |
icon_position | Choix | La position de l’icône sur le bouton. Les choix comprennent left et right . | left |
button_text | Chaîne | Le texte du bouton. | Chat on WhatsApp |
whatsapp_icon_title | Chaîne | Le texte de l’icône pour les lecteurs d’écran. | WhatsApp Icon |