Types de champ pour les modules et les thèmes

Last updated:

Ajoutez des champs aux modules et aux thèmes pour permettre aux créateurs de contenu de contrôler divers aspects d'une page dans l'éditeur de page. Découvrez ci-dessous tous les champs disponibles pour les modules et les thèmes. Pour plus d'informations sur l'application des champs de module et de thème, y compris les groupes de champs et les champs répétés, consultez la vue d'ensemble des champs de module et de thème.

Propriétés utilisées par tous les champs

Les champs ont tous quelques propriétés en commun. Ces propriétés contrôlent les noms de variables que vous utilisez pour référencer leurs valeurs et leur apparence pour les créateurs de contenu.

// Boolean field { "name" : "is_teaser_img", "label" : "Enable Teaser Image", "required" : false, "locked" : false, "type" : "boolean", "inline_help_text" : "Shows Teaser image when toggled on", "help_text" : "Teaser images are used to help provide visual context to the post.", "default" : false }
Propriétés utilisées par tous les champs
ParameterTypeDescription Default
help_text
String

Texte qui apparaîtra dans l'éditeur via une infobulle pour aider le créateur de contenu.

À utiliser de préférence pour les informations complémentaires, mais non nécessaires à l'utilisation du champ.

none
id
String

Identifiant unique pour un champ. Ceci est généré par HubSpot. Lorsque vous développez localement, vous n'avez pas besoin de spécifier cet identifiant.

inline_help_text
String

Texte d'aide qui sera affiché en ligne sous le libellé du champ (limite de 300 caractères). 

À utiliser de préférence pour les informations nécessaires à l'utilisation du champ.

null
label
String

Le texte que le créateur de contenu voit en décrivant le champ. Peut contenir des espaces.

Rich text field, Date field, etc.
locked
Boolean

Détermine si le champ est modifiable dans l'éditeur de contenu. Si « vrai », le champ n'apparaîtra pas dans l'éditeur de contenu.

false
name
String

Le nom de la variable que vous utiliserez pour vous référer aux valeurs de ce champ. Il s'agit de la variable dans laquelle la valeur du champ est stockée. Elle ne peut pas contenir d'espaces ou de caractères spéciaux.

richtext_field, date_field, etc.
required
Boolean

Détermine si le champ peut être laissé vide dans l'éditeur. Si vrai, le contenu ne sera pas autorisé à être publié sans que ce champ soit rempli.

false
type
String

Le type de champ, voir types de champs ci-dessous pour la documentation sur tous les types de champs.

visibility
Array

Détermine les conditions d'affichage d'un champ.

display_width
String

Permet d'avoir des champs de module côte à côte dans les éditeurs de contenu, plutôt que des champs pleine largeur, si défini sur "half_width". Le champ apparaîtra côte à côte avec le champ suivant dans le fichier fields.json, tant que ce champ est également défini sur "half_width".

N'utilisez pas inline_help_text et help_text de manière interchangeable. 

Demandez-vous plutôt « Ces informations sont-elles nécessaires à l'utilisateur pour terminer une tâche ? »

  • Si la réponse est oui, l'information doit être affichée à l'écran, et inline_help_text convient le mieux.
  • Si ce n'est pas le cas, il est possible d'insérer une info-bulle à l'aide de help_text.

En suivant cette méthode de manière cohérente, vous aidez les utilisateurs à comprendre rapidement l'interface que vous leur proposez.

Alignement

Ce champ permet aux créateurs de contenu de positionner un élément dans un conteneur. Ce champ ne doit pas être utilisé pour l'alignement du texte, car il existe un type de champ spécifique pour cela.

Les champs d'alignement sont pris en charge dans les modules.
Les champs d'alignement ne peuvent être utilisés que comme champs de style.

Champ d'alignement
// alignment field { "name": "img_position", "label": "Position Image", "help_text":"Position the image within it's container.", "required": false, "type": "alignment", "default": { "horizontal_align": "CENTER", "vertical_align": "TOP", } }
Champ de blog
ParamètreTypeDescription Default
default
Object

Objet contenant horizontal_align et vertical_align.

alignment_direction
String

Détermine si seuls les contrôles d'alignement horizontal, vertical ou les deux doivent être affichés. Peut-être :

  • HORIZONTAL
  • VERTICAL
  • LES DEUX
BOTH

Image d'arrière-plan

Ce champ fournit une image d'arrière-plan qui comporte des sous-champs pour la position et la taille de l'arrière-plan. Les champs d'image d'arrière-plan ont une propriété .css qui renvoie une CSS basée sur la valeur du champ. En savoir plus sur la propriété CSS générée.

Les champs d'image d'arrière-plan sont pris en charge dans les modules.
Les champs d'image d'arrière-plan ne peuvent être utilisés que comme champs de style.

Champ d'image d'arrière-plan
// background image field { "name": "bg_image", "label": "Background image", "required": false, "type": "backgroundimage", "default": { "src": "https://example.com/img.png", "background_position": "MIDDLE_CENTER", "background_size": "cover" } }
Champ de blog
ParamètreTypeDescription Default
default
Object

Objet contenant le src de l'image, la position et la taille de l'arrière-plan.

null

Blog

Ce champ permet aux éditeurs de contenu de sélectionner un blog et de vous fournir, à vous, le développeur, l'identifiant du blog. Cette fonction est utile dans des situations telles que l'extraction d'informations importantes pour les blogs présentés dans les modules. Vous pouvez utiliser l'identifiant du blog dans les fonctions HubL de blog pour obtenir des informations telles que les auteurs du blog, les articles de blog récents, les articles de blog récents avec une mention spécifique, etc.

Les champs de blog sont pris en charge dans les modules.

Capture d'écran du champ de blog
// blog field { "name" : "blog", "label" : "Blog", "required" : false, "locked" : false, "type" : "blog", "default" : 1234567890 }
Champ de blog
ParamètreTypeDescription Default
default
"default" / blog id

Indique quel blog est sélectionné par défaut. Ce paramètre accepte les arguments suivants : 'default' ou un ID de blog (disponible dans l'URL du tableau de bord du blog).

null

Booléen

Ce champ permet aux éditeurs de contenu d'activer/désactiver une fonctionnalité. Les booléens ne peuvent être que true ou false. Il est souvent utile de rendre les groupes ou les champs conditionnels sur la base de champs booléens. Si vous pensez avoir besoin de fournir plus de deux états à l'avenir, un champ Choix peut être une meilleure option, car il est plus facilement évolutif en cas de changement de besoins ultérieur.

Les champs booléens sont pris en charge à la fois dans les thèmes et les modules.
Les champs booléens peuvent être utilisés comme champs de style.

Capture d'écran du champ booléen
// Boolean field { "name" : "is_teaser_img", "label" : "Enable Teaser Image", "required" : false, "locked" : false, "type" : "boolean", "display":"checkbox", "inline_help_text" : "Shows Teaser image when toggled on", "help_text" : "Teaser images are used to help provide visual context to the post.", "default" : false }
Champ de blog
ParamètreTypeDescription Default
default
Boolean

Indique si l'état par défaut de ce champ est true ou false.

false
display
String

Choisissez le style d'affichage visuel pour le champ. Peut apparaître comme toggle ou checkbox.

checkbox

Maintenez la cohérence lorsque vous utilisez toggle (bascule) ou checkbox (case à cocher). Si vous ne faites pas attention, vous pouvez créer une interface utilisateur déroutante pour les créateurs de contenu.

Une bascule peut faire sens lorsque la valeur du champ active/désactive l'affichage conditionnel d'autres champs. Un autre cas où une bascule peut être utile est celui où le champ représente un changement majeur dans la conception du module. Les cases à cocher sont utiles pour les petites modifications qui n'ont pas un effet aussi radical sur l'affichage du module, par exemple pour masquer ou afficher de petits éléments individuels.

Bordure

Ce champ fournit aux créateurs de contenu une interface utilisateur permettant de créer une bordure autour d'un élément. Les champs de bordure ont une propriété .css qui renvoie une CSS basée sur la valeur du champ. En savoir plus sur la propriété CSS générée.

Les champs de bordure sont pris en charge dans les modules.
Les champs de bordure ne peuvent être utilisés que comme champs de style.

Capture d'écran du champ du module de bordure dans l'éditeur de page
// Border field { "id" : "styles.border", "name" : "border", "label" : "border", "required" : false, "locked" : false, "allow_custom_border_sides" : false, "type" : "border", "default" : { "top": { "width": { "value": 1, "units": "px" }, "opacity": 100, "style": "solid", "color": "#ffffff" }, "bottom": { "width": { "value": 1, "units": "px" }, "opacity": 100, "style": "solid", "color": "#ffffff" }, "left": null, "right": null } }
Champ de blog
ParamètreTypeDescription Default
default
Boolean

objet avec des clés pour le rayon de bordure, les côtés supérieur, inférieur, gauche et droit.

{}

Choix

Les champs Choix sont en quelque sorte synonymes d'élément <select> et de case d'option. Ils permettent à un créateur de contenu de choisir un élément parmi une liste d'options. Ils peuvent prendre deux formes visuelles dans l'éditeur de page. Vous pouvez les faire apparaître comme un champ de sélection ou des cases d'option. Les options d'un champ de choix peuvent avoir des libellés distincts pour leurs valeurs. Après l'utilisation d'un module dans une page, les libellés des options peuvent encore être modifiés sans impact négatif sur les sites puisque la valeur reste la même. Cependant, si vous changez la valeur, tous les modules qui avaient cette valeur sont dissociés.

Les champs de choix sont pris en charge à la fois dans les thèmes et les modules. Les champs de choix peuvent être utilisés comme champs de style.

choice-field-dropdown
// Choice field { "name" : "img_position", "label" : "Image Position", "required" : false, "locked" : false, "display" : "select", "choices" : [ [ "img--left", "Image Left - Text Right" ], [ "img--right", "Text Left - Image Right" ] ], "type" : "choice", "default" : "img--left" }
Champ booléen
ParamètreTypeDescription Default
choices
Array

Tableau de paires de valeurs et de libellés. Les valeurs sont listées en premier.

[ [ "value 1", "Label 1" ], [ "value 2", "Label 2" ] ]
default
Value

Définit la valeur sélectionnée par défaut dans le tableau de choix.

display
String

Définit la façon dont le champ s'affiche pour les utilisateurs. Les deux options sont "radio" et "select".

"select"

Couleur

Les champs de couleur fournissent une interface de sélection de couleur pour les créateurs de contenu. Ils prennent en charge les couleurs unies ainsi que la transparence. Ils constituent un choix parfait lorsque vous souhaitez donner aux créateurs de contenu le contrôle total des couleurs au sein d'un module.

Les champs de couleur sont pris en charge à la fois dans les thèmes et les modules.
Les champs de couleur peuvent être utilisés comme champs de style.

Champ de couleur

L'option d'opacité est désactivée pour les modules dont email est inclus dans host_template_types.

// color field { "name" : "bg_color", "label" : "Background color", "required" : false, "locked" : false, "type" : "color", "default" : { "color" : "#ff0000", "opacity" : 100 } }
Champ de couleur
ParamètreTypeDescription Default
default
Object

Définit la couleur et l'opacité sélectionnées par défaut.

{ "color" : "#ffffff", "opacity" : 100 }

CTA

Les champs call-to-action (CTA) permettent aux utilisateurs de choisir un CTA à afficher. Les CTA sont essentiellement des boutons ou des liens qui peuvent être suivis. Les créateurs de contenu créent des CTA qui peuvent être utilisés sur l'ensemble d'un site. 

Les champs CTA sont pris en charge dans les modules.
Les champs CTA sont disponibles dans CMS Hub Pro et Entreprise.

Champ call-to-action
// CTA field { "name" : "cta", "label" : "CTA", "required" : false, "locked" : false, "type" : "cta", "default" : null }
Champ CTA
ParamètreTypeDescription Default
default
String

Le CTA sélectionné par défaut. Attend un ID de CTA qui peut être trouvé dans l'URL lors de l'édition d'un CTA dans le Gestionnaire de CTA.

null

Objet du CRM

Les champs d'objets CRM permettent aux utilisateurs de sélectionner une instance individuelle d'un objet CRM à afficher. 

module.fieldname.properties renvoie les propriétés récupérées de cette instance d'objet. Ainsi, vous n'avez pas besoin d'utiliser la fonction crm_object() pour obtenir les données de l'instance d'objet sélectionnée.

module.fieldname.id renvoie l'identifiant de l'instance d'objet.

Les champs d'objets CRM sont pris en charge dans les modules.
Les champs d'objets CRM sont disponibles dans CMS Hub Pro et Entreprise.

Champ d'objet CRM
// fields.json { "name" : "crmobject_field", "label" : "CRM object", "required" : false, "locked" : false, "object_type" : "CONTACT", "properties_to_fetch" : [ ], "type" : "crmobject", "default" : { "id" : 1 } }
Champ d'objet CRM
ParamètreTypeDescription Default
object_type
Obligatoire
String

Type d'objet CRM que l'utilisateur peut choisir. Types d'objets CRM pris en charge

properties_to_fetch
Array

Tableau de noms de propriétés associées au type d'objet sous forme de chaîne. Ex "date_of_birth" est une propriété associée à un contact. Utilisez cette option pour limiter les informations disponibles sur la page à ce dont vous avez besoin.

default
Object

Objet avec l'ID de l'instance de l'objet sélectionné par défaut. ID du contact, ID de la société, etc.

null

Date

Les champs de date offrent une interface de sélection de dates qui permet aux créateurs de contenu de sélectionner facilement une date. Renvoie un horodatage que vous pouvez utiliser dans votre code.

Les champs de date sont pris en charge dans les modules.

Champ de date avec sélecteur de calendrier ouvert
// Date field { "name" : "event_start_date", "label" : "Event Date", "required" : false, "locked" : false, "type" : "date", "default" : 1577854800000 }
Champ de date
ParamètreTypeDescription Default
default
Timestamp

L'horodatage Unix Epoch pour la date et l'heure que vous souhaitez utiliser par défaut. Laissez ce champ vide pour permettre au sélecteur de date et d'heure de lancer le créateur de contenu à la date et à l'heure actuelle du sélecteur.

null

Date et heure

Les champs de date et d'heure offrent une interface de sélection de dates comme le champ de date, ainsi qu'un sélecteur d'heure pour permettre aux créateurs de contenu de sélectionner facilement une date et une heure de la journée. Renvoie un horodatage que vous pouvez utiliser dans votre code.

Les champs de date et d'heure sont pris en charge dans les modules.

Début de l'événement
// Date and time field { "name" : "event_start", "label" : "Event Start", "required" : false, "locked" : false, "type" : "datetime", "default" : 1577854800000 }
Champ de date et d'heure
ParamètreTypeDescription Default
default
Timestamp

L'horodatage Unix Epoch pour la date et l'heure que vous souhaitez utiliser par défaut. Laissez ce champ vide pour permettre au sélecteur de date et d'heure de lancer le créateur de contenu à la date et à l'heure actuelle du sélecteur.

null

Adresse e-mail

Les champs d'adresse e-mail permettent à un utilisateur de sélectionner plusieurs adresses e-mail. Cela pourrait être utilisé pour afficher les informations de contact. Le champ e-mail renvoie un tableau d'adresses e-mail sélectionnées que vous pouvez faire défiler.

Les champs d'e-mails sont pris en charge dans les modules.

email-field
// Email address field { "name" : "emails", "label" : "Email address", "required" : false, "locked" : false, "type" : "email", "default" : null }
Champ d'adresse e-mail
ParamètreTypeDescription Default
default
Array

Tableau de chaînes d'adresses e-mail ["bob@example.com", "dennis@example.com"]

null

Intégrer

Les champs Intégrer permettent à l'utilisateur d'ajouter une URL d'un site compatible oEmbed ou de coller un code d'intégration d'un autre site. Pour en savoir plus sur l'utilisation de oEmbed sur HubSpot, et voir des cas d'utilisation, consultez notre document oEmbed.

Champ d'intégration
// embed field { "name" : "embed_field", "label" : "Embed", "required" : false, "locked" : false, "supported_source_types" : [ "oembed", "html" ], "supported_oembed_types" : [ "photo", "video", "link", "rich" ], "type" : "embed", "default" : { "source_type" : "oembed" } }
Use this table to describe parameters / fields
ParameterTypeDescription Default
supported_source_types
Array

Les types de sources pris en charge pour les URL oEmbed(oembed), le code HTML intégré (html) ou Media Bridge(media_bridge).

["oembed", "html"]
supported_oembed_types
Array

Types d'images oEmbed pris en charge :"photo", "video", "link" et "rich". Ne s'applique pas aux supported_source_types de html

[ "photo", "video", "link", "rich" ]
supported_media_bridge_providers
Array

Tableau d'identifiants de fournisseurs qui déterminent quels fournisseurs Media Bridge sont disponibles pour sélectionner du contenu.

Remarque : Ce paramètre sera également rempli lors de l'installation d'une application Media Bridge Provider

type
String

Ce paramètre est toujours configuré sur "embed"

"embed"
default
Dict

Un tableau contenant le paramètre "source_type". Ce paramètre a une valeur basée sur une chaîne parmi les options fournies dans le paramètre "supported_source_types".

oembed

Fichier

Les champs de fichiers permettent à l'utilisateur de charger un fichier dans le gestionnaire de fichiers ou le gestionnaire de documents, et facilitent l'ajout d'éléments qui se trouvent à ces emplacements. Cela peut être utile pour créer des liens vers des fichiers PDF ou des fichiers d'autres formats. Pour afficher des images sur une page, vous devez utiliser le champ image.

Les champs de fichiers sont pris en charge dans les modules.

Champ de fichier
// Email address field { "name" : "file_field", "label" : "File", "required" : false, "locked" : false, "type" : "file", "picker" : "file", "default" : null }
Champ de fichier
ParamètreTypeDescription Default
default
String

URL de fichier.

null
picker
String

Valeurs acceptables : "file", "document", "image".
Le sélecteur affiche les ressources chargées soit dans le gestionnaire de fichiers, soit dans le gestionnaire de documents, en fonction de ce paramètre.

file

E-mail de suivi

Les champs d'e-mail de suivi permettent au créateur de contenu de désigner l'e-mail qui sera envoyé en réponse à la soumission de formulaire. Cela fonctionne en tandem avec la balise de formulaire HubL, via le paramètre simple_email_campaign_id.

Les champs d'e-mail de suivi sont pris en charge dans les modules.

champ d'e-mail de suivi
// Followup email field { "name" : "followup_email", "label" : "Followup email", "required" : false, "locked" : false, "type" : "followupemail", "default" : null }
Champ d'adresse e-mail
ParamètreTypeDescription Default
default
String

ID d'e-mail

null

Police

Les champs de police offrent aux créateurs de contenu des commandes de base pour le style de police. Les créateurs de contenu peuvent choisir la taille, la couleur, la famille de polices et le format (gras, italique et souligné). Les polices répertoriées sont toutes des polices Google et des polices standards sûres pour le web. 

Les champs de police sont pris en charge à la fois dans les thèmes et les modules. Les champs de police peuvent être utilisés comme champs de style.

Champ de police
// Font field { "name" : "font", "label" : "Font", "required" : false, "locked" : false, "load_external_fonts" : true, "type" : "font", "default" : { "size" : 12, "font":"Merriweather", "font_set":"GOOGLE", "size_unit" : "px", "color" : "#000", "styles" : { } }, "visibility" : { "hidden_subfields" : { "font": true, "size": true } } }

Remarque : La famille de police est déterminée par la combinaison de font et font_set. Vous devez avoir les deux pour charger la police. Lorsque vous héritez de champs, cela signifie que vous devez hériter des deux valeurs.

Champ de police
ParamètreTypeDescription Default
default
Object

Objet police avec des paramètres pour la taille, l'unité de taille, la couleur et les styles pour le gras, l'italique et le soulignement.

{ "size" : 12, "size_unit" : "px", "color" : "#000", "styles" : { } }
load_external_fonts
Boolean

HubSpot charge automatiquement la police web sélectionnée sur la page si la police est sélectionnée et référencée par HubL dans une feuille de style ou dans un module. Mettez cette valeur sur faux, si vous chargez déjà la police sur la page. Ainsi, la police ne sera pas chargée deux fois.

true
visibility
Object

À l'aide de l'objet imbriqué hidden_subfields, vous pouvez définir un booléen pour les commandes du champ Police à masquer. Les sous-champs comprennent : font, size, bold, italic, underline, et color.

variant
String

Si vous utilisez une police Google, la variante de la police que vous souhaitez utiliser. Par exemple, pour utiliser la version 700 d'une police, définissez cette valeur sur "700". Pour utiliser la version italique 400 d'une police, définissez ce paramètre sur "400i".

Formulaire

Les champs de formulaire permettent à un créateur de contenu de concevoir un formulaire dans son compte. Vous pouvez ensuite l'utiliser pour un rendu de formulaire sur une page en utilisant la balise de formulaire HubL

Les champs de formulaire sont pris en charge dans les modules.

formulaire field-Aug-21-2020-08-09-55-35-PM
// Form field { "name" : "form", "label" : "Form", "required" : false, "locked" : false, "type" : "form", "default" : { "form_id" : "f7110408-1935-4ed3-8a8e-293bb1c9d1ec", "response_type" : "inline", "message" : "Thanks for submitting the form.", "gotowebinar_webinar_key" : null, "form_type" : "HUBSPOT" } }
Champ d'adresse e-mail
ParamètreTypeDescription Default
default
Object

Objet pour les formulaires contenant l'identifiant du formulaire, le type de réponse et le message sélectionnés.

{ "response_type" : "inline", "message" : "Thanks for submitting the form." }

Dégradé

Ce champ permet aux créateurs de contenu de créer et de configurer des dégradés. Pour l'instant, les dégradés linéaires prennent en charge jusqu'à 5 arrêts de couleur. Les champs de dégradé ont une propriété .css qui renvoie la CSS basée sur la valeur du champ. En savoir plus sur la propriété CSS générée.

Les champs de dégradé sont pris en charge dans les modules. Les champs de dégradé ne peuvent être utilisés que comme champs de style.

Champ de dégradé
// Gradient field { "name": "bg_gradient", "label": "Background gradient", "help_text": "Sets a gradient behind the content", "required": false, "type": "gradient", "default": { "colors": [{ "color": { "r": 0, "g": 0, "b": 0, "a": 1 } }, { "color": { "r": 255, "g": 255, "b": 255, "a": 1 } }], "side_or_corner": { "verticalSide": "BOTTOM", "horizontalSide": null } } }
Champ d'adresse e-mail
ParamètreTypeDescription Default
default
Object

Objet contenant les paramètres directionnels d'un dégradé ("side_or_corner") et les arrêts de couleur pour le dégradé sous forme de tableau d'objets.

Ligne HubDB

Les champs de ligne HubDB permettent à un créateur de contenu de sélectionner une ligne individuelle (ou des lignes si vous utilisez des champs répétiteurs) dans une table définie. Vous pouvez ensuite utiliser ce champ pour créer des listes, des tableaux, des ressources, etc. définis par l'utilisateur.

Les champs de ligne HubDB sont pris en charge dans les modules.
Les champs de ligne HubDB sont disponibles dans CMS Hub Pro et Entreprise.

hubdb-row-field
// HubDB Row field { "name" : "hubdbrow_field", "label" : "HubDB row", "required" : false, "locked" : false, "table_name_or_id" : "3096859", "columns_to_fetch" : [ "name", "price", "desc" ], "display_columns" : [ "name", "price", "desc" ], "display_format" : "%0 - %1 :::: %2", "type" : "hubdbrow", "default" : { "id" : 4450468943 } }
Use this table to describe parameters / fields
ParameterTypeDescription Default
table_name_or_id
String

Le nom ou l'ID de la table HubDB. Ce champ est obligatoire.

columns_to_fetch
Array

Un tableau de noms de colonnes à extraire de la table. Renverra toutes les colonnes du tableau si vide.

[]
display_columns
Array

Un tableau de noms de colonnes à utiliser dans le libellé de choix. Ne renverra que la première colonne du tableau si vide.

[]
display_format
String

Le format dans lequel vous voulez que les données de colonnes s'affichent dans le sélecteur de lignes de HubDB en utilisant le symbole pour cent suivi d'un nombre pour désigner la colonne.
Ex : %0 (%1) apparaîtrait comme Column0Value (Column1Value)

""
default
Object

Objet contenant "id" pour définir la ligne hubdb par défaut.

{ “id” : null }

Tableau HubDB

Les champs de tableau HubDB permettent à un créateur de contenu de désigner un HubDB dans son compte. Vous pouvez ensuite l'utiliser pour rendre un formulaire sur une page en utilisant la balise de formulaire HubL. Renvoie l'identifiant du tableau, que vous pouvez utiliser avec les fonctions HubL de HubDB.

Les champs de tableau HubDB sont pris en charge dans les modules. Les champs de tableau HubDB sont disponibles dans CMS Hub Pro et Entreprise.

Champ HubDB
// HubDB Table field { "name" : "recipe_table", "label" : "Recipe Table", "required" : false, "locked" : false, "type" : "hubdbtable", "default" : 2010782 }
Champ d'adresse e-mail
ParamètreTypeDescription Default
default
String

ID de tableau HubDB

null

Icône

Les champs d'icônes offrent une interface utilisateur avec sélecteur d'icônes qui permet aux créateurs de contenu d'ajouter plus facilement des icônes à vos modules. Le champ d'icône est préchargé avec les icônes FontAwesome.

Les champs d'icônes sont pris en charge dans les modules. Les champs d'icônes peuvent être utilisés comme champs de style.

champ d'icône
// Icon field { "name" : "icon_field", "label" : "Icon", "required" : false, "locked" : false, "icon_set" : "fontawesome-5.14.0", "type" : "icon", "default" : { "name" : "accessible-icon", "unicode" : "f368", "type" : "REGULAR" } }
Champ d'icône
ParamètreTypeDescription Default
default
Object

Objet icône

icon_set
String

Le jeu d'icônes FontAwesome à utiliser. Les valeurs possibles sont :
fontawesome-5.14.0
fontawesome-5.0.10

fontawesome-5.14.0

Image

Les champs d'image offrent aux créateurs de contenu une interface intuitive pour ajouter des images à un module ou à un thème. Les champs d'image fournissent une interface avec sélecteur de fichiers qui liste les images du gestionnaire de fichiers. Comme les images peuvent être utilisées et affichées de différentes manières, les développeurs peuvent limiter les options de taille disponibles pour le créateur de contenu dans l'interface utilisateur et permettre le chargement différé des images.

Champ d'image

Les champs d'image sont pris en charge dans les modules.
Les images peuvent être utilisées comme champs de style 
Vous ne devez utiliser les champs d'image comme champs de style que si l'image a un caractère purement informatif, qu'elle n'est pas porteuse de sens et qu'elle n'est pas une image de fond. Il s'agit de respecter les meilleures pratiques en matière d'accessibilité.

// Image field { "name" : "image_field", "label" : "Image", "required" : false, "locked" : false, "responsive" : true, "resizable" : true, "show_loading" : false, "type" : "image", "default" : { "size_type" : "exact", "src" : "", "alt" : "image-alt-text", "loading" : "lazy", "width" : 128, "height" : 128, "max_width" : 128, "max_height" : 128 } }
Champ de lien
ParamètreTypeDescription Default
default
Object

Définit les propriétés pour la taille de l'image, le texte alternatif, etc. Peut contenir les propriétés suivantes : 

  • size_type : si l'image est automatiquement ou manuellement dimensionnée :
    • "auto": HubSpot ajustera automatiquement la taille de l'image en fonction de ses dimensions originales.
    • "auto_custom_max" : HubSpot ajustera automatiquement la taille de l'image en fonction des dimensions maximales définies à l'aide des propriétés "max_height" et "max_width".
    • "exact": HubSpot dimensionnera l'image en fonction des dimensions définies à l'aide des propriétés "height" et "width".
  • src : l'URL de l'image par défaut. Doit être un chemin absolu vers une image.
  • alt : le texte alternatif par défaut de l'image.
  • loading : les options de chargement différé de l'image. Peut-être défini comme "disabled" (par défaut), "eager", ou "lazy".
{ "size_type" : "auto", "src" : "", "alt" : null, "loading": "disabled" }
responsive
Boolean

détermine si l'image doit agir de manière réactive ou avoir une hauteur et une largeur fixes.

true
show_loading
Boolean

Détermine si les commandes permettant de choisir le chargement différé de l'image sont affichées dans l'éditeur de page.

false

Lien

Les champs de liens offrent aux créateurs de contenu une interface intuitive pour fournir des liens vers des URL et des adresses e-mail. Pour les liens externes, les créateurs de contenu choisissent "external". Pour les liens d'e-mail, "email address". Enfin, pour le contenu hébergé sur le CMS HubSpot, ils peuvent utiliser "content", qui affiche une liste de toutes les pages et de tous les articles de blog du compte, "file", pour afficher les ressources du fichier, et "blog", pour afficher toutes les listes de blogs du compte. Les champs de liens sont très similaires aux champs d'URL, sauf qu'ils offrent une interface utilisateur pour « ouvrir dans une nouvelle fenêtre » et « indiquer aux moteurs de recherche de ne pas suivre ». Si vous ne voulez pas que les créateurs de contenu aient ce contrôle, utilisez le champ URL.

Les champs de lien sont pris en charge dans les modules.

champ de lien
// Link field { "name" : "link", "label" : "Link", "required" : false, "locked" : false, "supported_types" : [ "EXTERNAL", "CONTENT", "FILE", "EMAIL_ADDRESS", "BLOG" ], "type" : "link", "show_advanced_rel_options" : false, "default" : { "url" : { "content_id" : null, "type" : "EXTERNAL", "href" : "" }, "open_in_new_tab" : false, "no_follow" : false, "sponsored" : false, "user_generated_content" : false } }
Champ de lien
ParamètreTypeDescription Default
default
Object

Objet URL

{ "url" : { "content_id" : null, "type" : "EXTERNAL", "href" : "" }, "open_in_new_tab" : false, "no_follow" : false, "sponsored" : false, "user_generated_content" : false }
supported_types
Array

liste des types de liens que ce champ permet aux créateurs de contenu de sélectionner. Supprimez de la liste les types que vous ne voulez pas que les créateurs de contenu puissent définir.

[ "EXTERNAL", "CONTENT", "FILE", "EMAIL_ADDRESS", "BLOG" ]
show_advanced_rel_options
Boolean

Si les créateurs de contenu peuvent voir les options rel avancées. 

false

Les champs de logo permettent aux créateurs de contenu de spécifier les images de logo à utiliser dans une page, le logo du domaine étant utilisé par défaut. Ceci est utile pour les en-têtes et pieds de page du site qui peuvent contenir le logo de l'entreprise.

Les champs de logo sont pris en charge dans les modules.

champ de logo
// Logo field { "name" : "logo", "label" : "Logo", "required" : false, "locked" : false, "type" : "logo", "default" : { "override_inherited_src" : false, "src" : null, "alt" : null } }
Champ de lien
ParamètreTypeDescription Default
default
Object

Objet logo

{ "override_inherited_src" : false, "src" : null, "alt" : null }

Les champs de menu offrent aux créateurs de contenu une interface intuitive pour créer, modifier et sélectionner un menu de navigation réutilisable sur d'autres pages. Ce champ est idéal pour les menus utilisés sur plusieurs pages, comme la navigation principale, la navigation en bas de page et dans d'autres contenus globaux.  Utilisez ce champ en tandem avec la balise menu ou la fonction menu(), pour un rendu de menu à l'intérieur de votre module.

Pour les menus qu'il n'est pas utile de réutiliser sur d'autres pages, comme un menu de table des matières, utilisez le champ menu simple.

Les champs de menu sont pris en charge dans les modules.

champ de menu
// Menu field { "name" : "menu", "label" : "Menu", "required" : false, "locked" : false, "type" : "menu", "default" : 12345678911 }
Champ de lien
ParamètreTypeDescription Default
default
Integer

L'ID de menu du menu. La valeur par défaut, null, correspond au menu par défaut sous la navigation.

null

Numérique

Les champs numériques offrent aux créateurs de contenu une interface intuitive pour saisir ou ajuster des valeurs numériques et des options. Cette fonction peut être utilisée pour créer des articles basés sur des pourcentages ou tout autre élément pour lequel des nombres sont nécessaires.

Les champs numériques sont pris en charge dans les modules. Les champs numériques peuvent être utilisés comme champs de style.

Champ numérique
// Number field { "name" : "number_field", "label" : "Number", "required" : false, "locked" : false, "display" : "slider", "min" : 1, "max" : 10, "step" : 1, "type" : "number", "prefix": "", "suffix" : "", "default" : null }

Remarque : L'utilisation des paramètres suffixe et préfixe n'a aucun effet sur la valeur numérique du champ. Ils sont simplement destinés à être affichés dans l'éditeur de contenu.

Champ de lien
ParamètreTypeDescription Default
default
Number

Un numéro par défaut à utiliser.

null
prefix
String

Ajouté comme préfixe au champ numérique.

suffix
String

Ajouté comme suffixe au champ du numéro.

Page

Les champs de page fournissent une interface permettant aux créateurs de contenu de sélectionner des pages du site et des pages d'accueil.

La valeur renvoyée par un champ de page est l'identifiant de la page sélectionnée. Lorsqu'elle est utilisée en tandem avec les fonctions content_by_id ou content_by_ids, vous pouvez utiliser les données des pages sélectionnées dans la page actuelle.

Les champs de page sont pris en charge dans les modules.

// Page field { "name" : "page_field", "label" : "Page", "help_text" : "Pulls data from the selected page.", "required" : false, "locked" : false, "placeholder" : "Page to pull from", "type" : "page", "default" : null }
Champ de lien
ParamètreTypeDescription Default
default
Integer

Un identifiant de page par défaut à sélectionner.

null

Texte enrichi

Les champs de texte enrichi offrent aux créateurs de contenu une expérience d'éditeur de texte WYSIWYG. Lorsque la valeur d'un champ de texte enrichi est imprimée, elle l'est au format HTML. Lorsque vous ne souhaitez pas que les créateurs de contenu disposent des droits de mise en forme, utilisez des champs de texte.

Les champs de texte enrichi sont pris en charge dans les modules.

Champ de texte enrichi
// Rich text field { "name" : "description", "label" : "Description", "required" : false, "locked" : false, "type" : "richtext", "default" : null }
Champ de lien
ParamètreTypeDescription Default
default
String

la chaîne de contenu à afficher prend en charge le HTML. 

Remarque : Vous ne pouvez pas utiliser la fonction get_asset_url dans cette propriété par défaut. 

""
enabled_features
Facultatif
Array

Un ensemble d'éléments qui vous permet de configurer la barre d'outils de l'éditeur de texte enrichi et les options disponibles pour les éditeurs de contenu. 

Les champs de menu simple offrent aux créateurs de contenu une interface intuitive pour créer un menu de navigation qui n'est pas réutilisable sur d'autres pages. Pour les menus qui doivent être réutilisables, utilisez le champ de menu. Cela peut être utile pour un menu de table des matières qui renvoie vers des titres de pages très longues, ou pour une liste de liens vers du contenu qui ne fait sens que sur la page en cours.

Les champs de menu simple sont pris en charge dans les modules.

Champ de menu simple
// Simple menu field { "name" : "toc_menu", "label" : "Table of Contents", "required" : false, "locked" : false, "type" : "simplemenu", "default" : [ { "isPublished" : false, "pageLinkId" : null, "pageLinkName" : null, "isDeleted" : null, "categoryId" : null, "subCategory" : null, "contentType" : null, "state" : null, "linkLabel" : "Why is product marketing important?", "linkUrl" : null, "linkParams" : null, "linkTarget" : null, "type" : "NO_LINK", "children" : [ { "isPublished" : false, "pageLinkId" : null, "pageLinkName" : null, "isDeleted" : null, "categoryId" : null, "subCategory" : null, "contentType" : null, "state" : null, "linkLabel" : "Product Marketing Responsibilities", "linkUrl" : "#product-marketing-responsibilities", "linkParams" : null, "linkTarget" : null, "type" : "URL_LINK", "children" : [ ] }, { "isPublished" : false, "pageLinkId" : null, "pageLinkName" : null, "isDeleted" : null, "categoryId" : null, "subCategory" : null, "contentType" : null, "state" : null, "linkLabel" : "1. Identify the buyer personas and target audience for your product.", "linkUrl" : "#step1", "linkParams" : null, "linkTarget" : null, "type" : "URL_LINK", "children" : [ ] }, { "isPublished" : false, "pageLinkId" : null, "pageLinkName" : null, "isDeleted" : null, "categoryId" : null, "subCategory" : null, "contentType" : null, "state" : null, "linkLabel" : "2. Successfully create, manage and carry out your product marketing strategy.", "linkUrl" : "#step2", "linkParams" : null, "linkTarget" : null, "type" : "URL_LINK", "children" : [ ] } ] }, { "isPublished" : false, "pageLinkId" : null, "pageLinkName" : null, "isDeleted" : null, "categoryId" : null, "subCategory" : null, "contentType" : null, "state" : null, "linkLabel" : "How HubSpot can help", "linkUrl" : "https://hubspot.com", "linkParams" : null, "linkTarget" : null, "type" : "URL_LINK", "children" : [ ] } ] }
Champ de lien
ParamètreTypeDescription Default
default
Array of objects

Structure JSON pour le menu et les enfants du menu.

[]

Espacement

Ce champ fournit une interface utilisateur (IU) permettant aux créateurs de contenu de définir le remplissage et la marge. Les champs d'espacement ont une propriété .css qui renvoie la CSS basée sur la valeur du champ. En savoir plus sur la propriété CSS générée.

Les champs d'espacement sont pris en charge dans les modules.
Les champs d'espacement ne peuvent être utilisés que comme champs de style.

capture d'écran du champ de style d'espacement développé dans l'éditeur de page
// Spacing field { "name": "img_spacing", "label": "Spacing around image", "required": false, "type": "spacing", "default": { "padding": { "top": { "value": 10, "units": "px" }, "bottom": { "value": 10, "units": "px" }, "left": { "value": 10, "units": "px" }, "right": { "value": 10, "units": "px" } }, "margin": { "top": { "value": 10, "units": "px" }, "bottom": { "value": 10, "units": "px" } } } }
Champ de lien
ParamètreTypeDescription Default
default
Object

objet contenant un objet remplissage et un objet marge. Pour l'instant, Marge ne prend en charge que les ajustements supérieur et inférieur.

{}

Balise

Les champs de balise fournissent un sélecteur de balises de blog pour les créateurs de contenu. Ce sélecteur de balise renvoie un identifiant de balise de blog qui peut ensuite être utilisé dans les fonctions liées aux balises de blog telles que URL Balise de blog et Articles Balise de blog récente.

Les champs de balise sont pris en charge dans les modules.

champ de balise
// Tag field { "id" : "c3395cd3-8e60-7e47-2f1b-b7ccf4d669c9", "name" : "blog_tag", "label" : "Blog Tag", "required" : false, "locked" : false, "tag_value" : "SLUG", "type" : "tag", "default" : null }
Champ de balise
ParamètreTypeDescription Default
default
String

Identifiant de balise de blog

null

Texte

Les champs de texte offrent aux créateurs de contenu une expérience d'édition de texte simple, sans fonctionnalité de texte enrichi. Les champs de texte s'affichent initialement sur une seule ligne, mais ils peuvent se transformer en zones de texte et prendre en charge plusieurs lignes. Utilisez-les lorsque vous ne voulez pas que les créateurs de contenu contrôlent la mise en forme. Si vous souhaitez autoriser le contrôle de mise en forme, utilisez des champs de texte enrichi.

Les champs de texte sont pris en charge dans les modules.

champ de texte
// Text field { "name" : "product_name", "label" : "Product Name", "required" : false, "locked" : false, "validation_regex" : "", "allow_new_line" : false, "show_emoji_picker" : false, "type" : "text", "default" : "" }
Champ de lien
ParamètreTypeDescription Default
default
String

Chaîne de texte.

""

Alignement du texte

Cette zone permet aux créateurs de contenu d'aligner le contenu du texte dans un conteneur. Ce champ ne doit pas être utilisé pour aligner d'autres ressources, car il existe un type de champ spécifique pour cela.

Les champs d'alignement du texte sont pris en charge dans les modules. Les champs d'alignement du texte ne peuvent être utilisés que comme champs de style.

Champ d'alignement du texte
// text alignment field { "name": "heading_align", "label": "Heading alignment", "required": false, "type": "textalignment", "default": { "text_align": "LEFT" } }
Champ de blog
ParamètreTypeDescription Default
default
Object

Objet contenant horizontal_align et vertical_align.

alignment_direction
String

Détermine si seuls les contrôles d'alignement horizontal, vertical ou les deux doivent être affichés. Peut-être :

  • HORIZONTAL
  • VERTICAL
  • LES DEUX
BOTH

URL

Les champs d'URL offrent une expérience similaire à celle des champs de liens. Fournir une interface utilisateur permettant aux créateurs de contenu d'ajouter des liens. Les champs d'URL, cependant, n'affichent pas d'interface utilisateur pour ouvrir dans une nouvelle fenêtre, ni ne disent aux moteurs de recherche de ne pas suivre. Utilisez ce champ lorsque vous voulez, en tant que développeur, dicter les valeurs de ce champ. Si vous voulez que l'utilisateur ait le contrôle, utilisez plutôt des champs de lien.

Les champs d'URL sont pris en charge dans les modules.

Champ d'URL
// URL field { "name" : "url", "label" : "URL", "required" : false, "locked" : false, "supported_types" : [ "EXTERNAL", "CONTENT", "FILE", "EMAIL_ADDRESS", "BLOG" ], "type" : "url", "default" : { "content_id" : null, "href" : "http://example.com", "type" : "EXTERNAL" } }
Champ de lien
ParamètreTypeDescription Default
default
Object

Objet URL, avec type, href et id de contenu (si le contenu est une page ou un post sur HubSpot)

{ "content_id" : null, "href" : "", "type" : "EXTERNAL" }
supported_types
Array

liste des types de liens que ce champ permet aux créateurs de contenu de sélectionner. Supprimez de la liste les types que vous ne voulez pas que les créateurs de contenu puissent définir.

[ "EXTERNAL", "CONTENT", "FILE", "EMAIL_ADDRESS", "BLOG" ]

Vidéo

Les champs de vidéo permettent aux éditeurs de contenu d'ajouter HubSpot Vidéo au contenu de leurs modules sans avoir à utiliser des champs de texte enrichi.

Champ de vidéo
//Video field { "id" : "ca4a319e-5b58-422e-47ac-49ce1b51b507", "name" : "videoplayer_field", "label" : "Video", "required" : false, "locked" : false, "type" : "videoplayer", "show_advanced_options" : false, "default" : { "player_id" : 32173842991, "height" : 1224, "width" : 1872, "conversion_asset" : { "type" : "CTA", "id" : "c3e4fa03-2c69-461d-b9af-22b2fde86bc7", "position" : "POST" }, "loop_video" : false, "mute_by_default" : false, "autoplay" : false, "hide_control" : false } }
Use this table to describe parameters / fields
ParameterTypeDescription Default
default
Object

Objet vidéo avec des paramètres pour player_id, height, width, size_type, conversion_asset, loop_video, mute_by_default, autoplay, et hide_control.

[]
show_advanced_options
Boolean

Si les créateurs de contenu peuvent voir les options avancées par défaut.

false

paramètres de l'objet conversion_asset

Use this table to describe parameters / fields
ParameterTypeDescription Default
type
String

Accepte soit "FORM", "CTA", ou ""

""
id
String

L'identifiant du formulaire ou du type de CTA

""
position
String

Si la ressource de conversion doit être affichée avant le début de la vidéo ou après sa fin. Accepte soit "PRE" soit "POST".

""

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