Champs de module et de thème

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 ainsi que leurs propriétés disponibles. 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

Tous les champs partagent un ensemble de propriétés communes. Il s’agit de champs généraux, tels que le nom du champ ou le texte d’aide qui s’affiche pour les créateurs de contenu utilisant le champ du module ou du thème.

{
  "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
  "alias_mapping": {
    "property_aliases_paths": {
      "is_teaser_img": ["old_boolean_field_name"]
    }
  }
}

Paramètre	Type	Description	Par défaut
`name`	Chaîne	Le nom du champ, auquel vous ferez référence lors de l’incorporation du champ et de ses valeurs dans le module ou le thème. Ne peut pas contenir d’espaces ou de caractères spéciaux.	`richtext_field, date_field, etc.`
`label`	Chaîne	Le texte que le créateur de contenu voit en décrivant le champ. Peut contenir des espaces.	`Rich text field, Date field, etc.`
`required`	Booléen	Permet de définir si le champ peut être laissé vide dans l’éditeur. Si le champ est défini sur `true`, le contenu ne peut pas être publié sans valeur dans le champ.	`false`
`locked`	Booléen	Permet de définir si le champ est modifiable dans l’éditeur de contenu. Si le champ est défini sur `true`, le champ n’apparaîtra pas dans l’éditeur de contenu.	`false`
`type`	Chaîne	Le type de champ. Les types de champs sont uniques par champ et se trouvent dans la documentation pour chaque champ ci-dessous.
`inline_help_text`	Chaîne	Le texte qui s’affiche intraligne sous le libellé du champ (limite de 400 caractères). À utiliser de préférence pour les informations nécessaires à l’utilisation du champ. Vous pouvez inclure les balises HTML suivantes (les autres balises seront ignorées lors de la restitution) : `a`, `b`, `br`, `em`, `i`, `p`, `small`, `strong`, `span`.
`help_text`	Chaîne	Le texte qui s’affiche dans l’éditeur dans une info-bulle au survol pour aider le créateur de contenu (limite de 300 caractères). À utiliser de préférence pour les informations supplémentaires, mais pas nécessaires à l’utilisation du champ. Vous pouvez inclure les balises HTML suivantes (les autres balises seront ignorées lors de la restitution) : `a`, `b`, `br`, `em`, `i`, `p`, `small`, `strong`, `span`.
`id`	Chaîne	L’ID unique du champ, qui est défini par HubSpot. Lorsque vous développez localement, vous n’avez pas besoin de spécifier cet identifiant.
`visibility`	Tableau	Permet de définir les conditions d’affichage du champ. Par exemple, vous pouvez définir un champ pour qu’il s’affiche uniquement lorsqu’un autre champ de case à cocher a été sélectionné. Découvrez-en davantage sur la visibilité.
`display_width`	Chaîne	Par défaut, les champs sont en pleine largeur dans l’éditeur. Lorsque deux champs consécutifs dans le fichier `fields.json` sont définis sur `half_width`, ils apparaîtront l’un à côté de l’autre dans l’éditeur.
`alias_mapping`	Chaîne	Un alias pour le champ, qui mappe les valeurs de champ existantes à un nouvel emplacement sans interrompre le contenu existant. Cela peut être utile si vous devez mettre à jour un champ qui est actuellement utilisé dans du contenu en ligne, par exemple en déplaçant un champ de l’onglet Contenu vers l’onglet Styles. En savoir plus sur le mappage d’alias.	`False`

Alignement

JSON
React

{
  "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"
  }
}

Paramètre	Type	Description	Par défaut
`default`	Objet	L’objet contenant `horizontal_align` et `vertical_align`.
`alignment_direction`	Chaîne	Permet de déterminer si seuls les contrôles d’alignement horizontal, vertical ou les deux doivent être affichés. Peut-être : `HORIZONTAL` `VERTICAL` `BOTH`	`BOTH`

import { ModuleFields, AlignmentField } from "@hubspot/cms-components/fields";

Propriété	Type	Description	Par défaut
`default`	Objet	L’objet contenant `horizontal_align` et `vertical_align`.
`alignmentDirection`	Chaîne	Permet de déterminer si seuls les contrôles d’alignement horizontal, vertical ou les deux doivent être affichés. Peut-être : `HORIZONTAL` `VERTICAL` `BOTH`	`BOTH`

Image d’arrière-plan

JSON
React

{
  "name": "bg_image",
  "label": "Background image",
  "required": false,
  "type": "backgroundimage",
  "default": {
    "src": "https://example.com/img.png",
    "background_position": "MIDDLE_CENTER",
    "background_size": "cover"
  }
}

Paramètre	Type	Description	Par défaut
`default`	Objet	L’objet contenant la src de l’image, la position et la taille de l’arrière-plan.	`null`

import { ModuleFields, BackgroundImageField } from "@hubspot/cms-components/fields";

Propriété	Type	Description	Par défaut
`default`	Objet	L’objet contenant la src de l’image, la position et la taille de l’arrière-plan.	`null`

Blog

JSON
React

{
  "name": "blog",
  "label": "Blog",
  "required": false,
  "locked": false,
  "type": "blog",
  "default": 1234567890
}

Paramètre	Type	Description	Par défaut
`default`	”default” / ID de blog	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`

import { ModuleFields, BlogField } from "@hubspot/cms-components/fields";

Propriété	Type	Description	Par défaut
`default`	”default” / ID de blog	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

JSON
React

{
  "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
}

Paramètre	Type	Description	Par défaut
`default`	Booléen	Permet d’indiquer si l’état par défaut de ce champ est `true` ou `false`.	`false`
`display`	Chaîne	Permet de choisir le style d’affichage visuel pour le champ. Peut apparaître comme `toggle` ou `checkbox`.	`checkbox`

import { ModuleFields, BooleanField } from "@hubspot/cms-components/fields";

Propriété	Type	Description	Par défaut
`default`	Booléen	Permet d’indiquer si l’état par défaut de ce champ est `true` ou `false`.	`false`
`display`	Chaîne	Permet de choisir le style d’affichage visuel pour le champ. Peut apparaître comme `toggle` ou `checkbox`.	`checkbox`

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

JSON
React

{
  "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
  }
}

Paramètre	Type	Description	Par défaut
`default`	Booléen	L’objet avec des clés pour le rayon de bordure, les côtés supérieur, inférieur, gauche et droit.	`{}`

import { ModuleFields, BorderField } from "@hubspot/cms-components/fields";

Propriété	Type	Description	Par défaut
`default`	Booléen	L’objet avec des clés pour le rayon de bordure, les côtés supérieur, inférieur, gauche et droit.	`{}`

Choix

JSON
React

{
  "name": "img_position",
  "label": "Image Position",
  "required": false,
  "locked": false,
  "multiple": "true",
  "display": "select",
  "choices": [
    ["img--left", "Image Left - Text Right"],
    ["img--right", "Text Left - Image Right"]
  ],
  "type": "choice",
  "default": "img--left"
}

Paramètre	Type	Description	Par défaut
`choices`	Tableau	Un tableau contenant les options sélectionnables, formatées comme une valeur interne unique suivie d’un libellé.	`[ [ "value 1", "Label 1" ], [ "value 2", "Label 2" ] ]`
`default`	Valeur	Permet de définir la valeur sélectionnée par défaut dans le tableau de choix.
`multiple`	Booléen	Un champ facultatif qui permet de sélectionner plusieurs options lorsqu’il est défini sur `true`. Définissez `display` sur `checkbox` ou `select` pour configurer si le champ s’affiche sous la forme d’une liste de cases à cocher ou d’un menu déroulant.	`false`
`display`	Chaîne	Permet de définir l’apparence du champ à l’aide de l’une des valeurs suivantes : `select` : permet d’afficher un menu déroulant. Permet de sélectionner plusieurs options lorsque `multiple` est défini sur `true`. `checkbox` : permet d’afficher une liste de cases à cocher sélectionnables. Permet de sélectionner plusieurs options lorsque `multiple` est défini sur `true`, et que `reordering_enabled` est défini sur `false`. `radio` : permet de restituer une liste de case d’option. Ne permet pas de sélectionner plusieurs options. `buttons` : permet d’afficher un ensemble de boutons en fonction de l’élément `preset` spécifié. Ne permet pas de sélectionner plusieurs options.	`"select"`
`reordering_enabled`	Booléen	Lorsque cette valeur est définie sur `true`, permet aux créateurs de contenu de réorganiser les options du champ dans l’éditeur. Pour activer cette option, `multiple` doit également être défini sur `true`.	`false`
`preset`	Chaîne	Permet de configurer le préréglage du bouton à utiliser lorsque `display` est défini sur `buttons`. Pour chaque préréglage, vous devrez configurer les libellés `choices` pour qu’ils correspondent à un ensemble de valeurs spécifique. Découvrez-en davantage sur ces options prédéfinies ci-dessous.

import { ModuleFields, ChoiceField } from "@hubspot/cms-components/fields";

Propriété	Type	Description	Par défaut
`choices`	Tableau	Un tableau contenant les options sélectionnables, formatées comme une valeur interne unique suivie d’un libellé.	`[ [ "value 1", "Label 1" ], [ "value 2", "Label 2" ] ]`
`default`	Valeur	Permet de définir la valeur sélectionnée par défaut dans le tableau de choix.
`multiple`	Booléen	Un champ facultatif qui permet de sélectionner plusieurs options lorsqu’il est défini sur `true`. Définissez `display` sur `checkbox` ou `select` pour configurer si le champ s’affiche sous la forme d’une liste de cases à cocher ou d’un menu déroulant.	`false`
`display`	Chaîne	Permet de définir l’apparence du champ à l’aide de l’une des valeurs suivantes : `select` : permet d’afficher un menu déroulant. Permet de sélectionner plusieurs options lorsque `multiple` est défini sur `true`. `checkbox` : permet d’afficher une liste de cases à cocher sélectionnables. Permet de sélectionner plusieurs options lorsque `multiple` est défini sur `true`, et que `reordering_enabled` est défini sur `false`. `radio` : permet de restituer une liste de case d’option. Ne permet pas de sélectionner plusieurs options. `buttons` : permet d’afficher un ensemble de boutons en fonction de l’élément `preset` spécifié. Ne permet pas de sélectionner plusieurs options.	`"select"`
`reorderingEnabled`	Booléen	Lorsque cette valeur est définie sur `true`, permet aux créateurs de contenu de réorganiser les options du champ dans l’éditeur. Pour activer cette option, `multiple` doit également être défini sur `true`.	`false`
`preset`	Chaîne	Permet de configurer le préréglage du bouton à utiliser lorsque `display` est défini sur `buttons`. Pour chaque préréglage, vous devrez configurer les libellés `choices` pour qu’ils correspondent à un ensemble de valeurs spécifique. Découvrez-en davantage sur ces options prédéfinies ci-dessous.

Préréglages des boutons de choix

Pour configurer un champ de choix pour afficher des boutons au lieu d’un menu déroulant, de cases à cocher ou de cases d’option, vous pouvez utiliser l’un des préréglages ci-dessous. Chaque préréglage permet un ensemble spécifique de libellés d’option, que vous devrez inclure dans le tableau choices. Ces libellés ne peuvent pas être personnalisés.

{
"name": "layout",
"type": "choice",
"label": "Layout",
"required": false,
"locked": false,
"display": "buttons",
"preset": "layout",
"choices": [
["cards_value", "cards"],
["tiles_value", "tiles"],
["minimal_value", "minimal"]
]
}

import { ModuleFields, ChoiceField } from '@hubspot/cms-components/fields';

Préréglage	Choix de libellés	Exemple
`case`	`none` \| `upper` \| `lower`

Couleurs

JSON
React

{
  "name": "bg_color",
  "label": "Background color",
  "required": false,
  "locked": false,
  "type": "color",
  "default": {
    "color": "#ff0000",
    "opacity": 100
  },
  "limited_options": ["#000000", "#ffffff"]
}

Paramètre	Type	Description	Par défaut
`default`	Objet	Permet de définir la couleur et l’opacité sélectionnées par défaut.	`{ "color" : "#ffffff", "opacity" : 100 }`
`show_opacity`	Booléen	Permet de définir si l’entrée d’opacité est affichée. `true` : l’entrée d’opacité est affichée. `false` : l’entrée d’opacité est masquée. Si elle n’est pas définie, l’entrée d’opacité ne s’affichera pas dans les modules d’e-mail, mais s’affichera dans d’autres types de modules.	`undefined`
`limited_options`	Tableau	Un tableau de chaînes de caractères qui masque la grille de couleurs par défaut et remplace la liste des couleurs préférées (le libellé « Favoris » devient « Couleurs disponibles »). Les valeurs du tableau doivent être un code hexadécimal ou une valeur hexadécimale `color` pour n’importe quel chemin d’héritage.	`undefined`

import { ModuleFields, ColorField } from "@hubspot/cms-components/fields";

Propriété	Type	Description	Par défaut
`default`	Objet	Permet de définir la couleur et l’opacité sélectionnées par défaut.	`{ "color" : "#ffffff", "opacity" : 100 }`
`showOpacity`	Booléen	Permet de définir si l’entrée d’opacité est affichée. `true` : l’entrée d’opacité est affichée. `false` : l’entrée d’opacité est masquée. Si elle n’est pas définie, l’entrée d’opacité ne s’affichera pas dans les modules d’e-mail, mais s’affichera dans d’autres types de modules.	`undefined`
`limitedOptions`	Tableau	Un tableau de chaînes de caractères qui masque la grille de couleurs par défaut et remplace la liste des couleurs préférées (le libellé « Favoris » devient « Couleurs disponibles »). Les valeurs du tableau doivent être un code hexadécimal ou une valeur hexadécimale `color` pour n’importe quel chemin d’héritage.	`undefined`

CTA

JSON
React

{
  "name": "cta",
  "label": "CTA",
  "required": false,
  "locked": false,
  "type": "cta",
  "default": null
}

Paramètre	Type	Description	Par défaut
`default`	Chaîne	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`

import { ModuleFields, CTAField } from "@hubspot/cms-components/fields";

Propriété	Type	Description	Par défaut
`default`	Chaîne	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

JSON
React

{
  "name": "crmobject_field",
  "label": "CRM object",
  "required": false,
  "locked": false,
  "object_type": "CONTACT",
  "properties_to_fetch": [],
  "type": "crmobject",
  "default": {
    "id": 1
  }
}

Paramètre	Type	Description	Par défaut
`object_type`	Requise	Le type d’objet CRM que l’utilisateur peut choisir. Types d’objets CRM pris en charge
`properties_to_fetch`	Tableau	Le tableau des noms de propriétés associées au type d’objet sous forme de chaîne. Exemple : `"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`	Objet	L’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`

import { ModuleFields, CRMObjectField } from "@hubspot/cms-components/fields";

Propriété	Type	Description	Par défaut
`objectType`	Requise	Le type d’objet CRM que l’utilisateur peut choisir. Types d’objets CRM pris en charge
`propertiesToFetch`	Tableau	Le tableau des noms de propriétés associées au type d’objet sous forme de chaîne. Exemple : `"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`	Objet	L’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`

Propriété d’objet du CRM

JSON
React

{
  "name": "crmobjectproperty_field",
  "label": "CRM object property",
  "required": true,
  "locked": false,
  "object_type": "contact",
  "type": "crmobjectproperty",
  "default": {
    "property": "field_of_study"
  }
}

Paramètre	Type	Description
`object_type`	Requise	Le type d’objet CRM que l’utilisateur peut choisir. Découvrez-en davantage sur les types d’objet CRM pris en charge.
`default`	Objet	Contient la propriété par défaut à afficher.

Par ailleurs, vous pouvez utiliser les blocs de texte suivants pour renvoyer d’autres détails sur la propriété :

{{ module.fieldname.property }} : permet de renvoyer le nom interne de la propriété.
{{ module.fieldname.property_definition.label }} : permet de renvoyer le libellé de la propriété.
{{ module.fieldname.property_definition.type }} : renvoie le type de propriété (par exemple : chaîne).

import { ModuleFields, CRMObjectPropertyField } from "@hubspot/cms-components/fields";

Propriété	Type	Description
`objectType`	Requise	Le type d’objet CRM que l’utilisateur peut choisir. Découvrez-en davantage sur les types d’objet CRM pris en charge.
`default`	Objet	Contient la propriété par défaut à afficher.

Date

JSON
React

{
  "name": "event_start_date",
  "label": "Event Date",
  "required": false,
  "locked": false,
  "type": "date",
  "default": 1577854800000
}

Paramètre	Type	Description	Par défaut
`default`	Horodatage	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`

import { ModuleFields, DateField } from "@hubspot/cms-components/fields";

Propriété	Type	Description	Par défaut
`default`	Horodatage	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

JSON
React

{
  "name": "event_start",
  "label": "Event Start",
  "required": false,
  "locked": false,
  "type": "datetime",
  "default": 1577854800000
}

Paramètre	Type	Description	Par défaut
`default`	Horodatage	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`

import { ModuleFields, DateTimeField } from "@hubspot/cms-components/fields";

Propriété	Type	Description	Par défaut
`default`	Horodatage	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

JSON
React

{
  "name": "emails",
  "label": "Email address",
  "required": false,
  "locked": false,
  "type": "email",
  "default": null
}

Paramètre	Type	Description	Par défaut
`default`	Tableau	Le tableau de chaînes d’adresses d’e-mail `["bob@example.com", "dennis@example.com"]`	`null`

import { ModuleFields, EmailField } from "@hubspot/cms-components/fields";

Propriété	Type	Description	Par défaut
`default`	Tableau	Le tableau de chaînes d’adresses d’e-mail `["bob@example.com", "dennis@example.com"]`	`null`

Intégrer

JSON
React

{
  "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"
  }
}

Paramètre	Type	Description	Par défaut
`supported_source_types`	Tableau	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`	Tableau	Type oEmbed pris en charge, y compris `"photo"`, `"video"`, `"link"` et `"rich"`. Ne s’applique pas aux supported_source_types de html	`[ "photo", "video", "link", "rich" ]`
`supported_media_bridge_providers`	Tableau	Le 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`	Chaîne	Ce paramètre est toujours défini 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`

import { ModuleFields, EmbedField } from "@hubspot/cms-components/fields";

Propriété	Type	Description	Par défaut
`supportedSourceTypes`	Tableau	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"]`
`supportedOembedTypes`	Tableau	Type oEmbed pris en charge, y compris `"photo"`, `"video"`, `"link"` et `"rich"`. Ne s’applique pas aux supported_source_types de html	`[ "photo", "video", "link", "rich" ]`
`supportedMediaBridgeProviders`	Tableau	Le 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`	Chaîne	Ce paramètre est toujours défini 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

JSON
React

{
  "name": "file_field",
  "label": "File",
  "required": false,
  "locked": false,
  "type": "file",
  "picker": "file",
  "default": null
}

Paramètre	Type	Description	Par défaut
`default`	Chaîne	L’URL du fichier.	`null`
`picker`	Chaîne	Valeurs acceptables : « fichier », « 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`

import { ModuleFields, FileField } from "@hubspot/cms-components/fields";

Propriété	Type	Description	Par défaut
`default`	Chaîne	L’URL du fichier.	`null`
`picker`	Chaîne	Valeurs acceptables : « fichier », « 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

JSON
React

{
  "name": "followup_email",
  "label": "Followup email",
  "required": false,
  "locked": false,
  "type": "followupemail",
  "default": null
}

Paramètre	Type	Description	Par défaut
`default`	Chaîne	L’ID d’e-mail	`null`

import { ModuleFields, FollowUpEmailField } from "@hubspot/cms-components/fields";

Propriété	Type	Description	Par défaut
`default`	Chaîne	L’ID d’e-mail	`null`

Police

Remarque :

La famille de police est déterminée par la combinaison des propriétés font et font_set. Vous devez inclure les deux pour charger la police. Lorsque vous héritez de champs, cela signifie que vous devez hériter des deux valeurs.
Masquer les sous-champs liés à la CSS avec visibility n’empêchera pas la sortie de la CSS dans le style renvoyé dans l’objet de champ. Vous devrez toujours inclure manuellement la CSS dans l’objet styles.

JSON
React

{
  "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
    }
  }
}

Paramètre	Type	Description	Par défaut
`default`	Objet	L’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`	Booléen	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. Définissez 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`	Objet	En utilisant l’objet imbriqué `hidden_subfields`, vous pouvez définir un booléen pour les commandes du champ Police à masquer. Les sous-champs possibles sont : `font`, `size`, `bold`, `italic`, `underline`, et `color`.
`variant`	Chaîne	Si vous utilisez une police web, 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 400 d’une police italique, définissez cette valeur sur `"400i"`.
`limited_options`	Tableau	Tableau de chaînes de caractères qui remplace la liste de toutes les options de police. Les valeurs du tableau doivent être un nom de police codé en dur ou une propriété de police `name` à n’importe quel chemin d’héritage. Par exemple : `theme.typography.body_text.name`.	`undefined`

import { ModuleFields, FontField } from "@hubspot/cms-components/fields";

Propriété	Type	Description	Par défaut
`default`	Objet	L’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" : { } }`
`loadExternalFonts`	Booléen	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. Définissez 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`	Objet	En utilisant l’objet imbriqué `hidden_subfields`, vous pouvez définir un booléen pour les commandes du champ Police à masquer. Les sous-champs possibles sont : `font`, `size`, `bold`, `italic`, `underline`, et `color`.
`variant`	Chaîne	Si vous utilisez une police web, 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 400 d’une police italique, définissez cette valeur sur `"400i"`.
`limitedOptions`	Tableau	Tableau de chaînes de caractères qui remplace la liste de toutes les options de police. Les valeurs du tableau doivent être un nom de police codé en dur ou une propriété de police `name` à n’importe quel chemin d’héritage. Par exemple : `theme.typography.body_text.name`.	`undefined`

Formulaire

JSON
React

{
  "id": "idNumber",
  "name": "form_field_name",
  "display_width": null,
  "label": "Form",
  "required": false,
  "locked": false,
  "type": "form",
  "disable_inline_form_editing": true,
  "required_property_types": ["TICKET"],
  "support_all_webinar_types": true,
  "embed_versions": ["v2", "v4"],
  "default": {
    "response_type": "inline",
    "message": "Thanks for submitting the form."
  }
}

Paramètre	Type	Description
`default`	Objet	Un objet contenant les détails de la réponse de soumission du formulaire. Comprend les paramètres suivants : `response_type`, qui peut être l’un des suivants : `inline:` un message texte intraligne. `redirect` : permet de rediriger le visiteur après la soumission. `message` : le texte à afficher après la soumission du formulaire. `redirect_id` : pour les formulaires redirigés, définissez un ID de contenu HubSpot pour rediriger les contributeurs vers une page HubSpot. `redirect_url` : pour les formulaires redirigés, définissez sur une URL spécifique pour rediriger les contributeurs vers une page.
`disable_inline_form_editing`	Chaîne	Permet de définir la propriété `disable_inline_form_editing` sur `true` pour masquer tous les contrôles de modification de formulaire intraligne dans le module de formulaire. Cela inclut les champs du formulaire, le texte du bouton d’envoi, les options de confidentialité et de consentement des données et le CAPTCHA.
`required_property_types`	Tableau	Un tableau qui indique les formulaires pouvant être sélectionnés en fonction des types de propriétés des champs de formulaire. Les valeurs sont : `"CONTACT"`, `"COMPANY"` et `"TICKET"`.
`support_all_webinar_types`	Booléen	Lorsqu’il est défini sur `true`, le formulaire affiche un sélecteur de webinar plus générique qui permet de sélectionner des webinars Microsoft Teams en plus de GoToWebinar. Les valeurs du champ de formulaire changeront également légèrement pour enregistrer `webinar_id` et `webinar_source` au lieu de `gotowebinar_webinar_key`. Vous devrez repasser ces valeurs propriété plus génériques dans la balise de formulaire à côté de `gotowebinar_webinar_key`.
`embed_versions`	Tableau	Un tableau qui indique les formulaires pouvant être sélectionnés en fonction de la version du formulaire. Les valeurs comprennent `"v2"` pour les formulaires hérités et `"v4"` pour les nouveaux formulaires de l’éditeur.

import { ModuleFields, FormField } from "@hubspot/cms-components/fields";

Propriété	Type	Description
`default`	Objet	Un objet contenant les détails de la réponse de soumission du formulaire. Comprend les paramètres suivants : `response_type`, qui peut être l’un des suivants : `inline:` un message texte intraligne. `redirect` : permet de rediriger le visiteur après la soumission. `message` : le texte à afficher après la soumission du formulaire. `redirect_id` : pour les formulaires redirigés, définissez un ID de contenu HubSpot pour rediriger les contributeurs vers une page HubSpot. `redirect_url` : pour les formulaires redirigés, définissez sur une URL spécifique pour rediriger les contributeurs vers une page.
`disableInlineFormEditing`	Chaîne	Permet de définir la propriété `disableInlineFormEditing` sur `true` pour masquer tous les contrôles de modification de formulaire intraligne dans le module de formulaire. Cela inclut les champs du formulaire, le texte du bouton d’envoi, les options de confidentialité et de consentement des données et le CAPTCHA.
`requiredPropertyTypes`	Tableau	Un tableau qui indique les formulaires pouvant être sélectionnés en fonction des types de propriétés des champs de formulaire. Les valeurs sont : `"CONTACT"`, `"COMPANY"` et `"TICKET"`.
`supportAllWebinarTypes`	Booléen	Lorsqu’il est défini sur `true`, le formulaire affiche un sélecteur de webinar plus générique qui permet de sélectionner des webinars Microsoft Teams en plus de GoToWebinar. Les valeurs du champ de formulaire changeront également légèrement pour enregistrer `webinar_id` et `webinar_source` au lieu de `gotowebinar_webinar_key`. Vous devrez repasser ces valeurs propriété plus génériques dans la balise de formulaire à côté de `gotowebinar_webinar_key`.
`embedVersions`	Tableau	Un tableau qui indique les formulaires pouvant être sélectionnés en fonction de la version du formulaire. Les valeurs comprennent `"v2"` pour les formulaires hérités et `"v4"` pour les nouveaux formulaires de l’éditeur.

Dégradé

JSON
React

{
  "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
    }
  }
}

Paramètre	Type	Description
`default`	Objet	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.

import { ModuleFields, GradientField } from "@hubspot/cms-components/fields";

Propriété	Type	Description
`default`	Objet	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

JSON
React

{
  "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
  }
}

Paramètre	Type	Description	Par défaut
`table_name_or_id`	Chaîne	Le nom ou l’ID du tableau HubDB. Ce champ est obligatoire.
`columns_to_fetch`	Tableau	Un tableau de noms de colonnes à extraire de la table. Renverra toutes les colonnes du tableau si vide.	`[]`
`display_columns`	Tableau	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`	Chaîne	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 une colonne. Ex : %0 (%1) apparaîtrait comme Column0Value (Column1Value)	`""`
`default`	Objet	Un objet contenant « id » pour définir la ligne HubDB par défaut.	`{ "id" : null }`

import { ModuleFields, HubDBRowField } from "@hubspot/cms-components/fields";

Propriété	Type	Description	Par défaut
`tableNameOrId`	Chaîne	Le nom ou l’ID du tableau HubDB. Ce champ est obligatoire.
`columnsToFetch`	Tableau	Un tableau de noms de colonnes à extraire de la table. Renverra toutes les colonnes du tableau si vide.	`[]`
`displayColumns`	Tableau	Un tableau de noms de colonnes à utiliser dans le libellé de choix. Ne renverra que la première colonne du tableau si vide.	`[]`
`displayFormat`	Chaîne	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 une colonne. Ex : %0 (%1) apparaîtrait comme Column0Value (Column1Value)	`""`
`default`	Objet	Un objet contenant « id » pour définir la ligne HubDB par défaut.	`{ "id" : null }`

Tableau HubDB

JSON
React

{
  "name": "recipe_table",
  "label": "Recipe Table",
  "required": false,
  "locked": false,
  "type": "hubdbtable",
  "default": 2010782
}

Paramètre	Type	Description	Par défaut
`default`	Chaîne	L’ID de tableau HubDB	`null`

import { ModuleFields, HubDBTableField } from "@hubspot/cms-components/fields";

Propriété	Type	Description	Par défaut
`default`	Chaîne	L’ID de tableau HubDB	`null`

Icône

JSON
React

{
  "name": "icon_field",
  "label": "Icon",
  "required": false,
  "locked": false,
  "icon_set": "fontawesome-6.4.2",
  "type": "icon",
  "default": {
    "name": "accessible-icon",
    "unicode": "f368",
    "type": "REGULAR"
  }
}

Paramètre	Type	Description	Par défaut
`default`	Objet	L’objet icône
`icon_set`	Chaîne	Le jeu d’icônes FontAwesome à utiliser. Les valeurs possibles sont : `fontawesome-6.4.2` `fontawesome-5.14.0` `fontawesome-5.0.10`	`fontawesome-5.0.10`

import { ModuleFields, IconField } from "@hubspot/cms-components/fields";

Propriété	Type	Description	Par défaut
`default`	Objet	L’objet icône
`iconSet`	Chaîne	Le jeu d’icônes FontAwesome à utiliser. Les valeurs possibles sont : `fontawesome-6.4.2` `fontawesome-5.14.0` `fontawesome-5.0.10`	`fontawesome-5.0.10`

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é.

JSON
React

{
  "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
  }
}

Paramètre	Type	Description	Par défaut
`default`	Objet	Permet de définir 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 asynchrone de l’image. Peut-être défini comme `"disabled"` (par défaut), `"eager"`, ou `"lazy"`.	`{ "size_type" : "auto", "src" : "", "alt" : null, "loading": "disabled" }`
`responsive`	Booléen	Permet de déterminer si l’image doit agir de manière réactive ou avoir une hauteur et une largeur fixes.	`true`
`show_loading`	Booléen	Permet de déterminer si les commandes permettant de choisir le chargement asynchrone de l’image sont affichées dans l’éditeur de page.	`false`

import { ModuleFields, ImageField } from "@hubspot/cms-components/fields";

Propriété	Type	Description	Par défaut
`default`	Objet	Permet de définir 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 asynchrone de l’image. Peut-être défini comme `"disabled"` (par défaut), `"eager"`, ou `"lazy"`.	`{ "size_type" : "auto", "src" : "", "alt" : null, "loading": "disabled" }`
`responsive`	Booléen	Permet de déterminer si l’image doit agir de manière réactive ou avoir une hauteur et une largeur fixes.	`true`
`showLoading`	Booléen	Permet de déterminer si les commandes permettant de choisir le chargement asynchrone de l’image sont affichées dans l’éditeur de page.	`false`

Lien

JSON
React

{
  "name": "link_field",
  "display_width": null,
  "label": "Link",
  "required": false,
  "locked": false,
  "supported_types": [
    "EXTERNAL",
    "CONTENT",
    "FILE",
    "EMAIL_ADDRESS",
    "BLOG",
    "CALL_TO_ACTION",
    "PHONE_NUMBER",
    "WHATSAPP_NUMBER",
    "PAYMENT"
  ],
  "show_advanced_rel_options": true,
  "type": "link",
  "default": {
    "url": {
      "content_id": null,
      "type": "EXTERNAL",
      "href": ""
    },
    "open_in_new_tab": false,
    "no_follow": false
  }
}

Paramètre	Type	Description	Par défaut
`default`	Objet	L’URL par défaut et le comportement d’ouverture du lien. Cet objet comprend : Un objet `url` qui contient : `content_id` : s’il s’agit d’un lien vers du contenu HubSpot, l’ID de ce contenu. Définir sur `null` s’il s’agit de contenu externe. `type` : le type d’URL. Découvrez-en davantage sur les types compatibles ci-dessous. `href` : l’URL du contenu. Lors de l’association au contenu HubSpot, définissez ce champ sur `null` et utilisez `content_id` à la place.	`{ "url" : { "content_id" : null, "type" : "EXTERNAL", "href" : "" }, "open_in_new_tab" : false, "no_follow" : false, "sponsored" : false, "user_generated_content" : false }`
`supported_types`	Tableau	Les types de liens que les créateurs de contenu peuvent sélectionner. Supprimez de la liste les types que vous ne voulez pas que les créateurs de contenu puissent définir. Types valides possibles : `EXTERNAL` `CONTENT` `FILE` `EMAIL_ADDRESS` `BLOG` `CALL_TO_ACTION` `PHONE_NUMBER` `WHATSAPP_NUMBER` `PAYMENT`	`[ "EXTERNAL", "CONTENT", "FILE", "EMAIL_ADDRESS", "BLOG", "CALL_TO_ACTION", "PHONE_NUMBER", "WHATSAPP_NUMBER", "PAYMENT" ]`
`show_advanced_rel_options`	Booléen	Par défaut, les créateurs de contenu pourront uniquement sélectionner l’option `no_follow`. Lorsque la valeur est définie sur `true`, les créateurs de contenu peuvent également sélectionner : `sponsored` : un lien sponsorisé, tel qu’un lien publicitaire payant. `user_generated_content` : contenu généré par les utilisateurs, tel que les forums. En savoir plus sur les attributs de lien.	`false`

import { ModuleFields, LinkField } from "@hubspot/cms-components/fields";

Propriété	Type	Description	Par défaut
`default`	Objet	L’URL par défaut et le comportement d’ouverture du lien. Cet objet comprend : Un objet `url` qui contient : `content_id` : s’il s’agit d’un lien vers du contenu HubSpot, l’ID de ce contenu. Définir sur `null` s’il s’agit de contenu externe. `type` : le type d’URL. Découvrez-en davantage sur les types compatibles ci-dessous. `href` : l’URL du contenu. Lors de l’association au contenu HubSpot, définissez ce champ sur `null` et utilisez `content_id` à la place.	`{ "url" : { "content_id" : null, "type" : "EXTERNAL", "href" : "" }, "open_in_new_tab" : false, "no_follow" : false, "sponsored" : false, "user_generated_content" : false }`
`supportedTypes`	Tableau	Les types de liens que les créateurs de contenu peuvent sélectionner. Supprimez de la liste les types que vous ne voulez pas que les créateurs de contenu puissent définir. Types valides possibles : `EXTERNAL` `CONTENT` `FILE` `EMAIL_ADDRESS` `BLOG` `CALL_TO_ACTION` `PHONE_NUMBER` `WHATSAPP_NUMBER` `PAYMENT`	`[ "EXTERNAL", "CONTENT", "FILE", "EMAIL_ADDRESS", "BLOG", "CALL_TO_ACTION", "PHONE_NUMBER", "WHATSAPP_NUMBER", "PAYMENT" ]`
`showAdvancedRelOptions`	Booléen	Par défaut, les créateurs de contenu pourront uniquement sélectionner l’option `no_follow`. Lorsque la valeur est définie sur `true`, les créateurs de contenu peuvent également sélectionner : `sponsored` : un lien sponsorisé, tel qu’un lien publicitaire payant. `user_generated_content` : contenu généré par les utilisateurs, tel que les forums. En savoir plus sur les attributs de lien.	`false`

Logo

JSON
React

{
  "name": "logo",
  "label": "Logo",
  "required": false,
  "locked": false,
  "type": "logo",
  "show_loading": true,
  "default": {
    "override_inherited_src": false,
    "src": null,
    "alt": null,
    "loading": "lazy"
  }
}

Paramètre	Type	Description	Par défaut
`show_loading`	Chaîne	Permet de déterminer si les commandes permettant de choisir le chargement asynchrone de l’image sont affichées dans l’éditeur de page.	`false`
`default`	Objet	L’objet logo. Si `show_loading` est défini sur `true`, vous pouvez inclure une propriété `loading` pour définir les options de chargement asynchrone de l’image. Les options comprennent : `"disabled"` (par défaut) `"eager"` `"lazy"`	`{ override_inherited_src: false, src: "", alt: null, width: null, height: null, loading: "disabled" suppress_company_name: false }`

import { ModuleFields, LogoField } from "@hubspot/cms-components/fields";

Propriété	Type	Description	Par défaut
`showLoading`	Chaîne	Permet de déterminer si les commandes permettant de choisir le chargement asynchrone de l’image sont affichées dans l’éditeur de page.	`false`
`default`	Objet	L’objet logo. Si `show_loading` est défini sur `true`, vous pouvez inclure une propriété `loading` pour définir les options de chargement asynchrone de l’image. Les options comprennent : `"disabled"` (par défaut) `"eager"` `"lazy"`	`{ override_inherited_src: false, src: "", alt: null, width: null, height: null, loading: "disabled" suppress_company_name: false }`

JSON
React

{
  "name": "menu",
  "label": "Menu",
  "required": false,
  "locked": false,
  "type": "menu",
  "default": 12345678911
}

Paramètre	Type	Description	Par défaut
`default`	Entier	L’ID de menu du menu. La valeur par défaut de `null`, correspond au menu par défaut sous la navigation.	`null`

import { ModuleFields, MenuField } from "@hubspot/cms-components/fields";

Propriété	Type	Description	Par défaut
`default`	Entier	L’ID de menu du menu. La valeur par défaut de `null`, correspond au menu par défaut sous la navigation.	`null`

Nombre

JSON
React

{
  "name": "number_field",
  "label": "Number",
  "required": false,
  "locked": false,
  "display": "slider",
  "min": 1,
  "max": 10,
  "step": 1,
  "type": "number",
  "prefix": "",
  "suffix": "",
  "default": null,
  "placeholder": "50"
}

Paramètre	Type	Description	Par défaut
`default`	Nombre	Un nombre par défaut à utiliser.	`null`
`prefix`	Chaîne	Ajouté comme préfixe au champ numérique.
`suffix`	Chaîne	Ajouté comme suffixe au champ du numéro.
`placeholder`	Chaîne	Permet d’ajouter une valeur de variable au champ.

import { ModuleFields, NumberField } from "@hubspot/cms-components/fields";

Propriété	Type	Description	Par défaut
`default`	Nombre	Un nombre par défaut à utiliser.	`null`
`prefix`	Chaîne	Ajouté comme préfixe au champ numérique.
`suffix`	Chaîne	Ajouté comme suffixe au champ du numéro.
`placeholder`	Chaîne	Permet d’ajouter une valeur de variable au champ.

Les paramètres suffixe et préfixe sont utilisés à des fins d’affichage dans l’éditeur de contenu et n’ont aucun effet sur la valeur numérique du champ.

Page

JSON
React

{
  "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
}

Paramètre	Type	Description	Par défaut
`default`	Entier	Un identifiant de page par défaut à sélectionner.	`null`

import { ModuleFields, PageField } from "@hubspot/cms-components/fields";

Propriété	Type	Description	Par défaut
`default`	Entier	Un identifiant de page par défaut à sélectionner.	`null`

Texte enrichi

JSON
React

{
  "name": "description",
  "label": "Description",
  "required": false,
  "locked": false,
  "type": "richtext",
  "default": null
}

Paramètre	Type	Description	Par défaut
`default`	Chaîne	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`	Tableau	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.

import { ModuleFields, RichTextField } from "@hubspot/cms-components/fields";

Propriété	Type	Description	Par défaut
`default`	Chaîne	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.	`""`
`enabledFeatures`	Tableau	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.

JSON
React

{
  "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": []
    }
  ]
}

Paramètre	Type	Description	Par défaut
`default`	Tableau d’objets	La structure JSON pour le menu et les enfants du menu.	`[]`

import { ModuleFields, SimpleMenuField } from "@hubspot/cms-components/fields";

Propriété	Type	Description	Par défaut
`default`	Tableau d’objets	La structure JSON pour le menu et les enfants du menu.	`[]`

Espacement

JSON
React

{
  "name": "img_spacing",
  "label": "Spacing around image",
  "required": false,
  "type": "spacing",
  "limits": {
    "padding": {
      "top": {
        "max": 50,
        "min": 25,
        "units": ["px", "pt", "em"]
      },
      "left": {
        "max": 50,
        "units": ["px", "pt", "em"]
      },
      "bottom": {
        "max": 50,
        "units": ["px", "pt", "em"]
      }
    },
    "margin": {
      "top": {
        "max": 50,
        "min": 25,
        "units": ["px", "pt", "em"]
      },
      "bottom": {
        "max": 25,
        "units": ["Q", "rem", "em"]
      }
    }
  },
  "default": {
    "padding": {
      "top": {
        "value": 57,
        "units": "px"
      },
      "bottom": {
        "value": 57,
        "units": "px"
      },
      "left": {
        "value": 57,
        "units": "px"
      },
      "right": {
        "value": 57,
        "units": "px"
      }
    },
    "margin": {
      "top": {
        "value": 20,
        "units": "px"
      },
      "bottom": {
        "value": 20,
        "units": "px"
      }
    }
  }
}

Paramètre	Type	Description	Par défaut
`default`	Objet	Permet de définir les valeurs d’espacement par défaut. Contient les objets `padding` et `margin` : `padding` : peut contenir les objets `top`, `right`, `bottom`, `left` `margin` : peut contenir les objets `top` et `bottom` Utilisez `units` pour définir les unités qu’un créateur de contenu peut utiliser dans HubSpot. Découvrez-en davantage sur les unités ci-dessous.	`{}`
`limits`	Objet	Permet de définir les directives pour l’espacement `min` et `max`. Contient les objets `padding` et `margin` : `padding` : peut contenir les objets `top`, `right`, `bottom`, `left` `margin` : peut contenir les objets `top` et `bottom` Utilisez `units` pour définir les unités qu’un créateur de contenu peut utiliser dans HubSpot. Découvrez-en davantage sur les unités ci-dessous.

import { ModuleFields, SpacingField } from "@hubspot/cms-components/fields";

Propriété	Type	Description	Par défaut
`default`	Objet	Permet de définir les valeurs d’espacement par défaut. Contient les objets `padding` et `margin` : `padding` : peut contenir les objets `top`, `right`, `bottom`, `left` `margin` : peut contenir les objets `top` et `bottom` Utilisez `units` pour définir les unités qu’un créateur de contenu peut utiliser dans HubSpot. Découvrez-en davantage sur les unités ci-dessous.	`{}`
`limits`	Objet	Permet de définir les directives pour l’espacement `min` et `max`. Contient les objets `padding` et `margin` : `padding` : peut contenir les objets `top`, `right`, `bottom`, `left` `margin` : peut contenir les objets `top` et `bottom` Utilisez `units` pour définir les unités qu’un créateur de contenu peut utiliser dans HubSpot. Découvrez-en davantage sur les unités ci-dessous.

Lorsque vous utilisez le champ d’espacement, veuillez prendre note de ce qui suit :

Vous devez inclure une liste units lors de la définition de min ou max.
La propriété units prend en charge les types d’unité suivants : %, ch, em, ex, in, lh, pc, pt, px, Q, rem, vh, vmax, vmin et vw.
Lorsqu’un créateur de contenu modifie en masse tous les éléments de remplissage, HubSpot utilise la valeur la plus élevée min et la valeur la plus faible max. En outre, seules les unités partagées par tous les éléments seront disponibles pour le créateur de contenu.

Balise

JSON
React

{
  "id": "c3395cd3-8e60-7e47-2f1b-b7ccf4d669c9",
  "name": "blog_tag",
  "label": "Blog Tag",
  "required": false,
  "locked": false,
  "tag_value": "SLUG",
  "type": "tag",
  "default": null
}

Paramètre	Type	Description	Par défaut
`default`	Chaîne	ID de la balise.	`null`
`tag_value`	Chaîne	La valeur de sortie. Peut être l’un des objets suivants : `ALL` : un objet contenant le nom, l’ID unique et le slug d’URL de la balise. `ID` : l’identifiant unique de la balise. `NAME` : le nom de la balise. `SLUG` : le slug d’URL de la balise.	`SLUG`

import { ModuleFields, TagField } from "@hubspot/cms-components/fields";

Propriété	Type	Description	Par défaut
`default`	Chaîne	ID de la balise.	`null`
`tagValue`	Chaîne	La valeur de sortie. Peut être l’un des objets suivants : `ALL` : un objet contenant le nom, l’ID unique et le slug d’URL de la balise. `ID` : l’identifiant unique de la balise. `NAME` : le nom de la balise. `SLUG` : le slug d’URL de la balise.	`SLUG`

Texte

JSON
React

{
  "name": "product_name",
  "label": "Product Name",
  "required": false,
  "locked": false,
  "validation_regex": "",
  "allow_new_line": false,
  "show_emoji_picker": false,
  "type": "text",
  "default": ""
}

Paramètre	Type	Description	Par défaut
`default`	Chaîne	La chaîne de texte.	`""`

import { ModuleFields, TextField } from "@hubspot/cms-components/fields";

Propriété	Type	Description	Par défaut
`default`	Chaîne	La chaîne de texte.	`""`

Alignement du texte

JSON
React

{
  "name": "heading_align",
  "label": "Heading alignment",
  "required": false,
  "type": "textalignment",
  "default": {
    "text_align": "LEFT"
  }
}

Paramètre	Type	Description	Par défaut
`default`	Objet	L’objet contenant `horizontal_align` et `vertical_align`.
`alignment_direction`	Chaîne	Permet de déterminer si seuls les contrôles d’alignement horizontal, vertical ou les deux doivent être affichés. Peut-être : `HORIZONTAL` `VERTICAL` `BOTH`	`BOTH`

import { ModuleFields, TextAlignmentField } from "@hubspot/cms-components/fields";

Propriété	Type	Description	Par défaut
`default`	Objet	L’objet contenant `horizontal_align` et `vertical_align`.
`alignmentDirection`	Chaîne	Permet de déterminer si seuls les contrôles d’alignement horizontal, vertical ou les deux doivent être affichés. Peut-être : `HORIZONTAL` `VERTICAL` `BOTH`	`BOTH`

URL

JSON
React

{
  "name": "url",
  "label": "URL",
  "required": false,
  "locked": false,
  "supported_types": ["EXTERNAL", "CONTENT", "FILE", "EMAIL_ADDRESS", "BLOG", "PHONE_NUMBER", "WHATSAPP_NUMBER"],
  "type": "url",
  "default": {
    "content_id": null,
    "href": "http://example.com",
    "type": "EXTERNAL"
  }
}

Paramètre	Type	Description	Par défaut
`default`	Objet	Un objet URL, avec type, href et id de contenu (si le contenu est une page ou un article sur HubSpot)	`{ "content_id" : null, "href" : "", "type" : "EXTERNAL" }`
`supported_types`	Tableau	La 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. Les types incluent : `EXTERNAL` : permet de restituer un champ de saisie de texte pour une URL externe. `CONTENT` : permet de restituer un menu déroulant contenant le site web et les pages de destination du compte. `FILE` : permet de restituer un sélecteur de fichier. `EMAIL_ADDRESS` : permet de restituer un champ de saisie de texte pour une adresse e-mail. `BLOG` : permet de restituer un menu déroulant contenant les pages de listing de blog du compte. `PHONE_NUMBER` : permet de restituer un champ de saisie de texte pour un numéro de téléphone. Le numéro doit commencer par `+` et contenir de 7 à 15 chiffres (à l’exclusion du code pays). `WHATSAPP_NUMBER` : permet de restituer un menu déroulant contenant les numéros WhatsApp connectés au compte.	`[ "EXTERNAL", "CONTENT", "FILE", "EMAIL_ADDRESS", "BLOG" ]`

import { ModuleFields, UrlField } from "@hubspot/cms-components/fields";

Propriété	Type	Description	Par défaut
`default`	Objet	Un objet URL, avec type, href et id de contenu (si le contenu est une page ou un article sur HubSpot)	`{ "content_id" : null, "href" : "", "type" : "EXTERNAL" }`
`supportedTypes`	Tableau	La 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. Les types incluent : `EXTERNAL` : permet de restituer un champ de saisie de texte pour une URL externe. `CONTENT` : permet de restituer un menu déroulant contenant le site web et les pages de destination du compte. `FILE` : permet de restituer un sélecteur de fichier. `EMAIL_ADDRESS` : permet de restituer un champ de saisie de texte pour une adresse e-mail. `BLOG` : permet de restituer un menu déroulant contenant les pages de listing de blog du compte. `PHONE_NUMBER` : permet de restituer un champ de saisie de texte pour un numéro de téléphone. Le numéro doit commencer par `+` et contenir de 7 à 15 chiffres (à l’exclusion du code pays). `WHATSAPP_NUMBER` : permet de restituer un menu déroulant contenant les numéros WhatsApp connectés au compte.	`[ "EXTERNAL", "CONTENT", "FILE", "EMAIL_ADDRESS", "BLOG" ]`

Vidéos

JSON
React

{
  "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
  }
}

Paramètre	Type	Description	Par défaut
`default`	Objet	L’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`	Booléen	Si les créateurs de contenu peuvent voir les options avancées par défaut.	`false`

import { ModuleFields, VideoField } from "@hubspot/cms-components/fields";

Propriété	Type	Description	Par défaut
`default`	Objet	L’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`.	`[]`
`showAdvancedOptions`	Booléen	Si les créateurs de contenu peuvent voir les options avancées par défaut.	`false`

conversion_asset paramètres de l’objet

Paramètre	Type	Description	Par défaut
`type`	Chaîne	Permet d’accepter soit `"FORM"`, `"CTA"`, ou `""`	`""`
`id`	Chaîne	L’identifiant du formulaire ou du type de call-to-action	`""`
`position`	Chaîne	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 ».	`""`

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

​Alignement

​Image d’arrière-plan

​Blog

​Booléen

​Bordure

​Choix

​Préréglages des boutons de choix

​Couleurs

​CTA

​Objet du CRM

​Propriété d’objet du CRM

​Date

​Date et heure

​Adresse e-mail

​Intégrer

​Fichier

​E-mail de suivi

​Police

​Remarque :

​Formulaire

​Dégradé

​Ligne HubDB

​Tableau HubDB

​Icône

​Image

​Lien

​Logo

​Menu

​Nombre

​Page

​Texte enrichi

​Menu simple

​Espacement

​Balise

​Texte

​Alignement du texte

​URL

​Vidéos

​conversion_asset paramètres de l’objet

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

Alignement

Image d’arrière-plan

Blog

Booléen

Bordure

Choix

Préréglages des boutons de choix

Couleurs

CTA

Objet du CRM

Propriété d’objet du CRM

Date

Date et heure

Adresse e-mail

Intégrer

Fichier

E-mail de suivi

Police

Remarque :

Formulaire

Dégradé

Ligne HubDB

Tableau HubDB

Icône

Image

Lien

Logo

Menu

Nombre

Page

Texte enrichi

Menu simple

Espacement

Balise

Texte

Alignement du texte

URL

Vidéos

conversion_asset paramètres de l’objet