# Create an app card
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/ui-extensions/extension-points/app-cards/create-an-app-card
# App cards overview
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/ui-extensions/extension-points/app-cards/overview
# App cards reference
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/ui-extensions/extension-points/app-cards/reference
# Create a settings page
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/ui-extensions/extension-points/create-a-settings-page
# Create an app home page
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/ui-extensions/extension-points/create-an-app-home-page
# Fetching data for UI extensions
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/ui-extensions/fetching-data
# Logging and monitoring for UI extensions
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/ui-extensions/logging-and-monitoring
# UI extensions overview
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/ui-extensions/overview
# Share code between your extensions using npm workspaces
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/ui-extensions/tools/code-sharing-with-npm-workspaces
# Migrating to v1.0 (ESLint 9)
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/ui-extensions/tools/linting/migrate
# Linting for UI extensions
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/ui-extensions/tools/linting/overview
# no-browser-dialogs
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/ui-extensions/tools/linting/rules/no-browser-dialogs
# no-browser-storage
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/ui-extensions/tools/linting/rules/no-browser-storage
# no-console
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/ui-extensions/tools/linting/rules/no-console
# no-dom-access
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/ui-extensions/tools/linting/rules/no-dom-access
# no-html-elements
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/ui-extensions/tools/linting/rules/no-html-elements
# no-invalid-extension-point-imports
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/ui-extensions/tools/linting/rules/no-invalid-extension-point-imports
# no-invalid-image-src
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/ui-extensions/tools/linting/rules/no-invalid-image-src
# no-native-http
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/ui-extensions/tools/linting/rules/no-native-http
# no-parent-imports
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/ui-extensions/tools/linting/rules/no-parent-imports
# no-restricted-globals
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/ui-extensions/tools/linting/rules/no-restricted-globals
# Mocking UI extensions
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/ui-extensions/tools/testing/mocking
# Testing UI extensions
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/ui-extensions/tools/testing/overview
# Testing utilities reference
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/ui-extensions/tools/testing/reference
# Figma Design Kit | UI extensions
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/ui-extensions/ui-components/figma-design-kit
# Manage UI extension layout
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/ui-extensions/ui-components/manage-ui-extension-layout
# UI extension components
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/ui-extensions/ui-components/overview
# Button design patterns
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/ui-extensions/ui-components/patterns/buttons
# Form design patterns
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/ui-extensions/ui-components/patterns/forms
# Table design patterns
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/ui-extensions/ui-components/patterns/tables
# Accordion
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/accordion
# Alert
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/alert
# AutoGrid
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/autogrid
# Box
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/box
# Button
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/button
# ButtonRow
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/button-row
# Checkbox
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/checkbox
# CurrencyInput
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/currency-input
# DateInput | UI components
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/date-input
# DescriptionList | UI components
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/description-list
# Divider
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/divider
# Dropdown | UI components
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/dropdown
# EmptyState | UI components
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/empty-state
# Error state | UI components
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/error-state
# Flex
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/flex
# Form
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/form
# Heading
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/heading
# Icon
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/icon
# Illustration
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/illustration
# Image
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/image
# Inline | UI components
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/inline
# Input
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/input
# Link
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/link
# List
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/list
# LoadingButton | UI components
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/loading-button
# LoadingSpinner
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/loading-spinner
# Modal
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/modal
# MultiSelect
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/multi-select
# NumberInput
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/number-input
# Panel
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/panel
# ProgressBar
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/progress-bar
# RadioButton
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/radio-button
# ScoreCircle
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/scorecircle
# SearchInput | UI components
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/search-input
# Select
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/select
# Spacer
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/spacer
# Statistics
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/statistics
# StatusTag | UI components
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/status-tag
# StepIndicator
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/step-indicator
# StepperInput
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/stepper-input
# Table | UI components
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/table
# Tabs | UI components
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/tabs
# Tag
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/tag
# Text
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/text
# TextArea
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/text-area
# Tile
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/tile
# TimeInput | UI components
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/time-input
# Toggle
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/toggle
# ToggleGroup
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/toggle-group
# Tooltip | UI components
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/tooltip
# UI extensions SDK reference
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/ui-extensions/ui-extensions-sdk
# Configuration de l'application (BÊTA)
Source: https://developers.hubspot.fr/docs/apps/developer-platform/build-apps/app-configuration
Informations de référence pour les options de configuration des applications créées sur la nouvelle plateforme de développement (BÊTA)
Découvrez ci-dessous des informations de référence sur les fonctionnalités des applications de la plateforme de développement, y compris des définitions de fichiers de configuration, des détails de domaines, etc.
## Structure du projet
* Tous les composants du projet doivent se trouver dans le répertoire `src` spécifié dans le fichier de configuration `hsproject.json` de premier niveau.
* Toutes les fonctionnalités et tous les composants de l'application doivent se trouver dans le répertoire `src/app/`. Dans ce répertoire `app/`, vous définirez des sous-répertoires pour chaque fonctionnalité que vous souhaitez que votre application prenne en charge :
* Les événements d'application sont configurés dans `app-events/`.
* Les objets d'application sont définis dans `app-objects/`.
* Toutes les caractéristiques de la carte sont définies dans `cards/`.
* Les fonctionnalités de la page Paramètres sont définies dans `settings/`.
* La télémétrie est configurée dans `telemetry/`.
* Les abonnements Webhook sont définis dans `webhooks/`.
* Les actions de workflow personnalisées sont définies dans `workflow-actions/`.
* Dans chaque sous-répertoire d'entités, vous configurerez l'entité à l'aide d'un fichier `*-hsmeta.json`. Vous pouvez préfixer le nom du fichier avec un élément significatif pour votre application (par exemple, `my-app-hsmeta.json`), tant que le fichier se termine par `-hsmeta.json`. Ces fichiers doivent se trouver à la racine de leur dossier respectif (par exemple, `app/my-app-hsmeta.json`, `cards/my-card-hsmeta.json`).
L'exemple de structure de répertoire ci-dessous décrit toutes les fonctionnalités disponibles. Vous trouverez des détails sur la configuration du fichier `app-hsmeta.json` de schéma d'application de niveau supérieur dans la [section schéma d'application](#app-schema) ci-dessous. Une fois que vous êtes prêt à ajouter des fonctionnalités d'application, consultez la section [Ajout de fonctionnalités d'application](#adding-app-features).
```shell theme={null}
my-project-folder/
└── hsproject.json
└── src
└── app/
└── app-hsmeta.json/
└── app-events/
└── my-event-type-hsmeta.json
└── cards/
└── MyCard.jsx
└── my-app-card-hsmeta.json
└── package.json
└── settings/
└── Settings.tsx
└── settings-hsmeta.json
└── package.json
└── telemetry/
└── telemetry-hsmeta.json
└── webhooks/
└── webhooks-hsmeta.json
└── workflow-actions/
└── custom-action-hsmeta.json
```
> **[Afficher un exemple sur GitHub](https://github.com/robrown-hubspot/hubspot-project-components-ua-app-objects-beta/tree/main/projects/app-object-getting-started-template)**
L'extension HubSpot Visual Studio Code permet de [vérifier le type](/docs/developer-tooling/local-development/vs-code-extension#validate-hs-meta-json-config-files) de chacune des propriétés dans vos fichiers de configuration `*-hsmeta.json`.
## Spécification des UID
Le champ `uid` est un identifiant unique en interne pour votre application spécifique et doit également être globalement unique dans le projet. Toutes les [fonctionnalités de l'application](#adding-app-features) auront leur propre `uid` défini dans leurs fichiers `*-hsmeta.json` respectifs, qui doivent être différents du `uid` de niveau supérieur que vous choisissez dans le fichier `app-hsmeta.json` de votre application.
## Schéma de l'application
La configuration de premier niveau de votre application est spécifiée dans un fichier de configuration `app-hsmeta.json` du répertoire `app`.
```shell theme={null}
my-project-folder/
└── src
└── app/
└── app-hsmeta.json/
```
Voici les options de configuration disponibles pour `app-hsmeta.json`.
```json theme={null}
{
"uid": "new_developer_platform_app",
"type": "app",
"config": {
"description": "An example to demonstrate how to build an app with developer projects.",
"name": "my first app",
"distribution": "marketplace",
"auth": {
"type": "oauth",
"redirectUrls": ["http://localhost:3000/oauth-callback"],
"requiredScopes": ["crm.objects.contacts.read", "crm.objects.contacts.write"],
"optionalScopes": [],
"conditionallyRequiredScopes": []
},
"permittedUrls": {
"fetch": ["https://api.hubapi.com"],
"iframe": [],
"img": []
},
"support": {
"supportEmail": "support@example.com",
"documentationUrl": "https://example.com/docs",
"supportUrl": "https://example.com/support",
"supportPhone": "+18005555555"
}
}
}
```
> **[Afficher un exemple sur GitHub](https://github.com/robrown-hubspot/hubspot-project-components-ua-app-objects-beta/blob/main/projects/app-object-getting-started-template/src/app/app-hsmeta.json)**
Chacune des options de configuration est détaillée dans le tableau ci-dessous. Vous trouverez plus de contexte sur [la distribution de votre application](#distribution), la configuration [de l'authentification](#authentication) et la spécification [des domaines](#scopes) dans les sections sous le tableau.
Les champs marqués par sont \* obligatoires.
| Champ | Type | Description |
| - | - | - |
| `uid`\* | Chaîne | un identifiant unique interne pour l'application. Doit être globalement unique au sein du projet. Peut être n'importe quelle chaîne jusqu'à 64 caractères. Les caractères peuvent être en majuscules ou en minuscules, et peuvent inclure des chiffres, des tirets bas (`_`), des tirets (`-`) et des points (`.`). |
| `type`\* | Chaîne | le type de composant. Doit correspondre au nom du dossier parent (`app`). |
| `description`\* | Chaîne | une description de ce que l'application fait pour l'utilisateur qui l'installe. Peut être n'importe quelle chaîne jusqu'à 8 192 caractères. |
| `name`\* | Chaîne | le nom de l'application, qui s'affichera dans HubSpot. Peut être n'importe quelle chaîne jusqu'à 200 caractères. Ne doit pas commencer ou se terminer par un espace. |
| `distribution`\* | Chaîne | la méthode de distribution de l'application, qui peut être définie sur l'une des suivantes :
`marketplace` : utilisé si vous souhaitez que l'application soit éligible pour être listée dans le marketplace des applications HubSpot.
`private` : utilisé si vous souhaitez installer votre application uniquement dans un ensemble spécifique de comptes sur la liste d'autorisation ou un seul compte à la fois.
Découvrez-en davantage dans la section [Distribution](#distribution) ci-dessous. |
| `auth`\* | Objet | un objet contenant les détails de la méthode d'authentification de l'application. Consultez la [section Authentification](#authentication) ci-dessous pour plus de détails. |
| `permittedUrls` | Objet | un tableau contenant les URL que l'application est autorisée à appeler. Les URL doivent utiliser le schéma HTTPS et contenir une [autorité](https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Web_mechanics/What_is_a_URL#authority), suivie d'un préfixe de chemin facultatif si nécessaire. |
| `supportEmail` | Chaîne | une adresse e-mail valide que les utilisateurs peuvent contacter pour obtenir de l'aide. |
| `documentationUrl` | Chaîne | l'URL externe vers laquelle les utilisateurs peuvent accéder pour obtenir de la documentation utile. Doit utiliser HTTPS. |
| `supportUrl` | Chaîne | l'URL externe vers laquelle les utilisateurs peuvent accéder pour obtenir une assistance supplémentaire. Doit utiliser HTTPS. |
| `supportPhone` | Chaîne | le numéro de téléphone que les utilisateurs peuvent contacter pour obtenir de l'aide. Doit commencer par un signe plus (`+`). |
### Distribution
Le champ `distribution` dans le schéma de votre application vous permet de configurer la manière dont vous souhaitez distribuer votre application :
* Si vous prévoyez de lister votre application sur le [marketplace des applications de HubSpot](https://ecosystem.hubspot.com/marketplace/apps), définissez le champ `distribution` sur `"marketplace"`. Un exemple de schéma d'application pour cette option se trouve [ici](https://github.com/robrown-hubspot/hubspot-project-components-ua-app-objects-beta/blob/main/projects/public-app-getting-started-template/src/app/app-hsmeta.json). Si vous choisissez cette option, assurez-vous de définir dans `type` avec la propriété `auth` sur `oauth`, comme indiqué dans la section [Authentification](#authentication) ci-dessous.
* Si vous souhaitez autoriser l'installation de votre application sur un ensemble spécifique de comptes ajoutés à la liste d'autorisation ou si vous souhaitez limiter l'installation à un seul compte à la fois, définissez `distribution` sur `"private"`. Veillez à définir le `type` dans la propriété `auth` en conséquence :
* Si vous souhaitez installer votre application dans plusieurs comptes sur la base [d'une liste d'inclusion que vous configurez dans les paramètres de votre projet](/docs/apps/developer-platform/build-apps/manage-apps-in-hubspot#manage-authentication-for-your-app), définissez l'authentification `type` sur `oauth`. Consultez l'exemple de schéma d'application pour cette option [ici](https://github.com/robrown-hubspot/hubspot-project-components-ua-app-objects-beta/blob/main/projects/private-app-oauth-getting-started-template/src/app/app-hsmeta.json).
* Pour limiter l'installation à un seul compte, soit le même que celui que vous utilisez pour le développement, soit un autre compte auquel l'utilisateur installateur a accès, définissez l'authentification `type` sur `static`. Un exemple de schéma d'application pour l'authentification statique est disponible [ici](https://github.com/robrown-hubspot/hubspot-project-components-ua-app-objects-beta/blob/main/projects/private-app-static-getting-started-template/src/app/app-hsmeta.json).
### Authentification
L'authentification pour votre application est configurée via la propriété `auth` dans le schéma de votre application. Vous pouvez spécifier les exigences en matière de domaine de votre application, les URL de redirection et le type d'authentification.
Les champs marqués par sont \* obligatoires.
| Champ | Type | Description |
| - | - | - |
| `type`\* | Chaîne | le type d'authentification, qui peut être défini comme l'un des élèments suivants :
`oauth` : autoriser l'installation via OAuth, soit pour un ensemble spécifique de comptes sur la liste d'inclusion, soit pour le lister dans le marketplace des applications HubSpot.
`static` : limitez l'installation de votre application à un seul compte auquel l'utilisateur qui l'installe a accès.
|
| `redirectUrls`\* | Tableau | une liste des URL vers lesquelles le processus OAuth est autorisé à rediriger. Chaque application doit avoir au moins une URL de redirection d'authentification et doit utiliser HTTPS. La seule exception est `http://localhost`, qui est autorisée pour les tests. |
| `requiredScopes`\* | Tableau | une liste des domaines requis de votre application. Chaque application doit inclure au moins un domaine et l'utilisateur qui a procédé à l'installation doit accorder ces domaines pour installer l'application avec succès. [Découvrez-en davantage sur les domaines ci-dessous](#scopes). |
| `optionalScopes` | Tableau | une liste des domaines facultatifs de votre application. Ces domaines peuvent être exclus de l'autorisation lors de l'installation si le compte ou l'utilisateur qui installe l'application ne dispose pas des autorisations appropriées. Dans ce cas, le domaine ne sera pas inclus dans le jeton d'actualisation ou le jeton d'accès qui en résulte. [Découvrez-en davantage sur les domaines ci-dessous](#scopes). |
| `conditionallyRequiredScopes` | Tableau | une liste des domaines requis uniquement lorsqu'ils sont inclus dans le paramètre de requête `scope` de l'URL d'installation. [Découvrez-en davantage sur les domaines ci-dessous](#scopes). |
### Périmètres d'accès
Dans le champ `auth` d'un fichier de configuration d'application, vous pouvez indiquer trois [types de domaines](/docs/apps/legacy-apps/public-apps/overview#scope-types) : les domaines requis, les domaines conditionnellement requis et les domaines facultatifs.
Au minimum, votre application doit inclure le domaine `read` pour permettre aux clients d'accéder au type d'objet CRM associé.
```json theme={null}
"auth": {
"type" : "oauth",
"redirectUrls": ["http://localhost:3000/oauth-callback"],
"requiredScopes": [
"crm.objects.contacts.read",
"crm.objects.contacts.write"
],
"optionalScopes": [],
"conditionallyRequiredScopes": []
},
```
Pour obtenir une liste complète des domaines disponibles, consultez la [référence des domaines](/docs/apps/legacy-apps/authentication/scopes).
## Ajout de fonctionnalités de l'application
Pour configurer les fonctionnalités de l'application telles que les abonnements webhook, les actions de workflow personnalisées et les cartes d'application, consultez les guides ci-dessous pour plus de détails sur l'ajout des fichiers `*-hsmeta.json` associés à votre projet :
* [Créer une carte d'application](/docs/apps/developer-platform/add-features/ui-extensibility/app-cards/create-an-app-card)
* [Définir des événements d'application](/docs/apps/developer-platform/add-features/app-events/overview)
* [Créer des objets d'application](/docs/apps/developer-platform/add-features/app-objects/quickstart-guide-to-app-objects)
* [Créer un composant de paramètres](/docs/apps/developer-platform/add-features/ui-extensibility/create-a-settings-component)
* [Configurer une action de workflow personnalisée](/docs/apps/developer-platform/add-features/custom-workflow-actions)
* [Configurer un abonnement au webhook](/docs/apps/developer-platform/add-features/configure-webhooks)
* [Ajouter des données de télémétrie](/docs/apps/developer-platform/add-features/add-telemetry)
# Make API requests using a service key (BETA)
Source: https://developers.hubspot.fr/docs/apps/developer-platform/build-apps/authentication/account-service-keys
# Guide de démarrage rapide pour OAuth
Source: https://developers.hubspot.fr/docs/apps/developer-platform/build-apps/authentication/oauth/oauth-quickstart-guide
Découvrez comment configurer OAuth pour votre application à l
'Travailler avec OAuth | Guide de démarrage rapide pour OAuth';
"Découvrez comment configurer OAuth pour votre application à l'aide de ce guide de démarrage rapide et de cet exemple d'application Node.js.";
## Avant de commencer
Avant de commencer à utiliser OAuth avec HubSpot, vous devrez disposer :
* [D'un compte de développeur](https://app.hubspot.com/signup-hubspot/developers)
* [D'une application](/docs/apps/legacy-apps/public-apps/overview) associée à votre compte de développeur
* D'un compte HubSpot sur lequel installer votre application (vous pouvez utiliser un compte existant ou [créer un compte de test](/docs/getting-started/account-types)).
Vous devez être un [super administrateur pour](https://knowledge.hubspot.com/fr/user-management/hubspot-user-permissions-guide#super-admin) installer une application dans un compte HubSpot.
### Fonctionnement
HubSpot prend en charge le [type d'octroi du code d'autorisation OAuth 2.0](https://developer.okta.com/blog/2018/04/10/oauth-authorization-code-grant-type), qui peut être divisé en quatre étapes basiques :
1. Votre application ouvre une fenêtre de navigateur pour renvoyer l'utilisateur au serveur OAuth 2.0 de HubSpot.
2. L'utilisateur examine les autorisations demandées et accorde l'accès à l'application.
3. L'utilisateur est redirigé vers l'application avec un code d'autorisation dans la chaîne de requête.
4. L'application envoie une demande au serveur OAuth 2.0 pour échanger le code d'autorisation contre un jeton d'accès.
### Dans ce guide
* [Application de démarrage rapide](#quickstart-app) : une application de démonstration Node.js qui s'authentifie avec le serveur OAuth 2.0 de HubSpot
* [Obtenir des jetons OAuth](#getting-oauth-tokens) : comment autoriser votre application avec les utilisateurs
* [Utiliser des jetons OAuth](#using-oauth-tokens) : comment effectuer des requêtes avec un jeton
* [Actualiser des jetons OAuth](#refreshing-oauth-tokens) : comment utiliser le jeton d'actualisation fourni par HubSpot
Les exemples de code dans ce guide sont écrits en JavaScript (Node.js).
## Application de démarrage rapide
Si vous utilisez pour la première fois l'authentification OAuth avec les API de HubSpot, il est fortement recommandé de consulter [l'application de démarrage rapide d'OAuth 2.0](https://github.com/HubSpot/oauth-quickstart-nodejs), rédigée en Node.js. Cette application est conçue pour vous aider à bien démarrer avec OAuth 2.0, en vous en montrant toutes les étapes décrites ci-dessous dans la section [Obtenir des jetons OAuth](#getting-oauth-tokens) ci-dessous.

[Obtenir l'application de démarrage rapide](https://github.com/HubSpot/oauth-quickstart-nodejs)
## Obtenir des jetons OAuth
### 1. Créer l'URL d'autorisation et rediriger l'utilisateur vers le serveur OAuth 2.0 de HubSpot
Lorsque vous envoyez un utilisateur au serveur OAuth 2.0 de HubSpot, la première étape consiste à créer l'URL d'autorisation. Cela identifiera votre application et définira les ressources (périmètres d'accès) demandées au nom de l'utilisateur. Les paramètres de requête que vous pouvez transmettre dans une URL d'autorisation sont affichés dans le tableau ci-dessous. Pour plus d'informations sur cette étape, consultez la [documentation de référence](/docs/apps/legacy-apps/authentication/working-with-oauth).
Les champs marqués par \* sont
obligatoires.
| Paramètre | Description | Exemple |
| - | - | - |
| `client_id`\* | L'ID de client identifie votre application. Trouvez-le sur la page des paramètres de votre application. | `7fff1e36-2d40-4ae1-bbb1-5266d59564fb` |
| `scope`\* | Les [périmètres d'accès](/docs/apps/legacy-apps/authentication/scopes#list-of-available-scopes) demandés par votre application, séparés par des espaces en format URL-encoded (`%20`). | `oauth%20crm.objects.contacts.read` |
| `redirect_uri`\* | L'URL vers laquelle l'utilisateur sera redirigé après avoir autorisé votre application pour les périmètres d'accès demandés. **Pour les applications de production, `https` est obligatoire.** | `https://www.example.com/auth-callback` |
| `optional_scope` | Les périmètres d'accès qui sont facultatifs pour votre application seront abandonnées si le portail HubSpot sélectionné n'a pas accès à ces produits. | `automation` |
| `state` | Une valeur de chaîne unique pouvant être utilisée pour maintenir l'état de l'utilisateur lorsqu'il est redirigé vers votre application. | `WeHH_yy2irpl8UYAvv-my` |
Une fois votre URL créée, commencez le processus de connexion OAuth 2.0 en y redirigeant l'utilisateur.
Les blocs de code ci-dessous fournissent des exemples d'utilisation de différents types de redirection :
**Utilisation d'une redirection côté serveur :**
```js theme={null}
// Build the auth URL
const authUrl =
"https://app.hubspot.com/oauth/authorize" +
`?client_id=${encodeURIComponent(CLIENT_ID)}` +
`&scope=${encodeURIComponent(SCOPES)}` +
`&redirect_uri=${encodeURIComponent(REDIRECT_URI)}` +
`&state=${encodeURIComponent(STATE)}`;
// Redirect the user
return res.redirect(authUrl);
```
**Utilisation d'un lien HTML :**
```html theme={null}
Install
```
**Encodage d'un état utilisateur de redirection supplémentaire :**
Certaines applications peuvent avoir besoin de rediriger l'utilisateur vers différents endroits. Par exemple, une application peut souhaiter rediriger les utilisateurs vers différents sous-domaines de leur intégration (par exemple, `userA.integration.com` et `userB.integration.com`). Pour ce faire, utilisez le paramètre `state` pour encoder plus d'informations sur le statut de l'utilisateur :
1\. Générez et stockez une valeur nonce pour le paramètre de statut.
2\. Stockez le statut de l'utilisateur dans une banque de données locale en utilisant le nonce comme clé.
3\. Incluez la valeur nonce comme paramètre de statut dans l'URL d'autorisation.
4\. Lorsque l'utilisateur s'authentifie et est redirigé vers l'URL de redirection, validez le paramètre de statut et utilisez-le comme clé pour récupérer le statut de l'utilisateur stocké.
5\. À partir de là, redirigez l'utilisateur au besoin (par exemple, rediriger à nouveau vers une URL spécifique à l'utilisateur).
### 2. Demande de consentement de l'utilisateur par HubSpot
HubSpot affiche une fenêtre de consentement à l'utilisateur montrant le nom de votre application et une brève description des services d'API de HubSpot auxquels elle demande l'accès. L'utilisateur peut ensuite accorder l'accès à votre application.

**Remarque :** l'utilisateur installant l'application doit avoir accès à tous les périmètres d'accès demandés. Autrement, l'installation échouera et il sera dirigé vers une page d'erreur. Si cette page d'erreur s'affiche, l'utilisateur devra demander à un super administrateur d'installer l'application.
Votre application n'exécute aucune action à cette étape. Une fois l'accès octroyé, le serveur OAuth 2.0 de HubSpot enverra une requête à l'URI de rappel (callback) définie dans l'URL d'autorisation.
### 3. Gérer la réponse du serveur OAuth
Lorsque l'utilisateur a répondu à la demande de consentement de l'étape 2, le serveur OAuth 2.0 envoie une requête `GET` à l'URI de redirection indiquée dans votre URL d'authentification. S'il n'y a aucun problème et que l'utilisateur a approuvé la demande d'accès, la requête à l'URI de redirection aura un retour avec le paramètre de requête `code` joint. Si l'utilisateur n'autorise pas l'accès, aucune requête ne sera envoyée.
**Exemple :**
```js theme={null}
app.get("/oauth-callback", async (req, res) => {
if (req.query.code) {
// Handle the received code
}
});
```
### 4. Echange du code d'autorisation contre des jetons
Une fois que votre application reçoit un code d'autorisation de la part du serveur OAuth 2.0, elle peut échanger ce code contre un jeton d'accès et un jeton d'actualisation en envoyant une demande `POST` en format form-urlencoded à `https://api.hubapi.com/oauth/v1/token` avec les valeurs affichées ci-dessous. Pour plus d'informations sur cette étape, consultez la [documentation de référence](/docs/apps/developer-platform/build-apps/authentication/oauth/working-with-oauth).
| Paramètre | Description | Exemple |
| - | - | - |
| `grant_type` | Doit correspondre à `authorization_code` | `authorization_code` |
| `client_id` | ID de client de votre application | `7fff1e36-2d40-4ae1-bbb1-5266d59564fb` |
| `client_secret` | Secret de client de votre application | `7c3ce02c-0f0c-4c9f-9700-92440c9bdf2d` |
| `redirect_uri` | URI de redirection lorsque l'utilisateur autorise votre application | `https://www.example.com/auth-callback` |
| `code` | Le code d'autorisation reçu de la part du serveur OAuth 2.0 | `5771f587-2fe7-40e8-8784-042fb4bc2c31` |
**Exemple :**
```js theme={null}
const formData = {
grant_type: 'authorization_code',
client_id: CLIENT_ID,
client_secret: CLIENT_SECRET,
redirect_uri: REDIRECT_URI,
code: req.query.code
};
request.post('https://api.hubapi.com/oauth/v1/token', { form: formData }, (err, data) => {
// Handle the returned tokens
}
```
Le corps de la réponse du jeton sera composé de données JSON comme suit :
```json theme={null}
{
"refresh_token": "6f18f21e-a743-4509-b7fd-1a5e632fffa1",
"access_token": "CN2zlYnmLBICAQIYgZXFLyCWp1Yoy_9GMhkAgddk-zDc-H_rOad1X2s6Qv3fmG1spSY0Og0ACgJBAAADAIADAAABQhkAgddk-03q2qdkwdXbYWCoB9g3LA97OJ9I",
"expires_in": 1800
}
```
Le jeton d'accès expirera après le nombre de secondes indiqué dans le champ `expires_in` de la réponse (actuellement 30 minutes). Pour plus de détails sur l'obtention d'un nouveau jeton d'accès, consultez la section [Actualiser les jetons OAuth](#refreshing-oauth-tokens) ci-dessous.
## Utilisation des jetons OAuth
Une fois le flux de code d'autorisation terminé, votre application est autorisée à faire des demandes au nom de l'utilisateur. Pour cela, fournissez le jeton en tant que jeton Bearer dans l'en-tête HTTP `Authorization`. Des détails spécifiques sont disponibles dans la [documentation de référence](/docs/apps/developer-platform/build-apps/authentication/oauth/working-with-oauth).
**Exemple :**
```js theme={null}
request.get(
"https://api.hubapi.com/contacts/v1/lists/all/contacts/all?count=1",
{
headers: {
Authorization: `Bearer ${ACCESS_TOKEN}`,
"Content-Type": "application/json",
},
},
(err, data) => {
// Handle the API response
}
);
```
Les jetons d'accès reflètent les périmètres d'accès demandés à l'application et pas les autorisations ou les limites de ce qu'un utilisateur peut faire dans son compte HubSpot. Par exemple, si un utilisateur dispose des autorisations pour afficher uniquement les contacts détenus, mais autorise une demande pour le périmètre d'accès `crm.objects.contacts.read`, le jeton d'accès résultant peut afficher tous les contacts du compte et pas seulement ceux détenus par l'utilisateur autorisant.
## Actualisation des jetons OAuth
Les jetons d'accès OAuth expirent régulièrement. Ainsi, s'ils sont corrompus, les pirates informatiques n'y auront accès que pour une courte durée. Le cycle de vie du jeton est indiqué en secondes dans le champ `expires_in` lorsqu'un code d'autorisation est échangé contre un jeton d'accès.
Votre application peut échanger le jeton d'actualisation reçu contre un nouveau jeton d'accès en envoyant une requête `POST` en format form-urlencoded à `https://api.hubapi.com/oauth/v1/token` avec les valeurs ci-dessous. Pour plus d'informations sur cette étape, consultez la [documentation de référence](/docs/apps/developer-platform/build-apps/authentication/oauth/working-with-oauth).
| Paramètre | Description | Exemple |
| - | - | - |
| `grant_type` | Doit correspondre à `refresh_token` | `refresh_token` |
| `client_id` | ID de client de votre application | `7fff1e36-2d40-4ae1-bbb1-5266d59564fb` |
| `client_secret` | Secret de client de votre application | `7c3ce02c-0f0c-4c9f-9700-92440c9bdf2d` |
| `redirect_uri` | URI de redirection lorsque l'utilisateur autorise votre application | `https://www.example.com/auth-callback` |
| `refresh_token` | Le jeton d'actualisation reçu lorsque l'utilisateur autorise votre application | `b9443019-30fe-4df1-a67e-3d75cbd0f726` |
**Exemple :**
```js theme={null}
const formData = {
grant_type: 'refresh_token',
client_id: CLIENT_ID,
client_secret: CLIENT_SECRET,
redirect_uri: REDIRECT_URI,
refresh_token: REFRESH_TOKEN
};
request.post('https://api.hubapi.com/oauth/v1/token', { form: formData }, (err, data) => {
// Handle the returned tokens
}
```
Le corps de la réponse du jeton sera composé de données JSON comme suit :
```json theme={null}
{
"refresh_token": "6f18f21e-a743-4509-b7fd-1a5e632fffa1",
"access_token": "CN2zlYnmLBICAQIYgZXFLyCWp1Yoy_9GMhkAgddk-zDc-H_rOad1X2s6Qv3fmG1spSY0Og0ACgJBAAADAIADAAABQhkAgddk-03q2qdkwdXbYWCoB9g3LA97OJ9I",
"expires_in": 1800
}
```
Le nouveau jeton d'accès peut ensuite être utilisé pour effectuer des appels au nom de l'utilisateur. Lorsque le nouveau jeton expire, vous pouvez suivre les mêmes étapes pour en récupérer un nouveau.
## Articles connexes
[Méthodes d'authentification sur HubSpot](/docs/apps/developer-platform/build-apps/authentication/overview)
[Travailler avec OAuth](/docs/apps/legacy-apps/authentication/working-with-oauth)
[Gérer les jetons](/docs/apps/developer-platform/build-apps/authentication/oauth/working-with-oauth)
# Travailler avec OAuth
Source: https://developers.hubspot.fr/docs/apps/developer-platform/build-apps/authentication/oauth/working-with-oauth
OAuth est un moyen sécurisé d
"OAuth est un moyen sécurisé d'authentifier votre application. Il utilise des jetons d'autorisation plutôt qu'un mot de passe pour connecter votre application à un compte utilisateur. ";
OAuth est une méthode d'authentification sécurisée qui utilise des jetons d'autorisation plutôt qu'un mot de passe pour connecter votre application à un compte utilisateur. Le lancement de l'accès OAuth est la première étape pour permettre aux utilisateurs [d'installer votre application](/docs/apps/legacy-apps/public-apps/overview#install-an-app) dans leurs comptes HubSpot.
* Toute application conçue pour une installation par plusieurs comptes HubSpot ou pour un listing sur le marketplace des applications doit utiliser OAuth.
* Les utilisateurs qui installent des applications dans leur compte HubSpot doivent être un [super administrateur](https://knowledge.hubspot.com/fr/user-management/hubspot-user-permissions-guide#super-admin) ou disposer d'autorisations d'[accès aux marketplace des applications](https://knowledge.hubspot.com/fr/user-management/hubspot-user-permissions-guide#settings).
## Ressources recommandées
* Le [Guide de démarrage rapide pour OAuth](/docs/apps/legacy-apps/authentication/oauth-quickstart-guide) vous offrira davantage d'informations avec un exemple d'application.
* Ce [tutoriel HubSpot Academy](https://app.hubspot.com/l/academy/tracks/71/593/2967) propose une présentation rapide quant à l'utilisation de OAuth avec HubSpot, y compris une répartition du flux HubSpot-OAuth et des explications sur l'actualisation d'un jeton d'accès.
## Configurer l'authentification OAuth
Pour configurer l'authentification OAuth pour votre application :
* Tout d'abord, [créez une application](/docs/apps/legacy-apps/public-apps/overview) dans un [compte de développeur HubSpot](/docs/getting-started/account-types#developer-accounts). Après avoir créé l'application, vous trouverez l'ID du client et le secret client pour votre application sur la page d'*authentification* de vos paramètres d'application.

* Utilisez l'ID du client et le secret client ainsi que les [paramètres de requête](#query-parameters) et les [domaines](#scopes) décrits ci-dessous pour créer votre URL d'autorisation.
* Envoyez les utilisateurs qui installent votre application vers l'URL d'autorisation, où ils verront un écran qui leur permettra de sélectionner un compte et d'autoriser l'accès à votre intégration. Vous pouvez définir l'URL d'autorisation comme étant destinée à un compte HubSpot spécifique en ajoutant l'ID du compte entre `/oauth/` et `/authorize`, comme indiqué ci-dessous. Après avoir autorisé l'accès, ils seront redirigés vers votre application via un `redirect_url`, qui sera associé à un paramètre de requête de code. Vous utiliserez ce code et le secret client pour obtenir un [access\_token et un refresh\_token](/docs/apps/developer-platform/build-apps/authentication/oauth/working-with-oauth) depuis HubSpot.
* **Exemples d'URL d'autorisation**
* **Tout compte :** `https://app.hubspot.com/oauth/authorize?client_id=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx&scope=contacts%20automation&redirect_uri=https://www.example.com/`
* **Compte spécifique (ID 123456 :** `https://app.hubspot.com/oauth/123456/authorize?client_id=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx&scope=contacts%20automation&redirect_uri=https://www.example.com/`
* **Exemple d'URL de redirection :** `https://example.com/?code=xxxx`
* **Exemple d'erreur :** `https://www.example.com/?error=error_code&error_description=Human%20readable%20description%20of%20the%20error`
* Utilisez le `access_token` pour authentifier tous les appels d'API effectués pour ce compte HubSpot.
* Une fois que `access_token` expire, utilisez `refresh_token` pour générer un nouveau `access_token`.
- Votre application ne s'affichera pas comme une *application connectée* dans le compte d'un utilisateur tant que vous ne générerez pas le jeton d'actualisation et le jeton d'accès initial.
- Les jetons d'accès reflètent les périmètres d'accès demandés à l'application et pas les autorisations ou les limites de ce qu'un utilisateur peut faire dans son compte HubSpot. Par exemple, si un utilisateur dispose des autorisations pour afficher uniquement les contacts détenus, mais autorise une demande pour le périmètre d'accès `crm.objects.contacts.read`, le jeton d'accès résultant peut afficher tous les contacts du compte et pas seulement ceux détenus par l'utilisateur autorisant.
## Paramètres de requête
Les paramètres de requêtes suivants sont obligatoires lors de la création d'une URL d'autorisation pour votre compte :
| **Paramètre** | **Description** | **Mode d'emploi** |
| - | - | - |
| `client_id` | Un ID qui sert d'identifiant unique pour votre application. | Vous pouvez l'obtenir depuis la page des paramètres d'authentification de votre application (comme décrit ci-dessus). |
| `redirect_uri` | L'URL vers laquelle seront redirigés les visiteurs après avoir accordé l'accès à votre application. | Vous pouvez également désigner cette page sur la page des paramètres d'authentification de votre application. **Remarque :** Pour des raisons de sécurité, cette URL doit utiliser `https` en production. (Lorsque vous effectuez un test avec `localhost`, `http` pouvez être utilisé.) Vous devez également utiliser un domaine, car les adresses IP ne sont pas prises en charge. |
| `scope` | Un ensemble d'autorisations séparées par des espaces auxquelles votre application doit avoir accès. | Tous les domaines que vous avez vérifiés dans les paramètres d'*authentification* de votre application seront considérés comme obligatoires et vous devrez les inclure dans ce paramètre. Autrement, la page d'autorisation affichera une erreur. En outre, les utilisateurs recevront une erreur s'ils tentent d'installer votre application sur un compte qui n'a pas accès à un domaine inclus. Consultez la [documentation de référence sur les domaines](/docs/apps/legacy-apps/authentication/scopes#list-of-available-scopes) pour plus de détails sur les points de terminaison disponibles pour des domaines spécifiques. |
Les paramètres suivants sont facultatifs :
| **Paramètre** | **Mode d'emploi** | **Description** |
| - | - | - |
| `optional_scope` | Un ensemble d'autorisations séparées par des espaces pour votre application. | Les domaines facultatifs seront automatiquement supprimés de la requête d'autorisation si l'utilisateur sélectionne un compte HubSpot qui n'a pas accès à cet outil (par exemple, pour autoriser un ***domaine Content Hub** Entreprise* dans un compte gratuit HubSpot). Si vous utilisez des domaines facultatifs, vous devez vérifier le jeton d'accès ou le jeton d'actualisation pour consulter ceux qui ont été accordés. Consultez la [documentation de référence sur les domaines](/docs/apps/legacy-apps/authentication/scopes) pour plus de détails. |
| `state` | Si ce paramètre est inclus dans l'URL d'autorisation, la valeur sera incluse dans un paramètre de requête d'état lorsque l'utilisateur sera dirigé vers le `redirect_uri`. | Une valeur de chaîne pouvant être utilisée pour maintenir l'état de l'utilisateur lorsqu'il est redirigé vers votre application. |
## Configurer des domaines
OAuth exige que vous définissiez des domaines, ou des autorisations, pour votre application. Chaque domaine fournit un accès à un ensemble de points de terminaison d'API HubSpot et permet aux utilisateurs d'accorder à votre application l'accès à des outils spécifiques dans leur compte HubSpot.

L'accès à des API ou points de terminaison spécifiques dépend du niveau de compte HubSpot. Si votre application peut fonctionner avec plusieurs types de comptes HubSpot, vous pouvez utiliser le paramètre `optional_scope` pour inclure des domaines de travail. Ainsi, les clients utilisant uniquement des comptes HubSpot gratuits peuvent toujours autoriser votre application, même s'ils ne peuvent pas accéder à tous ses domaines. Votre application doit vérifier et traiter tous les domaines pour lesquels elle ne reçoit pas d'autorisation.
La liste complète des domaines d'application est disponible [ici](/docs/apps/legacy-apps/authentication/scopes).
## Documents associés
[Méthodes d'authentification sur HubSpot](/docs/apps/developer-platform/build-apps/authentication/overview)
[Guide de démarrage rapide pour OAuth](/docs/apps/legacy-apps/authentication/oauth-quickstart-guide)
[Gestion des jetons](/docs/apps/developer-platform/build-apps/authentication/oauth/working-with-oauth)
# Premiers pas : présentation
Source: https://developers.hubspot.fr/docs/apps/developer-platform/build-apps/authentication/overview
Découvrez comment faire vos premiers pas de développement avec HubSpot.
'Découvrez comment faire vos premiers pas de développement avec HubSpot.';
Que vous soyez un nouveau développeur HubSpot ou que vous cherchiez à étendre vos compétences, cette section vous guidera tout au long du processus de mise en route et de fonctionnement. Vous découvrirez les différentes options de développement disponibles ainsi que les outils et les comptes spécifiques dont vous aurez besoin pour atteindre vos objectifs.
## Les avantages d'une plateforme connectée
Tout d'abord, il convient de se pencher sur ce qui fait de HubSpot une plateforme puissante pour les développeurs.
Le fondement de chaque compte HubSpot est la plateforme CRM [](/docs/guides/crm/understanding-the-crm) (gestion de la relation client), une base de données de relations et de processus commerciaux. HubSpot propose aux développeurs et partenaires externes différents moyens de travailler avec le système CRM afin de créer une valeur ajoutée pour les utilisateurs finaux de HubSpot. Celui-ci offre notamment les possibilités suivantes :
* Créer des intégrations et/ou des extensions avec les API de HubSpot pour synchroniser les données entre HubSpot et des plateformes externes.
* Concevoir des sites web personnalisés en utilisant le CMS (système de gestion de contenu) de HubSpot. En plus d'une suite complète d'outils de gestion de contenu, le CMS s'intègre totalement au CRM. Cela facilite la gestion du lancement des campagnes, de l'acquisition de leads et de la communication continue avec les clients.
* Personnaliser le CRM avec des extensions d'interface utilisateur. Les développeurs peuvent utiliser React pour créer des cartes personnalisées flexibles qui s'intègrent parfaitement à HubSpot.
Dans la section suivante, vous aurez un aperçu des outils disponibles pour les développeurs HubSpot. Ensuite, vous choisirez une option pour poursuivre votre parcours de développeur HubSpot.
## 1. Installer des outils pour vous aider dans la conception
Il existe une large gamme d'outils disponibles pour les développeurs HubSpot. La combinaison d'outils dont vous aurez besoin dépendra de vos objectifs spécifiques.
* **ILC HubSpot :** l'installation de l'ILC HubSpot pour le développement local est un excellent point de départ pour de nombreuses tâches de développement. L'ILC est utilisée lors de la création d'extensions d'interface utilisateur et de ressources CMS. Elle peut être utilisée pour créer et gérer des secrets, des tables HubDB et des données d'objets personnalisés à partir de votre compte. Vous devez avoir installé [Node.js](https://nodejs.org/en/) (la version 18 ou une version ultérieure est requise. La version LTS est recommandée). Pour installer l'ILC de manière globale, exécutez la commande suivante :
```shell theme={null}
npm i -g @hubspot/cli
```
* **Visual Studio Code :** l'installation de [Visual Studio Code](https://code.visualstudio.com/) vous permet de bénéficier de l'extension [HubSpot Visual Studio Code](https://developers.hubspot.com/docs), qui vous permet de centraliser votre workflow de développement.
* **Bibliothèques clients** : HubSpot fournit des bibliothèques clients pour [Node](https://github.com/HubSpot/hubspot-api-nodejs), [PHP](https://github.com/HubSpot/hubspot-api-php), [Ruby](https://github.com/HubSpot/hubspot-api-ruby) et [Python](https://github.com/HubSpot/hubspot-api-python).
* **Postman :** utilisez [Postman](https://www.postman.com/) pour accéder aux [collections Postman de HubSpot](https://www.postman.com/hubspot). Dans la documentation sur les API de HubSpot, vous trouverez des boutons permettant d'exécuter des appels à l'aide de la collection.

Découvrez-en davantage sur [les outils de développement de HubSpot](/docs/developer-tooling/overview).
## 2. Choisir ce qu'il faut concevoir
Il n'y a pas de solution unique pour développer avec HubSpot. Il s'agit d'une plateforme flexible qui peut répondre à un large éventail de besoins.
L'une des quatre grandes catégories énumérées ci-dessous devrait couvrir la plupart de ces besoins. Vous pouvez choisir celle qui vous convient le mieux pour une brève présentation, accompagnée de quelques actions immédiates pour vous aider à démarrer. Vous pouvez également découvrir les meilleurs outils pour ce travail et savoir si un [type spécifique de compte HubSpot](/docs/getting-started/account-types) est nécessaire.
* [Utiliser des API et créer des intégrations](https://developers.hubspot.com#use-apis-and-build-integrations)
* [Créer des applications pour le marketplace](https://developers.hubspot.com#build-for-the-app-marketplace)
* [Personnaliser l'interface utilisateur HubSpot](https://developers.hubspot.com#customize-the-hubspot-ui)
* [Créer des sites web personnalisés](https://developers.hubspot.com#build-custom-websites)
## 3. Rejoignez vos pairs
Entrez en contact avec vos pairs qui créent déjà sur HubSpot. Posez des questions, partagez vos connaissances, créez une communauté et tissez des liens.
* [Slack pour les développeurs](https://developers.hubspot.com/community)
* [Forums des développeurs](https://community.hubspot.com/t5/HubSpot-Developers/ct-p/developers)
* [GitHub pour les développeurs](https://github.com/hubspotdev)
## 4. Étendez vos connaissances à votre façon
Une fois que vous êtes opérationnel, de nombreuses ressources sont disponibles pour vous aider à approfondir vos connaissances. Vous pouvez accéder à des guides approfondis, à des documents de référence détaillés ou aux [cours de HubSpot Academy](https://academy.hubspot.com/courses), selon votre méthode d'apprentissage préférée.
# Demandes de validation
Source: https://developers.hubspot.fr/docs/apps/developer-platform/build-apps/authentication/request-validation
# Domaines
Source: https://developers.hubspot.fr/docs/apps/developer-platform/build-apps/authentication/scopes
# Créer une nouvelle application à l'aide du CLI (BÊTA)
Source: https://developers.hubspot.fr/docs/apps/developer-platform/build-apps/create-an-app
# Integrate AI tools with the HubSpot MCP server (BETA)
Source: https://developers.hubspot.fr/docs/apps/developer-platform/build-apps/integrate-with-the-remote-hubspot-mcp-server
# Gérer les applications dans HubSpot (BÊTA)
Source: https://developers.hubspot.fr/docs/apps/developer-platform/build-apps/manage-apps-in-hubspot
Découvrez comment gérer l'authentification et d'autres paramètres pour votre application sur la nouvelle plateforme de développement
Après avoir chargé votre application sur HubSpot à l'aide du [guide de démarrage rapide](/docs/apps/developer-platform/build-apps/create-an-app), en la migrant depuis une application héritée ou en exécutant manuellement la commande `hs project upload`, vous pouvez gérer votre application sur la page index des projets de votre compte HubSpot. Sur la page de détails de votre application, vous pouvez afficher son historique de création et de déploiement, confirmer les fonctionnalités actives de l'application et gérer l'authentification.
## Afficher votre application sur la page des détails du projet
Pour consulter les détails de votre application :
* Dans votre compte HubSpot, naviguez vers **Développent**.
* Sur la page **Projets**, cliquez sur le **nom** de votre projet. Sur la page des détails du projet, passez en revue et gérez votre application :
* Dans le menu latéral de gauche, vous pouvez cliquer sur **Détails** pour accéder directement à l'historique de création et de déploiement récents, ou cliquer sur une fonctionnalité de l'application pour vérifier la configuration détaillée dans son fichier `*-hsmeta.json` associé.
* Cliquez sur l'onglet **Paramètres** pour activer vos paramètres de déploiement automatique ou si vous avez besoin de supprimer votre application.
* Sous *Composants du projet*, cliquez sur le nom de votre application (tel que spécifié dans le [schéma de niveau supérieur](/docs/apps/developer-platform/build-apps/app-configuration#app-schema) de votre application) pour consulter le schéma d'application le plus récemment déployé, les fonctionnalités d'application actuellement configurées et gérer les paramètres d'authentification.

## Gérer l'authentification pour votre application
Pour afficher les informations d'identification de votre application et gérer l'authentification :
* Dans l'onglet *Vue d'ensemble* de la page Détails du projet, sous *Composants du projet*, cliquez sur le nom de l'application de niveau supérieur tel que défini dans le champ `name` du [fichier de schéma de niveau supérieur](/docs/apps/developer-platform/build-apps/app-configuration#app-schema) de votre application.
* Cliquez sur l'onglet **Authentification** pour afficher les informations d'identification, les domaines configurés et les URL de redirection de votre application.

Si la distribution de votre application est définie sur `private` dans votre [fichier de schéma d'application](/docs/apps/developer-platform/build-apps/app-configuration#app-schema), vous pouvez gérer les paramètres de la liste d'inclusion en cliquant sur l'onglet **Distribution** :
* Un récapitulatif des comptes actuellement installés apparaîtra en haut de la page. Pour les applications avec une distribution `private`, vous pouvez installer votre application dans un maximum de 10 comptes HubSpot.
* Pour ajouter des comptes sur la liste d'inclusion, cliquez sur **Ajouter le ou les comptes approuvés.**
* Dans le panneau de droite, sous *Autres comptes de production*, consultez la liste des comptes de production auxquels votre utilisateur HubSpot a actuellement accès.
* Cochez la **case** en regard des comptes que vous souhaitez ajouter à la liste d'autorisation et qui peuvent installer votre application.
* Lorsque vous avez terminé, cliquez sur **Enregistrer les modifications**.

* Dans la liste des comptes approuvés, vous pouvez passer le curseur sur un compte pour copier son lien d'installation ou le supprimer de la liste des comptes autorisés.

# Migrate an existing app to the latest version of the developer platform (2026.03)
Source: https://developers.hubspot.fr/docs/apps/developer-platform/build-apps/migrate-an-app/migrate-to-the-latest-platform-version
# Determine your migration path to 2026.03
Source: https://developers.hubspot.fr/docs/apps/developer-platform/build-apps/migrate-an-app/overview
# Manage developer seats
Source: https://developers.hubspot.fr/docs/apps/developer-platform/developer-seats
# Developer platform
Source: https://developers.hubspot.fr/docs/apps/developer-platform/overview
# Types de comptes HubSpot
Source: https://developers.hubspot.fr/docs/getting-started/account-types
Découvrez les différents types de comptes HubSpot et ce à quoi chacun sert.
Il existe plusieurs types de comptes HubSpot, chacun ayant un objectif distinct. Ci-dessous, découvrez chaque type de compte et à quoi il est destiné.
## Comptes HubSpot standards
Les comptes HubSpot standards représentent le type de compte le plus courant. C'est là que vous trouverez tous les outils, fonctionnalités et paramètres inclus dans votre abonnement HubSpot. Ils peuvent être gratuits ou payants, et font office d'environnement de production.
Un compte HubSpot standard a accès à tous les outils et fonctionnalités inclus dans votre abonnement.
## Comptes de développeurs d'applications
Les comptes gratuits et de développeurs d'applications sont destinés à la création et à la gestion des applications, des intégrations et des comptes de test pour les développeurs. C'est également là que vous pouvez créer et gérer les listings du marketplace des applications. Cependant, les comptes de développeurs d'applications et les comptes de test associés ne sont pas connectés à un compte HubSpot standard. Ils ne peuvent pas synchroniser les données ou les ressources vers ou à partir d'un autre compte HubSpot.
Les comptes de développeurs d'applications se distinguent par une bannière située en haut de n'importe quelle page, qui indique *Il s'agit d'un compte de développeur d'application*.

Commencez par créer un [compte de développeur d'applications](https://developers.hubspot.com/get-started).
## Compte de test pour les développeurs
Dans les [comptes de développeurs d'applications](#app-developer-accounts), vous pouvez créer des comptes de test pour les développeurs pour tester des applications et des intégrations sans affecter les données réelles de HubSpot. Les comptes de test pour les développeurs ne reflètent pas les comptes de production, mais sont plutôt des comptes HubSpot gratuits avec accès à un essai de 90 jours de nombreuses fonctionnalités des versions Entreprise des logiciels, avec les limitations suivantes :
* **Marketing** **Hub :** vous pouvez envoyer des e-mails marketing uniquement aux adresses des utilisateurs que vous avez ajoutés à votre compte de test pour les développeurs.
* **CMS Hub :** le nombre de pages que vous pouvez créer est soumis aux limites suivantes.
* **Pages de site web** : 25
* **Outils de blog** : 1 blog comportant un maximum de 100 articles
* **Pages de destination** : 25
* **Workflows** : un maximum de 100 000 fiches d'informations peuvent être inscrites chaque jour dans des workflows créés dans un compte de test pour les développeurs. Si cette limite quotidienne est atteinte :
* Toute tentative d'inscription supplémentaire au-delà de cette limite sera annulée.
* Les utilisateurs seront informés dans l'application qu'ils ont atteint la limite d'inscription quotidienne, ainsi que l'heure à laquelle la limite sera actualisée.
Vous pouvez créer jusqu'à 10 comptes de test par compte de développeur. Ce type de compte ne peut pas synchroniser les données avec d'autres comptes, et ils ne peuvent pas être connectés à un compte HubSpot standard. Les comptes de test se distinguent par une bannière en haut de la page, qui indique le nombre de jours restants avant son expiration.

Découvrez ci-dessous comment créer et gérer des comptes de test.
### Créer un compte de test pour les développeurs
Pour créer un compte de test pour les développeurs :
* Dans la barre latérale de navigation de gauche de votre compte de développeur d'applications, cliquez sur **Comptes de test**.

* Cliquez sur **Créer un compte de test d'applications** dans l'angle supérieur droit.

* Saisissez un **nom de compte**, puis cliquez sur **Créer**.
Pour accéder à vos comptes de test pour les développeurs et les gérer :
* Dans la barre de navigation supérieure de votre compte de développeur d'applis, cliquez sur **Test**.
* Passez le curseur sur le **compte** que vous souhaitez gérer, puis sélectionnez une action :
* Pour supprimer le compte, cliquez sur **Supprimer**.
* Pour copier l'ID du compte, le renouveler ou le renommer, cliquez sur le menu déroulant **Plus**.

### Renouveler un compte de test pour les développeurs
Les comptes de test pour les développeurs expire au bout de 90 jours si aucun appel d'API n'est effectué sur le compte. Vous pouvez soit renouveler manuellement le compte à partir de la page *Test* dans HubSpot, soit effectuer un appel d'API vers le compte. Gardez à l'esprit ce qui suit si vous souhaitez renouveler le compte via un appel d'API :
* Cela s'applique uniquement aux demandes d'API effectuées à l'aide des [jetons OAuth](/docs/api-reference/auth-oauth-v1/guide) générés par une application dans le même compte de développeur que le compte de test que vous souhaitez renouveler.
* Les renouvellements doivent être effectués au maximum 30 jours avant la date d'expiration du compte de test.
## Comptes sandbox
Les comptes de sandbox vous permettent de tester vos modifications sans affecter votre compte standard. Découvrez-en davantage sur les différents types de comptes de sandbox dans les sections ci-dessous.
### Comptes sandbox standards
Si vous disposez d'un abonnement *Entreprise*, vous pouvez créer des comptes de sandbox qui font office d'environnements sûrs et sécurisés où vous pouvez tester de nouveaux workflows, intégrations, pages web et autres changements importants sans avoir d'impact sur votre compte standard. Ces environnements de test copient la structure de votre compte standard.
Ces comptes peuvent être identifiés par une bannière jaune en haut de la page qui inclut le libellé : *Vous vous trouvez sur \[nom de la sandbox], qui est un compte d'environnement de test standard*. La bannière comprend également un lien vers votre compte de production pour y passer plus facilement.

Découvrez-en davantage sur les comptes d'environnement de test standard dans la [base de connaissances de HubSpot](https://knowledge.hubspot.com/account/set-up-a-hubspot-standard-sandbox-account).
### Comptes sandbox CMS
Les environnements de test CMS et les comptes gratuits sont destinés à la création et au test de modifications de sites web sans impacter votre compte standard ni le site web en ligne. Tout comme les comptes développeurs d'applications, les comptes sandbox CMS ne sont pas connectés à votre compte HubSpot standard.
Vous pouvez [créer gratuitement un compte d'environnement de test CMS](https://offers.hubspot.com/free-cms-developer-sandbox).
Les sandbox CMS n'ont pas de bannière, mais elles n'ont accès qu'aux outils gratuits de HubSpot et au ***CMS Hub*** *Entreprise* (et ne peuvent pas se connecter à un domaine).
### Comptes sandbox de développement (BÊTA)
Si vous disposez d'un abonnement ***Sales Hub*** ou ***Service Hub*** *Entreprise*, vous pouvez créer un compte sandbox de développement via l'ILC à des fins de développement local. Vous pouvez accéder aux comptes sandbox des développeurs en [optant pour la version bêta des outils de développement CRM](https://knowledge.hubspot.com/account/opt-your-hubspot-account-into-a-beta-feature) dans votre compte HubSpot standard.
Les sandbox de développement peuvent être identifiées par une bannière jaune en haut de la page qui inclut le libellé : *Vous vous trouvez sur \[nom de la sandbox], qui est un compte d'environnement de test de développement*. Découvrez-en davantage sur la création et l'utilisation des [comptes sandbox de développement](/docs/developer-tooling/overview#create-and-use-development-sandboxes).

## Comptes fournisseurs du marketplace
Les comptes fournisseurs du marketplace sont destinés à la création et à la gestion des [listes et des transactions du marketplace des modèles](/docs/cms/marketplace/template-guidelines). Pour commencer à vendre sur le marketplace de modèles, [créez un compte fournisseur de marketplace de modèles](https://app.hubspot.com/signup-hubspot/asset-provider). Si vous êtes un [partenaire HubSpot](https://www.hubspot.com/partners), vous disposez déjà de la fonctionnalité de fournisseur de marketplace dans votre compte partenaire.
Un compte fournisseur de marketplace se distingue par un élément **Marketplace** **des ressources** dans le menu de navigation supérieur.

# Vue d'ensemble développeur
Source: https://developers.hubspot.fr/docs/getting-started/developer-overview
# Premiers pas avec les modules
Source: https://developers.hubspot.fr/docs/getting-started/quickstart
Créez un composant réutilisable dans vos pages et modèles, appelé module personnalisé. Vous en découvrirez davantage sur les champs et leur utilisation avec HubL.
'Créez un composant réutilisable dans vos pages et modèles, appelé module personnalisé. Vous en découvrirez davantage sur les champs et leur utilisation avec HubL.';
'[https://cdn2.hubspot.net/hubfs/327485/Module%20Editor-1-1.png](https://cdn2.hubspot.net/hubfs/327485/Module%20Editor-1-1.png)';
Dans ce tutoriel, vous utiliserez le thème boilerplate de CMS Hub afin de découvrir comment créer un module et l'utiliser dans des modèles et des pages dans le cadre d'un thème. À la fin du tutoriel, vous aurez créé un module de témoignage client comprenant un champ d'image, un champ de texte et un champ de texte enrichi.
S'il s'agit de votre première expérience avec le développement CMS Hub, nous vous recommandons de consulter la page suivante :
**Démarrage rapide du développement CMS Hub**
Si vous souhaitez développer un module à utiliser dans un thème que vous souhaitez répertorier sur le marketplace des ressources HubSpot, consultez les [exigences du marketplace des ressources concernant les modules](https://developers.hubspot.com/docs).
## Avant de commencer
Avant de commencer ce tutoriel :
* Créez un [compte sandbox de développeur CMS Hub](https://offers.hubspot.com/free-cms-developer-sandbox). Vous pouvez utiliser votre compte existant, mais le compte sandbox vous permettra de développer sans impacter les éléments de votre compte principal.
* Installez [Node.js](https://nodejs.org/en/), qui active les outils de développement local de HubSpot. Les versions 10 ou ultérieures sont prises en charge.
Si vous souhaitez prendre de l'avance, vous pouvez directement prévisualiser les [fichiers de projet](https://github.com/HubSpot/cms-modules-getting-started/tree/3b9159334f8c6204c7d2d34d8945d71b6ba402ea) terminés. Comme le code du thème de boilerplate CMS peut changer au fil du temps, seuls les fichiers les plus importants que les développeurs devront créer ou modifier au cours du tutoriel sont inclus. Ces fichiers comprennent :
1. **Testimonial.module :** le dossier contenant les fichiers qui composent le module personnalisé que vous allez créer dans le cadre du tutoriel.
2. **homepage.html :** le modèle que vous allez modifier pour inclure le module personnalisé.
3. **images :** le dossier contenant les photos de profil que vous utiliserez dans le module.
## Configurer votre environnement de développement local
Au cours de ce tutoriel, vous développerez le module localement. Pour interagir avec HubSpot dans votre interface de ligne de commande, vous devrez installer l'[ILC HubSpot](/docs/developer-tooling/local-development/hubspot-cli/install-the-cli) et la configurer pour accéder à votre compte.
* Dans le terminal, exécutez la commande suivante pour installer l'ILC globalement. Pour installer l'ILC uniquement dans votre répertoire actuel, exécutez `npm install @hubspot/cli`.
```shell theme={null}
npm install -g @hubspot/cli
```
* Dans le répertoire où vous stockerez vos fichiers de thème, authentifiez votre compte HubSpot afin de pouvoir interagir avec lui via l'ILC.
```shell theme={null}
hs account auth
```
* Appuyez sur **Entrée** pour ouvrir la page de la clé d'accès personnelle dans votre navigateur.
* Sélectionnez le **compte** sur lequel vous souhaitez effectuer le déploiement, puis cliquez sur **Continuer avec ce compte**. Vous accéderez alors à la page de la clé d'accès personnelle du compte.
* À côté de *Clé d'accès personnelle*, cliquez sur **Afficher** pour révéler votre clé. Cliquez ensuite sur **Copier** pour la copier dans votre presse-papiers.
* Collez la clé dans le terminal, puis appuyez sur **Entrée**.
* Saisissez un **nom** unique pour le compte. Ce nom sera vu et utilisé uniquement par vous lors de l'exécution des commandes. Pour connecter les outils de développement locaux à votre compte, appuyez sur la touche **Entrée**.
Vous verrez alors un message de succès confirmant que le fichier `~/.hscli/config.yml` a été créé.
## Ajouter le boilerplate CMS à votre compte
* Exécutez la commande ci-dessous pour créer un nouveau thème nommé `my-theme`. Un dossier de thème intitulé `my-theme` sera alors créé dans votre répertoire de travail, contenant les éléments du boilerplate.
```shell theme={null}
hs create website-theme my-theme
```
* Téléchargez les fichiers dans votre compte.
```shell theme={null}
hs upload
```
| Paramètre | Description |
| - | - |
| | Le chemin d'accès au fichier local, relatif à votre répertoire de travail actuel. |
| | Le chemin de destination dans votre compte HubSpot. Il peut s'agir d'un nouveau dossier. |
Par exemple, `hs upload my-theme my-new-theme` téléchargerait le dossier `my-theme` de votre ordinateur vers un dossier `my-new-theme` dans HubSpot.
Par défaut, HubSpot va télécharger sur le compte par défaut dans votre fichier `hubspot.config,yml`. Cependant, vous pouvez également spécifier un compte en incluant l'indicateur `--account=` dans la commande. Par exemple : `hs upload --portal=mainProd`.
Découvrez-en davantage dans la [référence des commandes d'ILC](/docs/developer-tooling/local-development/hubspot-cli/install-the-cli).
## Créer un module dans HubSpot
Avec le boilerplate de CMS dans votre environnement local, vous allez maintenant créer un nouveau module pour le thème.
Aux fins de ce tutoriel, vous créerez le module dans HubSpot, puis le transférerez dans le thème à l'aide de l'ILC. Cependant, vous pouvez également créer des modules à partir de zéro localement à l'aide de la commande [hs create module](/docs/developer-tooling/local-development/hubspot-cli/install-the-cli).
* Connectez-vous à votre compte HubSpot, puis accédez au gestionnaire de conception en accédant à **Marketing > Fichiers et modèles > Outils de conception**.
* Dans la barre latérale gauche du gestionnaire de conception, ouvrez le **dossier du thème** que vous venez de télécharger.
* Dans le dossier du thème, ouvrez le **dossier des modules**.
* En haut à gauche, cliquez sur **Fichier > Nouveau fichier** pour créer un nouveau module dans ce dossier.
* Dans la boîte de dialogue, cliquez sur le **menu déroulant**, puis sélectionnez **Module** et **Suivant**.

* Sélectionnez la case à cocher **Pages** pour que le module soit disponible pour les sites web et les pages de destination.
* Nommez le module **Témoignage**, puis cliquez sur **Créer**.
### Ajouter des champs au module
Vous allez ensuite ajouter trois champs au module :
* Un champ de texte pour stocker le nom du client qui donne son témoignage.
* Un champ d'image qui stockera la photo de profil du client.
* Un champ de texte enrichi qui stockera le témoignage du client.
#### Ajouter le champ de texte pour le nom du client
* Dans la barre latérale droite, cliquez sur le menu déroulant **Ajouter un champ**, puis sélectionnez **Texte**.

* Dans la barre latérale de droite, cliquez sur l'**icône Crayon** dans l'angle supérieur droit pour nommer le champ. Pour ce tutoriel, saisissez le **nom du client**. Vous verrez alors le nom de la variable HubL changer pour **customer\_name**.
* Définissez le **texte par défaut** sur **Sally**.

* Dans la barre latérale droite, cliquez sur l'icône du **fil d'Ariane** pour revenir au menu principal du module.

#### Ajouter le champ d'image pour la photo de profil du client
* Ajoutez un autre champ en utilisant la même méthode, en sélectionnant cette fois le type de champ **Image**.
* Intitulez le champ **Image de profil**, puis définissez le **nom de la variable HubL** sur **profile\_pic**.
* Sous **Image par défaut**, sélectionnez la photo de profil fournie pour Sally dans le dossier d'**images** des [fichiers de projet terminés](https://github.com/HubSpot/cms-modules-getting-started/tree/3b9159334f8c6204c7d2d34d8945d71b6ba402ea/images).
* Définissez le **texte alternatif** sur **Image de profil de Sally**.

#### Ajouter le champ de texte enrichi pour le témoignage de Sally
* Ajoutez un autre champ en utilisant la même méthode, en sélectionnant cette fois le type de champ **Texte enrichi**.
* Intitulez le champ de texte enrichi **Témoignage**.
* Cliquez sur la zone **Texte enrichi par défaut**, puis saisissez "Je n'ai eu que de merveilleuses expériences avec cette entreprise."

Jusqu'à présent, vous avez ajouté des données dans plusieurs champs de module. À ce stade, le module ne contient pas de code HTML pour restituer ces données. Dans l'éditeur de module, cela se traduit par l'état vide de la section `module.html`. 
Ensuite, vous ajouterez HubL à `module.html` pour afficher les données des champs.
### Ajouter HubL pour afficher les données des champs
Pour afficher les données des champs précédemment créés, ajoutez le HubL suivant au panneau `module.html` :
```hubl theme={null}
{{module.customer_name}}
{{module.testimonial}}
```
Les jetons HubL ci-dessus utilisent la notation par points pour accéder aux données de chaque champ. Dans ce cas, étant donné que nous voulons extraire des données des champs de module, chaque jeton commence par `module`, suivi du nom de la variable HubL du champ. Vous pouvez utiliser la notation par points pour accéder davantage aux propriétés spécifiques d'un champ, que vous pouvez voir dans les jetons `profile_pic` à la ligne 3 ci-dessus.
* Une fois le HubL ajouté à votre module, vous pouvez cliquer sur **Aperçu** en haut à droite pour voir à quoi ressemble le module jusqu'à présent.

* Puis, dans l'angle supérieur droit, cliquez sur **Publier les modifications**.
Après avoir créé et publié le module dans HubSpot, vous allez maintenant utiliser l'ILC pour transférer le module dans votre environnement local afin de pouvoir en consulter le contenu et y apporter d'autres modifications.
## Consulter et modifier le module localement
Pour afficher le module localement, vous devez tout d'abord le transférer dans votre thème local.
* Dans le terminal, exécutez la commande : `hs fetch ` :
* `` représente le chemin du fichier du module dans HubSpot. Pour obtenir le chemin du fichier, vous pouvez effectuer un clic droit sur le module dans la barre latérale gauche du gestionnaire de conception, puis sélectionner **Copier le chemin**.

* `` représente le chemin d'accès au répertoire local où se trouve votre thème. S'il est omis, il s'agira par défaut de votre répertoire de travail actuel.
Par exemple, si vous êtes déjà dans le répertoire de travail, votre commande fetch peut ressembler à ce qui suit :
```shell theme={null}
hs fetch my-theme/modules/testimonial.module
```
### Ouvrir le dossier du module dans votre environnement local
Dans votre éditeur de code préféré, accédez au dossier du module que vous venez de télécharger depuis votre compte HubSpot. Dans le dossier de votre module, vous verrez cinq fichiers différents :
| Paramètre | Description |
| - | - |
| `fields.json` | Un objet JSON qui contient les champs de votre module. |
| `meta.json` | Un objet JSON qui contient des méta-informations sur votre module. |
| `module.css` | Le fichier CSS qui donne un style à votre module. |
| `module.html` | Le HTML et le HubL de votre module. |
| `module.js` | Le JavaScript de votre module. |
Vous trouverez des informations plus détaillées dans la documentation sur la [structure des fichiers du module](https://developers.hubspot.com/docs), notamment en ce qui concerne les fichiers `fields.json` et `meta.json`. Ce tutoriel se concentre sur les fichiers `fields.json`, `module.css` et `module.html` ainsi que sur la manière dont ils sont générés, téléchargés et chargés dans l'éditeur de modules du gestionnaire de conception.
### Consulter le fichier fields.json du module
Ouvrez le module du fichier `fields.json`. À l'exception de certains numéros `id`, de l'attribut `src` du champ d'image et, éventuellement, de l'ordre des champs, le fichier doit contenir un objet JSON similaire à ce qui suit :
```json theme={null}
//fields.json
[
{
"label": "Customer Name",
"name": "customer_name",
"id": "2a025cd5-7357-007f-ae2f-25ace762588e",
"type": "text",
"required": true,
"locked": false,
"validation_regex": "",
"allow_new_line": false,
"show_emoji_picker": false,
"default": "Sally"
},
{
"label": "Profile Picture",
"name": "profile_pic",
"id": "7877fb84-eb8a-d2c7-d939-77e6e9557d8f",
"type": "image",
"required": false,
"locked": false,
"responsive": true,
"resizable": true,
"default": {
"src": "https://cdn2.hubspotqa.net/hubfs/101140939/profile-pic-sally.svg",
"alt": "Sally Profile Picture",
"width": 100,
"height": 100,
"max_width": 100,
"max_height": 100
}
},
{
"label": "Testimonial",
"name": "testimonial",
"id": "c5524ece-1ab5-f92d-a5de-e2bf53199dfa",
"type": "richtext",
"required": false,
"locked": false,
"default": "
I’ve had nothing but wonderful experiences with this company.
"
}
]
```
Les valeurs des champs suivants correspondront aux valeurs que vous avez ajoutées à l'étape 3 :
* `name` : nom du champ
* `label` : libellé du champ
* `default` : valeur par défaut du champ
### Consulter le fichier module.html du module
Le fichier `module.html` doit contenir le HubL et le HTML que vous avez saisis précédemment dans l'éditeur de module HubL + HTML.
Pour rendre ce code plus intéressant et adapté pour le style CSS, copiez et collez le code suivant dans le fichier :
```hubl theme={null}
{{ module.customer_name }}
{{ module.testimonial }}
```
En saisissant votre HTML comme ci-dessus, vous utilisez la [structure de classe BEM](https://css-tricks.com/bem-101/) conformément au [guide de style](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/STYLEGUIDE.md#css-code-formatting) du thème de boilerplate CMS Hub.
### Consulter le fichier module.css du module
Le fichier `module.css` doit être vide à ce stade. Pour ajouter du style, copiez et collez le code suivant dans le fichier :
```css theme={null}
.testimonial {
text-align: center;
}
.testimonial__header {
font-weight: bold;
}
.testimonial__picture {
display: block;
margin: auto;
}
```
Après avoir ajouté le code, enregistrez le fichier.
## Transférer vos modifications locales vers votre compte HubSpot
Après avoir enregistré vos modifications locales, transférez-les vers votre compte HubSpot.
* Accédez à votre terminal et assurez-vous que vous êtes dans le bon répertoire.
* Exécutez la commande watch pour transférer les modifications vers HubSpot lors de la sauvegarde : `hs watch `.
```shell theme={null}
hs watch my-theme my-theme
```
## Prévisualiser vos modifications locales dans HubSpot
* Dans votre compte HubSpot, accédez à **Marketing** > **Fichiers et modèles** > **Outils de conception**.
* Dans la barre latérale gauche, accédez au **thème** que vous avez créé, puis ouvrez le dossier des **modules** et sélectionnez le module **Témoignage**.
* Le module étant ouvert, vous devriez maintenant voir vos modifications dans les volets `module.html` et `module.css`.
* Dans l'angle supérieur droit, cliquez sur **Aperçu**. Un nouvel onglet s'ouvrira pour afficher l'aperçu du module.

Pour récapituler ce tutoriel jusqu'ici, vous avez :
* Créé un module dans HubSpot
* Transféré ce module dans votre environnement local
* Apporté des modifications au HTML + HubL et aux CSS en utilisant vos outils de développement locaux
Dans la prochaine partie de ce tutoriel, vous découvrirez comment utiliser le module dans un modèle.
## Ajouter le module à un modèle
Pour cette partie du tutoriel, vous travaillerez principalement avec les dossiers `modules` et `templates` dans vos fichiers de thème locaux. 
Dans leur définition la plus élémentaire, les modules sont des zones modifiables des modèles et des pages HubSpot. Vous pouvez insérer des modules dans des modèles dans HubSpot en utilisant le gestionnaire de conception. Ici, vous allez utiliser HubL pour ajouter le module à un modèle dans votre environnement local.
* Dans votre éditeur de code, ouvrez le dossier `templates`, puis ouvrez le fichier `home.html`.
* Dans le fichier `home.html`, accédez au dernier élément `dnd_section`, qui débute vers la ligne 28. C'est dans cette section que vous ajouterez votre nouveau module.

* Dans `dnd_section`, au-dessus des autres éléments `dnd_modules`, copiez et collez la balise de module HubL suivante :
```hubl theme={null}
{% dnd_module
path= “../modules/Testimonial.module”,
offset=0,
width=4
%}
{% end_dnd_module %}
```
Cette balise HubL référence votre nouveau module par son chemin de fichier relatif. Pour que le module s'adapte uniformément aux deux autres modules de `dnd_section`, il attribue également des valeurs `width` et `offset` :
* Le CMS de HubSpot utilise un [système de grille à 12 colonnes](https://developers.hubspot.com/docs#columns). Par conséquent, pour espacer ce module uniformément avec les deux autres, vous devrez mettre à jour chaque module dans `dnd_section` pour avoir une largeur de `4`.
* Ensuite, le premier `dnd_module` dans le groupe (`testimonial`) aura un décalage de `0` pour le positionner en premier.
* Le second `dnd_module` (`linked_image`) aura un décalage de `4` pour le positionner en second.
* Le troisième `dnd_module` (`rich_text`) aura un décalage de `8` pour le positionner en troisième.
Après avoir défini `offset` et `width` pour chaque `dnd_module`, votre code se présentera comme suit :
```hubl theme={null}
{% dnd_section
background_color="#f8fafc",
vertical_alignment="MIDDLE"
%}
{% dnd_module
path= “../modules/Testimonial.module”,
offset=0,
width=4
%}
{% end_dnd_module %}
{% dnd_module
path="@hubspot/linked_image",
img={
"alt": "Stock placeholder image with grayscale geometrical mountain landscape",
"loading": "lazy",
"max_height": 451,
"max_width": 605,
"size_type": "auto_custom_max",
"src": get_asset_url("../images/grayscale-mountain.png")
},
offset=4,
width=4
%}
{% end_dnd_module %}
{% dnd_module
path="@hubspot/rich_text",
html="
Provide more details here.
Use text and images to tell your company’s story. Explain what makes your product or service extraordinary.
"
offset=8,
width=4
%}
{% end_dnd_module %}
{% end_dnd_section %}
```
Lorsque vous ajoutez un module à une zone de glisser-déposer, la balise du module ne nécessite pas de nom unique. Toutefois, lorsque vous ajoutez un module à un fichier HTML en dehors des zones de glisser-déposer, vous devez attribuer un nom unique au module. Vous utiliserez également une syntaxe légèrement différente, comme suit :
`{% module "testimonial_one" path="../modules/Testimonial.module" %}`
Découvrez-en davantage sur l'[utilisation des modules dans les modèles](/docs/cms/reference/modules/using-modules-in-templates).
## Prévisualiser vos modifications dans HubSpot
* Si vous n'avez pas exécuté la commande `watch` pour suivre votre travail automatiquement, exécutez à nouveau `hs watch `. Assurez-vous que cette commande continue d'être exécutée pendant que vous effectuez les étapes suivantes.
* Dans votre compte HubSpot, ouvrez le gestionnaire de conception (**Marketing** > **Fichiers et modèles** > **Outils de conception**).
* Dans la barre latérale gauche du gestionnaire de conception, sélectionnez le fichier **home.html**.
* En haut à droite, cliquez sur **Aperçu**, puis sélectionnez **Aperçu en ligne avec options d'affichage** pour ouvrir l'aperçu du modèle dans une nouvelle fenêtre.

* Dans le nouvel onglet, affichez l'aperçu du modèle, qui doit contenir votre module de témoignage nouvellement ajouté.

## Personnaliser le module dans le modèle localement
Pour rendre le modèle de la page d'accueil plus intéressant :
* Retournez dans votre éditeur de code, puis ouvrez le fichier `home.html`.
* Ajoutez les paramètres suivants à la balise du module de témoignage :
```hubl theme={null}
{% dnd_module
path='../modules/Testimonial.module',
customer_name = "Mary",
profile_pic = {
src: "{{
get_asset_url('../images/profile-pic-mary.svg') }}",
alt: "Mary Profile Picture"
},
testimonial = "Wow, what a product! I can't wait to recommend this to all my family and friends!",
offset=0,
width=4
%}
{% end_dnd_module %}
```
Les paramètres ci-dessus remplacent les valeurs par défaut que vous avez initialement attribuées à ces trois champs. Chaque paramètre utilise le nom de variable HubL que vous avez précédemment attribué à chaque champ :
* `customer_name` **:** ce paramètre transmet le nom `Mary` au champ du nom du client, remplaçant la valeur initiale `Sally`.
* `profile_pic` **:** ce paramètre est un objet qui contient deux propriétés.
* La propriété `src` utilise la fonction HubL `get_asset_url` pour récupérer l'URL de la photo de profil. Notez que le chemin du fichier de l'image est relatif à votre répertoire de travail. Vous devez d'abord ajouter cette image au dossier `images` dans vos fichiers de thème locaux. Vous pouvez trouver l'image dans le dossier `images` des [fichiers de projet](https://github.com/HubSpot/cms-modules-getting-started/tree/3b9159334f8c6204c7d2d34d8945d71b6ba402ea/images) terminés.
* La propriété `alt` permet d'attribuer le texte alternatif de l'image.
* `testimonial` **:** ce paramètre permet de transmettre un nouveau texte dans le champ de témoignage.
Pour le champ de texte enrichi, vous pouvez également utiliser la syntaxe de bloc HubL pour écrire un grand bloc de HTML ou de texte :
```hubl theme={null}
{% dnd_module
path='../modules/Testimonial.module',
customer_name = "Mary",
profile_pic = {
src: "{{
get_asset_url('../images/profile-pic-mary.svg') }}",
alt: "Mary Profile Picture"
},
offset=0,
width=4
%}
{% module_attribute "testimonial" %}
Wow, what a product! I can't wait to recommend this to all my family and friends!
{% end_module_attribute %}
{% end_dnd_module %}
```
Découvrez-en davantage sur la [syntaxe des blocs de module](/docs/cms/reference/modules/using-modules-in-templates).
Si vous avez conservé la commande `watch` en cours d'exécution dans votre terminal, enregistrez vos modifications pour les envoyer à HubSpot. Vous pouvez ensuite retourner dans le gestionnaire de conception pour prévisualiser le modèle.

## Ajouter deux autres modules de témoignage au modèle
Dans cette étape, vous allez ajouter deux autres modules de témoignage au modèle en suivant les mêmes étapes que précédemment :
* Accédez à votre éditeur de code, puis ouvrez le fichier `home.html`.
* Sous le module de témoignage que vous avez ajouté précédemment, ajoutez une autre instance du module en copiant et collant le code de ce module. Dans le nouveau module de témoignage, spécifiez les détails suivants en suivant les mêmes étapes que ci-dessus :
* Le nom du client est `Ollie`.
* Le témoignage d'Ollie est le suivant : `I can't believe that I ever conducted business without the use of this product!`
* Pour la photo d'Ollie, ajoutez le chemin d'accès relatif du fichier dans le dossier `images`. Vous pouvez obtenir l'image elle-même à partir des [fichiers de projet](https://github.com/HubSpot/cms-modules-getting-started/tree/3b9159334f8c6204c7d2d34d8945d71b6ba402ea) terminés. Puis, donnez à l'image d'Ollie l'attribut `alt` de `Ollie Profile Picture`.
* Pour conserver l'espacement, définissez `offset` sur `4` et `width` sur `4`.
* Sous le deuxième module de témoignage, ajoutez-en un troisième avec les détails suivants :
* Le nom du client est `Erin`.
* Le témoignage d'Erin est le suivant : `My business has nearly tripled since I began to use this product! Don't wait, start now!`
* Pour la photo d'Erin, ajoutez le chemin d'accès relatif du fichier dans le dossier `images`. Puis, donnez à l'image d'Erin l'attribut `alt` de `Erin Profile Picture`.
* Pour conserver l'espacement, définissez `offset` sur `8` et `width` sur `4`.
* Enregistrez vos modifications.
Si vous avez conservé la commande `watch` en cours d'exécution dans votre terminal, vous pouvez revenir au gestionnaire de conception pour prévisualiser les modifications apportées au modèle. L'aperçu du modèle doit maintenant contenir les trois modules de témoignage.

Pour terminer, vous préparerez le thème à utiliser dans une page en direct en modifiant le fichier `theme.json`.
## Modifier le nom du thème
Si vous souhaitez modifier le nom par défaut du thème, vous pouvez le faire en configurant les champs `name` et `label` du fichier `theme.json`.
```json theme={null}
// example theme.json
{
"name": "my_first_theme",
"label": "My first theme"
}
```
Après avoir ajouté ce code, enregistrez vos modifications afin que la commande `watch` envoie vos modifications à HubSpot.
## Étapes suivantes
Maintenant que vous avez créé un module personnalisé, que vous l'avez ajouté au modèle `home.html` et que vous avez éventuellement personnalisé le nom du thème, vous êtes prêt à créer une page en direct à partir du thème.
Si vous souhaitez suivre un tutoriel similaire qui se concentre sur les thèmes, consultez le tutoriel [Premiers pas avec les thèmes](/docs/cms/start-building/building-blocks/themes/getting-started). Autrement, découvrez-en davantage sur la [création et la personnalisation de pages](https://knowledge.hubspot.com/fr/website-and-landing-pages/create-and-customize-pages) dans la base de connaissances de HubSpot.
Si vous souhaitez en savoir plus sur les modules, consultez les guides de module suivants :
* [Configurer un module](/docs/cms/reference/modules/configuration)
* [Utilisation de modules dans les modèles](/docs/cms/reference/modules/using-modules-in-templates)
* [Modules par défaut](/docs/cms/reference/modules/default-modules)
## Autres tutoriels
* [Premiers pas avec les thèmes](/docs/cms/start-building/building-blocks/themes/getting-started)
* [Démarrer avec les fonctions sans serveur](https://developers.hubspot.com/docs)
* [Créer un workflow de développement efficace](/docs/cms/start-building/introduction/developer-environment/creating-an-efficient-development-workflow)
* [Premiers pas avec l'accessibilité](/docs/cms/best-practices/improve-existing-sites/accessibility)
* [Utiliser les infrastructures JavaScript sur CMS Hub](/docs/cms/start-building/introduction/developer-environment/js-frameworks)
* [Comment utiliser des composants web dans des modules personnalisés](https://developers.hubspot.com/blog/use-web-components-in-hubspot-cms-development)
* [Comment construire un module basé sur un composant web de bloc de code](https://developers.hubspot.com/blog/how-to-build-a-code-block-web-component)
# Documentation des développeurs HubSpot
Source: https://developers.hubspot.fr/docs/index
Redéfinissez la productivité grâce au code
Rechercher ou demander...
Bienvenue dans la documentation pour les développeurs de HubSpot. Créez un CRM personnalisé et des expériences de site web basées sur les données dans HubSpot. Suivez les étapes ci-dessous pour commencer, ou lancez-vous directement dans un guide de démarrage rapide adapté à votre configuration.
> **Premiers pas**
>
> 1. Installer l'ILC HubSpot globalement
> 2. Autoriser votre compte HubSpot
> 3. Commencer à créer
```bash npm theme={null}
npm install -g @hubspot/cli && hs init
```
```bash yarn theme={null}
yarn global add @hubspot/cli && hs init
```
```bash pnpm theme={null}
pnpm add -g @hubspot/cli && hs init
```
```bash ruby theme={null}
gem install hubspot-cli && hs init
```
```bash Build your first project theme={null}
hs get-started
```

## Transférer des données depuis et vers HubSpot
Migrez facilement des données depuis et vers HubSpot à l'aide d'API et d'outils pour les données modernes.

## Visualiser des données dans HubSpot
Ajoutez des éléments d'interface utilisateur personnalisés, comme des cartes CRM, pour afficher vos données directement dans HubSpot.

## Agir sur les données dans HubSpot
Automatisez les actions, déclenchez des workflows et personnalisez la logique HubSpot pour l'adapter à vos activités.
## Ressources
> **[Premiers pas](https://developers.hubspot.com/docs/getting-started/overview)**
>
> Créez votre première application ou modèle en quelques minutes
> **[Référence d'API](/docs/api-reference/overview)**
>
> Intégrez grâce aux API de HubSpot
> **[Journal des modifications](https://developers.hubspot.com/changelog)**
>
> Découvrez les nouveaux changements et les nouvelles versions
> **[Présentation de la plateforme](https://developers.hubspot.com/docs/getting-started/overview)**
>
> Découvrez la plateforme et les outils de développement de HubSpot
> **[HubSpot Academy](https://academy.hubspot.com/)**
>
> Explorez les formations pédagogiques
> **[Exemples d'applications](https://github.com/HubSpot/ui-extensions-examples/tree/main)**
>
> Consultez des exemples de code pour la personnalisation du CRM
# Ajouter une télémétrie (BÊTA)
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/add-telemetry
Découvrez comment configurer la télémétrie .
Vous pouvez configurer la télémétrie pour votre application, qui agit comme un récepteur de journal pour transférer les données de journal à un fournisseur d'observabilité externe. Actuellement, seuls [Honeycomb](https://www.honeycomb.io/) et [Sentry](https://sentry.io/) sont pris en charge en tant que fournisseurs tiers.
## Créer et configurer des fichiers de composants de télémétrie
Dans le répertoire `app/` de votre projet, créez un répertoire de `telemetry/`, puis ajoutez-y un fichier de configuration `telemetry-hsmeta.json`.
```shell theme={null}
└── src/
└── app/
└── telemetry/
└── telemetry-hsmeta.json
```
Modifiez le fichier `telemetry-hsmeta.json` pour configurer votre fournisseur, enregistrer les paramètres de niveau, etc. Un fichier d'exemple est fourni ci-dessous, ainsi qu'un tableau détaillant chacun des champs disponibles.
> [!WARNING]
>
> **Remarque** : par défaut, tous les types et niveaux de journal seront synchronisés avec votre fournisseur via les champs `logTypes` et `logLevels`, ce qui peut entraîner l'envoi d'un très grand volume de données. Il est fortement recommandé de commencer par configurer uniquement les types de journaux qui vous intéressent et de définir les niveaux de journal pour filtrer uniquement les erreurs.
### telemetry-hsmeta.json
```json theme={null}
{
"uid": "telemetry",
"type": "telemetry",
"config": {
"providerType": "SENTRY",
"datasetName": "my-app-telemetry",
"logTypes": ["API_CALL", "EXTENSION_LOG", "EXTENSION_RENDER", "DATA_FETCH"],
"logLevels": ["ERROR", "WARN", "INFO"]
}
}
```
| Champ | Type | Description |
| - | - | - |
| `uid` | Chaîne | un identifiant unique pour votre configuration de télémétrie. Cette valeur peut être définie sur n'importe quelle valeur, mais elle apparaîtra dans les paramètres de votre projet sur votre compte. Elle doit donc être différente des autres valeurs `uid` des autres composants de l'application. |
| `type` | Chaîne | le type de composant, qui devrait être `telemetry` dans ce cas. |
| `config` | Objet | un objet contenant les détails de configuration. Consultez les sous-propriétés répertoriées dans les lignes ci-dessous. |
| `providerType` | Chaîne | le nom de votre fournisseur de télémétrie tiers. Actuellement, seuls `SENTRY` et `HONEYCOMB` sont pris en charge. |
| `datasetName` | Chaîne | un libellé qui sera associé à vos données de journal, si votre fournisseur prend en charge cette option. |
| `logTypes` | Tableau | une liste des types de journaux envoyée à votre fournisseur externe. Par défaut, tous les logs sont propagés vers votre fournisseur. Les types de journaux disponibles incluent : `["CRM_LEGACY_CARD", "CRM_EXTENSIBILITY_CARD", "WEBHOOKS", "API_CALL", "APP_SETTINGS", "SERVERLESS_EXECUTION", "PROXY_EXECUTION", "EXTENSION_RENDER", "EXTENSION_LOG", "SERVERLESS_GATEWAY_EXECUTION"]`. |
| `logLevels` | Tableau | une liste des niveaux de gravité selon lesquels filtrer les journaux. Les niveaux de journaux pris en charge sont : `["ERROR", "WARNING", "INFO"]` |
## Ajouter une authentification externe en tant que secret via l'ILC
En plus de créer le fichier de configuration `telemetry-hsmeta.json` ci-dessus, vous devrez également ajouter un secret qui correspond à la clé d'authentification de votre fournisseur :
* Si vous utilisez Sentry, vous ajouterez le DSN (Data Source Name) en tant que secret.
* Si vous utilisez Honeycomb, vous ajouterez une clé d'API en tant que secret.
### Localiser un DSN Sentry
Si vous utilisez Sentry, suivez les étapes ci-dessous pour obtenir votre DSN :
* Connectez-vous à votre [compte Sentry](https://sentry.io/auth/login/).
* Accéder aux paramètres de votre projet.
* Dans la section *Clés client* ou *DSN*, vous trouverez un DSN unique pour votre projet. Elle doit ressembler à ce qui suit :
```
https://sentry-key@sentry-identifier.ingest.us.sentry.io/project-id
```
### Trouver une clé d'API Honeycomb
Si vous utilisez Honeycomb comme fournisseur d'observabilité externe, une clé d'API est utilisée pour authentifier et transférer les données. Cette clé d'API est associée à votre compte et à votre projet Honeycomb spécifiques.
Pour générer une clé d'API Honeycomb :
* Connectez-vous à votre [compte Honeycomb](https://ui.honeycomb.io/login).
* Accéder aux paramètres de votre projet.
* Recherchez la section *Clés d'API* et générez une nouvelle clé.
* Copiez la clé d'API générée.
### Ajouter un secret en utilisant l'ILC HubSpot
Une fois que vous avez obtenu votre DSN Sentry ou votre clé d'API Honeycomb, exécutez la commande suivante pour ajouter la valeur en tant que secret. Lorsque le nom du secret vous est demandé, vous devez utiliser `TELEMETRY_SECRET` pour que les données de journal soient synchronisées correctement.
```shell theme={null}
hs app secrets add
```
# Créer un outil d'agent
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/agent-tools/create-an-agent-tool
Suivez ce tutoriel pour créer un outil d'agent, qui est une action de workflow personnalisée adaptée aux agents IA.
Dans HubSpot, vous pouvez créer un agent IA qui effectuera diverses actions en fonction de vos instructions. Par exemple, vous pouvez créer un agent pour vous envoyer tous les matins un e-mail contenant des notes sur les réunions à venir du jour.
Pour exécuter leurs tâches, les agents s'appuient sur les outils des agents. Les outils sont comme des fonctions dans un langage de programmation : ils ont des paramètres que vous transmettez à l'outil, et l'outil renvoie une sortie. Les outils dans HubSpot sont similaires au concept des outils dans MCP (Model Context Protocol). Un outil d'agent regroupera les appels API, les étapes LLM et d'autres éléments de contexte à l'appui pour permettre à l'IA de faire le travail. Les outils sont conçus pour effectuer des tâches spécifiques et bien définies, telles que l'interrogation d'une base de données, l'exécution d'opérations CRUD (Créer, Lecture, Mettre à jour, Supprimer) ou l'utilisation de l'IA générative pour résumer du contenu.
En termes d'onboarding, un outil agent est une version améliorée d'une action de workflow personnalisée, que vous créerez à l'aide du cadre de projet développeur de HubSpot. Ce tutoriel vous guidera sur la création d'un outil d'agent.
## Conditions préalables
Avant de commencer, vous devrez :
* Installez la dernière version bêta de l'ILC HubSpot en exécutant `npm i -g @hubspot/cli@next`.
* Créez un [compte de test de développeur](/docs/getting-started/account-types#developer-test-accounts) à partir du compte de développeur qui s'est inscrit à la bêta.
* Authentifiez le compte de test auprès de l'ILC en exécutant la [commande `hs auth`](/docs/developer-tooling/local-development/hubspot-cli/reference#authenticate-an-account) dans votre terminal.
**1. Créer un projet**
Si vous commencez de zéro, vous devrez d'abord créer un nouveau projet. Si vous souhaitez utiliser un projet existant, vous pouvez également [passer à la section suivante](#2.-add-an-agent-tool-to-the-project) (version `2025.2` du projet requise).
Pour créer un nouveau projet :
1. Dans le terminal, exécutez la commande ci-dessous pour créer un nouveau projet à partir de l'un des modèles de démarrage rapide boilerplate.
```shell theme={null}
hs project create --platform-version 2025.2
```
2. Suivez les invites du terminal pour configurer le nom et l'emplacement du projet, puis sélectionnez un modèle. Plusieurs options de modèles sont proposées en fonction de la façon dont vous prévoyez de [distribuer](/docs/apps/developer-platform/build-apps/app-configuration#distribution) votre application. Pour les besoins de ce tutoriel, sélectionnez le modèle **Lancer un projet avec une application marketplace**.
3. Le modèle de projet sera alors téléchargé dans votre répertoire de travail, où vous pourrez consulter son contenu.
Ce modèle de projet comprend tous les fichiers nécessaires pour charger un projet avec une application qui comprend quelques exemples de fonctionnalités d'application. Ces fonctionnalités incluent une [carte d'application](/docs/apps/developer-platform/add-features/ui-extensibility/app-cards/create-an-app-card) boilerplate, un [webhook](/docs/apps/developer-platform/add-features/configure-webhooks) et une [action de workflow](/docs/apps/developer-platform/add-features/custom-workflow-actions). Pour les besoins de ce tutoriel, ces composants ne sont pas nécessaires, mais il peut être utile de les passer en revue si vous souhaitez les tester plus tard.
**2. Ajouter un outil d'agent au projet**
En arrière-plan, les outils d'agent sont des actions de workflow personnalisées configurées spécifiquement pour le contexte de l'agent. Pour qu'un agent puisse exécuter l'outil, de la même manière qu'un workflow exécuterait une action, vous devez permettre à l'action d'être disponible pour les agents utilisant le champ `supportedClients`.
* Dans le répertoire `workflow-actions`, créez un nouveau fichier JSON pour la configuration de l'outil. Le fichier peut porter n'importe quel nom, mais doit se terminer par `-hsmeta.json` (par exemple, `my-agent-tool-hsmeta.json`).
* Construisez la configuration de l'action à l'aide de la [documentation de référence sur les outils d'agent](/docs/apps/developer-platform/add-features/agent-tools/reference). Assurez-vous d'inclure le client `AGENTS` dans le champ `supportedClients`, comme indiqué dans l'exemple de code ci-dessous.
```json theme={null}
{
"uid": "agent_tool_action",
"type": "workflow-action",
"config": {
"actionUrl": "https://example.com",
"toolType": "GET_DATA",
"llmDescription": "A description that helps the LLM understand what this tool does.",
"isPublished": false,
"supportedClients": [
{
"client": "AGENTS"
},
{
"client": "WORKFLOWS"
}
],
"inputFields": [
{
"typeDefinition": {
"name": "message",
"type": "string",
"fieldType": "textarea"
},
"supportedValueTypes": ["STATIC_VALUE"],
"isRequired": false
}
],
"labels": {
"en": {
"actionName": "My custom agent tool",
"actionDescription": "A description of the tool.",
"actionCardContent": "Send a notification",
"inputFieldLabels": {
"message": "Notification Message"
},
"inputFieldDescriptions": {
"message": "Enter the message to be sent in the notification"
}
}
},
"objectTypes": ["CONTACT"]
}
}
```
Lorsque vous créez votre outil, gardez à l'esprit ce qui suit :
* Lors du développement actif, vous ne devez pas définir vos champs de saisie comme obligatoires, car les champs obligatoires ne peuvent pas être mis à jour ou supprimés une fois chargés.
* Les demandes adressées à des points de terminaison publics seront faites en tant que demandes `POST`.
Lorsque vous êtes prêt à télécharger sur votre compte de test, enregistrez vos fichiers, puis lancez `hs project upload`. Si vous avez commencé avec un nouveau projet, vous serez invité à appuyer sur `y` pour créer le projet dans le compte.
> [!WARNING]
>
> ### Remarque :
>
> HubSpot développe toujours activement des fonctionnalités pour permettre de tester les outils des agents. Cette page sera mise à jour avec de plus amples instructions dès que ces fonctionnalités de test seront disponibles.
# Présentation des agents et des outils
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/agent-tools/overview
Découvrez comment créer des outils pour personnaliser l'expérience des agents HubSpot.
Dans HubSpot, vous pouvez créer un agent IA qui effectuera diverses actions en fonction de vos instructions. Par exemple, vous pouvez créer un agent pour vous envoyer tous les matins un e-mail contenant des notes sur les réunions à venir du jour.
Pour exécuter leurs tâches, les agents s'appuient sur les outils des agents. Les outils sont comme des fonctions dans un langage de programmation : ils ont des paramètres que vous transmettez à l'outil, et l'outil renvoie une sortie. Les outils dans HubSpot sont similaires au concept des outils dans MCP (Model Context Protocol). Un outil d'agent regroupera les appels API, les étapes LLM et d'autres éléments de contexte à l'appui pour permettre à l'IA de faire le travail. Les outils sont conçus pour effectuer des tâches spécifiques et bien définies, telles que l'interrogation d'une base de données, l'exécution d'opérations CRUD (Créer, Lecture, Mettre à jour, Supprimer) ou l'utilisation de l'IA générative pour résumer du contenu.
En termes d'onboarding, un outil agent est une version améliorée d'une action de workflow personnalisée, que vous créerez à l'aide du cadre de projet développeur de HubSpot.
> [!NOTE]
>
> Notez les limites suivantes pour le moment de la version bêta :
>
> * L'agent n'a pas accès aux données du CRM, sauf s'il dispose explicitement des outils nécessaires pour obtenir ces données.
> * L'agent ne peut pas demander d'informations à l'utilisateur après son appel s'il ne dispose pas d'informations suffisantes pour terminer la tâche.
## Outils de construction
Pour créer un outil, consultez le [guide de création d'un agent](/docs/apps/developer-platform/add-features/agent-tools/create-an-agent-tool) ainsi que la [documentation de référence](/docs/apps/developer-platform/add-features/agent-tools/reference), qui comprend des informations sur les options de configuration, les meilleures pratiques et la validation des demandes.
> [!WARNING]
>
> ### Remarque :
>
> HubSpot développe toujours activement des fonctionnalités pour permettre de tester les outils des agents. Cette page sera mise à jour avec de plus amples instructions dès que ces fonctionnalités de test seront disponibles.
# Référence des outils d'agent (BÊTA)
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/agent-tools/reference
Découvrez comment créer des outils d'agent, qui sont des actions de workflow personnalisées pouvant être utilisées par les agents IA.
Les agents HubSpot sont des assistants basés sur l'IA avec lesquels les utilisateurs peuvent discuter pour effectuer des tâches. Chaque agent comprend une série d'actions, appelées outils, qu'il utilisera selon les instructions de l'utilisateur. En tant que développeur, vous pouvez créer des outils d'agent personnalisés pour effectuer des tâches spécifiques et bien définies en fonction du cas d'utilisation prévu de l'agent.
En arrière-plan, les outils sont des actions de workflow personnalisées configurées pour être disponibles dans le contexte de l'agent. Les outils peuvent être utilisés par plusieurs agents et peuvent être configurés pour fonctionner à la fois avec des agents et des workflows.
À un niveau élevé, la création d'un outil d'agent consiste à :
* Ajout d'un composant d'action de workflow à une application en incluant une `workflow-actions` [répertoire dans le projet](#project-setup), ainsi qu'un fichier de configuration `*-hsmeta.json` pour l'outil. Chaque outil et chaque action de workflow que vous créez doit avoir son propre fichier de configuration `*-hsmeta.json`.
* [Configuration de l'action](#agent-tool-definition) pour qu'elle soit disponible dans les agents IA via le champ `supportedClients`.
Lorsque vous créez vos outils, vous devez également garder à l'esprit un ensemble de [bonnes pratiques](#best-practices) pour garantir des performances de meilleure qualité.
## Configuration du projet
Pour créer des outils, votre `hsproject.json` doit avoir sa `platformVersion` définie sur `2025.2`. Cette version est définie automatiquement sur tous les [modèles de démarrage rapide](/docs/apps/developer-platform/build-apps/create-an-app), mais devra être mise à jour manuellement pour les projets avec des versions antérieures.
Notez que, lors de la mise à niveau d'un projet vers une version `2025.2`, vous devrez respecter les nouvelles normes de fichier de configuration `*-hsmeta.json` pour la [configuration de votre application](/docs/apps/developer-platform/build-apps/app-configuration) et ses fonctionnalités.
Les outils d'agent et les actions de workflow personnalisées sont tous deux contenus dans le répertoire de l'application `workflow-actions`.
```shell theme={null}
├──src
│ ├── hsproject.json
│ ├── app/
│ │ └── app-hsmeta.json
│ │ └── ...
│ │ └── workflow-actions/
│ │ └── agent-tool-action-hsmeta.json
└──
```
## Définition de l'outil agent
Le fichier de configuration de vos outils doit être placé dans le répertoire `workflow-actions` pour fonctionner. Les options de configuration pour les outils d'agent sont les mêmes que pour les [actions de workflow personnalisées](/docs/apps/developer-platform/add-features/custom-workflow-actions#custom-workflow-action-definition), avec la condition supplémentaire que le champ `supportedClients` doit inclure le client `AGENTS`.
```json theme={null}
{
"uid": "agent_tool_action",
"type": "workflow-action",
"config": {
"actionUrl": "https://example.com",
"toolType": "GET_DATA",
"llmDescription": "A description that helps the LLM understand what this tool does.",
"isPublished": false,
"supportedClients": [
{
"client": "AGENTS"
},
{
"client": "WORKFLOWS"
}
],
"inputFields": [
{
"typeDefinition": {
"name": "message",
"type": "string",
"fieldType": "textarea"
},
"supportedValueTypes": ["STATIC_VALUE"],
"isRequired": true
},
{
"typeDefinition": {
"name": "priority",
"type": "enumeration",
"fieldType": "select",
"options": [
{
"value": "high",
"label": "High Priority"
},
{
"value": "normal",
"label": "Normal Priority"
},
{
"value": "low",
"label": "Low Priority"
}
]
},
"supportedValueTypes": ["STATIC_VALUE"],
"isRequired": true
}
],
"labels": {
"en": {
"actionName": "My custom agent tool",
"actionDescription": "A description of the tool.",
"actionCardContent": "Send {{priority}} priority notification",
"inputFieldLabels": {
"message": "Notification Message",
"priority": "Priority Level"
},
"inputFieldDescriptions": {
"message": "Enter the message to be sent in the notification",
"priority": "Select the priority level for this notification"
}
}
},
"objectTypes": ["CONTACT"]
}
}
```
Les champs marqués par \* sont requis
| Champ | Type | Description |
| - | - | - |
| `uid`\* | Chaîne | un identifiant unique interne pour l'action de workflow. |
| `type`\* | Chaîne | le type de composant, qui devrait être `workflow-action` dans ce cas. |
| `actionUrl`\* | Chaîne | l'URL à laquelle l'outil fera une requête `POST`. L'URL doit être un point de terminaison accessible au public et ne peut pas être une fonction sans serveur définie dans le projet de développement. |
| `toolType`\* | String | la catégorie de fonctionnalité de l'outil. Peut être l'un des éléments suivants :
`GET_DATA` : récupère des informations depuis HubSpot ou des sources externes.
`GENERATE` : génère du contenu, des résumés, des analyses ou des suggestions basés sur les données saisies.
`TAKE_ACTION` : effectue des actions CRM, telles que la création de notes ou l'attribution de tâches aux propriétaires.
|
| `llmDescription`\* | Chaîne | une description qui aide le modèle de langage exhaustif à comprendre les fonctionnalités de l'outil. |
| `isPublished` | Booléen | détermine si la définition est visible dans les comptes qui ont installé votre application. Par défaut, cette valeur est définie sur `false`. |
| `supportedClients`\* | Tableau | un tableau d'objets spécifiant les clients pris en charge par l'action de workflow personnalisée. Chaque objet du tableau doit avoir une clé `client` avec une valeur de chaîne indiquant le type de client. Les valeurs comprennent :
`WORKFLOWS` : active l'action pour les workflows.
`AGENTS` : active l'action pour les agents.
|
| `inputFields` | Tableau | les valeurs pour les saisies que l'utilisateur a renseignées. Découvrez-en davantage sur [les meilleures pratiques relatives à la quantité de champ](#be-mindful-of-the-number-of-input-fields). |
| `typeDefinition.name` | Chaîne | le nom ou la clé du champ de saisie. |
| `typeDefinition.type` | Chaîne | le type de valeur que le champ de saisie doit attendre. |
| `typeDefinition.fieldType` | Chaîne | le type de champ qui apparaît aux utilisateurs qui créent le workflow. |
| `typeDefinition.options` | Tableau | pour les types d'énumération, ce champ fournit une liste d'options. Chaque option doit comporter une `value`, en fonction de l'entrée fournie par l'utilisateur, et un `label`, qui identifie l'option dans l'outil workflows. |
| `inputFieldDependencies` | Tableau | une liste de règles qui définissent les relations entre deux entrées ou plus, en fonction de leur `dependencyType`. Découvrez-en davantage dans l'exemple [ici](/docs/api-reference/automation-actions-v4-v4/guide#example-%233). |
| `labels.`\* | Chaîne | clé de paramètres régionaux qui correspond à la définition des paramètres régionaux. Un libellé anglais (`en`) et sa définition doivent être définis au minimum. |
| `labels..inputFieldDescriptions` | Objet | un objet qui définit les détails des entrées de votre action. Dans l'exemple ci-dessus, cet objet comprend les champs `message` et `priority`. |
| `labels..inputFieldOptionLabels` | Objet | un objet requis si votre ou vos champs de saisie disposent d'options. Fournit une carte des libellés d'options de champs de saisie, saisis par la valeur ou le libellé de l'option. |
| `labels..outputFieldLabels` | Objet | un objet qui mappe les définitions de `outputFields` vers les libellés correspondants qui apparaissent dans l'outil workflows. |
| `labels..actionName`\* | Chaîne | le nom de l'action tel qu'il apparaît dans le panneau *Sélectionner une action* de l'éditeur de workflows. |
| `labels..appDisplayName`\* | Chaîne | le nom de la section du panneau *Sélectionner une action* où toutes les actions de l'application apparaissent. Si `appDisplayName` est défini pour plusieurs actions, la première trouvée sera utilisée. |
| `labels..actionCardContent` | Chaîne | une description récapitulative affichée dans la carte de l'action. |
| `labels..executionRules` | Objet | un objet qui regroupe les définitions de votre `executionRules` vers les messages qui apparaîtront pour les résultats d'exécution dans l'historique du workflow. |
| `objectTypes` | Tableau | les types d'objets CRM disponibles avec lesquels cette action peut être utilisée. Si vide, l'action sera disponible pour tous les types d'objets. |
| `outputFields` | Tableau | les valeurs résultantes de l'action qui peuvent être utilisées par des actions suivantes dans l'agent ou le workflow. Une action personnalisée peut avoir 0, 1 ou plusieurs résultats. |
| `executionRules` | Objet | une liste des définitions que vous pouvez indiquer pour identifier les erreurs de votre service vers l'utilisateur qui crée le workflow. |
## Meilleures pratiques
Lors de la création d'outils pour les agents, gardez à l'esprit la check-list des meilleures pratiques suivante :
* Commencez par des champs facultatifs, puis définissez comme requis uniquement si stable.
* Libellez et décrivez les champs pour les humains et l'IA.
* Effectuez des tests avec moins d'instructions d'agent au début pour comprendre comment l'IA interprète un outil.
* Gardez les outils concentrés et faites attention à la quantité de champs.
* Utilisez les descriptions de champs pour contrôler la créativité des agents.
Découvrez-en davantage sur chacune de ces meilleures pratiques dans les sections ci-dessous.
> [!WARNING]
>
> **Remarque :**
>
> Bien que certaines des recommandations ci-dessous incluent des informations sur les outils de test des agents, ces fonctionnalités de test sont encore en cours de développement. La documentation relative aux outils d'agent sera mise à jour dès que des méthodes de test seront disponibles.
### Développer avec des champs facultatifs
Ne définissez pas les champs d'action (`inputFields`) requis pendant le développement actif. Une fois qu'un champ a été défini comme requis et que le projet est chargé, vous ne pouvez plus le supprimer ou le mettre à jour. Vous ne devez définir un champ comme requis que lorsque vous avez confiance dans les détails du champ, tels que son `name` et son `type`. La raison de cette limitation est que la modification de champs requis interromprait tous les workflows actifs qui incluent l'action.
### Concevoir pour une compréhension humaine et IA
Les éléments `actionName`, `inputFields` et `labels` doivent clairement communiquer leur utilisation et leur utilité aux humains et à l'agent. Ces champs sont notamment utilisés par l'agent pour comprendre quand appeler l'action et comment transmettre des données à l'outil. Lorsque vous créez vos outils, gardez à l'esprit que les modèles de langage exhaustifs peuvent avoir besoin de descriptions plus explicites que les utilisateurs humains. Par exemple, alors qu'une personne comprendra intuitivement un champ intitulé `Date`, un modèle de langage exhaustif pourrait préférer `Event start date (YYYY-MM-DD)`.
Idéalement, les outils doivent être conçus de manière à ce que les agents ne nécessitent pas d'instructions supplémentaires pour les utiliser. Cependant, dans certains cas, les détails du champ seuls peuvent ne pas être suffisants pour l'agent. Par exemple, il peut ne pas comprendre l'ordre prévu pour exécuter des outils qui dépendent des résultats d'autres outils (par exemple, un outil « Envoyer un e-mail » peut dépendre d'un outil « Obtenir les informations de contact » exécuté en premier).
Lorsque vous créez un outil, vous devez le tester dans l'agent sans ajouter d'informations à ses instructions au préalable pour mieux comprendre comment il interprète l'outil. Grâce aux tests, vous serez en mesure de déterminer si le moteur de raisonnement fonctionne correctement par lui-même ou s'il a besoin d'instructions supplémentaires.
### Veillez au nombre de champs de saisie
Les agents peuvent gérer un grand nombre de champs de saisie dans chaque outil (26 saisies uniques maximum). Cependant, plus il y a de champs de saisie dans un outil, plus vous devez être clair lors de l'attribution des valeurs `actionName`, `inputField` et `label`. Les outils sont plus efficaces et fiables lorsqu'ils sont conçus pour des tâches spécifiques avec un ensemble de paramètres précis. Pour les opérations complexes, demandez-vous s'il serait plus efficace de créer plusieurs outils simples plutôt qu'un seul outil avec un nombre excessif d'entrées.
> [!WARNING]
>
> **Remarque :**
>
> Il est possible que HubSpot limite le nombre de saisies à l'avenir en fonction du feedback concernant la qualité des agents traitant un grand nombre de saisies.
### Créativité et improvisation de l'agent de contrôle
Dans certains cas, vous souhaiterez peut-être qu'un agent soit créatif et improvise. Cependant, il peut y avoir des scénarios où vous ne souhaitez pas que l'agent improvise. Expérimentez avec les instructions du modèle de langage exhaustif dans les noms, libellés et descriptions de vos champs de saisie. Si vous avez besoin de conseils plus stricts, ajoutez des instructions à l'agent pour définir des attentes claires.
Par exemple, supposons que vous confiez à un agent la tâche de générer un article de blog, l'un des champs étant le titre de l'article de blog. Selon le degré d'improvisation de l'agent, vous pouvez libeller le champ de manière permissive ou plus restrictive :
* **Permissif :** `"Blog title"`
* **Restrictif :** `"Blog title (must include the product name 'HubSpot CRM')"`
Prenons un autre exemple, considérons les libellés de champs de saisie suivants destinés au contenu des publications sur les réseaux sociaux :
* **Permissif :** `"Social post content"`
* **Modéré :** `"Social post content (keep under 280 characters)"`
* **Restrictif :** `"Social post content (must mention our Q4 sale, include #HubSpot, and stay under 280 characters)"`
## Vérification de l'origine de la requête de l'outil d'agent
Lorsqu'un agent utilise un outil pour faire une demande, il fait une requête `POST` à l'`actionUrl` de l'outil. L'appel de l'outil d'agent est authentifié par la validation de l'en-tête `X-HubSpot-Signature` envoyé avec la demande. Il s'agit du même système que HubSpot utilise pour [valider les demandes webhook](/docs/apps/legacy-apps/authentication/validating-requests#validate-the-v3-request-signature).
> [!WARNING]
>
> **Remarque :**
>
> Vous ne devez pas créer de champs de saisie pour les secrets ou les clés d'API, car cela n'est pas sécurisé et ne correspond pas au modèle d'authentification prévu, notamment parce que le modèle de langage exhaustif devrait recevoir le secret/la clé d'API dans ses instructions ou la recevoir d'un autre outil.
# Créer et gérer des types d'événements (BÊTA)
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/app-events/create-and-manage-event-types
Découvrez comment définir des types d'événements d'application afin de pouvoir envoyer des données d'occurrence d'événements dans HubSpot.
Pour envoyer des données d'événement d'application à HubSpot, vous devez d'abord créer un type d'événement à l'aide d'un projet de développeur. Le type d'événement est un schéma JSON qui définit la structure, les propriétés et les règles de validation des données d'occurrence d'événement que vous allez envoyer. Cela comprend le nom de l'événement, le libellé d'affichage, l'objet CRM cible et les propriétés de l'événement. Les types d'événements comprennent également des définitions des modèles d'affichage pour le rendu de la chronologie des fiches d'informations du CRM.
> [!WARNING]
>
> Les événements d'application décrits dans cette documentation sont destinés aux applications créées pour le [marketplace des applications](https://ecosystem.hubspot.com/marketplace/apps) à l'aide de projets développeur. Pour créer des rapports sur les événements personnalisé pour d'autres types d'intégrations, vous pouvez utiliser des [événements personnalisés](/docs/api-reference/events-manage-event-definitions-v3/guide) à la place.
## Conditions préalables
Pour inclure une définition de type d'événement d'application dans votre projet :
* Vous devez utiliser la version `7.5.4` ou une version ultérieure de l'ILC de HubSpot. Vous pouvez vérifier quelle version de l'ILC vous avez en exécutant `hs --version`, et la mettre à jour en exécutant `npm i -g @hubspot/cli@next`.
* Votre projet doit être déployé avant que vous puissiez le mettre à jour pour inclure un composant d'événement d'application.
## Configurer vos fichiers de projet
> [!NOTE]
>
> Si vous avez déjà créé une application publique avec un événement de chronologie, découvrez comment [la migrer vers la plateforme de développement](#migrate-an-existing-timeline-event-type).
**1. Configuration de l'application et structure du projet**
Pour créer une définition de type d'événement d'application dans votre projet, mettez à jour votre fichier `hsmeta.json` de [configuration d'application](/docs/apps/developer-platform/build-apps/app-configuration) pour inclure le domaine `timeline` dans le champ `requiredScopes`. Cette donnée est nécessaire pour que les données des événements de l'application apparaissent sur les chronologies des fiches d'informations du CRM. Les installateurs doivent accorder ce domaine pour que vos données d'événement soient correctement envoyées.
```json theme={null}
"requiredScopes": [
"timeline"
],
```
> [!NOTE]
>
> Notez que vous devrez peut-être ajouter d'autres [domaines](/docs/apps/legacy-apps/authentication/scopes#list-of-available-scopes), en fonction des fonctionnalités incluses dans votre application.
Ensuite, dans le répertoire `app/` de votre projet, ajoutez un répertoire `app-events`. Dans `app-events/`, ajoutez un fichier de configuration JSON pour définir le type d'événement de l'application. Ce fichier peut porter n'importe quel nom, mais doit se terminer par `*-hsmeta.json`. Vous pouvez inclure jusqu'à 750 types d'événement par application, chacun ayant son propre fichier `*-hsmeta.json`.
```shell theme={null}
project-folder/
└── src/
└── app/
├── app-hsmeta.json
└── app-events/
└── my-event-type-hsmeta.json
```
**2. Configurer le schéma de type d'événement**
Dans le fichier `*-hsmeta.json` de type d'événement, configurez le [schéma de votre type d'événement](/docs/apps/developer-platform/add-features/app-events/reference#event-type-schema). Ce schéma configurera les attributs du type d'événement tels que le nom, le modèle d'affichage de la chronologie des fiches d'informations du CRM et le type d'objet du CRM auquel associer les données d'événement.
Si certains de ces champs peuvent être mis à jour après leur création, les champs `name` et `objectType` ne peuvent pas être modifiés une fois que le type d'événement est créé.
Par exemple, le schéma de type d'événement suivant peut être utilisé pour suivre les événements de connexion des clients.
```json theme={null}
{
"uid": "customer_login_event",
"type": "app-event",
"config": {
"name": "Customer login",
"headerTemplate": "{{customerName}} logged in",
"detailTemplate": "{{customerName}} logged in via the {{loginLocation}}.",
"objectType": "CONTACT",
"properties": [
{
"name": "customerName",
"label": "Customer Name",
"type": "string"
},
{
"name": "loginLocation",
"label": "Login location",
"type": "enumeration",
"options": [
{
"value": "mobileApp",
"label": "Mobile app"
},
{
"value": "website",
"label": "Website"
}
]
}
]
}
}
```
Les champs marqués par sont \* obligatoires.
| Champ | Type | Description |
| - | - | - |
| `uid`\* | Chaîne | un identifiant unique interne pour le type d'événement. |
| `type`\* | Chaîne | le type de composant. Doit correspondre à `app-event`. |
| `name`\* | Chaîne | le libellé affiché dans HubSpot (50 caractères maximum). Cette valeur ne peut pas être mise à jour après la création. |
| `objectType`\* | Chaîne | le nom complet du type d'objet CRM auquel les occurrences d'événements peuvent être associées. Cette valeur ne peut pas être modifiée après la création. Peut être l'un des éléments suivants : `COMPANY`, `CONTACT`, `CUSTOM_OBJECT`, `DEAL`, `TICKET`, `APP_OBJECT`. |
| `headerTemplate` | Chaîne | le [modèle de rendu](/docs/apps/developer-platform/add-features/app-events/reference#rendering-templates) de l'en-tête de la carte d'activité CRM chronologie. Peut contenir jusqu'à 1 000 caractères. |
| `detailTemplate` | Chaîne | le [modèle de rendu](/docs/apps/developer-platform/add-features/app-events/reference#rendering-templates) pour le corps de la carte d'activité CRM chronologie. Peut contenir jusqu'à 10 000 caractères. |
| `properties` | Tableau | propriétés définies pour le type d'événement dans lequel vous stockerez les données d'occurrence d'événement. Chaque type d'événement peut avoir jusqu'à 500 propriétés. Découvrez-en davantage sur les propriétés, y compris les exigences et les limitations, dans la [documentation de référence sur les événements d'application](/docs/apps/developer-platform/add-features/app-events/reference). |
**3. Charger vos modifications sur HubSpot**
Chargez votre projet sur HubSpot à l'aide de la commande `hs project upload`.
```shell theme={null}
hs project upload
```
Pendant la phase de création, HubSpot validera le type d'événement. En cas d'erreurs de validation de schéma, l'ILC renverra une erreur indiquant ce qu'il faut corriger.
Par défaut, après une création réussie, HubSpot déploiera automatiquement le projet. Si vous avez désactivé cette option dans les [paramètres de votre projet](/docs/apps/developer-platform/build-apps/manage-apps-in-hubspot#view-your-app-on-the-project-details-page), vous pouvez effectuer un déploiement manuel en utilisant `hs project deploy`.
Après le déploiement, le type d'événement de votre application sera désormais disponible et pourra être utilisé pour recevoir des données d'occurrence d'événement.
## Récupérez l'élément fullyQualifiedName
Pour envoyer des données d'occurrence d'événement pour le type d'événement, vous devrez récupérer le `fullyQualifiedName` via l'API d'événements de l'application. Ce nom identifie le type d'événement et devra être inclus dans toutes les opérations d'API d'événement d'application.
Pour récupérer l'élément `eventTypeName`, adressez une demande `POST` à `https://api.hubapi.com/integrators/timeline/v4/types/projects`. Dans le corps de la demande, incluez :
* Un champ `projectName`, qui doit être défini sur la valeur `name` du fichier `hsproject.json` de votre projet.
* Un champ `developerSymbol`, qui doit être défini sur la valeur `uid` du fichier de configuration `*-hsmeta.json` du type d'événement.
```json theme={null}
{
"projectName": "my-marketplace-app",
"developerSymbol": "customer_login_event"
}
```
La réponse renverra le nom du projet, le nom du type d'événement et le `fullyQualifiedName`.
```json highlight={6} theme={null}
{
"developerQualifiedSymbol": {
"projectName": "marketplace",
"developerSymbol": "customer_login_event"
},
"fullyQualifiedName": "ae000000_integrators-timeline-event-type-id-0000000"
}
```
La valeur `fullyQualifiedName` ne changera jamais, vous pouvez donc la coder en toute sécurité dans votre onboarding. L'API limite le nombre de fois où vous pouvez récupérer cette valeur par jour et ne peut pas être utilisée par programme.
## Gestion des types d'événements
Pour mettre à jour un type d'événement après sa création, il vous suffira de mettre à jour le schéma de type d'événement dans votre projet, puis de le recharger pour créer et déployer l'application.
Si vous ne souhaitez plus utiliser un type d'événement, vous pouvez le supprimer de votre projet. Toutefois, avant de supprimer un type d'événement, tenez compte des éléments suivants :
* La suppression d'un type d'événement est une action permanente et irréversible.
* La suppression d'un type d'événement supprime à la fois le type d'événement et toutes les occurrences de ce type de tous les comptes qui ont installé l'application.
* La suppression d'un type d'événement va mettre en casse les autres outils HubSpot qui s'appuient sur ce type d'événement, tels que les rapports et les workflows.
Pour supprimer le type d'événement, supprimez le fichier de configuration du type d'événement `*-hsmeta.json` de votre projet, puis chargez et déployez le projet.
## Migrer un type d'événement de chronologie existant
Si vous avez une application publique existante avec un événement de chronologie, vous pouvez la migrer vers la plateforme de développement en utilisant l'ILC.
> [!WARNING]
>
> Avant de migrer votre application :
>
> * Consultez le [guide de migration d'application publique](/docs/apps/developer-platform/build-apps/migrate-an-app/migrate-an-existing-public-app) pour connaître les considérations et les limites actuelles de la version bêta de la plateforme de développement.
> * Une fois que vous avez migré un type d'événement de chronologie (`v1`/`v3`) vers la plateforme de développeur, vous aurez 7 jours pour modifier les demandes d'API d'événements de chronologie `v1`/`v3` existants vers les nouveaux points de terminaison `v4`, y compris les demandes d'API d'occurrence/d'instance d'événement de type d'événement. Après 7 jours, tous les appels existants vers les points de terminaison d'occurrence d'événement `v1`/`v3` renverront des erreurs `401`.
> * Pour créer et mettre à jour des types d'événements et des modèles, vous n'aurez plus besoin d'utiliser l'API. Au lieu de cela, vous les gérerez directement dans le projet via le [fichier de configuration du type d'événement](/docs/apps/developer-platform/add-features/app-events/reference#event-type-schema).
> * Pour envoyer des données d'occurrence d'événement, vous devrez utiliser les points de terminaison `v4`, qui proposent des [points de terminaison d'envoi unique et par lot](/docs/apps/developer-platform/add-features/app-events/send-event-occurrences).
Pour migrer votre application :
* Dans le terminal, exécutez `hs app migrate`, puis suivez les invites du terminal pour migrer votre application et votre événement de chronologie.
* Une fois le processus de migration terminé, votre application sera hébergée dans un projet développeur et un répertoire de projet local sera créé pour vous.
* Pour ouvrir le projet dans HubSpot, accédez au répertoire du projet local, puis exécutez `hs project open`.
Notez que les fichiers de configuration générés (`*-hsmeta.json`) peuvent contenir des champs avec des valeurs `null`. Ces champs sont un artefact de la migration et il peut être supprimé en toute sécurité.
## Étapes suivantes
Après avoir créé un type d'événement, découvrez comment [envoyer des données d'occurrence d'événement via l'API](/docs/apps/developer-platform/add-features/app-events/send-event-occurrences).
Vous pouvez également consulter la [documentation de référence sur les événements d'application](/docs/apps/developer-platform/add-features/app-events/reference) pour continuer à créer et à personnaliser vos événements d'application.
# Vue d'ensemble des événements d'application (BÊTA)
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/app-events/overview
Découvrez comment définir des événements d'application sur la dernière version de la plateforme de développement.
Les événements des applications vous permettent d'envoyer des données d'activité enrichies depuis vos systèmes externes directement à HubSpot. Les données d'événement d'application sont associées aux fiches d'informations du CRM et peuvent être utilisées dans les outils d'automatisation, d'analytics et de reporting de HubSpot.
Découvrez ci-dessous comment fonctionnent les événements d'application. Pour commencer à intégrer des événements d'application dans votre projet :
* [Créer un type d'événement](/docs/apps/developer-platform/add-features/app-events/create-and-manage-event-types)
* [Envoyer les données d'occurrence d'événement](/docs/apps/developer-platform/add-features/app-events/send-event-occurrences)
* Consulter la [documentation de référence relative aux événements d'application](/docs/apps/developer-platform/add-features/app-events/reference)
> [!WARNING]
>
> Les événements d'application décrits dans cette documentation sont destinés aux applications créées pour le [marketplace des applications](https://ecosystem.hubspot.com/marketplace/apps) à l'aide de projets développeur. Pour créer des rapports sur les événements personnalisé pour d'autres types d'intégrations, vous pouvez utiliser des [événements personnalisés](/docs/api-reference/events-manage-event-definitions-v3/guide) à la place.
## Fonctionnement des événements d'application
Les événements sont des points de données qui capturent ce qui s'est passé à un moment précis, souvent lié à des actions de l'utilisateur, telles que la soumission d'un formulaire, l'envoi d'un SMS ou l'affichage d'une page. Contrairement aux fiches d'informations du CRM, qui sont destinées à indiquer l'état actuel d'une entité, les événements peuvent vous permettre de mieux comprendre les modèles d'activité, les changements de comportement au fil du temps et d'autres tendances.
> [!TIP]
>
> Les événements d'application sont idéaux lorsque vos données :
>
> * Représente des actions ou des activités qui se produisent de façon répétée.
> * Les changements doivent être analysés afin d'identifier les variations ou le volume au fil du temps.
> * Ne nécessite pas de mise à jour après la création.
À un niveau élevé, un événement d'application contient les éléments suivants :
* **Définition du type d'événement :** un schéma JSON qui définit la structure, les propriétés et les règles de validation de l'événement. Cela comprend le nom de l'événement, le libellé d'affichage, l'objet CRM cible et les propriétés de l'événement. Les types d'événements comprennent également des définitions des modèles d'affichage pour le rendu de la chronologie des fiches d'informations du CRM. Les types d'événements sont définis à l'aide de projets développeur.
* **Occurrences d'événements :** instances individuelles d'événements qui contiennent des données réelles, validées par rapport à votre schéma de type d'événement. Les données d'occurrence d'événement sont envoyées via l'API d'événements de l'application et incluent l'identifiant du type d'événement, les valeurs de propriété, les horodatages et les métadonnées supplémentaires, ainsi que les données de référence des objets du CRM pour l'association des fiches d'informations du CRM.
> [!NOTE]
>
> **Événements de la chronologie et Événements d'application**
>
> Auparavant, HubSpot publiait des événements de la chronologie pour vous permettre d'afficher des données d'événements dans les chronologies d'objets du CRM. Les événements d'application permettent cette même fonctionnalité dans une liste étendue d'objets pris en charge, tout en étant disponibles dans d'autres outils HubSpot. Les événements d'application ont désormais leur propre page index en plus des événements personnalisés, offrant une vue unifiée des activités de l'événement.
>
> Les intégrations d'événements de la chronologie existantes continueront de fonctionner et seront visibles aux mêmes endroits que les événements d'application. Toutefois, pour créer de nouveaux types d'événements ou apporter des modifications à des types existants, vous devez les recréer en tant qu'événement d'application dans votre projet développeur.
## Objets et outils pris en charge
Lors de la définition d'un type d'événement, vous le configurerez pour qu'il soit associé à un objet CRM spécifique, ce qui vous permettra de lier les données d'événement à sa source, telles que les contacts qui se connectent à votre site web. Les occurrences d'événements peuvent ensuite être associées à des fiches d'informations CRM de ce type. Les événements d'application peuvent être associés aux objets CRM suivants :
* Contacts
* Entreprises
* Transactions
* Tickets
* Objets personnalisés
* Objets de l'application
Les événements d'application peuvent être utilisés dans les outils HubSpot suivants :
* **Interface de gestion des événements :** affichez et analysez les données des événements de l'application dans le tableau de bord des événements personnalisés en même temps que les données des événements personnalisé en accédant à **Gestion des données** > **Événements personnalisés** dans votre compte.
* **Chronologies des fiches d'informations du CRM :** affichez l'activité chronologique des événements de l'application sur la chronologie des fiches d'informations du CRM associées à leur occurrence.
* **Outils de reporting :** utilisez les données d'événements des applications pour créer des rapports personnalisés, des analyses du parcours client et des jeux de données pour l'analyse et la visualisation.
* **Scores, listes et workflows des leads :** segmentez votre base de données CRM à l'aide d'événements pour les listes dynamiques, le score des leads et le déclenchement des workflows.
## Meilleures pratiques
Lors de la création de types d'événements :
* Utilisez des noms clairs et descriptifs pour [les types d'événement](/docs/apps/developer-platform/add-features/app-events/reference#event-type-schema) et [les propriétés](/docs/apps/developer-platform/add-features/app-events/reference#event-properties), car ils apparaîtront sous forme de filtres dans les workflows, les listes, les rapports et le tableau de bord des événements personnalisés.
* Choisissez les types de propriétés appropriés (chaîne, nombre, date, heure, etc.) qui correspondent à vos données et permettent un filtrage et une analyse appropriés.
* Incluez les propriétés qui seront utiles pour la segmentation, le reporting et les déclencheurs d'automatisation (par exemple, les montants des transactions, les rôles d'utilisateur, les catégories d'actions).
* Concevez les types d'événements en tenant compte des cas d'utilisation des rapports et des workflows, en tenant compte de la manière dont les utilisateurs filtreront et regrouperont les données d'événement.
* Évitez d'apporter des modifications cassantes aux schémas de types d'événements existants, car cela peut perturber les workflows et rapports existants qui dépendent de la structure de l'événement.
Pour garantir la qualité des données d'événements :
* Examinez toutes les demandes de données d'occurrence d'événement programmatique pour vous assurer qu'elles seront correctement validées par rapport à votre schéma de type d'événement.
* Utilisez un formatage cohérent pour les valeurs des propriétés d'événement, en particulier pour les dates, les nombres et les données de catégories.
* Assurez-vous que les événements sont associés à des [ID de fiches d'informations du CRM valides](/docs/apps/developer-platform/add-features/app-events/send-event-occurrences#crm-record-association).
* Surveillez les taux de réussite des soumissions [d'événements et les réponses aux erreurs](/docs/apps/developer-platform/add-features/app-events/reference#occurrence-send-errors).
* Examinez régulièrement les données d'événements sur les chronologies des fiches d'informations du CRM et dans le tableau de bord des événements personnalisés pour en vérifier l'exactitude.
Optimisez les performances des soumissions d'événements en :
* [Regroupement par lots de plusieurs événements](/docs/apps/developer-platform/add-features/app-events/send-event-occurrences#sending-event-occurrences) dans des demandes d'API uniques lorsque cela est possible (jusqu'à 500 événements par lot).
* Conserver des charges utiles d'occurrence d'événement légères en n'incluant que les données nécessaires sur les propriétés.
* Mettre en œuvre une logique de relance exponentielle pour les soumissions d'événements qui ont échoué.
## Limites
Gardez à l'esprit les limitations suivantes lors de la planification et de la création d'événements d'application.
### Exigences relatives à la version
* Les événements d'application ne peuvent être créés que par le biais de la dernière version de la plateforme de projets de développement (`2025.2`).
* Pour les types d'événements existants, vous pouvez continuer d'utiliser les [API d'événements de chronologie v1](/docs/api-reference/legacy/crm-timeline-v1/get-integrations-v1-application-id-timeline-event-event-typeid-event-id) et [v3](/docs/api-reference/crm-timeline-v3/guide). Toutefois, vous ne pouvez pas créer de nouveaux types d'événement à l'aide des API `v1` et `v3`.
### Contraintes de type d'événement
* Les événements doivent être conformes au schéma de type d'événement défini, sinon ils seront rejetés.
* Certains [champs de type d'événement](/docs/apps/developer-platform/add-features/app-events/reference#event-type-schema) ne peuvent pas être mis à jour après la création du type d'événement (par exemple, `name` et `objectType`).
* Les nouveaux types d'événements sont soumis à un processus d'évaluation avant de pouvoir être activés.
### Limites des données
* Les propriétés individuelles sont limitées à 510 Ko et la taille totale de l'événement est limitée à 1 Mo.
* Les événements d'applications sont destinés aux fournisseurs du marketplace des applications et ne fonctionnent qu'avec des applications configurées pour utiliser l'authentification OAuth. Les systèmes internes devraient plutôt utiliser [des événements personnalisés](/docs/api-reference/events-manage-event-definitions-v3/guide.mdx).
## Pour commencer
Pour commencer à travailler avec des événements d'application, vous devrez :
* [Créez un type d'événement](/docs/apps/developer-platform/add-features/app-events/create-and-manage-event-types) pour définir la structure de vos données d'événement à l'aide d'un projet développeur.
* [Envoyez des données d'occurrence d'événement](/docs/apps/developer-platform/add-features/app-events/send-event-occurrences#send-a-single-occurrence) à l'application à l'aide de [l'API d'événements de l'application]().
* Exploiter les données dans HubSpot en fonction des besoins à l'aide d'outils de reporting, d'automatisation ou d'analytics.
# Référence des événements d'application (BÊTA)
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/app-events/reference
Informations de référence pour les événements d'application sur la dernière version de la plateforme de développeur.
Vous trouverez ci-dessous des informations de référence relatives à l'utilisation des événements d'application, notamment les schémas de type d'événement, les modèles de rendu de chronologie d'événement, les champs d'occurrence d'événement, etc.
## Structure du projet
Dans le contexte d'un projet, vous placerez les définitions des types d'événements dans un répertoire `app-events` sous `app/`. Le répertoire `app-events` doit contenir un fichier de définition de schéma JSON pour chaque type d'événement (`*-hsmeta.json`).
```shell theme={null}
project-folder/
└── src/
└── app/
├── app-hsmeta.json
└── app-events/
└── my-event-type-hsmeta.json
```
Pour inclure des définitions de types d'événement dans un projet, procédez comme suit :
* Votre application doit utiliser l'authentification OAuth et être configurée pour la distribution sur le marketplace des applications. En outre, l'application doit inclure `timeline` dans son `requiredScopes`. Découvrez-en davantage sur la [configuration de l'application](/docs/apps/developer-platform/build-apps/app-configuration).
* Votre projet doit être correctement déployé avant de pouvoir inclure un composant d'événement d'application.
## Schéma de type d'événement
Voici les options de configuration disponibles pour les schémas de type d'événement (`*-hsmeta.json`). Notez que certains des attributs ci-dessous ne peuvent pas être modifiés après la création du type d'événement.
> [!WARNING]
>
> Chaque application est limitée à 750 types d'événements.
```json theme={null}
{
"uid": "customer_login_event",
"type": "app-event",
"config": {
"name": "Customer login",
"headerTemplate": "{{customerName}} logged in.",
"detailTemplate": "{{customerName}} logged in via the {{loginLocation}}.",
"objectType": "CONTACT",
"properties": [
{
"name": "customerName",
"label": "Customer Name",
"type": "string"
},
{
"name": "loginLocation",
"label": "Login location",
"type": "enumeration",
"options": [
{
"value": "mobileApp",
"label": "Mobile app"
},
{
"value": "website",
"label": "Website"
}
]
}
]
}
}
```
Les champs marqués par \* sont requis.
| Champ | Type | Description |
| - | - | - |
| `uid`\* | Chaîne | un identifiant unique interne pour le type d'événement. |
| `type`\* | Chaîne | le type de composant. Doit correspondre à `app-event`. |
| `name`\* | Chaîne | le libellé affiché dans HubSpot (50 caractères maximum). Cette valeur ne peut pas être mise à jour après la création. |
| `objectType`\* | Chaîne | le nom complet du type d'objet CRM auquel les occurrences d'événements peuvent être associées. Cette valeur ne peut pas être modifiée après la création. Peut être l'un des éléments suivants : `COMPANY`, `CONTACT`, `CUSTOM_OBJECT`, `DEAL`, `TICKET`, `APP_OBJECT`. |
| `headerTemplate` | Chaîne | le [modèle de rendu](#rendering-templates) de l'en-tête de la carte d'activité CRM chronologie. Peut contenir jusqu'à 1 000 caractères. |
| `detailTemplate` | Chaîne | le [modèle de rendu](#rendering-templates) pour le corps de la carte d'activité CRM chronologie. Peut contenir jusqu'à 10 000 caractères. |
| `properties` | Tableau | propriétés définies pour le type d'événement dans lequel vous stockerez les données d'occurrence d'événement. Chaque type d'événement peut avoir jusqu'à 500 propriétés. Découvrez-en davantage sur les propriétés d'événement ci-dessous. |
### Propriétés d'événement
Lors de la définition du schéma d'événement, utilisez le tableau `properties` pour définir les champs vers lesquels vous enverrez les données d'occurrence d'événement. Chaque type d'événement peut avoir jusqu'à 500 propriétés.
```json theme={null}
"properties": [
{
"name": "customerName",
"label": "Customer Name",
"type": "string"
},
{
"name": "loginLocation",
"label": "Login location",
"type": "enumeration",
"options": [
{
"value": "mobileApp",
"label": "Mobile app"
},
{
"value": "website",
"label": "Website"
}
]
}
]
```
Les champs marqués par \* sont requis.
| Champ | Type | Description |
| - | - | - |
| `name`\* | Chaîne | le nom interne de la propriété. Doit être en minuscules et comporter entre 1 et 500 caractères. Les noms de propriété doivent être uniques par type d'événement. Cette valeur ne peut pas correspondre à la regex `"[A-Za-z0-9_\\-.]+"` ou commencer par `hs_`. |
| `label`\* | Chaîne | le libellé affiché dans HubSpot. Doit être en minuscules et comporter entre 1 et 500 caractères. |
| `type`\* | Chaîne | le type de données capturées dans la propriété. Peut être l'un des éléments suivants `STRING`, `NUMBER`, `DATE`, `ENUMERATION`. |
| `options` | Tableau | pour les propriétés de type `ENUMERATION`, ce champ fournit les options disponibles. Doit contenir au moins une option. Chaque option est un objet qui contient :
`name` : le libellé de l'option affichée dans HubSpot.
`value` : la valeur interne fournie par l'occurrence de l'événement.
Le `name` et le `label` doivent être uniques dans le type d'événement. |
| `objectPropertyName` | Chaîne | le cas échéant, le nom de la propriété d'objet CRM qui doit être mise à jour lorsque des données d'événement sont envoyées à HubSpot. La valeur de cette propriété remplacera toutes les valeurs existantes dans cette propriété. Découvrez-en davantage sur l'horodatage des propriétés des fiches d'informations CRM ci-dessous. |
### Horodatage de propriété
Dans certains cas, vous souhaiterez peut-être modifier les valeurs des propriétés de la fiche d'informations CRM en fonction des données d'occurrence d'événement de l'application. Par exemple, vous pouvez vouloir mettre à jour le prénom et le nom de famille d'un contact avec de nouvelles valeurs définies par l'occurrence (par exemple, soumission de formulaire).
Pour mettre à jour les propriétés des fiches d'informations CRM via des occurrences d'événement, vous pouvez lier une propriété d'événement à une propriété CRM dans le schéma de type d'événement. Dans les champs de définition d'une propriété d'événement donnée, incluez le champ `objectPropertyName` et précisez la propriété CRM à associer. Une fois qu'une propriété est liée, HubSpot mettra toujours à jour la valeur de la propriété sur la fiche d'informations CRM en utilisant la valeur de l'occurence la plus récente en fonction du champ `timestamp`.
Par exemple, le schéma de type d'événement ci-dessous associe la propriété d'événement `customerName` à une propriété de contact personnalisée nommée `custom_property_name`. Lorsque les données d'occurrence d'événement incluent une valeur pour `customerName`, `custom_property_name` sera mise à jour pour la fiche d'informations CRM associée.
```json theme={null}
"properties": [
{
"name": "customerName",
"label": "Customer Name",
"type": "string",
"objectPropertyName": "custom_property_name"
}
]
```
### Modèles de rendu
Les schémas de type d'événement peuvent inclure les champs `headerTemplate` et `detailTemplate` pour configurer le rendu des occurrences d'événement sur les chronologies des fiches d'informations CRM.
* `headerTemplate` : une description d'une ligne de l'événement en haut de la carte d'activité (jusqu'à 1 000 caractères).
* `detailTemplate` : les détails de l'événement dans le corps de la carte d'activité (jusqu'à 10 000 caractères).
Les modèles de rendu sont écrits à l'aide [de Markdown](https://www.markdownguide.org/basic-syntax/) avec les modèles [Handlebars](https://handlebarsjs.com/guide/). Ces modèles peuvent restituer les données d'occurrence d'événement comme suit :
* Dans les deux modèles, vous pouvez accéder à toutes données de `property` transmises par l'occurrence d'événement à l'aide de la syntaxe `{{propertyName}}`.
* Dans le `detailTemplate`, vous pouvez également accéder aux valeurs `extraData` transmises par l'occurrence d'événement à l'aide de la syntaxe `{{extraData.fieldName}}`. Vous pouvez accéder à n'importe quel niveau d'attribut en notation par points `extraData`, tel que `{{extraData.person1.preferredName}}`.
> [!WARNING]
>
> L'objet `extraData` peut seulement contenir un JSON valide. Si le JSON est erroné, l'occurrence sera rejetée et vous recevrez une réponse d'erreur.
Par exemple, les modèles ci-dessous utilisent les données de propriété `customerName` et `loginLocation`, ainsi que le champ `surveyData` de `extraData` [envoyé via l'occurrence d'événement](#event-occurrences).

```json theme={null}
"headerTemplate": "{{customerName}} logged in via the {{loginLocation}}.",
"detailTemplate": "#### Post-login survey\n{{#each extraData.surveyData}}\n- **{{question}}**: {{answer}}\n{{/each}}",
```
Les modèles étant conçus avec Markdown et Handlebars, vous pouvez tirer parti des aides de Handlebars pour rendre le contenu plus dynamique. Par exemple, l'élément suivant `detailTemplate` inclut [l'assistant `#if`](https://handlebarsjs.com/guide/builtin-helpers.html#if) pour effectuer une restitution conditionnelle du contenu selon que les données d'occurrence d'événement incluent ou non le champ `surveyData` dans `extraData`.
* Si `extraData` contient `surveyData`, afficher les réponses à l'enquête après connexion.
* En l'absence de `surveyData` lors de l'occurrence de l'événement, afficher `No additional information.`.

```json theme={null}
"detailTemplate": "{{#if extraData.surveyData}}#### Post-login survey\n{{#each extraData.surveyData}}\n- **{{question}}**: {{answer}}\n{{/each}}{{else}}No additional information."
```
### Utilisation d'iframes
Lorsque les données d'occurrence d'événement contiennent le champ `timelineIFrame`, la carte d'activité de la chronologie inclura un lien hypertexte sur lequel les utilisateurs pourront cliquer pour ouvrir le contenu lié dans un iframe.

```json theme={null}
"timelineIFrame": {
"linkLabel": "Click me",
"headerLabel": "This is an iframe",
"url": "https://hubspot.mintlify.io/en-us/apps/developer-platform/build-apps/overview",
"width": 300,
"height": 300
}
```
| Champ | Type | Description |
| - | - | - |
| `linkLabel` | Chaîne | le texte du lien hypertexte qui lancera l'iframe au clic. |
| `headerLabel` | Chaîne | le libellé de la fenêtre modale qui affiche le contenu iFrame. |
| `url` | Chaîne | l'URL du contenu de l'iframe. |
| `width` | Entier | la largeur de la fenêtre modale de l'iframe. |
| `height` | Entier | la hauteur de la fenêtre modale de l'iframe. |
## Occurrence de l'événement
Pour envoyer des occurrences d'événements pour un type d'événement donné, effectuez une requête `POST` aux points de terminaison ci-dessous. L'API d'événements d'application comprend des points de terminaison pour l'envoi d'occurrences d'événements uniques et de lots d'occurrences de plusieurs événements. Pour les deux points de terminaison, les données d'occurrence d'événement devront être validées par rapport à un schéma de type d'événement existant, que vous indiquerez `eventTypeName` dans le corps de la requête.
**Envoyer une occurrence unique**
Pour envoyer une occurrence d'événement unique, effectuez une requête `POST` à `/integrators/timeline/v4/events`.
Dans le corps de la requête, incluez les données d'occurrence d'événement, en respectant le schéma défini du type d'événement.
```json theme={null}
{
"eventTypeName": "ae000000_integrators-timeline-event-type-id-0000000",
"objectId": "123456",
"id": "login-1",
"properties": {
"customerName": "Mark S.",
"loginLocation": "mobileApp"
}
},
```
**Envoyer un lot d'occurrences**
Pour envoyer un lot d'occurrences d'événements, effectuez une demande `POST` à `/integrators/timeline/v4/events/batch`.
Dans le corps de la requête, incluez jusqu'à 500 objets d'occurrence d'événement séparés par des virgules dans un tableau `inputs`. Si certaines occurrences ne sont pas validées, les occurrences validées avec succès seront toujours acceptées et persistées.
```json theme={null}
{
"inputs": [
{
"EventTypeName": "ae000000_integrators-timeline-event-type-id-0000000",
"id": "login_event_100",
"objectId": "769851",
"properties": {
"customerName": "Tim",
"loginLocation": "mobileApp"
},
"extraData": {
"surveyData": [
{
"question": "How was your login experience?",
"answer": "Fine!"
},
{
"question": "How likely are you to recommend logging in to a co-worker?",
"answer": "Extremely likely"
}
]
}
},
{
"EventTypeName": "ae000000_integrators-timeline-event-type-id-0000000",
"id": "login_event_101",
"objectId": "769851",
"properties": {
"customerName": "Tim",
"loginLocation": "website"
},
"extraData": {}
}
]
}
```
Dans le corps de la requête, incluez les données basées sur le schéma de type d'événement défini. Le corps de la requête doit inclure l'événement `eventTypeName`, que vous pouvez [récupérer via l'API](/docs/apps/developer-platform/add-features/app-events/create-and-manage-event-types#retrieve-the-fullyqualifiedname).
```json theme={null}
{
"eventTypeName": "ae000000_integrators-timeline-event-type-id-0000000",
"objectId": "8675309",
"properties": {
"customerName": "Mark S.",
"loginLocation": "mobileApp"
},
"id": "login-1529a3gda23",
"extraData": {
"surveyData": [
{
"question": "How was your login experience?",
"answer": "Fine!"
},
{
"question": "How likely are you to recommend logging in to a co-worker?",
"answer": "Extremely likely"
}
]
}
}
```
Les champs marqués par \* sont requis.
| Champ | Type | Description |
| - | - | - |
| `eventTypeName`\* | Chaîne | le nom entièrement qualifié du type d'événement, que vous utiliserez pour identifier l'événement via l'API. Cette valeur est automatiquement définie par HubSpot et peut être [obtenue via l'API](/docs/apps/developer-platform/add-features/app-events/create-and-manage-event-types#retrieve-the-fullyqualifiedname) après la création du type d'événement. Cette valeur ne peut pas être modifiée après la création. |
| `objectId`\* | Chaîne | l'ID de la fiche d'informations de CRM à associer à l'événement. Ce champ peut être utilisé pour tous les types de fiches d'informations de CRM et constitue l'identifiant recommandé. Découvrez-en davantage sur [l'association des fiches d'informations CRM](#crm-record-association). |
| `email` | Chaîne | pour l'association de contact, vous pouvez fournir l'adresse e-mail du contact à associer. Découvrez-en davantage sur [l'association des fiches d'informations CRM](#crm-record-association). |
| `utk` | Chaîne | pour l'association de contacts, vous pouvez fournir le jeton utilisateur d'un contact existant à associer. Découvrez-en davantage sur [l'association des fiches d'informations CRM](#crm-record-association). |
| `domain` | Chaîne | pour l'association d'entreprise, vous pouvez fournir le domaine de site web d'une entreprise existante. Découvrez-en davantage sur [l'association des fiches d'informations CRM](#crm-record-association). |
| `timestamp` | Chaîne | définit l'heure de l'occurrence de l'événement (format [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601)). Si ce champ n'est pas renseigné, HubSpot utilisera par défaut l'horodatage de l'envoi des données d'occurrence d'événement. |
| `properties` | Objet | paires clé-valeur des noms et valeurs des [propriétés](/docs/apps/developer-platform/add-features/app-events/reference#event-properties) que vous avez définies pour le type d'événement. |
| `extraData` | Tableau | lorsqu'il est inclus, fournit des informations supplémentaires pour le rendu de la chronologie. Doit être un JSON valide. Découvrez-en davantage sur [les données supplémentaires dans le rendu des modèles](#rendering-templates). |
| `timelineIFrame` | Objet | une fois incluse, la carte de chronologie comprendra un lien hypertexte qui permet aux utilisateurs d'ouvrir le contenu lié dans un iframe. Découvrez-en davantage sur [l'utilisation des iframes](#using-iframes). |
| `id` | Chaîne | un identifiant unique pour l'occurrence de l'événement. Doit être unique dans le type d'événement. Si ce champ n'est pas renseigné, HubSpot générera un GUID aléatoire. Lorsque plusieurs événements ont le même ID, le premier sera accepté et tous les autres seront rejetés. |
Si certaines occurrences ne sont pas validées, les occurrences validées avec succès seront toujours acceptées et persistées. Le message d'erreur dans la réponse fournira des informations sur ce que vous devrez corriger.

### Association des fiches d'informations CRM
Chaque événement doit être associé à une fiche d'informations CRM, le type d'objet CRM étant défini par le schéma de type d'événement. L'API des événements de l'application comprend plusieurs champs pour associer les données d'occurrence d'événement aux fiches d'informations CRM. Pour tous les objets CRM pris en charge, il est recommandé d'utiliser le champ `objectId`. Cependant, dans certaines situations, vous souhaiterez peut-être utiliser les autres champs.
* `utk`/`email` : si vous ne connaissez pas l'ID du contact, utilisez le champ `utk` et/ou `email` pour l'identification. Fournir ces deux identifiants vous permet également de créer et de mettre à jour des contacts. Par exemple :
* Si `utk` correspond à un contact existant mais que l'`email` ne correspond pas, HubSpot mettra à jour le contact avec la nouvelle adresse e-mail.
* Si aucun `objectId` n'est fourni, l'occurrence de l'événement sera associée à un contact existant correspondant à `utk`/`email`, ou HubSpot créera un nouveau contact si aucune correspondance n'est trouvée.
* Notez que le `utk` seul ne peut pas créer de nouveaux contacts. Vous devez toujours inclure l'`email` avec `utk` pour garantir une bonne association.
* `domain` : pour l'association d'entreprises, vous devez fournir l'`objectId`, mais vous pouvez également l'inclure le `domain` pour mettre à jour la propriété de `domain` de cette entreprise.
# Envoyer des occurrences d'événements (BÊTA)
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/app-events/send-event-occurrences
Découvrez comment envoyer des données d'occurrence d'événement dans HubSpot à l'aide des schémas de type d'événement que vous avez définis.
Après [avoir défini un schéma de type d'événement](en-us/apps/developer-platform/build-apps/features/app-events/create-and-manage-event-types) et [récupéré son fullyQualifiedName](/docs/apps/developer-platform/add-features/app-events/create-and-manage-event-types#retrieve-the-fullyqualifiedname), vous pouvez envoyer des données d'occurrence d'événement via l'API d'événements de l'application. Lors de l'envoi de données d'événement, vous devrez respecter le schéma que vous avez créé précédemment. Les requêtes qui ne correspondent pas au schéma échoueront à être validées et ne seront pas capturées par l'application.
## Envoi d'occurrence d'événements
**Envoyer une occurrence unique**
Pour envoyer une occurrence d'événement unique, effectuez une requête `POST` à `/integrators/timeline/v4/events`.
Dans le corps de la requête, incluez les données d'événements suivant le schéma défini pour le type d'événement ainsi que la valeur `fullyQualifiedName` dans un champ `eventTypeName`.
```json theme={null}
{
"eventTypeName": "ae000000_integrators-timeline-event-type-id-0000000",
"objectId": "123456",
"id": "login-1",
"properties": {
"customerName": "Mark S.",
"loginLocation": "mobileApp"
}
},
```
**Envoyer un lot d'occurrences**
Pour envoyer un lot d'occurrences d'événements, effectuez une demande `POST` à `/integrators/timeline/v4/events/batch`.
Dans le corps de la requête, incluez jusqu'à 500 objets d'occurrence d'événement séparés par des virgules dans un tableau `inputs`. Si certaines occurrences ne sont pas validées, les occurrences validées avec succès seront toujours acceptées et persistées.
```json theme={null}
{
"inputs": [
{
"EventTypeName": "ae000000_integrators-timeline-event-type-id-0000000",
"id": "login_event_100",
"objectId": "769851",
"properties": {
"customerName": "Tim",
"loginLocation": "mobileApp"
},
"extraData": {
"surveyData": [
{
"question": "How was your login experience?",
"answer": "Fine!"
},
{
"question": "How likely are you to recommend logging in to a co-worker?",
"answer": "Extremely likely"
}
]
}
},
{
"EventTypeName": "ae000000_integrators-timeline-event-type-id-0000000",
"id": "login_event_101",
"objectId": "769851",
"properties": {
"customerName": "Tim",
"loginLocation": "website"
},
"extraData": {}
}
]
}
```
Les champs marqués par \* sont requis.
| Champ | Type | Description |
| - | - | - |
| `eventTypeName`\* | Chaîne | le nom entièrement qualifié du type d'événement, que vous utiliserez pour identifier l'événement via l'API. Cette valeur est automatiquement définie par HubSpot et peut être [obtenue via l'API](/docs/apps/developer-platform/add-features/app-events/create-and-manage-event-types#retrieve-the-fullyqualifiedname) après la création du type d'événement. Cette valeur ne peut pas être modifiée après la création. |
| `objectId`\* | Chaîne | l'ID de la fiche d'informations de CRM à associer à l'événement. Ce champ peut être utilisé pour tous les types de fiches d'informations de CRM et constitue l'identifiant recommandé. Découvrez-en davantage sur [l'association des fiches d'informations CRM](#crm-record-association). |
| `email` | Chaîne | pour l'association de contact, vous pouvez fournir l'adresse e-mail du contact à associer. Découvrez-en davantage sur [l'association des fiches d'informations CRM](#crm-record-association). |
| `utk` | Chaîne | pour l'association de contacts, vous pouvez fournir le jeton utilisateur d'un contact existant à associer. Découvrez-en davantage sur [l'association des fiches d'informations CRM](#crm-record-association). |
| `domain` | Chaîne | incluez ce champ en plus de `objectId` pour définir la valeur de propriété de l'entreprise `domain`. Découvrez-en davantage sur [l'association des fiches d'informations CRM](#crm-record-association). |
| `timestamp` | Chaîne | définit l'heure de l'occurrence de l'événement (format [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601)). Si ce champ n'est pas renseigné, HubSpot utilisera par défaut l'horodatage de l'envoi des données d'occurrence d'événement. |
| `properties` | Objet | paires clé-valeur des noms et valeurs des propriétés que vous avez configuré pour le type d'événement. Découvrez-en davantage sur les [propriétés d'événement](/docs/apps/developer-platform/add-features/app-events/reference#event-properties). |
| `extraData` | Objet | des informations supplémentaires qui seront disponibles pour les [modèles de rendu de chronologie](/docs/apps/developer-platform/add-features/app-events/reference#rendering-templates). Doit être au format JSON valide. |
| `timelineIFrame` | Objet | une fois incluse, la carte de chronologie comprendra un lien hypertexte qui permet aux utilisateurs d'ouvrir le contenu lié dans un iframe. Découvrez-en davantage sur [l'utilisation des iframes](/docs/apps/developer-platform/add-features/app-events/reference#using-iframes). |
| `id` | Chaîne | un identifiant unique pour l'occurrence de l'événement. Doit être unique dans le type d'événement. Si ce champ n'est pas renseigné, HubSpot générera un GUID aléatoire. Lorsque plusieurs événements ont le même ID, le premier sera accepté et tous les autres seront rejetés. |
## Association des fiches d'informations CRM
Chaque événement doit être associé à une fiche d'informations CRM, le type d'objet CRM étant défini par le schéma de type d'événement. L'API des événements de l'application comprend plusieurs champs pour associer les données d'occurrence d'événement aux fiches d'informations CRM. Pour tous les objets CRM pris en charge, il est recommandé d'utiliser le champ `objectId`. Cependant, dans certaines situations, vous souhaiterez peut-être utiliser les autres champs.
* `utk`/`email` : si vous ne connaissez pas l'ID du contact, utilisez le champ `utk` et/ou `email` pour l'identification. Fournir ces deux identifiants vous permet également de créer et de mettre à jour des contacts. Par exemple :
* Si `utk` correspond à un contact existant, mais que l'`email` ne correspond pas, HubSpot mettra à jour le contact (par `utk`) avec la nouvelle adresse e-mail.
* Si aucun `objectId` n'est fourni, l'occurrence de l'événement sera associée à un contact existant correspondant à `utk`/`email`, ou HubSpot créera un nouveau contact si aucune correspondance n'est trouvée.
* Notez que le `utk` seul ne peut pas créer de nouveaux contacts. Vous devez toujours inclure l'`email` avec `utk` pour garantir une bonne association.
* `domain` : pour l'association d'entreprises, vous devez fournir l'`objectId`, mais vous pouvez également l'inclure le `domain` pour mettre à jour la propriété de `domain` de cette entreprise.
Voici l'ordre de priorité des propriétés d'association des fiches d'informations CRM, le nombre le plus bas étant la priorité la plus élevée :
| Champ | Priorité | Description |
| - | - | - |
| `objectId` | 1 | L'ID de fiche d'informations CRM (recommandé). |
| `utk` | 2 | Le jeton d'utilisateur du contact (contacts uniquement). |
| `email` | 3 | L'adresse e-mail du contact (contacts uniquement). |
| `domain` | 4 | Le domaine de l'entreprise (entreprises uniquement). |
## Envoi de données supplémentaires
Au-delà de l'envoi de données aux [propriétés d'événement](/docs/apps/developer-platform/add-features/app-events/reference#event-properties) et [de la mise à jour des propriétés CRM via les occurrences d'événement](/docs/apps/developer-platform/add-features/app-events/reference#property-stamping), vous pouvez inclure des données supplémentaires pour le [rendu de la chronologie](/docs/apps/developer-platform/add-features/app-events/reference#rendering-templates) via l'objet `extraData`.
> [!WARNING]
>
> L'objet `extraData` peut seulement contenir un JSON valide. Si le JSON est erroné, l'occurrence sera rejetée et vous recevrez une réponse d'erreur.
Les valeurs des champs `extraData` sont accessibles selon le type d'événement `detailTemplate` utilisant la syntaxe `{{extraData.fieldName}}`. Tous les niveaux d'attribut de `extraData` sont disponibles par le biais de la notation par points, comme `{{extraData.person1.preferredName}}`.
Par exemple, les modèles ci-dessous utilisent les données de propriété `customerName` et `loginLocation`, ainsi que le champ `surveyData` de `extraData` [envoyé via l'occurrence d'événement](#event-occurrences).

**Données sur l'occurrence d'événements**
```json theme={null}
{
"eventTemplateId": "5488733",
"objectId": "769851",
"tokens": {
"customerName": "Tim",
"loginLocation": "mobileApp"
},
"extraData": {
"surveyData": [
{
"question": "How was your login experience?",
"answer": "Fine!"
},
{
"question": "How likely are you to recommend logging in to a co-worker?",
"answer": "Extremely likely"
}
]
}
}
```
**Configuration du modèle de chronologie**
```json theme={null}
"headerTemplate": "{{customerName}} logged in via the {{loginLocation}}.",
"detailTemplate": "#### Post-login survey\n{{#each extraData.surveyData}}\n- **{{question}}**: {{answer}}\n{{/each}}",
```
# Premiers pas : présentation
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/app-objects/overview
Découvrez comment faire vos premiers pas de développement avec HubSpot.
'Découvrez comment faire vos premiers pas de développement avec HubSpot.';
Que vous soyez un nouveau développeur HubSpot ou que vous cherchiez à étendre vos compétences, cette section vous guidera tout au long du processus de mise en route et de fonctionnement. Vous découvrirez les différentes options de développement disponibles ainsi que les outils et les comptes spécifiques dont vous aurez besoin pour atteindre vos objectifs.
## Les avantages d'une plateforme connectée
Tout d'abord, il convient de se pencher sur ce qui fait de HubSpot une plateforme puissante pour les développeurs.
Le fondement de chaque compte HubSpot est la plateforme CRM [](/docs/guides/crm/understanding-the-crm) (gestion de la relation client), une base de données de relations et de processus commerciaux. HubSpot propose aux développeurs et partenaires externes différents moyens de travailler avec le système CRM afin de créer une valeur ajoutée pour les utilisateurs finaux de HubSpot. Celui-ci offre notamment les possibilités suivantes :
* Créer des intégrations et/ou des extensions avec les API de HubSpot pour synchroniser les données entre HubSpot et des plateformes externes.
* Concevoir des sites web personnalisés en utilisant le CMS (système de gestion de contenu) de HubSpot. En plus d'une suite complète d'outils de gestion de contenu, le CMS s'intègre totalement au CRM. Cela facilite la gestion du lancement des campagnes, de l'acquisition de leads et de la communication continue avec les clients.
* Personnaliser le CRM avec des extensions d'interface utilisateur. Les développeurs peuvent utiliser React pour créer des cartes personnalisées flexibles qui s'intègrent parfaitement à HubSpot.
Dans la section suivante, vous aurez un aperçu des outils disponibles pour les développeurs HubSpot. Ensuite, vous choisirez une option pour poursuivre votre parcours de développeur HubSpot.
## 1. Installer des outils pour vous aider dans la conception
Il existe une large gamme d'outils disponibles pour les développeurs HubSpot. La combinaison d'outils dont vous aurez besoin dépendra de vos objectifs spécifiques.
* **ILC HubSpot :** l'installation de l'ILC HubSpot pour le développement local est un excellent point de départ pour de nombreuses tâches de développement. L'ILC est utilisée lors de la création d'extensions d'interface utilisateur et de ressources CMS. Elle peut être utilisée pour créer et gérer des secrets, des tables HubDB et des données d'objets personnalisés à partir de votre compte. Vous devez avoir installé [Node.js](https://nodejs.org/en/) (la version 18 ou une version ultérieure est requise. La version LTS est recommandée). Pour installer l'ILC de manière globale, exécutez la commande suivante :
```shell theme={null}
npm i -g @hubspot/cli
```
* **Visual Studio Code :** l'installation de [Visual Studio Code](https://code.visualstudio.com/) vous permet de bénéficier de l'extension [HubSpot Visual Studio Code](https://developers.hubspot.com/docs), qui vous permet de centraliser votre workflow de développement.
* **Bibliothèques clients** : HubSpot fournit des bibliothèques clients pour [Node](https://github.com/HubSpot/hubspot-api-nodejs), [PHP](https://github.com/HubSpot/hubspot-api-php), [Ruby](https://github.com/HubSpot/hubspot-api-ruby) et [Python](https://github.com/HubSpot/hubspot-api-python).
* **Postman :** utilisez [Postman](https://www.postman.com/) pour accéder aux [collections Postman de HubSpot](https://www.postman.com/hubspot). Dans la documentation sur les API de HubSpot, vous trouverez des boutons permettant d'exécuter des appels à l'aide de la collection.

Découvrez-en davantage sur [les outils de développement de HubSpot](/docs/developer-tooling/overview).
## 2. Choisir ce qu'il faut concevoir
Il n'y a pas de solution unique pour développer avec HubSpot. Il s'agit d'une plateforme flexible qui peut répondre à un large éventail de besoins.
L'une des quatre grandes catégories énumérées ci-dessous devrait couvrir la plupart de ces besoins. Vous pouvez choisir celle qui vous convient le mieux pour une brève présentation, accompagnée de quelques actions immédiates pour vous aider à démarrer. Vous pouvez également découvrir les meilleurs outils pour ce travail et savoir si un [type spécifique de compte HubSpot](/docs/getting-started/account-types) est nécessaire.
* [Utiliser des API et créer des intégrations](https://developers.hubspot.com#use-apis-and-build-integrations)
* [Créer des applications pour le marketplace](https://developers.hubspot.com#build-for-the-app-marketplace)
* [Personnaliser l'interface utilisateur HubSpot](https://developers.hubspot.com#customize-the-hubspot-ui)
* [Créer des sites web personnalisés](https://developers.hubspot.com#build-custom-websites)
## 3. Rejoignez vos pairs
Entrez en contact avec vos pairs qui créent déjà sur HubSpot. Posez des questions, partagez vos connaissances, créez une communauté et tissez des liens.
* [Slack pour les développeurs](https://developers.hubspot.com/community)
* [Forums des développeurs](https://community.hubspot.com/t5/HubSpot-Developers/ct-p/developers)
* [GitHub pour les développeurs](https://github.com/hubspotdev)
## 4. Étendez vos connaissances à votre façon
Une fois que vous êtes opérationnel, de nombreuses ressources sont disponibles pour vous aider à approfondir vos connaissances. Vous pouvez accéder à des guides approfondis, à des documents de référence détaillés ou aux [cours de HubSpot Academy](https://academy.hubspot.com/courses), selon votre méthode d'apprentissage préférée.
# Premiers pas avec Objets de l'application (BÊTA)
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/app-objects/quickstart-guide-to-app-objects
Découvrez comment créer une nouvelle application unifiée de preuve de concept (BÊTA).
> [!NOTE]
>
> L'utilisation de cette fonctionnalité nécessite une autorisation de HubSpot. Si vous souhaitez demander l'accès aux objets d'application ou si vous souhaitez en savoir plus sur les fonctionnalités, veuillez soumettre [ce formulaire](https://developers.hubspot.com/app-objects-interest).
Découvrez comment créer une application de preuve de concept dans laquelle vous configurerez un objet d'application que vous pourrez tester et utiliser dans un compte de test de développeur.
**1. Installer la dernière version de l'ILC HubSpot**
Vous aurez besoin de la dernière version bêta de [l'ILC HubSpot](/docs/developer-tooling/local-development/hubspot-cli/reference) pour créer une application unifiée. Dans une fenêtre de terminal, exécutez la commande suivante :
```shell theme={null}
npm install -g @hubspot/cli@next
```
L'ILC doit être une version `7.4.4-beta.0` ou ultérieure. Vous pouvez vérifier la version de l'ILC dont vous disposez en exécutant `hs --version`.
**2. Authentifier votre compte de développeur**
Vous devrez ensuite authentifier votre compte de développeur en exécutant la commande suivante :
```shell theme={null}
hs auth
```
* Suivez les instructions pour générer une clé d'accès personnelle dans votre compte, puis copiez-la et collez-la dans le terminal pour enregistrer votre configuration.
* Pendant cette période bêta, il est recommandé de faire de ce compte votre compte par défaut dans l'ILC. Cela permettra d'éviter d'éventuelles erreurs d'accès pour le compte pour lequel vous avez participé à la bêta.
**3. Créer un nouveau projet de boilerplate**
Exécutez la commande ci-dessous dans votre terminal pour créer un nouveau projet et une nouvelle application du marketplace avec les fonctionnalités actuellement compatibles ou un schéma de référence d'objet d'application.
```shell theme={null}
hs project create --templateSource robrown-hubspot/hubspot-project-components-ua-app-objects-beta
```
**4. Configurez le projet nouvellement créé et chargez-le sur votre compte de développeur**
L'infrastructure de projets déplace les fonctionnalités d'application qui étaient précédemment configurées dans l'interface utilisateur ou via l'API vers des fichiers de code source, généralement définis comme des fichiers de configuration `-hsmeta.json`.
Les fonctionnalités de l'application sont ensuite créées à l'aide d'une combinaison de sous-dossiers du répertoire `/src/app` principal et d'autres fichiers de configuration si nécessaire. Pour configurer votre projet :
* Ajoutez une ou plusieurs URL de redirection valides au fichier `app-hsmeta.json` en fonction de la configuration de votre serveur OAuth local (ou hors production).
> [!TIP]
>
> ### Remarque :
>
> Pour commencer, vous pouvez utiliser [l'exemple d'Node.js OAuth](http://github.com/hubspot/oauth-quickstart-nodejs) et l'exécuter localement. Elle est déjà configurée pour fonctionner avec `https://localhost:3000/oauth-callback` comme l'URL de redirection configurée dans le code d'exemple du boilerplate à partir de la commande `hs project create` que vous avez exécutée à l'étape précédente.
* Modifiez la propriété `uid` de l'application dans le fichier `app-hsmeta.json` et les autres fichiers de configuration `*-hsmeta.json` de votre projet.
> [!WARNING]
>
> Les UID sont utilisés comme identifiant unique pour tous les composants et fonctionnalités de votre projet. Une fois qu'une fonctionnalité et un UID sont créés, la modification ou la modification de l'UID dans les déploiements ultérieurs obligera la plateforme à le reconnaître comme différent des fonctionnalités précédentes, ce qui n'est peut-être pas prévu.
* Lorsque vous utilisez des objets d'application pour votre application unifiée, seules les définitions de propriété « Nom » autorisées seront autorisées en fonction de votre demande d'objet. Dans le cadre de cette version bêta privée, vous devriez avoir reçu séparément confirmation du « nom » approuvé de votre application, qui doit être utilisé dans la configuration `*-object-hsmeta.json`. À titre de référence, le nom entièrement qualifié (FQN) de votre objet d'application sera `a_`. Par exemple, si votre `appId` est `16858319` et votre propriété `name` était `CARS`, alors votre FQN serait `a16858319_cars`.
* Après avoir enregistré vos modifications, exécutez la commande CLI `hs project upload` pour charger votre projet sur la plateforme de développement HubSpot et déclencher automatiquement une nouvelle build.
* Dans une fenêtre de navigateur, accédez à `https://app.hubspot.com/developer_projects/` pour accéder à l'interface utilisateur des projets et vérifiez que l'application et le projet ont été correctement créés, créés et déployés.
**5. Ajoutez l'ID client et le secret client de votre application à votre application**
* Après avoir téléchargé votre projet, vous devrez obtenir les détails d'authentification pour que votre application soit copiée dans votre configuration OAuth :
* Cliquez sur **Projets** dans le menu de navigation *Développement*.
* Cliquez sur le **nom** de votre nouveau projet.
* Cliquez sur le **UID** de votre application, puis sur l'onglet **Authentification**.
* Copiez *l'ID du client* et le *Secret client* de votre nouvelle application et collez-les aux emplacements correspondants dans la configuration de votre serveur OAuth local, puis redémarrez votre serveur OAuth.
**6. Configurer la configuration du schéma d'objet d'application**
Ensuite, vous allez configurer le schéma d'objet de votre application :
* Ajoutez un nouvel objet d'application en créant un répertoire dans le répertoire `/src/app` et nommez-le `app-objects`. Le chemin résultant vers le nouveau répertoire devrait être `/src/app/app-objects`.
* Créez un nouveau fichier de configuration pour représenter le schéma de votre objet, Vous devez utiliser le nom d'objet attribué à votre application pendant le processus d'aperçu comme préfixe pour le nom de fichier, suivi de `-object-hsmeta.json`. Par exemple, dans le modèle de projet de référence, le nom d'objet de l'application est « CAR », de sorte que le fichier de configuration résultant est nommé `car-object-hsmeta.json`.
* Consultez le fichier de référence de [définition du composant d'objet d'application](/docs/apps/developer-platform/add-features/app-objects/reference#app-schema) et personnalisez les champs en fonction des valeurs correspondantes pour votre objet d'application.
* Dans l'objet `config` de votre définition, le champ `name` doit correspondre au nom qui a été accordé à votre application lors du processus d'évaluation, formaté dans le format `UPPER_SNAKE_CASE`.
* Notez qu'une fois que les propriétés et les champs ont été ajoutés au schéma d'objet d'application et chargés dans votre projet à l'étape suivante, ils ne peuvent pas être supprimés.
> [!TIP]
>
> ### Remarque :
>
> Pour plus de commodité pendant les tests, le même nom d'objet d'application peut être utilisé sur plusieurs applications pour prendre en charge votre cycle de vie de développement. Commencez par cette application de preuve de concept, puis, à mesure que des migrations deviennent disponibles, vous pourrez utiliser les mêmes noms et définitions de schéma dans vos applications de développement, de préparation et de production. Les UID de chacune de ces instances devront être uniques.
* Lorsque vous avez terminé de modifier la définition du schéma d'objet de votre application et que vous êtes prêt à valider ces modifications, exécutez les commandes suivantes pour enregistrer vos modifications :
```shell theme={null}
hs project upload
hs project deploy
```
* Dans une fenêtre de navigateur, accédez à `https://app.hubspot.com/developer_projects/` pour accéder à l'interface utilisateur des projets et vérifiez que l'application et le projet ont été correctement créés, créés et déployés.
**7. Mettre à jour votre application**
Maintenant que le schéma d'objet de votre application a été chargé, vous devez mettre à jour les domaines définis dans votre fichier `app-hsmeta.json` pour refléter les domaines créés à partir de l'étape précédente. Ces domaines devraient être visibles dans les journaux de l'ILC après l'exécution de `hs project upload`.
* Modifiez le fichier `app-hsmeta.json` et ajoutez les nouveaux domaines au tableau de `requiredScopes` dans la définition `auth`. Par exemple, si votre `appId` était `a12345`, vous modifieriez la définition `auth` comme suit :
```json theme={null}
"auth": {
"type" : "oauth",
"redirectUrls": ["http://localhost:3000/oauth-callback"],
"requiredScopes": [
"crm.objects.contacts.read",
"crm.objects.contacts.write",
"crm.app.objects.a12345_my_app_object.view",
"crm.app.objects.a12345_my_app_object.create",
"crm.app.objects.a12345_my_app_object.edit",
"crm.app.schemas.a12345_my_app_object.read",
"crm.app.objects.a12345_my_app_object.merge",
"crm.app.objects.a12345_my_app_object.delete",
"crm.app.schemas.a12345_my_app_object.properties.write"
],
"optionalScopes": [],
"conditionallyRequiredScopes": []
},
```
> [!WARNING]
>
> ### Remarque :
>
>
>
> Les clients ne pourront voir votre objet d'application que si `schemas.read`
> le domaine est inclus dans les paramètres de votre application et est demandé pendant la
> flux OAuth d'installation/réautorisation. Il est fortement recommandé d'inclure
> tous les domaines d'objet d'application dans vos paramètres, mais `schemas.read` est obligatoire pour
> clients pour y accéder. Par exemple, pour un `appId` de `12345`,
> que vous incluriez `crm.app.schemas.a12345_MY_APP_OBJECT.read` comme domaine
> obligatoire.
>
>
>
> En fonction de l'application testée (prototype, développement, préparation,
> production), vous devrez faire attention à l'endroit où vous ajoutez votre champ d'application
> définitions. Bien que le déploiement d'une application de production ne soit pas encore pris en charge pendant
> cette phase de la version bêta privée, il est généralement plus sûr d'inclure
> domaines lorsque `conditionallyRequiredScopes` vous êtes prêt pour la production.
> Découvrez-en davantage sur ces types de domaines dans [l'application publique
> documentation](/docs/apps/legacy-apps/public-apps/overview#scope-types)
>
>
* Lorsque vous avez terminé d'ajouter ces domaines et que vous avez enregistré vos modifications, exécutez les commandes suivantes pour valider vos modifications dans la plateforme :
```shell theme={null}
hs project upload
hs project deploy
```
Une fois le déploiement terminé, votre application et l'objet application correspondant sont maintenant prêts à être testés avec un compte installé.
**8. Créez un compte de test de développeur (facultatif) et installez votre application**
Si vous n'avez pas encore de [compte test](/docs/getting-started/account-types#developer-test-accounts), vous pouvez en créer un dans HubSpot :
* Accédez à **Comptes de test** dans le menu de navigation *Développement*, puis cliquez sur **Créer un compte de test de développeur**. Suivez les instructions pour créer votre nouveau compte de test.
* Dans le menu latéral de gauche, accédez à **Projets**, cliquez sur le **nom** de votre nouveau projet, puis sur **UID** de votre application dans la liste des composants.
* Dans l'onglet *Authentification*, copiez le lien d'installation de votre application.
* Utilisez ce lien pour installer l'application dans votre compte de test de développeur.
* Ouvrez le compte test et accédez à la page *Applications connectées*, où vous devriez voir la liste de votre application installée.
* Dans votre compte de test, accédez à **CRM** > **Contacts**, puis cliquez sur le menu déroulant Objet CRM et confirmez que votre objet d'application est disponible.
* Vous pouvez ensuite confirmer que votre définition de schéma est conforme à votre fichier de configuration en créant une nouvelle fiche d'informations de votre objet d'application.

**9. Accès aux données par programmation à l'aide de l'API d'objets HubSpot**
Maintenant que vous avez créé votre objet d'application et que vous l'avez testé dans un compte de test de développeur, vous pouvez utiliser le jeton d'accès OAuth associé au compte de test installé pour effectuer des demandes de mise à jour des données du compte directement via l'API d'objets.
Lisez [l'API des objets](/docs/guides/crm/using-object-apis) pour plus d'informations sur l'API, mais toutes les demandes spécifiques à votre objet d'application suivront les mêmes conventions que les autres objets standard dans HubSpot. Vous devrez utiliser `objectTypeId` ou `fullyQualifiedName` de l'objet de votre application comme paramètre de chemin d'accès `objectType` dans votre demande.
Par exemple, le bloc de code suivant montre comment effectuer une demande cURL pour créer une nouvelle fiche d'informations de votre objet d'application :
```shell theme={null}
curl --request POST \
--url https://api.hubapi.com/crm/v3/objects/ \
--header 'authorization: Bearer YOUR_ACCESS_TOKEN' \
--header 'content-type: application/json' \
--data '{
"properties": {
"additionalProp1": "string",
"additionalProp2": "string",
"additionalProp3": "string"
}
}'
```
Vous pouvez trouver le `objectTypeId` pour votre objet d'application en accédant à la page index des fiches d'informations :
* Accédez à **CRM** > **Contacts** dans le compte de test de développeur sur lequel vous avez installé votre application.
* Cliquez sur le **menu déroulant** en haut de la page et sélectionnez **l'objet de votre application**.
* `objectTypeId` apparaîtra dans l'URL située entre les parties `/objects//views`.
## Étapes suivantes
Consultez la [documentation de référence](/docs/apps/developer-platform/add-features/app-objects/reference) pour connaître les prochaines étapes à suivre afin d'utiliser les objets d'application avec différentes fonctionnalités de plateforme de développement :
* [Configurer une carte d'application](/docs/apps/developer-platform/add-features/app-objects/reference#app-card-schema)
* [Configurer les abonnements au webhook](/docs/apps/developer-platform/add-features/app-objects/reference#webhooks-component-definition)
* [Activer les associations avec d'autres types d'objets du CRM](/docs/apps/developer-platform/add-features/app-objects/reference#app-object-associations)
# Référence des objets d'application (BÊTA)
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/app-objects/reference
Informations de référence pour la création d'objets d'application, y compris les options de configuration pour les applications, les objets d'application, etc.
> [!NOTE]
>
> L'utilisation de cette fonctionnalité nécessite une autorisation de HubSpot. Si vous souhaitez demander l'accès aux objets d'application ou si vous souhaitez en savoir plus sur les fonctionnalités, veuillez soumettre [ce formulaire](/docs/apps/developer-platform/add-features/app-objects/overview).
Découvrez ci-dessous des informations de référence pour les fonctionnalités d'application de la plateforme de développement avec des objets d'application, y compris des définitions de fichier de configuration, des détails de domaines, etc.
## Structure du projet
* Tous les composants du projet doivent se trouver dans le répertoire indiqué `src` dans le fichier de configuration `hsproject.json`.
* Toutes les fonctionnalités et tous les composants de l'application doivent se trouver dans le répertoire `app/`.
* Les associations d'objets d'application sont définies dans le répertoire `app-object-associations/`.
* Les abonnements Webhook sont définis dans le répertoire `webhooks/`.
* Les actions de workflow personnalisées sont définies dans le répertoire `workflow-actions/`.
* Toutes les caractéristiques des cartes doivent se trouver dans le répertoire `cards/`.
* Toutes les instances de composants et de fonctionnalités sont déclarées à l'aide de fichiers `*-hsmeta.json`. Vous devez faire précéder le nom du fichier d'un élément significatif (par exemple, `my-app-hsmeta.json`). Ces fichiers doivent se trouver à la racine de leur dossier respectif (par exemple, `app/my-app-hsmeta.json`, `cards/my-card-hsmeta.json`).
L'exemple de structure de répertoire ci-dessous décrit toutes les fonctionnalités disponibles.
```shell theme={null}
my-folder/
├── hsproject.json
├──src
│ ├── app/
│ │ └── app-hsmeta.json/
│ │ └── app-objects/
│ │ └── my-app-object-hsmeta.json
│ │ └── app-object-associations/
│ │ └── my-app-object-association-hsmeta.json
│ │ └── webhooks/
│ │ └── webhooks-hsmeta.json
│ │ └── cards/
│ │ └── my-app-card-hsmeta.json
│ │ └── MyCard.jsx
└──
```
> **[Afficher un exemple sur GitHub](https://github.com/robrown-hubspot/hubspot-project-components-ua-app-objects-beta/tree/main/projects/app-object-getting-started-template)**
## Objets de l'application
Pour créer un objet d'application, incluez un répertoire de composants `app-objects` dans le projet, ainsi qu'un fichier de configuration.
```shell theme={null}
...
├──src
│ ├── app/
│ │ └── app-hsmeta.json
│ │ └── ...
│ │ └── app-objects/
│ │ └── my-app-object-hsmeta.json
└──
```
Voici les options de configuration disponibles pour `*-object-hsmeta.json`.
```json theme={null}
{
"uid": "car-app-object",
"type": "app-object",
"config": {
"name": "CAR",
"appPrefix": "Vroom",
"description": "An automobile in our warehouse.",
"singularForm": "Car",
"pluralForm": "Cars",
"primaryDisplayLabelPropertyName": "model",
"secondaryDisplayLabelPropertyNames": ["make"],
"settings": {
"hasRecordPage": true,
"allowsUserCreatedRecords": true,
"hasEngagements": true
},
"properties": [
{
"type": "string",
"fieldType": "text",
"name": "model",
"label": "Model",
"description": "The model of the car"
},
{
"type": "enumeration",
"fieldType": "select",
"name": "make",
"label": "Make",
"description": "The manufacturer of the car.",
"options": [
{
"label": "Ford",
"value": "ford",
"displayOrder": 0
},
{
"label": "Toyota",
"value": "toyota",
"displayOrder": 1
},
{
"label": "Chevrolet",
"value": "chevrolet",
"displayOrder": 2
}
]
}
]
}
}
```
> **[Afficher un exemple sur GitHub](https://github.com/robrown-hubspot/hubspot-project-components-ua-app-objects-beta/blob/main/projects/app-object-getting-started-template/src/app/app-objects/car-object-hsmeta.json)**
Les champs marqués par \* sont requis.
| Champ | Type | Description |
| - | - | - |
| `uid`\* | Chaîne | un identifiant unique pour l'objet application. Doit être globalement unique au sein du projet. |
| `type`\* | Chaîne | le type de composant. Doit correspondre au nom du dossier parent (`app-object`). |
| `name`\* | Chaîne | le nom de l'objet de votre application. Utilisez le nom approuvé que vous avez reçu dans la confirmation de votre application approuvée. Doit être en majuscule snake case (`MY_OBJECT_NAME`). |
| `appPrefix` | Chaîne | une chaîne qui précède le nom singulier ou pluriel de l'objet dans l'interface utilisateur de HubSpot pour aider à le différencier des autres objets. Dans cet exemple, les éléments `appPrefix` de `Vroom` et `singularForm` de `Car` entraînent l'affichage de « Voiture Vroom » dans l'interface utilisateur. |
| `description`\* | Chaîne | la description de l'objet, qui s'affichera dans HubSpot. |
| `singularForm`\* | Chaîne | la forme singulière du nom d'objet. |
| `pluralForm`\* | Chaîne | la forme plurielle du nom d'objet. |
| `properties`\* | Tableau | une liste des propriétés CRM définies pour l'objet. Les propriétés sont définies en utilisant les mêmes champs que [l'API des propriétés](/docs/api-reference/crm-properties-v3/guide). Les propriétés résultantes auront automatiquement `a_` ajouté à elles (par exemple, `a12345_make`) lors de la création. Vous ne devez pas inclure le préfixe dans le fichier de configuration. |
| `primaryDisplayLabelPropertyName`\* | Chaîne | le nom de la propriété qui doit être utilisée comme [propriété d'affichage principale](https://knowledge.hubspot.com/object-settings/create-custom-objects#:~:text=object%27s%20singular%20name.-,Primary%20display%20property,-%3A%20the%20property%20used). La valeur doit correspondre au nom fourni dans la liste `properties` (autrement dit, elle ne doit pas inclure le préfixe généré `a_`). |
| `secondaryDisplayLabelPropertyNames`\* | Tableau | la liste des propriétés qui doivent être utilisées comme [propriétés d'affichage secondaires](https://knowledge.hubspot.com/object-settings/create-custom-objects#:~:text=Secondary%20properties%3A). La valeur doit correspondre au nom fourni dans la liste `properties` (autrement dit, elle ne doit pas inclure le préfixe généré `a_`). |
| `settings`\* | Objet | un objet contenant des paramètres d'objet. |
| `hasRecordPage`\* | Booléen | indique si des pages de fiches d'informations existent pour les instances de cet objet d'application. Si défini sur `false`, la page d'index existera toujours, mais elle ne comprendra pas de liens vers des pages de fiches d'informations individuelles. |
| `allowsUserCreatedRecords`\* | Booléen | si les utilisateurs finaux pourront créer des fiches d'informations à l'aide de l'objet. Lorsque la valeur est définie sur `false`, les utilisateurs ne pourront pas créer de fiches d'informations dans HubSpot |
| `hasEngagements`\* | Booléen | si les fiches d'informations d'objet d'application prennent en charge des activités/engagements. Lorsque définie sur `false`, les pages de fiches d'informations d'objet d'application n'incluront aucune fonctionnalité d'engagement, comme l'onglet d'activité ou les filtres de chronologie liés à l'activité. |
> [!NOTE]
>
> Le nom entièrement qualifié (FQN) pour votre objet d'application sera `a_`. Par exemple : si votre `appId` est `16858319` et que le nom d'objet de l'application est `CARS`, alors le FQN serait `a16858319_CARS`. Vous utiliserez le FQN lors de la définition des valeurs de domaine pour les vos objets d'application.
## Schéma de l'application
Pour créer un objet d'application, incluez un fichier de configuration `app-hsmeta.json` dans le répertoire `app`.
```shell theme={null}
...
├──src
│ ├── app/
│ │ └── app-hsmeta.json/
└──
```
Voici les options de configuration disponibles pour `app-hsmeta.json`.
> **Résumé des modifications**
>
> Prenez note des modifications suivantes pour les fichiers de configuration des cartes d'application :
>
> * Ajout des champs de premier niveau `uid`, `type` et `config`.
> * Champ `extensions` supprimé.
> * Champ `distribution` ajouté.
```json theme={null}
{
"uid": "app_object_poc_app",
"type": "app",
"config": {
"description": "An example to demonstrate how to build an app with an app object on developer projects.",
"name": "my first app object app",
"distribution": "marketplace",
"auth": {
"type": "oauth",
"redirectUrls": ["http://localhost:3000/oauth-callback"],
"requiredScopes": ["crm.objects.contacts.read", "crm.objects.contacts.write"],
"optionalScopes": [],
"conditionallyRequiredScopes": []
},
"permittedUrls": {
"fetch": ["https://api.hubapi.com"],
"iframe": [],
"img": []
},
"support": {
"supportEmail": "support@example.com",
"documentationUrl": "https://example.com/docs",
"supportUrl": "https://example.com/support",
"supportPhone": "+18005555555"
}
}
}
```
> **[Afficher un exemple sur GitHub](https://github.com/robrown-hubspot/hubspot-project-components-ua-app-objects-beta/blob/main/projects/app-object-getting-started-template/src/app/app-hsmeta.json)**
### Schéma d'application \*champs -hsmeta.json
Les champs marqués par \* sont requis
| Champ | Type | Description |
| - | - | - |
| `uid`\* | Chaîne | un identifiant unique interne pour l'application. Doit être globalement unique au sein du projet. Peut être n'importe quelle chaîne jusqu'à 64 caractères. Les caractères peuvent être en majuscules ou en minuscules, et peuvent inclure des chiffres, des tirets bas (`_`), des tirets (`-`) et des points (`.`). |
| `type`\* | Chaîne | le type de composant. Doit correspondre au nom du dossier parent (`app`). |
| `description`\* | Chaîne | une description de ce que l'application fait pour l'utilisateur qui l'installe. Peut être n'importe quelle chaîne jusqu'à 8 192 caractères. |
| `name`\* | Chaîne | le nom de l'application, qui s'affichera dans HubSpot. Peut être n'importe quelle chaîne jusqu'à 200 caractères. Ne doit pas commencer ou se terminer par un espace. |
| `distribution`\* | Chaîne | la méthode de distribution de l'application. Doit être défini sur `marketplace` pour que l'application soit éligible au listing du marketplace des applications. |
| `auth`\* | Objet | un objet contenant les détails de la méthode d'authentification de l'application. Voir le [tableau des authentifications](#auth-fields) pour plus de détails. |
| `permittedUrls` | Objet | un tableau contenant les URL que l'application est autorisée à appeler. Les URL doivent utiliser le schéma HTTPS et contenir une [autorité](https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Web_mechanics/What_is_a_URL#authority), suivie d'un préfixe de chemin facultatif si nécessaire. |
| `supportEmail` | Chaîne | une adresse e-mail valide que les utilisateurs peuvent contacter pour obtenir de l'aide. |
| `documentationUrl` | Chaîne | l'URL externe vers laquelle les utilisateurs peuvent accéder pour obtenir de la documentation utile. Doit utiliser HTTPS. |
| `supportUrl` | Chaîne | l'URL externe vers laquelle les utilisateurs peuvent accéder pour obtenir une assistance supplémentaire. Doit utiliser HTTPS. |
| `supportPhone` | Chaîne | le numéro de téléphone que les utilisateurs peuvent contacter pour obtenir de l'aide. Doit commencer par un signe plus (`+`). |
### champs d'authentification
Les champs marqués par \* sont requis.
| Champ | Type | Description |
| - | - | - |
| `type`\* | Chaîne | le type d'authentification. Doit être défini sur `oauth` pour que l'application utilise l'authentification OAuth. |
| `redirectUrls`\* | Tableau | une liste des URL vers lesquelles le processus OAuth est autorisé à rediriger. Chaque application doit avoir au moins une URL de redirection d'authentification et doit utiliser HTTPS. La seule exception est `http://localhost`, qui est autorisée pour les tests. |
| `requiredScopes`\* | Tableau | une liste des domaines requis de votre application. Chaque application doit inclure au moins un domaine et l'utilisateur qui a procédé à l'installation doit accorder ces domaines pour installer l'application avec succès. [Découvrez-en davantage sur les domaines ci-dessous](#scopes). |
| `optionalScopes` | Tableau | une liste des domaines facultatifs de votre application. Ces domaines peuvent être exclus de l'autorisation lors de l'installation si le compte ou l'utilisateur qui installe l'application ne dispose pas des autorisations appropriées. Dans ce cas, le domaine ne sera pas inclus dans le jeton d'actualisation ou le jeton d'accès qui en résulte. [Découvrez-en davantage sur les domaines ci-dessous](#scopes). |
| `conditionallyRequiredScopes` | Tableau | une liste des domaines requis uniquement lorsqu'ils sont inclus dans le paramètre de requête `scope` de l'URL d'installation. [Découvrez-en davantage sur les domaines ci-dessous](#scopes). |
### Domaines
Dans le champ `auth` d'un fichier de configuration d'application, vous pouvez indiquer trois [types de domaines](/docs/apps/legacy-apps/public-apps/overview#scope-types) : les domaines requis, les domaines conditionnellement requis et les domaines facultatifs. À ce stade de la version bêta, vous devez inclure uniquement les domaines d'objet de votre application en tant que `conditionallyRequiredScopes`. Cela vous permettra de réserver vos nouvelles fonctionnalités à des clients spécifiques en incluant les domaines d'objet d'application dans l'URL d'installation.
Les domaines d'objet d'application utilisent le format suivant :
`crm.app.schemas..read`
Par exemple, pour un objet application avec le FQN `a16858319_cars`, le domaine d'application `read` serait :
`crm.app.schemas.a16858319_cars.read`.
Au minimum, votre application doit inclure le domaine ci-dessus `read` pour permettre aux clients d'accéder à l'objet. Il est recommandé d'inclure tous les domaines d'application dans votre application, comme indiqué ci-dessous.
```json theme={null}
"auth": {
"type" : "oauth",
"redirectUrls": ["http://localhost:3000/oauth-callback"],
"requiredScopes": [
"crm.objects.contacts.read",
"crm.objects.contacts.write",
"crm.app.objects.a12345_MY_APP_OBJECT.view",
"crm.app.objects.a12345_MY_APP_OBJECT.create",
"crm.app.objects.a12345_MY_APP_OBJECT.edit",
"crm.app.schemas.a12345_MY_APP_OBJECT.read",
"crm.app.objects.a12345_MY_APP_OBJECT.merge",
"crm.app.objects.a12345_MY_APP_OBJECT.delete",
"crm.app.schemas.a12345_MY_APP_OBJECT.properties.write"
],
"optionalScopes": [],
"conditionallyRequiredScopes": []
},
```
Pour obtenir une liste complète des domaines disponibles, consultez la [référence des domaines](/docs/apps/legacy-apps/authentication/scopes).
## Définition du composant Webhook
Pour définir un ensemble d'abonnements au webhook pour votre application, incluez un répertoire `webhooks` dans le projet ainsi qu'un fichier de configuration `*-hsmeta.json`.
```shell theme={null}
├──src
│ ├── app/
│ │ └── app-hsmeta.json
│ │ └── ...
│ │ └── webhooks/
│ │ └── webhooks-hsmeta.json
└──
```
Vous trouverez ci-dessous les options de configuration disponibles pour le fichier `*-hsmeta.json`.
```json theme={null}
{
"uid": "webhooks",
"type": "webhooks",
"config": {
"settings": {
"targetUrl": "https://example.com/webhook",
"maxConcurrentRequests": 10
},
"subscriptions": {
"crmObjects": [
{
"subscriptionType": "object.creation",
"objectType": "contact",
"active": true
},
{
"subscriptionType": "object.propertyChange",
"objectType": "car_app_object",
"propertyName": "carProperty",
"active": true
}
],
"legacyCrmObjects": [
{
"subscriptionType": "contact.propertyChange",
"propertyName": "lastname",
"active": true
},
{
"subscriptionType": "contact.deletion",
"active": true
}
],
"hubEvents": [
{
"subscriptionType": "contact.privacyDeletion",
"active": true
}
]
}
}
}
```
### Webhook \*champs -hsmeta.json
Les champs marqués par \* sont requis.
| Champ | Type | Description |
| - | - | - |
| `uid`\* | Chaîne | un identifiant unique interne pour le composant du webhook. |
| `type`\* | Chaîne | le type de composant, qui devrait être `webhooks` dans ce cas. |
| `settings`\* | Objet | un objet qui spécifie deux champs : `targetUrl`, qui est l'URL publique que HubSpot peut appeler l'endroit où les charges utiles de l'événement seront livrées, et `maxConcurrentRequests`, qui est le seuil supérieur des demandes HTTP que HubSpot effectuera dans une période donnée. |
| `subscriptions`\* | Objet | un objet qui spécifie les types d'abonnements auxquels votre application s'abonnera. |
| `crmObjects` | Tableau | un tableau contenant des définitions d'abonnement aux événements. Il s'agit du tableau standard à inclure, qui doit être utilisé pour tous les événements dans le nouveau format (`object.*`). Les types d'abonnement de webhook classiques doivent plutôt être inclus dans les tableaux `legacyCrmObjects` et `hubEvents`, en fonction de l'événement. |
| `legacyCrmObjects` | Tableau | un tableau contenant les types d'abonnements classiques, tels que `contact.creation` et `deal.deletion`. |
| `hubEvents` | Tableau | un tableau contenant les types `contact.privacyDeletion` d'abonnements classiques et `conversation.*` |
Pour chaque objet `subscription`, les champs suivants peuvent être indiqués, en fonction du type de définition d'abonnement auquel vous êtes abonné (c'est-à-dire `crmObjects`, `legacyCrmObjects` ou `hubEvents`) ou selon que vous êtes abonné à une modification de propriété spécifique (par exemple, `contact.propertyChange`).
| Champ | Type | Description |
| - | - | - |
| `subscriptionType` | Chaîne | le type d'événement auquel l'abonné est abonné. |
| `objectType` | Chaîne | pour les abonnements indiqués dans le tableau `crmObjects`, cela indique l'objet CRM auquel votre application est abonnée. Pour vous abonner aux modifications apportées à un objet d'application, incluez le nom de votre objet d'application pour ce champ (par exemple, `car_app_object`). |
| `propertyName` | Chaîne | pour les abonnements de modification de propriété, cela indique la propriété qui déclenchera l'événement webhook. |
| `active` | Booléen | si des événements webhook seront déclenchés pour cet abonnement. |
## Schéma de carte d'application
Pour créer une carte d'application qui apparaît sur une page de fiches d'informations d'un objet d'application, incluez un répertoire de composant `cards` dans le projet, ainsi qu'un fichier de configuration.
```shell theme={null}
├──src
│ ├── app/
│ │ └── app-hsmeta.json
│ │ └── ...
│ │ └── cards/
│ │ └── my-app-card-hsmeta.json
│ │ └── MyCard.jsx
└──
```
* Vérifiez que vous avez exécuté `hs project upload` après avoir créé votre composant d'objet d'application et les fichiers de configuration associés.
* Dans votre fichier `my-app-card-hsmeta.json`, ajoutez l'UID de votre objet d'application au tableau `objectTypes` (par exemple, `"app_object_uid"` dans cet exemple). Chacun des champs disponibles dans le fichier `.json` est détaillé dans le [tableau](#app-card-*-hsmeta.json-fields) ci-dessous.
> **Résumé des modifications**
>
> Prenez note des modifications suivantes pour les fichiers de configuration des cartes d'application :
>
> * Ajout des champs de premier niveau `uid`, `type` et `config`.
> * Le champ `module` a été renommé `entrypoint`.
> * Le champ `title` a été renommé `name`.
> * Le champ `objectTypes` a été simplifié pour accepter un tableau de chaînes.
```json theme={null}
{
"uid": "my-app-card",
"type": "card",
"config": {
"name": "My app card",
"description": "An example description of the card, which lives on contact records.",
"previewImage": {
"file": "./preview.png",
"altText": "A short description of the preview image"
},
"entrypoint": "/app/cards/MyCard.jsx",
"location": "crm.record.tab",
"objectTypes": ["contacts", "app_object_uid"]
}
}
```
* Après avoir enregistré les modifications apportées à votre fichier `example-card-hsmeta.json`, exécutez `hs project upload`.
Les cartes sont ajoutées automatiquement à la vue par défaut pour les objets d'application. Si la carte ne s'affiche pas automatiquement, découvrez comment [ajouter des cartes aux fiches d'informations CRM](/docs/apps/developer-platform/add-features/ui-extensibility/app-cards/create-an-app-card#view-the-card-in-hubspot).
> **[Afficher un exemple sur GitHub](https://github.com/robrown-hubspot/hubspot-project-components-ua-app-objects-beta/blob/main/projects/app-object-getting-started-template/src/app/app-hsmeta.json)**
### App card \*champs -hsmeta.json
Les champs marqués par \* sont requis.
| Champ | Type | Description |
| - | - | - |
| `uid`\* | Chaîne | l'identifiant unique de la carte. Il peut s'agir de n'importe quelle chaîne, mais doit identifier la carte de manière significative. HubSpot identifiera la carte par cet ID afin que vous puissiez modifier le titre de la carte sans supprimer les données historiques ou d'état, telles que la position sur la fiche d'informations CRM. |
| `type` | Chaîne | le type de composant, qui devrait être `card` dans ce cas. |
| `config` | Objet | un objet contenant des détails de configuration. |
| `name`\* | Chaîne | le titre de la carte, tel qu'il apparaît dans l'interface utilisateur de HubSpot. |
| `description` | Chaîne | une description de la carte. |
| `previewImage` | Objet | un objet contenant les champs `file` et `altText`. Le champ `file` est le chemin relatif vers l'image d'aperçu. Les extensions de fichier valides sont png, jpeg, jpg ou gif. La taille maximale du fichier est de 5.0 Mo. Le champ `altText` est une courte description de l'image. |
| `entrypoint`\* | Chaîne | le chemin du fichier du code React front-end de la carte. |
| `location`\* | `crm.record.tab` \| `crm.record.sidebar` \| `helpdesk.sidebar` | Emplacement de la carte dans l'interface utilisateur de HubSpot En savoir plus sur [l'emplacement de l'extension](/docs/apps/developer-platform/add-features/ui-extensibility/app-cards/reference#extension-location). |
| `objectTypes`\* | Tableau | les types de fiches d'informations CRM sur lesquels la carte apparaîtra. |
## Associations d'objets d'application
Pour activer les associations entre votre objet application et d'autres objets CRM, incluez un répertoire de composants `app-object-associations` dans le projet, ainsi qu'un fichier de configuration.
```shell theme={null}
├── src
│ ├── app/
│ │ └── app-hsmeta.json
│ │ └── ...
│ │ └── app-object-associations/
│ │ └── my-app-object-association-hsmeta.json
└──
```
Voici les options de configuration d'objet d'application disponibles (`*-association-hsmeta.json`).
```json theme={null}
{
"uid": "car_to_contact_association",
"type": "app-object-association",
"config": {
"firstObjectType": "car-app-object",
"secondObjectType": "CONTACT"
}
}
```
### Association \*champs -association-hsmeta.json
Les champs marqués par \* sont requis.
| Champ | Type | Description |
| - | - | - |
| `uid`\* | Chaîne | un identifiant unique interne pour l'application. Doit être globalement unique au sein du projet. |
| `type`\* | Chaîne | le type de composant. Doit correspondre au nom du dossier parent (`app-object-association`). |
| `config`\* | Objet | un objet contenant la configuration de l'association d'objets. |
| `firstObjectType`\* | Chaîne | le premier objet de l'association. Il peut s'agir d'un objet d'application ou d'un objet CRM HubSpot. Les objets d'application sont désignés par leur `uid` indiqué dans leur fichier source. Les objets standards sont désignés par leur `fullyQualifiedName`. L'association résultante sera bidirectionnelle, de sorte que l'ordre de ces valeurs de champ est arbitraire. |
| `secondObjectType`\* | Chaîne | le deuxième objet de l'association. Voir `firstObjectType` pour plus de détails. |
# Configurer un abonnement au webhook (BÊTA)
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/configure-webhooks
Découvrez comment définir un abonnement webhook sur la dernière version de la plateforme de développement (BÊTA).
Pour définir un ensemble d'abonnements webhook pour une application sur la nouvelle plateforme de développement, incluez un répertoire `webhooks` dans le projet ainsi qu'un fichier de configuration `*-hsmeta.json`.
## Structure du répertoire
```shell theme={null}
├──src
│ ├── app/
│ │ └── app-hsmeta.json
│ │ └── ...
│ │ └── webhooks/
│ │ └── webhooks-hsmeta.json
└──
```
## Configuration du Webhook
Vous trouverez ci-dessous les options de configuration disponibles pour le fichier `*-hsmeta.json`.
```json theme={null}
{
"uid": "webhooks",
"type": "webhooks",
"config": {
"settings": {
"targetUrl": "https://example.com/webhook",
"maxConcurrentRequests": 10
},
"subscriptions": {
"crmObjects": [
{
"subscriptionType": "object.creation",
"objectType": "contact",
"active": true
}
],
"legacyCrmObjects": [
{
"subscriptionType": "contact.propertyChange",
"propertyName": "lastname",
"active": true
},
{
"subscriptionType": "contact.deletion",
"active": true
}
],
"hubEvents": [
{
"subscriptionType": "contact.privacyDeletion",
"active": true
}
]
}
}
}
```
Les champs marqués par sont \* obligatoires.
| Champ | Type | Description |
| - | - | - |
| `uid`\* | Chaîne | un identifiant unique interne pour le composant du webhook. |
| `type`\* | Chaîne | le type de composant, qui devrait être `webhooks` dans ce cas. |
| `settings`\* | Objet | un objet qui spécifie deux champs : `targetUrl`, qui est l'URL publique que HubSpot peut appeler l'endroit où les charges utiles de l'événement seront livrées, et `maxConcurrentRequests`, qui est le seuil supérieur des demandes HTTP que HubSpot effectuera dans une période donnée. |
| `subscriptions`\* | Objet | un objet qui spécifie les types d'abonnements auxquels votre application s'abonnera. |
| `crmObjects` | Tableau | un tableau contenant des définitions d'abonnement aux événements. Il s'agit du tableau standard à inclure, qui doit être utilisé pour tous les événements dans le [nouveau format](/docs/apps/legacy-apps/public-apps/create-generic-webhook-subscriptions) (`object.*`). [Les types d'abonnement de webhook classiques](/docs/api-reference/webhooks-webhooks-v3/guide#webhook-subscriptions) doivent plutôt être inclus dans les tableaux `legacyCrmObjects` et `hubEvents`, en fonction de l'événement. |
| `legacyCrmObjects` | Tableau | un tableau contenant les [types d'abonnements classiques](/docs/api-reference/webhooks-webhooks-v3/guide#webhook-subscriptions), tels que `contact.creation` et `deal.deletion`. |
| `hubEvents` | Tableau | un tableau contenant les types `contact.privacyDeletion` d'abonnements classiques et `conversation.*` |
Pour chaque objet `subscription`, les champs suivants peuvent être spécifiés, en fonction du type de définition d'abonnement auquel vous êtes abonné (c'est-à-dire `crmObjects`, `legacyCrmObjects` ou `hubEvents`) ou selon que vous êtes abonné à une modification de propriété spécifique (par exemple, `contact.propertyChange`).
| Champ | Type | Description |
| - | - | - |
| `subscriptionType` | Chaîne | le type d'événement auquel l'abonné est abonné. |
| `objectType` | Chaîne | pour les abonnements spécifiés dans le tableau `crmObjects`, cela spécifie l'objet CRM auquel votre application est abonnée. |
| `propertyName` | Chaîne | pour les abonnements de modification de propriété, cela spécifie la propriété qui déclenchera l'événement webhook. |
| `active` | Booléen | si des événements webhook seront déclenchés pour cet abonnement. |
# Définir une action de workflow personnalisée (BÊTA)
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/custom-workflow-actions
Découvrez comment définir une action de workflow personnalisée sur la dernière version de la plateforme de développement (BÊTA).
Pour définir une [action de workflow personnalisée](/docs/api-reference/automation-actions-v4-v4/guide) pour une application sur la nouvelle plateforme de développement, incluez un répertoire `workflow-actions` dans le projet ainsi qu'un fichier de configuration `*-hsmeta.json`.
## Structure du répertoire du projet
```shell theme={null}
├──src
│ ├── app/
│ │ └── app-hsmeta.json
│ │ └── ...
│ │ └── workflow-actions/
│ │ └── custom-action-hsmeta.json
└──
```
## Définition d'actions de workflow personnalisées
Vous trouverez ci-dessous les options de configuration disponibles pour le fichier `*-hsmeta.json`.
```json theme={null}
{
"uid": "simple_notification_action",
"type": "workflow-action",
"config": {
"actionUrl": "https://example.com",
"isPublished": false,
"supportedClients": [
{
"client": "WORKFLOWS"
}
],
"inputFields": [
{
"typeDefinition": {
"name": "message",
"type": "string",
"fieldType": "textarea"
},
"supportedValueTypes": ["STATIC_VALUE"],
"isRequired": true
},
{
"typeDefinition": {
"name": "priority",
"type": "enumeration",
"fieldType": "select",
"options": [
{
"value": "high",
"label": "High Priority"
},
{
"value": "normal",
"label": "Normal Priority"
},
{
"value": "low",
"label": "Low Priority"
}
]
},
"supportedValueTypes": ["STATIC_VALUE"],
"isRequired": true
}
],
"labels": {
"en": {
"actionName": "My Custom Action (via Projects V2)",
"actionDescription": "Sends a notification with custom message and priority level",
"actionCardContent": "Send {{priority}} priority notification",
"inputFieldLabels": {
"message": "Notification Message",
"priority": "Priority Level"
},
"inputFieldDescriptions": {
"message": "Enter the message to be sent in the notification",
"priority": "Select the priority level for this notification"
}
}
},
"objectTypes": ["CONTACT"]
}
}
```
Les champs marqués par sont \* obligatoires.
| Champ | Type | Description |
| - | - | - |
| `uid`\* | Chaîne | un identifiant unique interne pour l'action de workflow. |
| `type`\* | Chaîne | le type de composant, qui devrait être `workflow-action` dans ce cas. |
| `actionUrl`\* | Chaîne | l'URL de webhook de l'API pour remettre une demande d'exécution de workflow. |
| `isPublished` | Booléen | détermine si la définition est visible dans les comptes qui ont installé votre application. Par défaut, cette valeur est définie sur `false`. |
| `supportedClients`\* | Tableau d'objets | indique les clients pris en charge par l'action de workflow personnalisée. Chaque objet du tableau doit avoir une clé client avec une valeur de chaîne indiquant le type de client (par exemple, `WORKFLOWS`). |
| `inputFields` | Tableau | les valeurs pour les saisies que l'utilisateur a renseignées. |
| `typeDefinition.name` | Chaîne | le nom ou la clé du champ de saisie. |
| `typeDefinition.type` | Chaîne | le type de valeur que le champ de saisie doit attendre. |
| `typeDefinition.fieldType` | Chaîne | le type de champ qui apparaît aux utilisateurs qui créent le workflow. |
| `typeDefinition.options` | Tableau | pour les types d'énumération, ce champ fournit une liste d'options. Chaque option doit comporter une `value`, en fonction de l'entrée fournie par l'utilisateur, et un `label`, qui identifie l'option dans l'outil workflows. |
| `inputFieldDependencies` | Tableau | une liste de règles qui définissent les relations entre deux entrées ou plus, en fonction de leur `dependencyType`. Découvrez-en davantage dans l'exemple [ici](/docs/api-reference/automation-actions-v4-v4/guide#example-%233). |
| `labels.`\* | Chaîne | clé de paramètres régionaux qui correspond à la définition des paramètres régionaux. Un libellé anglais (`en`) et sa définition doivent être définis au minimum. |
| `labels..inputFieldDescriptions` | Objet | un objet qui définit les détails des entrées de votre action. Dans l'exemple ci-dessus, cet objet comprend les champs `message` et `priority`. |
| `labels..inputFieldOptionLabels` | Objet | un objet requis si votre ou vos champs de saisie disposent d'options. Fournit une carte des libellés d'options de champs de saisie, saisis par la valeur ou le libellé de l'option. |
| `labels..outputFieldLabels` | Objet | un objet qui mappe les définitions de `outputFields` vers les libellés correspondants qui apparaissent dans l'outil workflows. |
| `labels..actionName`\* | Chaîne | le nom de l'action tel qu'il apparaît dans le panneau *Sélectionner une action* de l'éditeur de workflows. |
| `labels..appDisplayName`\* | Chaîne | le nom de la section du panneau *Sélectionner une action* où toutes les actions de l'application apparaissent. Si `appDisplayName` est défini pour plusieurs actions, la première trouvée sera utilisée. |
| `labels..actionCardContent` | Chaîne | une description récapitulative affichée dans la carte de l'action. |
| `labels..executionRules` | Objet | un objet qui regroupe les définitions de votre `executionRules` vers les messages qui apparaîtront pour les résultats d'exécution dans l'historique du workflow. |
| `objectTypes` | Tableau | les types d'objets CRM disponibles avec lesquels cette action peut être utilisée. Si vide, l'action sera disponible pour tous les types d'objets. |
| `outputFields` | Tableau | les valeurs résultantes de l'action qui peuvent être utilisées par des actions suivantes dans le workflow. Une action personnalisée peut avoir 0, 1 ou plusieurs résultats. |
| `executionRules` | Objet | une liste des définitions que vous pouvez indiquer pour identifier les erreurs de votre service vers l'utilisateur qui crée le workflow. |
# Connect external MCP servers to HubSpot agents (BETA)
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/mcp-registry
# Configurez le SCIM pour votre application (BÊTA)
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/scim
# Create and execute serverless functions in app cards
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/serverless-functions/create-serverless-functions
# Serverless functions overview
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/serverless-functions/overview
# Serverless functions reference
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/serverless-functions/reference
# CrmActionButton
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/ui-extensions/ui-components/crm-action-components/crm-action-button
# CrmActionLink
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/ui-extensions/ui-components/crm-action-components/crm-action-link
# CrmCardActions
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/ui-extensions/ui-components/crm-action-components/crm-card-actions
# CRM action components
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/ui-extensions/ui-components/crm-action-components/overview
# CrmAssociationPivot
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/ui-extensions/ui-components/crm-data-components/crm-association-pivot
# CrmAssociationPropertyList
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/ui-extensions/ui-components/crm-data-components/crm-association-property-list
# CrmAssociationStageTracker
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/ui-extensions/ui-components/crm-data-components/crm-association-stage-tracker
# CrmAssociationTable
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/ui-extensions/ui-components/crm-data-components/crm-association-table
# CrmDataHighlight
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/ui-extensions/ui-components/crm-data-components/crm-data-highlight
# CrmPropertyList
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/ui-extensions/ui-components/crm-data-components/crm-property-list
# CrmReport
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/ui-extensions/ui-components/crm-data-components/crm-report
# CrmStageTracker
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/ui-extensions/ui-components/crm-data-components/crm-stage-tracker
# CrmStatistics
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/ui-extensions/ui-components/crm-data-components/crm-statistics
# CRM data components
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/ui-extensions/ui-components/crm-data-components/overview
# BarChart | UI components
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/charts/bar-chart
# LineChart | UI components
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/charts/line-chart
# Charts overview | UI components
Source: https://developers.hubspot.fr/docs/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/charts/overview
# Exigences relatives au listing des outils d'agent
Source: https://developers.hubspot.fr/docs/apps/developer-platform/list-apps/agent-tool-listing-requirements
Consultez les exigences du marketplace des applications pour répertorier une application incluant des outils d'agent.
Ci-dessous, découvrez les exigences supplémentaires pour répertorier une application avec des outils d'IA sur le marketplace des applications, ainsi que la manière de [la soumettre pour approbation](#submitting-tools-for-approval).
## Conditions relatives aux listings
Toutes les applications créées pour le marketplace des applications sont soumises aux [exigences relatives aux listings sur le marketplace des applications](/docs/apps/developer-platform/list-apps/listing-your-app/app-marketplace-listing-requirements), et les applications certifiées sont soumises aux [exigences de certification du marketplace des applications](/docs/apps/developer-platform/list-apps/apply-for-certification/certification-requirements) supplémentaires. Si vous ajoutez un outil d'IA à une application destinée au marketplace des applications, vous devrez respecter certains critères supplémentaires.
### Sécurité et confidentialité
* **Périmètres d'accès :** si un outil agent prend en charge un type d'objet, le domaine correspondant `.read` doit être ajouté à [la configuration de domaines requise de votre application](/docs/apps/developer-platform/build-apps/app-configuration#app-schema). Par exemple, si un outil prend en charge les transactions, l'application doit exiger le domaine `crm.objects.deals.read`.
* **Entrées :** les outils doivent collecter uniquement les données entrées et le contexte nécessaires à leurs sorties. Par exemple :
* Un outil « Résumer le contact » peut prendre en compte des entrées telles que les propriétés du contact et les données des réunions et tâches associées.
* L'outil « Créer un devis » ne doit pas nécessiter de contexte sur l'historique des réunions d'un contact.
* **Vulnérabilités spécifiques aux modèles de langage :** votre application sera évaluée en fonction des bonnes pratiques de sécurité liées aux risques spécifiques aux modèles de langage (par exemple, injection indirecte d'invites ou débridages).
* **Données sensibles :** votre application ne doit pas accéder, demander ou utiliser [les domaines d'accès de données sensibles](/docs/api-reference/crm-sensitive-data/guide).
### Conformité
Les outils des agents ne doivent pas prendre en charge des systèmes ou des cas d'utilisation à « risque inacceptable » ou « à haut risque » tels que décrits par la [législation européenne sur l'IA](https://digital-strategy.ec.europa.eu/en/policies/regulatory-framework-ai).
Par exemple :
* **Acceptables :** outils « Résumer le contact » ou « Créer un devis »
* **Inacceptable :** outils de « score des réseaux sociaux », de « décision d'embauche » ou de « prédiction de congé parental »
### Responsabilité
* **Vidéo de test :** vous devez fournir une courte vidéo décrivant les tests fonctionnels que vous avez effectués (voir la section [Soumission de vos outils pour approbation](#submitting-your-tools-for-approval) ci-dessous).
* **Tests fonctionnels :** vos outils doivent réussir tous les tests fonctionnels effectués par l'équipe qualité de l'écosystème HubSpot.
### Convivialité
* **Dénomination :** les noms d'outils doivent mentionner la plateforme externe avec laquelle ils interagissent. Cependant, ils ne doivent pas inclure d'attribution à votre organisation dans le nom de l'outil, car l'étiquetage et l'association seront gérés par l'interface utilisateur du marketplace des applications. Par exemple :
* **Acceptable :** « Envoyer une notification Slack » ou « Créer un devis Acme"
* **Inacceptable :** « Envoyer une notification Slack par Alpha Co. » ou « Créer un devis Acme par Omega Inc"
* **Copie :** les descriptions d'outils, les libellés, les options, les outils et les autres textes destinés aux clients sont clairs et intuitifs.
### Valeur
À l'heure actuelle, les outils devraient faciliter les cas d'utilisation du front office (par exemple, le marketing, les ventes et le service client). Par exemple :
* **Acceptables :** outils « Créer une facture Xero » et « Envoyer un cadeau Omega »
* **Inacceptable :** un outil de « configuration HubSpot nouvelle embauche »
***
## Soumission de vos outils pour approbation
Pour soumettre vos outils à approbation, effectuez les étapes suivantes avant les délais spécifiés.
### Du 2 au 9 juin 2025 (lancement de la bêta privée/point de contrôle #1)
Entre le 2 et le 9 juin 2025, configurez votre compte de test de développeur.
* Dans le compte développeur dans lequel vous créerez vos outils (celui converti en plateforme développeur le 2 juin), sélectionnez ou [créez un nouveau compte de test développeur](/docs/getting-started/account-types#developer-test-accounts).
* Dans ce compte de test développeur, installez l'application de test qui contiendra vos outils.
* Fournissez le HubID du compte de test de développeur au responsable du programme bêta de HubSpot. Il s'agit de l'ID surligné dans la capture d'écran ci-dessous, qui est distinct de votre ID de compte de développeur et de votre ID d'application de test. HubSpot ouvrira la porte au compte afin que vos outils puissent être utilisés avec les agents.

### 20 juin 2025 (point de contrôle bêta privé #2)
D'ici le 20 juin 2025, fournissez des identifiants de test et testez vos outils pour permettre à l'équipe qualité de l'écosystème HubSpot de passer en revue et d'approuver vos outils.
* **Fournir des identifiants de test :**
* Remplissez le compte de test du développeur avec les données CRM nécessaires pour tester correctement les outils.
* Invitez [ecosystem-quality-review@hubspot.com](mailto:ecosystem-quality-review@hubspot.com) en tant que [super administrateur](https://knowledge.hubspot.com/user-management/hubspot-user-permissions-guide#super-admin).
* Sur votre plateforme externe, accordez à [ecosystem-quality-review@hubspot.com](mailto:ecosystem-quality-review@hubspot.com) toutes les autorisations nécessaires pour tester correctement les outils dans les workflows et les agents HubSpot.
* **Tester les outils dans les comptes de test des développeurs non connectés :** à l'aide de votre application de test/développement, implémentez et testez les outils de bout en bout dans les workflows et les agents du compte de test du développeur.
* **Vidéo test :** enregistrez une courte vidéo décrivant les tests fonctionnels que vous avez effectués et partagez-la avec [ecosystem-quality-review@hubspot.com](mailto:ecosystem-quality-review@hubspot.com). La vidéo de démonstration doit :
* Durer au moins trois minutes
* Inclure des descriptions audio (recommandé) ou textuelles
* Inclure des descriptions des outils et des cas d'utilisation courants.
* Décrivez les tests que vous avez effectués. L'équipe de qualité de l'écosystème doit être en mesure de reproduire ces étapes avec les données présentes dans le compte de test du développeur.
Entre le 20 et le 25 juin 2025, l'équipe qualité de l'écosystème HubSpot analysera vos outils et vous fera part de votre premier feedback. Veuillez donner suite à ce feedback dès que possible, car quelques vérifications peuvent être nécessaires pour l'approbation finale.
# Demander une certification d'application
Source: https://developers.hubspot.fr/docs/apps/developer-platform/list-apps/apply-for-certification/applying-for-app-certification
La certification d
"La certification d'application permet aux utilisateurs de savoir que votre application a été examinée et approuvée par HubSpot, afin de créer une relation de confiance et d'attester de sa qualité pour les utilisateurs potentiels.";
### Qu'est-ce qu'une certification d'application ?
La certification d'application implique que l'équipe qualité de l'écosystème HubSpot évalue votre application listée et confirme que celle-ci répond à [ces critères](https://developers.hubspot.com/docs) en matière de sécurité, de confidentialité, de fiabilité, de performances, de facilité d'utilisation, d'accessibilité et de valeur ajoutée. Une fois votre application approuvée, la page de listing de votre application affichera un badge « Application certifiée HubSpot ».

### Pourquoi est-ce important ?
Un badge de certification sur le listing d'application permet aux clients existants et potentiels de savoir que l'équipe qualité de l'écosystème HubSpot a examiné et approuvé votre application. Cela permet de symboliser la qualité et de créer une relation de confiance avec les utilisateurs de l'application. Découvrez-en davantage sur la création d'une relation de confiance avec le client grâce à la certification des applications [ici](https://developers.hubspot.com/blog/how-to-build-customer-trust-through-certification).
### Comment cela fonctionne-t-il ?
Tout [partenaire d'application éligible](https://developers.hubspot.com/docs) peut demander la certification via son compte de développeur d'applications. L'équipe qualité de l'écosystème HubSpot examinera alors votre soumission et vous contactera afin de fournir un feedback ou de confirmer la certification de votre application.
### Mon application est-elle éligible à la certification ?
Assurez-vous que votre application est éligible à la certification en consultant nos [critères de certification](https://developers.hubspot.com/docs). Vous ne pourrez pas demander la certification si votre application ne compte pas au moins 60 installations actives et ne présente pas le trafic d'API requis. Les installations actives sont le nombre de comptes de production uniques de HubSpot, non affiliés à votre organisation, affichant une activité d'application réussie au cours des 30 derniers jours.
### Comment demander la certification ?
Vous ne pouvez envoyer qu'une seule application à la fois pour la certification. Si vous soumettez plusieurs applications pour certification en même temps, elles seront rejetées en fonction de l'ordre de soumission. Une fois votre application certifiée, vous pouvez en soumettre une autre pour certification.
Pour demander une certification :
* [Connectez-vous](https://knowledge.hubspot.com/fr/account-management/why-can-t-i-log-into-hubspot) à votre compte de développeur et accédez à **Marketplace** > **Listings d'applications**.
* Passez le curseur de la souris sur l'application que vous souhaitez certifier et cliquez sur **Plus**. Ensuite, sélectionnez **Certifier l'application**.

* Dans la boîte de dialogue, saisissez les informations suivantes :
* **URL de la vidéo de démonstration sur YouTube :** saisissez l'**URL** de la vidéo de démonstration. Passez en revue les exigences nécessaires pour la vidéo de démonstration de l'application [ci-dessous](#app-demo).
* **Informations d'identification de test :** saisissez des identifiants de test pour votre application afin que l'équipe de la qualité de l'écosystème HubSpot puisse évaluer ses fonctionnalités.
* En bas, cliquez sur **Soumettre la demande de certification**.

### Conditions relatives à la vidéo de démonstration de l'application
Des vidéos de démonstration aident l'équipe qualité de l'écosystème HubSpot à tester votre application. L'équipe n'examinera pas votre application à moins que vous ne soumettiez une vidéo de démonstration qui réponde à toutes les exigences. Les vidéos promotionnelles de vente et de marketing seront rejetées. HubSpot ne partagera et ne publiera pas vos vidéos de démonstration.
La vidéo de démonstration doit :
* Durer au moins trois minutes
* Inclure des descriptions audio (recommandé) ou textuelles
* Inclure des descriptions de l'objectif de votre application et des cas d'utilisation courants
* Par exemple : « L'application Acme aide les représentants commerciaux et d'intégration à coordonner les CRM. Les transactions fermées gagnées dans n'importe quel CRM supporté par Acme peuvent automatiquement générer des tickets et des tâches d'onboarding dans HubSpot. »
* Démontrer et décrire comment les nouveaux utilisateurs doivent :
* Installer votre application.
* Par exemple : « Dans le listing d'application Acme sur le marketplace des applications de HubSpot, cliquez sur Installer l'application, sélectionnez votre CRM, saisissez vos identifiants, cliquez sur Terminé, sélectionnez votre compte HubSpot, vérifiez les domaines demandés, cliquez sur Connecter l'application. »
* Configurer votre application après l'installation.
* Par exemple : « Une fois l'application installée, sélectionnez un pipeline de tickets en accédant à Paramètres > Intégrations > Applications connectées > Application Fiction > Pipeline de tickets. Ensuite, configurez jusqu'à 10 tâches par défaut dans la section Modèles de tâches. Lorsque vous êtes prêt à activer la synchronisation, cliquez sur Synchronisation des tickets. »
* Utiliser les fonctionnalités principales de votre application pour répondre aux cas d'utilisation courants.
* Par exemple : « Pour chaque transaction conclue dans le CRM connecté, la fonctionnalité Synchronisation des tickets créera une fiche d'informations de ticket dans HubSpot avec tous les contacts associés et vos tâches configurées. Cela permet à votre équipe d'onboarding de se connecter immédiatement avec le nouveau client. »
* Interagir avec votre application à l'intérieur de leur compte HubSpot pour répondre aux cas d'utilisation courants (le cas échéant).
* Par exemple : « Pour créer des tickets d'intégration à partir de transactions HubSpot, utilisez l'action de workflow personnalisé Créer un ticket Fiction dans les workflows basés sur des transactions. Ces actions garantissent une personnalisation accrue par rapport aux paramètres de l'application pour d'autres CRM. »
* Déconnecter votre application de leur compte HubSpot.
* Désinstaller votre application à partir de leur compte HubSpot, en décrivant comment cela affecte les comptes et les données des utilisateurs HubSpot.
**Conseil :** vous pouvez utiliser l'outil gratuit [Loom](https://www.loom.com/) pour enregistrer une vidéo de démonstration.
### Pourquoi le CTA de certification n'apparaît-il pas pour mon application ?
Le bouton « Certifier l'application » apparaîtra uniquement si votre application est éligible. Veuillez consulter les [critères de certification](https://developers.hubspot.com/docs) ou contacter votre [responsable des partenaires](https://developers.hubspot.com/docs#related-resources) si vous avez des questions concernant l'éligibilité.
### Comment les utilisateurs savent-ils que mon application est certifiée ?
Une fois votre application certifiée, votre listing du marketplace des applications présente un badge « Application certifiée HubSpot ».

Lorsqu'un client passe le curseur de la souris sur le badge, il verra des informations supplémentaires sur la certification.

Trouvez votre **Gestionnaire de partenaires d'applications** et son adresse e-mail en vous connectant à votre compte de développeur et en accédant à **Marketplace des applications** > **Listings**. Passez le curseur sur votre application et cliquez sur **Plus** > **Afficher les détails du listing**.
***
#### Documents associés
[Conditions relatives à la certification des applications](https://developers.hubspot.com/docs)
[Conditions relatives aux listings d'applications](https://developers.hubspot.com/docs)
# Conditions relatives à la certification des applications
Source: https://developers.hubspot.fr/docs/apps/developer-platform/list-apps/apply-for-certification/certification-requirements
Découvrez ce dont les partenaires d
'Marketplace des applications | Exigences en matière de certification des applications';
"Découvrez ce dont les partenaires d'application ont besoin pour certifier leurs applications dans le marketplace des applications.";
La certification d'application implique que l'équipe qualité de l'écosystème HubSpot évalue et confirme que votre [application listée](https://developers.hubspot.com/docs) répond aux exigences ci-dessous en matière de sécurité, de confidentialité, de fiabilité, de performances, de facilité d'utilisation, d'accessibilité et de valeur ajoutée.
Les applications certifiées se distinguent sur le [marketplace des applications](https://ecosystem.hubspot.com/marketplace/apps) par leur réputation en termes de qualité et de fiabilité. Votre application bénéficiera également d'[avantages spéciaux](#certification-benefits) et recevra des commentaires constructifs de l'équipe qualité de l'écosystème HubSpot lors de l'évaluation de la certification de l'application.
* Ces exigences sont sujettes à modification, car HubSpot apporte continuellement des améliorations au marketplace des applications et à l'écosystème HubSpot. HubSpot peut rejeter une demande de certification d'application à sa discrétion si elle ne répond pas aux normes établies.
* HubSpot n'étudiera pas votre application si vous ne soumettez pas de vidéo de démonstration, comme indiqué lors de la [demande de certification de l'application.](https://developers.hubspot.com/docs)
* Vous ne pouvez envoyer qu'une seule application à la fois pour certification. Si vous soumettez plusieurs applications pour certification en même temps, elles seront rejetées en fonction de l'ordre de soumission.
* Les certifications d'application sont valables pour une durée de deux ans et doivent être renouvelées. Le non-renouvellement de votre certification entraînera la suppression de votre statut d'application certifiée.
* Une notification sera envoyée 3 mois avant la date de renouvellement de la certification de votre application.
* Si votre application ne répond plus aux normes, l'équipe qualité de l'écosystème HubSpot collaborera avec vous pendant 60 jours maximum pour résoudre les problèmes.
## Présentation
Vous trouverez ci-dessous une présentation des exigences en matière de certification des applications. Pour plus de détails, consultez les [critères d'évaluation](#review-criteria).
Votre application doit remplir les conditions suivantes :
* Être associée à un seul ID d'application HubSpot.
* Votre application publique listée doit être unique. Si vous avez déjà publié une application et que vous souhaitez la remplacer, vous devez mettre à jour l'application existante au lieu d'en publier une nouvelle.
* Ne créez pas plusieurs applications qui répondent au même cas d'utilisation. Les applications ayant des fonctionnalités similaires et utilisant les mêmes API doivent être consolidées en une seule application.
* Utiliser l'[authentification OAuth](/docs/apps/legacy-apps/authentication/working-with-oauth) et tous les périmètres nécessaires.
* Être associée à un [domaine vérifié](/docs/apps/legacy-apps/public-apps/overview).
* Les ressources publiques associées à votre application doivent respecter les bonnes pratiques de sécurité.
Votre application ne peut pas utiliser les [cartes CRM classiques](/docs/api-reference/crm-public-app-crm-cards-v3/guide), car elles ne sont plus prises en charge à compter du 16 juin 2025. Découvrez-en davantage sur cette annonce dans le [journal des modifications des développeurs HubSpot](https://community.hubspot.com/t5/Developer-Announcements/Deprecating-Support-for-Classic-Legacy-CRM-Cards/m-p/1153039#M1048).
Consultez la [liste détaillée des exigences en matière de sécurité et de confidentialité](#security-privacy).
L'activité de l'application est définie par les requêtes authentifiées par OAuth aux [API](/docs/api-reference/overview) de HubSpot et les [requêtes signées](/docs/apps/legacy-apps/authentication/validating-requests) provenant des [abonnements au webhook](/docs/api-reference/webhooks-webhooks-v3/guide) HubSpot et des extensions (par exemple : les requêtes de récupération de données des [cartes CRM](/docs/api-reference/crm-public-app-crm-cards-v3/guide)).
Les installations actives sont le nombre de comptes de production uniques HubSpot, non affiliés à votre organisation, affichant une activité d'**application réussie** au cours des 30 derniers jours.
## Avantages de la certification
Outre les [avantages liés au listing de votre application](https://www.hubspot.com/partners/app), les applications certifiées bénéficient des avantages suivants :
* Badge « Application certifiée HubSpot » affiché sur son listing de marketplace des applications.
* Visibilité supplémentaire dans le marketplace des applications de HubSpot :
* Inclusion dans le filtre de recherche « Application certifiée HubSpot ».
* Éligibilité pour l'inclusion dans des sélections du marketplace des applications.
* Accès au badge « Application certifiée HubSpot » et aux images des réseaux sociaux pour partager l'obtention de la certification de l'application
* Prise en compte favorable dans les initiatives de partenariat et d'amplification de HubSpot.
## Critères d'évaluation
Pour obtenir la certification, votre application doit démontrer sa qualité en répondant à des mesures quantitatives et à des descripteurs qualitatifs en matière de sécurité, de confidentialité, de fiabilité, de performances, de facilité d'utilisation, d'accessibilité et de valeur ajoutée. Les exigences ci-dessous sont organisées par ces catégories et comprennent des exemples de commentaires constructifs que vous pouvez recevoir.
### Sécurité et confidentialité
Votre application doit remplir les conditions suivantes :
* Être associée à un seul ID d'application HubSpot. Votre application doit autoriser les requêtes d'API avec l'ID d'application HubSpot public (et l'[ID de client OAuth](/docs/apps/legacy-apps/authentication/working-with-oauth)) associé à votre listing d'application.
* Un listing ne doit pas rediriger vers une autre application publique ou privée.
* Votre application publique répertoriée ne doit pas nécessiter le fonctionnement d'une autre application publique ou privée.
* Être authentifiée par le [flux de code d'autorisation OAuth](/docs/apps/legacy-apps/authentication/working-with-oauth)
* Il est interdit de demander aux utilisateurs de copier et de coller les codes ou les jetons OAuth. Les utilisateurs doivent uniquement être invités à autoriser l'accès.
* Les applications doivent demander, gérer et actualiser les jetons d'accès sans intervention de l'utilisateur.
* Utiliser tous les paramètres [scope](/docs/apps/legacy-apps/authentication/working-with-oauth) nécessaires à l'installation (c'est-à-dire les paramètres obligatoires `scope` et `optional_scope`).
* Activez [les paramètres de domaine avancés](/docs/apps/legacy-apps/public-apps/overview#configure-scopes) et sélectionnez tous les domaines requis, conditionnellement requis et facultatifs que l'application demande d'installer.
* Les périmètres étrangers doivent être supprimés.
* Si certains domaines ne s'appliquent qu'à un sous-ensemble de la base d'utilisateurs de votre application, ils doivent être inclus en tant que domaines conditionnellement requis ou facultatifs.
* Être associée à un [domaine vérifié](/docs/apps/legacy-apps/public-apps/overview).
* Vos ressources publiques seront évaluées en fonction des bonnes pratiques en matière de sécurité liées à des logiciels obsolètes et à diverses vulnérabilités et constatations des serveurs web.
#### Exemple de feedback
Votre application nécessite actuellement quatre domaines : `contacts`, `timeline`, `forms` et `content`. Selon nos journaux, cependant, il n'a effectué des requêtes aux API Contacts CRM et Événements de chronologie qu'au cours des 30 derniers jours. Étant donné que les domaines `forms` et `content` ne sont requis pour aucune de ces fonctions, veuillez les supprimer au besoin des paramètres de l'application pour réduire les autorisations que les utilisateurs doivent accepter.
### Fiabilité et performance
Votre application doit remplir les conditions suivantes :
* Avoir une bonne réputation :
* Votre application doit répondre à toutes les dispositions en vigueur.
* Elle doit n'avoir eu aucun rejet de certification au cours des six derniers mois.
* Elle doit n'avoir eu aucune remontée de support non résolue avec des clients mutuels.
* Utiliser des versions publiques stables des API et extensions de HubSpot.
* Il est recommandé d'utiliser les versions publiques les plus récentes.
* Les API de prévisualisation non documentées, bêta et de développeur sont considérées comme instables et ne doivent pas être utilisées dans votre application de production.
* Si votre application utilise des API qui ne sont pas stables ou publiques, veuillez le signaler lors de l'examen de la certification ou à l'équipe responsable des partenaires d'application pour aborder les différentes solutions.
* Maintenir un volume d'[activité](#activity) raisonnable de la part des comptes clients HubSpot non affiliés à votre entreprise.
* Respecter les [directives d'utilisation de l'API](https://developers.hubspot.com/docs) et les bonnes pratiques, notamment :
* Le respect des limites (c.-à-d. 100 requêtes entrantes toutes les 10 secondes par compte HubSpot connecté).
* L'actualisation des jetons d'accès OAuth avant leur expiration.
* La mise en cache des données pour les appels récurrents, le cas échéant.
* L'utilisation d'API de lot et des abonnements au webhook pour réduire le volume de requête, le cas échéant.
* L'utilisation d'API pour créer des propriétés, des workflows et des actions de workflow personnalisées au lieu d'exiger une action de la part de l'utilisateur.
* Maintenir un taux de réussite moyen supérieur à **95 %** pour toutes les [activités](#activity)
* Les requêtes débouchant sur des réponses d'erreur sont comptabilisées dans ce taux de réussite.
* Certaines erreurs inévitables ou attendues peuvent être exclues lors du calcul des taux de réussite pour l'ensemble des [activités](https://developers.hubspot.com/docs#activity).
* Votre application peut avoir une extension de navigateur pour offrir des fonctionnalités et une valeur supplémentaires aux clients :
* Les extensions de navigateur ne doivent pas être créées spécifiquement pour l'interface utilisateur de HubSpot ou comme solution de contournement des API de HubSpot.
* Les extensions du navigateur ne doivent pas proposer de capacités ou de composants dans l'interface utilisateur de HubSpot.
* Les extensions d'interface utilisateur officiellement prises en charge (par exemple, les [cartes CRM](/docs/api-reference/crm-public-app-crm-cards-v3/guide) et les [actions de workflow personnalisées](/docs/api-reference/automation-actions-v4-v4/guide)) fournissent des expériences utilisateur plus cohérentes pour les clients.
* Votre application fera l'objet d'une évaluation de sécurité supplémentaire si elle inclut une extension de navigateur.
#### Exemples de feedback
Le taux de réussite de l'API de votre application est inférieur au seuil de 95 % requis pour la certification. Nos journaux indiquent un taux de réussite de 83 % au cours des 30 derniers jours. La grande majorité de ces requêtes ont renvoyé des erreurs `429` de limitation. Pour réduire ce taux d'erreur, nous recommandons de limiter les requêtes à 100 requêtes toutes les 10 secondes pour chaque compte.
Votre application génère des erreurs autour de la mise à jour des contacts via une adresse e-mail `undefined`, qui ne fonctionnera pas avec ce point de terminaison. Votre application doit ignorer ces requêtes si une fiche d'informations n'a pas d'adresse e-mail.
Votre application effectue des requêtes avec des jetons OAuth expirés et reçoit des erreurs `401` avant d'actualiser le jeton. Pour minimiser ces erreurs, nous vous recommandons que votre application garde une trace du moment où les jetons expirent ou actualise les jetons avant de faire des requêtes. Si vous constatez des erreurs `401` pour toutes les requêtes et que vous ne pouvez pas actualiser le jeton d'accès, essayez de désinstaller l'application et cessez d'effectuer des requêtes pour le compte jusqu'à ce qu'un utilisateur réauthentifie votre application.
Votre application génère des erreurs `403` provenant de la tentative d'utilisation de l'API des listes de contacts avec les comptes gratuits Marketing Hub, qui n'ont pas accès aux listes de contacts. Si votre application reçoit des erreurs `403` répétées en raison de l'absence des domaines appropriés, elle doit cesser d'effectuer des appels pour récupérer les listes de ce compte.
Les abonnements au webhook de votre application échouent fréquemment avec les erreurs `500` et `503`. Assurez-vous que votre serveur peut gérer le volume de requêtes (actuellement limité à 150 par seconde) afin que les données des clients ne soient pas perdues.
Votre application demande de nombreux contacts un par un au lieu de le faire par lots. Nous vous recommandons d'utiliser [des points de terminaison de lot](/docs/api-reference/crm-contacts-v3/guide) à la place.
### Facilité d'utilisation et accessibilité | Application
* Votre application doit être [listée](https://developers.hubspot.com/docs) dans le [marketplace des applications](https://ecosystem.hubspot.com/marketplace/apps) HubSpot pendant au moins six mois.
* Votre application doit présenter [des bonnes pratiques en termes de facilité d'utilisation](https://www.nngroup.com/articles/ten-usability-heuristics/).
* L'installation et l'utilisation ne doivent pas générer de confusion ou de frustration pour les clients de HubSpot, ni impacter négativement l'expérience utilisateur principale de HubSpot.
#### Exemple de feedback
Votre application demande actuellement aux utilisateurs de configurer manuellement des actions webhook de workflow pour envoyer des SMS. Pensez à créer des actions de workflow personnalisées via l'application suffisamment flexibles pour s'adapter à de nombreux cas d'utilisation.
### Facilité d'utilisation et accessibilité | Listing de marketplace des applications
Votre listing de marketplace des applications doit :
* Décrire avec précision les fonctionnalités actuelles de votre application.
* Si la fonctionnalité change selon le produit ou le niveau d'abonnement d'un utilisateur, que ce soit pour HubSpot ou votre solution, les différences doivent être clairement définies.
* Votre listing doit contenir des informations claires et précises sur les tarifs, y compris un lien vers votre page tarifaire actuelle.
* Si plusieurs forfaits prennent en charge votre application, le listing de marketplace des applications doit au moins inclure l'option la moins coûteuse.
* Utiliser des données de substitution ou masquer des données pour ne pas afficher d'informations personnelles identifiables (PII).
* Inclure :
* Des aides visuelles informatives et actualisées, qui peuvent inclure des captures d'écran ou une vidéo. Reportez-vous à la page [Comment créer une excellente vidéo de démonstration d'application](https://www.hubspot.com/partners/apps/resources/how-to-make-a-great-app-demo-video) pour connaître les bonnes pratiques ainsi que des exemples de création d'une vidéo de démonstration.
* Une URL de documentation de configuration à jour qui mène directement à un guide de configuration complet pour votre application. Vous pouvez consulter la [configuration requise complète pour la documentation d'installation](https://developers.hubspot.com/docs). Ce guide comprend également un exemple de modèle qui répond à toutes les exigences.
* Exclure :
* Toute donnée ou statistique, à moins qu'une étude de cas ne soit fournie en tant que ressource.
#### Exemples de feedback
Votre listing du marketplace des applications contient quelques détails spécifiques sur les fonctionnalités de votre application. Veuillez enrichir le listing avec des captures d'écran illustrant les fonctionnalités de l'application et incluant des descriptions plus détaillées des cas d'utilisation courants et des comportements au sein de l'application.
Les clients HubSpot ont l'habitude d'effectuer un essai avant d'acheter de nouveaux produits et services. Pour cette raison, nous recommandons à votre application de proposer un essai gratuit ou une expérience d'inscription freemium. Certains partenaires d'applications qui n'ont pas de pages de tarification ou d'essais gratuits ont créé des « abonnements HubSpot », qui proposent aux clients mutuels une tarification transparente, une inscription sans contact et d'autres avantages.
### Facilité d'utilisation et accessibilité | Documentation de support
La documentation de support pour votre application doit :
* Figurer sur une URL en ligne publique (c'est-à-dire sans pare-feu ou connexion requise) et respecter les normes actuelles en matière d'accessibilité, de confidentialité et de RGPD.
* Être à jour et cohérente avec la version actuelle de votre application.
* Décrire clairement :
* L'objet de l'application.
* Comment installer votre application et connecter un compte HubSpot avec des captures d'écran de chaque étape, y compris l'écran d'approbation des périmètres d'accès.
* Comment configurer l'application une fois installée.
* Comment utiliser l'application, y compris les interactions manuelles et automatisées.
* Comment déconnecter HubSpot de votre application.
* Comment désinstaller votre application d'un compte HubSpot.
* L'impact de la déconnexion et de la désinstallation sur les comptes et données HubSpot des utilisateurs.
* Inclure des images. Les images contenant des captures d'écran de l'interface utilisateur HubSpot doivent être mises à jour et cohérentes avec notre [système de conception](https://canvas.hubspot.com/).
* Les vidéos sont également recommandées, mais non obligatoires. Les vidéos doivent être mises à jour régulièrement et refléter la version actuelle de votre application.
#### Exemple de feedback
Le guide de configuration de votre application inclut une capture d'écran illustrant les domaines dont votre application a besoin pour l'installation. Cette capture d'écran n'indique pas le domaine `business-intelligence`, qui est sélectionné dans les paramètres de votre application. Veuillez mettre à jour la capture d'écran afin qu'elle reflète les domaines requis actuels.
### Valeur
* Le nombre d'installations actives de votre application, sa conservation et les avis du marketplace des applications de HubSpot sont évalués comme des indicateurs de la valeur ajoutée de votre application pour les clients mutuels.
* Votre application doit avoir au moins 60 installations [actives](#activity) uniques pour prétendre à la certification. Les comptes avec des installations doivent être non affiliés à votre organisation. Les comptes de test seront également exclus.
* Si votre application compte moins de 60 installations actives, il vous sera demandé d'annuler la demande de certification.
* Si votre application compte moins que les trois installations actives requises, votre application peut être supprimée du marketplace des applications.
* Votre listing d'application doit recevoir des réponses de votre équipe pour tout commentaire négatif sur votre application.
#### Exemple de feedback
Votre application n'a pas maintenu au moins 60 installations actives au cours des six derniers mois. À ce titre, son statut de certification sera supprimé. Vous pourrez présenter une nouvelle demande de certification dans six mois.
## Processus d'évaluation de certification et de recertification d'application
L'équipe qualité de l'écosystème HubSpot répond aux [demandes de certification d'application](https://developers.hubspot.com/docs) dans un **délai de 10 jours ouvrables**. L'ensemble du processus d'examen et de feedback sur l'application ne devrait pas prendre plus de **60 jours** à partir du moment où le feedback est partagé. Passez en revue les critères énumérés [ici](https://developers.hubspot.com/docs) pour fournir des informations d'identification de test pour votre application.
Si votre application répond à toutes les exigences, elle obtiendra la certification et un badge « Application certifiée HubSpot » sera affiché aux clients et prospects sur le marketplace des applications. Votre application apparaîtra également lorsque les utilisateurs utiliseront le filtre « Application certifiée HubSpot ».
Si votre application ne réussit pas l'évaluation, vous pourrez refaire une demande dans six mois.
Après un an de certification, l'équipe qualité de l'écosystème HubSpot peut examiner votre application pour s'assurer qu'elle répond toujours aux exigences de certification rigoureuses. Si votre application ne répond plus à ces normes, l'équipe collaborera avec vous pendant soixante jours maximum pour résoudre les problèmes.
Si votre application n'est pas conforme aux exigences de certification indiquées ci-dessus à tout moment, HubSpot peut lancer immédiatement un processus de recertification, même si votre application est certifiée depuis moins d'un an. Comme indiqué dans le [contrat relatif au Programme Partenaires d'applications](https://legal.hubspot.com/app-program-agreement), HubSpot se réserve également le droit d'annuler la publication de votre application à tout moment.
## Questions fréquentes
> **Existent-ils des coûts associés à la certification de l'application ?**
>
> Non, HubSpot ne facture aucuns frais pour l'inscription ou la certification de vos applications sur le marketplace des applications, ni pour les installations générées via le marketplace des applications. Il n'y a pas de partage des revenus. L'équipe HubSpot est là pour vous aider à améliorer votre application.
> **Serai-je informé lorsque mon application sera à nouveau éligible à la certification si elle a été rejetée par le passé ?**
>
> Non. Pour l'instant, aucune notification n'est activée pour vous informer si et quand vous pourrez présenter une nouvelle demande. Votre [gestionnaire de partenaires d'application](#app-partner-manager) serait la meilleure ressource à contacter pour demander si vous êtes éligible avant de postuler.
> **Comment promouvoir mon application certifiée auprès de mes clients ?**
>
> N'hésitez pas à utiliser le modèle de communiqué de presse sur [cette page](https://www.hubspot.com/partners/app/resources) pour annoncer que votre application a obtenu la certification.
>
> Si vous prévoyez de publier du contenu sur les réseaux sociaux, n'hésitez pas à mentionner HubSpot pour partager votre succès.
> **J'aime expérimenter avec les dernières API bêta. La certification d'application est-elle faite pour moi ?**
>
> Il est recommandé de contacter votre [gestionnaire de partenaires d'application](#app-partner-manager) pour examiner si la certification conviendrait à votre application.
>
> L'objectif de HubSpot est de s'assurer que votre application est bien conçue pour les clients communs et limite les modifications de dernière minute, ce qui nécessite que votre application utilise les dernières API stables. HubSpot est également là pour soutenir les entrepreneurs, les adeptes des dernières technologies et les développeurs désireux d'expérimenter les dernières API bêta.
> **J'aimerais que mon application figure sur le marketplace des applications. Est-ce à cela que sert la certification d'application ?**
>
> Les avantages liés au fait de figurer dans les collections et de permettre aux clients de filtrer facilement pour trouver une application certifiée sur le marketplace des applications continuent d'évoluer. L'équipe HubSpot serait ravie de savoir quelle représentation vous trouvez la plus utile (par exemple : Marketplace des applications, Communauté HubSpot, les newsletters organisées par HubSpot ou d'autre formulaires).
>
> Votre [responsable des partenaires d'application](#app-partner-manager) est le meilleur point de contact pour discuter des avantages potentiels et répondre à vos questions.
> **Pourquoi et comment mes ressources publiques seront-elles évaluées en fonction des bonnes pratiques en matière de sécurité ?**
>
> Chaque client utilisant en moyenne plus de cinq intégrations, il est impératif que vos applications fassent l'objet d'un suivi et soient soumises à des normes de confidentialité, de sécurité et de qualité tout au long de votre vie. Toutes les ressources publiques seront évaluées à l'aide des informations déjà fournies lors d'un processus d'inscription et les résultats seront analysés à l'aide d'une méthode non invasive.
> **Mon application a été certifiée il y a plus d'un an. Que dois-je faire pour conserver mon statut de certification et que signifie obtenir une nouvelle certification ?**
>
> L'équipe de qualité de l'écosystème HubSpot vous contactera si votre application n'est pas conforme ou doit faire l'objet d'une recertification annuelle avec les prochaines étapes.
>
> Nous vous encourageons à surveiller les performances de votre application, les exigences de certification, le [journal des modifications des développeurs](https://developers.hubspot.com/changelog) et toute autre ressource HubSpot liée à tout changement de technologie utilisé et à la façon dont votre application pourrait rester à jour.
Trouvez votre **Gestionnaire de partenaires d'applications** et son adresse e-mail en vous connectant à votre compte de développeur et en accédant à **Marketplace des applications** > **Listings**. Passez le curseur sur votre application et cliquez sur **Plus** > **Afficher les détails du listing**.
***
## Ressources associées
[Comment faire une demande de certification d'application ?](https://developers.hubspot.com/docs)
[Comment lister votre application ?](/docs/apps/developer-platform/list-apps/listing-your-app/listing-your-app)
[Conditions relatives aux listings](https://developers.hubspot.com/docs)
[Forum de la communauté des développeurs](https://community.hubspot.com/t5/APIs-Integrations/bd-p/integrations)
[Contacter l'équipe Partenaire d'application](https://www.hubspot.com/partners/app/join)
# Conditions relatives aux listings d'applications
Source: https://developers.hubspot.fr/docs/apps/developer-platform/list-apps/listing-your-app/app-marketplace-listing-requirements
Les partenaires d
'Marketplace des applications | Conditions relatives aux listings';
"Les partenaires d'application peuvent désormais consulter depuis un espace unique les directives et exigences de HubSpot pour le listing de leurs applications sur le marketplace des applications. ";
Les soumissions de listings d'applications sont étudiées manuellement par l'équipe qualité de l'écosystème HubSpot et seront rejetées si elles ne respectent pas les conditions décrites ci-dessous. Une fois que votre application répond à ces exigences, vous pouvez [créer votre listing d'application](/docs/apps/developer-platform/list-apps/listing-your-app/listing-your-app) à partir de votre compte de développeur.
## Conditions requises
* **Accès :** le listing ne doit pas rediriger vers une autre application publique ou privée ni nécessiter le fonctionnement d'une autre application publique ou privée.
* **Singularité :** votre application publique listée doit être unique. Si vous avez déjà publié une application et que vous souhaitez la remplacer, mettez à jour l'application existante au lieu d'en publier une nouvelle.
* **Cas d'utilisation :** chaque application que vous créez doit répondre à un cas d'utilisation distinct. Les applications ayant des fonctionnalités similaires et utilisant les mêmes API doivent être consolidées en une seule application.
* **ID d'application HubSpot unique :** votre application doit autoriser les requêtes d'API avec l'ID d'application HubSpot public (et l'[ID de client OAuth](/docs/apps/legacy-apps/authentication/working-with-oauth)) associé à votre listing d'application.
* **OAuth :** votre application doit utiliser OAuth comme méthode d'autorisation unique. Découvrez-en davantage sur l'[utilisation de OAuth](/docs/apps/legacy-apps/authentication/working-with-oauth).
* **Installations :** votre application doit avoir au moins trois [installations actives uniques](https://developers.hubspot.com/docs#:~:text=Active%20installs%20are%20the%20number%20of%20unique%20HubSpot%20production%20accounts%2C%20unaffiliated%20with%20your%20organization%2C%20showing%20successful%20app%20activity%20within%20the%20past%2030%20days.).
* **Périmètres d'accès :** vous devez uniquement demander les périmètres d'accès nécessaires pour votre application Les [paramètres de domaine avancés](/docs/apps/legacy-apps/public-apps/overview#configure-scopes) de votre application doivent être activés. Pour éviter les erreurs, sélectionnez les domaines requis, conditionnellement requis et facultatifs.
* **Conditions générales** : vous devez consulter et accepter les conditions générales du [contrat relatif au Programme Partenaires d'applications de HubSpot](https://legal.hubspot.com/app-program-agreement).
* **Secteurs d'activité restreints :** votre application ne doit pas s'adapter ou fournir des fonctionnalités qui serviraient exclusivement les clients de l'un des [secteurs d'activité restreints](https://legal.hubspot.com/acceptable-use#Restricted-Industries) de HubSpot.
* **Fonctionnalité limitée :** votre application ne peut pas utiliser les [cartes CRM classiques](/docs/api-reference/crm-public-app-crm-cards-v3/guide), car elles ne sont plus prises en charge à compter du 16 juin 2025. Découvrez-en davantage sur cette annonce dans le [journal des modifications des développeurs HubSpot](https://community.hubspot.com/t5/Developer-Announcements/Deprecating-Support-for-Classic-Legacy-CRM-Cards/m-p/1153039#M1048).
### Exigences de branding HubSpot
* Votre application et ses ressources associées (documentation, pages de destination, etc.) doivent répondre aux [Directives de branding de HubSpot](https://www.hubspot.com/partners/app/branding-guidelines). Par exemple, mettez en majuscule la lettre « S » dans « HubSpot » chaque fois que vous faites référence à HubSpot.
* Votre application et ses ressources associées (documentation, pages de destination, etc.) ne doivent pas être contraires aux [Conditions générales d'utilisation des marques commerciales de HubSpot](https://legal.hubspot.com/tm-usage-guidelines). Par exemple, ne combinez pas le nom de HubSpot (y compris « Hub » et « HubSpot ») avec le nom ou le logo de votre application.
### Conditions relatives aux listings
Une fois que vous avez rempli ces conditions, vous pouvez soumettre votre listing d'application. Lorsque vous soumettez votre listing d'application, vous devez renseigner correctement toutes les informations. Ces champs sont particulièrement importants et si vous ne répondez pas à ces exigences, votre listing ne sera défini qu'en mode Brouillon :
* Le contenu de votre listing doit être spécifique à l'intégration, contrairement aux informations générales sur le produit. Il doit contenir des informations sur la valeur ajoutée pour les clients avec le téléchargement et l'utilisation de cette intégration. Quelques exemples à suivre : [Aircall](https://ecosystem.hubspot.com/marketplace/apps/aircall), [CloudFiles](https://ecosystem.hubspot.com/marketplace/apps/cloudfiles), [Reveal](https://ecosystem.hubspot.com/marketplace/apps/reveal-191193).
* Toutes les URL de votre listing du marketplace des applications doivent mener à des pages actives, accessibles au public et fonctionnelles.
* Cela sera vérifié en utilisant les [outils Outil SEO de HubSpot](https://knowledge.hubspot.com/fr/seo/understand-seo-crawling-errors) pour explorer les pages associées à l'inscription.
* Pour éviter des retards inutiles dans le processus d'analyse, il est fortement recommandé de travailler avec l'administrateur de votre site pour ajouter l'agent utilisateur du *robot d'indexation de HubSpot, HubSpot Crawler*, à la liste d'autorisations en tant qu'exemption avant de soumettre votre liste d'applications.
* Vous devez fournir un lien vers la documentation de configuration publique spécifique à votre intégration HubSpot.
* Consultez la [configuration requise complète pour la documentation d'installation](https://developers.hubspot.com/docs). Ce guide comprend également un exemple de modèle qui répond à toutes les exigences.
* À titre d'exemple, consultez le [guide d'installation de OrgChartHub](https://orgcharthub.com/guides/setup).
* Incluez une URL de bouton d'installation pertinente qui redirige les clients vers une page où ils peuvent facilement connecter votre application à HubSpot.
* Les URL des ressources de support de votre application (site web de support, forum de la communauté HubSpot, étude de cas) doivent être en ligne, à jour et accessibles publiquement.
* Les URL des Conditions d'utilisation et de la Politique de confidentialité de votre application doivent être en ligne et à jour.
* Tous les champs d'URL ont une limite de 250 caractères.
* Les *données partagées*, qui permettent aux utilisateurs de savoir comment les informations circuleront entre votre application et HubSpot, doivent être précises, à jour et présenter les [périmètres d'accès](https://developers.hubspot.com/docs#:~:text=Webhooks%20API.-,Scopes,-%3A%20You%20must) requis par votre application.
* Tous les objets sélectionnés dans vos périmètres d'accès OAuth doivent être documentés dans le tableau *Données partagées*.
* Si votre application demande à la fois des périmètres d'accès de lecture et de rédaction d'objet, la synchronisation des données doit être annoncée comme bidirectionnelle pour ces objets spécifiques.
* Votre listing de marketplace des applications doit contenir des informations claires et précises sur les tarifs.
* Le plan tarifaire figurant dans le listing doit correspondre aux informations tarifaires publiées sur votre site web.
* Le plan tarifaire du listing doit uniquement inclure les plans tarifaires qui permettent l'utilisation de votre intégration HubSpot.
* Si un plan tarifaire ne prend pas en charge l'intégration, il ne doit pas être inclus dans votre liste.
* Par exemple, si vous avez un *plan A* et un *plan B* pour votre application, mais que seul le *plan B* peut être utilisé avec l'intégration, seuls les détails tarifaires du *plan B* doivent être inclus dans la liste.
* Les plans tarifaires gratuits ne doivent être utilisés que pour les modèles libres ou freemium.
* Vous devez inclure au moins une méthode de contact du support.
* Suivez les directives indiquées [ici](https://developers.hubspot.com/docs) pour fournir des informations d'identification de test pour votre listing d'application.
## Analyse, retour et approbation
Une fois que vous avez soumis votre listing, l'équipe qualité de l'écosystème HubSpot procédera à une première analyse dans les 10 jours ouvrables. Si l'une des informations fournies est incorrecte, trompeuse ou incomplète, nous vous en informerons. L'ensemble du processus d'examen et de feedback sur l'application ne devrait pas prendre plus de 60 jours à partir du moment où le feedback est partagé. Comme indiqué dans les [Conditions générales du marketplace des applications](https://legal.hubspot.com/app-program-agreement), HubSpot se réserve le droit de retirer ou de refuser la publication de votre listing d'application à tout moment.
**Remarque :** vous ne pouvez envoyer qu'une seule application à la fois pour la certification. Toute application supplémentaire soumise pendant le traitement de l'application initiale sera automatiquement rejetée.
## Récompenses pour les partenaires d'applications listées
* Listing dédié dans la marketplace HubSpot des applications
* Accès prioritaire au support développeur via un alias de support dédié
* Ressources communautaires pour les développeurs, y compris des webinars, des forums et bien plus encore
* Sélection de ressources marketing, y compris des modèles de RP et des guides de lancement
* Parrainage, stands et tickets remisés pour des événements INBOUND
* Logiciel remisé via le programme de capital-amorçage HubSpot pour start-ups
* Newsletters mensuelles avec des nouveautés marketing, des sorties de produit et bien plus encore
## Ressources associées
* [Comment lister votre application ?](/docs/apps/developer-platform/list-apps/listing-your-app/listing-your-app)
* [Conditions relatives à la certification des applications](https://developers.hubspot.com/docs)
* [Documentation de référence pour les API](/docs/api-reference/overview)
* [Comment utiliser les API de HubSpot](/docs/api-reference/overview)
* [Forum de la communauté des développeurs](https://community.hubspot.com/t5/APIs-Integrations/bd-p/integrations)
* [Contacter l'équipe Partenaire d'application](https://www.hubspot.com/partners/app/join)
# Créer un guide d'installation de listing d'applications
Source: https://developers.hubspot.fr/docs/apps/developer-platform/list-apps/listing-your-app/create-an-app-listing-setup-guide
# Marketplace des applications | Lister votre application
Source: https://developers.hubspot.fr/docs/apps/developer-platform/list-apps/listing-your-app/listing-your-app
Suivez ces étapes pour soumettre une application pour la liste du Marketplace des applications de HubSpot.
'Suivez ces étapes pour soumettre une application pour la liste du Marketplace des applications de HubSpot.';
Une fois que vous avez créé une application dans votre compte de développeur qui répond aux [conditions relatives aux listings sur le marketplace des applications](https://developers.hubspot.com/docs), vous pouvez soumettre un listing pour l'ajouter au [marketplace des applications de HubSpot](https://ecosystem.hubspot.com/marketplace/apps). L'équipe de qualité de l'écosystème HubSpot analysera votre demande et vous fera savoir par e-mail quand l'application aura été approuvée ou rejetée.
Vous devez être un [super administrateur](https://knowledge.hubspot.com/fr/user-management/hubspot-user-permissions-guide#super-admin) pour mettre à jour et soumettre un listing d'application.
## Créer et soumettre un listing d'applications
Avant de soumettre un listing d'application, consultez la page [Conditions relatives aux listings d'applications](https://developers.hubspot.com/docs) pour savoir comment élaborer votre listing.
* Dans votre [compte de développeur d'applications](https://developers.hubspot.com/docs), accédez à **Marketplace** > **Listings d'applications**.
* Cliquez sur **Créer un listing** dans l'angle supérieur droit. Si ce bouton est grisé, des listings ont déjà été créés pour toutes vos applications existantes.
* Sélectionnez l'**application** pour laquelle vous souhaitez créer un listing et cliquez sur **Suivant**. Les applications qui sont déjà répertoriées sur le Marketplace des applications n'apparaîtront pas ici.
* Cliquez sur le menu déroulant **Sélectionner la langue de liste principale pour \[nom de l'application]** et sélectionnez la **langue par défaut** que les utilisateurs verront lorsqu'ils navigueront sur le marketplace des applications.
* Cliquez sur **Suivant**.
L'assistant de listing d'applications dispose de sept onglets d'informations à remplir :
* [Informations sur le listing](#listing-info)
* [Détails de l'application](#app-details)
* [Tarification](#pricing)
* [Fonctionnalités de l'application](#app-features)
* [Informations sur le support](#support-info)
* [Informations sur les test](#testing-info)
* [Informations d'analyse](#review-info)
### Informations sur le listing
Dans l'onglet *Informations sur les listings* :
* Dans la section *Informations sur l'application*, ajoutez le **Nom public de l'application**, le **Nom de l'entreprise**, le **Slogan** et l'**URL du bouton d'installation**. Pour les comptes créés après le 5 mars 2025, vous devrez sélectionner l'URL du bouton d'installation dans les URL de redirection définies dans les [paramètres de l'application](guides/apps/public-apps/overview).
* Dans la section *icône d'application*, chargez une icône de 800 par 800 pixels pour votre application. Celle-ci apparaîtra dans le marketplace des applications et les comptes des utilisateurs connectés. Lors de la création de votre icône :
* **À faire** : utiliser un fichier JPG, JPEG ou PNG, remplir tout l'espace (800 par 800 pixels) - votre image doit toucher au moins deux bords, et utiliser une image haute résolution, non pixelisée.
* **À ne pas faire** : inclure du texte dans votre icône, utiliser un mot-symbole ou laisser un espace blanc supplémentaire autour de votre icône.

* Dans la section *Catégoriser votre application*, vous pouvez sélectionner jusqu'à deux **catégories** pour votre application. Découvrez-en davantage sur les [différentes catégories disponibles](https://developers.hubspot.com/docs).
* Vous pouvez également tester et ajouter un **chemin d'URL** et les **termes de recherche** pouvant être utilisés pour trouver votre application dans le marketplace des applications.
### Détails de l'application
Dans l'onglet *Détails de l'application* :
* Dans la section *Vidéo de démonstration*, chargez une **vidéo** pour montrer le fonctionnement de votre application. Reportez-vous à la page [Comment créer une excellente vidéo de démonstration d'application](https://www.hubspot.com/partners/apps/resources/how-to-make-a-great-app-demo-video) pour connaître les bonnes pratiques ainsi que des exemples de création d'une vidéo de démonstration.
* Dans la section *Captures d'écran*, ajoutez des **images** et du **texte alternatif** montrant le fonctionnement de votre application. Vous pouvez ajouter jusqu'à huit images.
* Dans la section *Vue d'ensemble de l'application*, entrez une **présentation** de votre application. Votre présentation doit comprendre des informations concernant ce que fait votre application, les principaux problèmes commerciaux qu'elle résout et les raisons pour lesquelles les utilisateurs devraient l'installer.
* Cliquez sur **Ajouter des données partagées**. Dans la section *Données partagées*, indiquez aux utilisateurs comment les données circuleront entre votre application et HubSpot.
* Dans le panneau de droite, sélectionnez quel objet de l'application se synchronise avec quel objet de HubSpot, et la direction de la synchronisation. Dans la section *Vue d'ensemble de l'application*, **décrivez** brièvement comment votre application peut aider les utilisateurs à atteindre leurs objectifs.
* Pour ajouter une autre synchronisation d'objets, cliquez sur **Ajouter un autre objet**.

* Cliquez sur le menu déroulant **Fonctionnalités de HubSpot compatibles avec votre application** et **cochez les cases** à côté des fonctionnalités HubSpot. Vous pouvez ajouter jusqu'à 10 outils et fonctionnalités HubSpot.
* Cliquez sur le menu déroulant **Autres outils intégrés à votre logiciel** et sélectionnez les **cases à cocher** à côté de tous les outils ou applications externes avec lesquelles votre application s'intègre. Vous pouvez sélectionner jusqu'à 6 autres outils ou applications.
* Cliquez sur le menu déroulant **Langues dans lesquelles votre application est disponible** et sélectionnez toutes les **langues** disponibles pour votre application. Vous ne pouvez créer des listings du marketplace des applications supplémentaires que dans ces langues.
### Tarification
Dans l'onglet *Tarification* :
* Cliquez sur le menu déroulant **Devise** et sélectionnez les **cases à cocher** à côté des devises dans lesquelles vous souhaitez lister l'application. Vous pouvez choisir parmi plus de 100 devises.
* Vous pouvez également définir des plans tarifaires pour votre application en ajoutant le **modèle tarifaire**, le **nom de l'abonnement**, le **slogan**, les **détails de la tarification** et la **liste des fonctionnalités**.
* En fonction du modèle tarifaire choisi, vous devrez peut-être ajouter d'autres informations, comme la fréquence de paiement, les frais uniques ou les tarifs mensuels. Survolez **l'icône d'information** avec la souris pour en savoir plus sur chaque modèle tarifaire.

* Pour ajouter un plan tarifaire supplémentaire, cliquez sur **Ajouter un autre plan**. Vous pouvez ajouter jusqu'à 5 plans tarifaires.
* Dans la section *Lien vers le plans tarifaires de votre logiciel*, saisissez l'élément **URL** où les utilisateurs peuvent trouver plus d'informations sur vos plans tarifaires.
* Dans la section *Plans tarifaires de l'agence*, saisissez l'élément **URL** où les utilisateurs peuvent se renseigner sur la tarification des services de partenariat ou de conseil.
### Fonctionnalités de l'application
Dans l'onglet *Fonctionnalités de l'application*, ajoutez des fonctionnalités et guidez les clients sur la façon de les utiliser. Il n'y a pas de limite au nombre de fonctionnalités d'application pouvant être créées pour votre application.
* En haut à droite, cliquez sur **Ajouter une fonctionnalité**.
* Sur la page *Détails sur la fonctionnalité*, configurez les fonctionnalités de votre application :
* **Nom de votre fonctionnalité** : saisissez le nom de votre fonctionnalité. Il doit décrire ce que fait votre fonctionnalité.
* **Domaines** : sélectionnez tous les domaines dont un compte client a besoin pour disposer de cette fonctionnalité. Les groupes de domaines sont utilisés pour déterminer si le compte HubSpot du client est compatible avec les fonctionnalités de l'application.
* **Description** : saisissez une description détaillée de votre fonctionnalité et de la façon dont elle peut résoudre les problèmes commerciaux d'un client.
* **Image** : ajoutez une image pour votre fonctionnalité. Après avoir ajouté votre image, cliquez pour activer l'option **Sur le listing du marketplace de votre application** ou **En tant que carte de découverte de fonctionnalité** pour configurer l'emplacement où vos images doivent s'afficher.
* Si vous choisissez d'afficher la fonctionnalité en tant que carte de découverte de fonctionnalité :
* Sélectionnez une option pour votre bouton principal :
* **Lien vers une fonctionnalité** : sélectionnez la fonctionnalité HubSpot à laquelle le bouton doit être lié.
* **Créer une fonctionnalité** : saisissez le **Texte du bouton** et **l'URL du bouton**.
* **Aucun bouton principal** : aucun bouton ne s'affichera sur votre carte de découverte de fonctionnalités.
* Sélectionnez un guide pratique pour intégrer vos clients :
* **Créer un guide à partir de zéro** : saisissez un **titre**, une **description** et une **image ou une vidéo**.
* **Lien externe vers le guide :** saisissez une **URL du guide**.
* **Guide vidéo uniquement :** chargez une **vidéo**.
* Pour ajouter un autre guide, cliquez sur **Ajouter une autre section**.

### Informations sur le support
Dans l'onglet *Informations sur le support* :
* Dans la section *Informations de contact*, ajoutez une méthode de contact du support pour les utilisateurs qui ont des questions sur l'utilisation de votre application. Il est nécessaire d'ajouter un **e-mail de support** et les **langues** dans lesquelles le support client est proposé. Vous pouvez également inclure des liens vers le site web de votre entreprise, le chat en direct, la page Facebook et un numéro de téléphone.
* Dans la section *Ressources support*, incluez des **liens** vers la documentation d'installation de votre application.
* Dans la section *Conditions d'utilisation et Politique de confidentialité*, ajoutez des **liens** vers votre documentation sur la confidentialité.
### Informations sur les test
Dans l'onglet *Informations sur les tests* :
* Dans le champ *Instructions pour l'évaluation de l'application*, saisissez les étapes que les développeurs de HubSpot doivent suivre pour tester l'application dans le cadre du processus d'évaluation. Découvrez comment [fournir des détails de test et des informations d'identification pour votre application](https://developers.hubspot.com/docs).
* Dans la section *Interlocuteur du Programme Partenaires d'applications*, ajoutez les détails permettant aux membres de votre équipe de recevoir des informations sur la liste, les informations techniques et le programme de votre liste d'applications.
* Vous devez inclure au moins un *interlocuteur du programme Partenaires d'applications* et un *développeur* à contacter. Vous devez inclure le **rôle** de la personne, son **prénom** et son **nom**, son **adresse e-mail** et le **pays** où elle est basée.
* Pour ajouter une autre personne comme point de contact, cliquez en bas sur **Ajouter un autre interlocuteur**.
### Informations d'analyse
Dans l'onglet *Informations d'analyse* :
Dans la section *Évaluation de l'application* une liste de toutes les erreurs de listing apparaît :
* Pour consulter les détails de toutes les erreurs de listing, en haut, cliquez sur **Tout développer**.
* Pour masquer les détails de toutes les erreurs de listing, en haut, cliquez sur **Tout réduire**.
* Pour résoudre une erreur, cliquez sur le **nom de l'erreur**. Cela vous dirigera vers l'onglet et la section appropriés pour résoudre l'erreur.

* Si le bouton *Valider et soumettre* est grisé, vérifiez que vous avez renseigné tous les champs requis et que vous disposez des autorisations de *super administrateur*.
* Si vous avez omis des champs obligatoires, un nombre dans le titre de l'onglet indiquant le nombre de champs omis s'affichera. Cliquez sur chaque **onglet** et saisissez les informations manquantes, puis revenez à l'onglet *Informations d'analyse*.
* En bas, cliquez sur **Lancer la validation**.

## Créer et mettre à jour un listing localisé pour un listing d'application existant
Vous devrez définir une langue principale sur votre listing d'application existant et avoir déjà publié le listing principal dans le marketplace de HubSpot afin de créer des listings dans d'autres langues.
* Dans votre compte de développeur d'application, cliquez sur **Marketplace** > **Listings de applications**.
* Si vous avez déjà une application listée sur le Marketplace, une bannière jaune au-dessus de l'application listée vous demande de définir la langue principale de votre listing. Cliquez sur **Définir maintenant**. Vous devrez définir la langue principale du listing de l'application avant de pouvoir créer de nouveaux listings de langues.
* Dans la fenêtre de dialogue, cliquez sur le menu déroulant **Sélectionner les langues dans lesquelles votre application est disponible** et sélectionnez les **langues** dans lesquelles votre logiciel d'application est disponible.
* Cliquez sur le menu déroulant **Sélectionner la langue de liste principale pour \[nom de l'application]** et sélectionnez la **langue par défaut** que les utilisateurs verront lorsqu'ils navigueront sur le marketplace des applications.
* Cliquez sur **Enregistrer**.
Une fois que vous avez défini une langue principale, vous pourrez ajouter un nouveau listing localisé :
* Survolez le **listing d'application** et cliquez sur **Plus** > **Créer un listing dans une autre langue**.
* Si vous souhaitez traduire automatiquement votre liste dans d'autres langues, activez la **Traduction automatique**.
* Si vous avez sélectionné cette option, tous les listings traduits seront automatiquement et immédiatement publiés sur le marketplace. Les listings traduits automatiquement ne feront pas l'objet d'une révision par l'administrateur.
* Cliquez sur le menu déroulant **Langue pour ce listing** et sélectionnez la **langue** dans laquelle vous souhaitez créer ce listing.
* Lorsqu'un utilisateur a défini la langue dans son compte, il verra automatiquement le listing dans cette même langue. Par exemple, si vous avez créé un listing en espagnol et qu'un utilisateur a défini l'espagnol comme [langue par défaut de son compte](https://knowledge.hubspot.com/fr/account-management/change-your-language-and-region-settings), la liste apparaîtra pour l'utilisateur en espagnol.
* Si l'option de *traduction automatique* a été activée, les langues sélectionnées seront automatiquement traduites et publiées en tant que nouveaux listings.
* Cliquez sur **Créer**. Si vous créez manuellement un listing, suivez les étapes pour créer et soumettre un listing dans la langue sélectionnée.
## Modifier un listing d'application en ligne
Une fois qu'un listing d'applications est en ligne sur le marketplace des applications, vous pouvez le modifier :
* Dans votre compte de développeur, accédez à **Marketplace** > **Listing des applications**.
* Passez le curseur sur le listing que vous souhaitez modifier et cliquez sur **Plus**. Ensuite, sélectionnez **Modifier**.
* Après avoir effectué vos modifications, en haut à droite, cliquez sur **Valider et soumettre**.
* Dans la boîte de dialogue, lisez les conditions générales, puis sélectionnez les **cases à cocher**.
* Pour traduire automatiquement les modifications des listings localisés, cochez la case **Traduire automatiquement tous mes listings localisables pris en charge**. Passez la souris sur *mes listings localisables pris en charge* pour voir quels listings seront automatiquement traduits.
* Cliquez sur **Accepter et soumettre**.

## Annuler la publication d'un listing d'application en ligne
* Dans votre compte de développeur, accédez à **Marketplace** > **Listing des applications**.
* Passez le curseur de la souris sur le listing dont vous souhaitez annuler la publication et cliquez sur **Plus**. Puis, sélectionnez **Annuler la publication du listing en direct**.
* Dans la boîte de dialogue, saisissez la raison de l'annulation de la publication de l'application, puis cliquez sur **Soumettre une requête d'annulation de la publication**.
Les requêtes d'annulation de publication sont traitées par l'équipe du marketplace de HubSpot dans les 10 jours ouvrables suivant leur soumission.
# Marketplace des applications | Comprendre les catégories d'applications
Source: https://developers.hubspot.fr/docs/apps/developer-platform/list-apps/listing-your-app/understand-app-categories
# Measure app performance
Source: https://developers.hubspot.fr/docs/apps/developer-platform/list-apps/measure-app-performance
# Configurer la planification de démonstration à partir de la page de listing d'application
Source: https://developers.hubspot.fr/docs/apps/developer-platform/list-apps/set-up-demo-scheduling-from-the-app-listing-page
Découvrez comment laisser les contacts soumettre un formulaire ou planifier une réunion depuis votre page de listing d'application.
Lorsque vous configurez votre page de listing d'application, vous pouvez ajouter une page de planification et/ou un formulaire pour permettre aux clients potentiels de planifier une démonstration avec vous.
## Ajouter une page et/ou un formulaire de planification à une liste d'applications
* Dans votre compte de développeur, accédez à **Marketplace** > **Listing des applications**.
* Passez le curseur sur une liste et cliquez sur **Plus**, puis sélectionnez **Modifier**. Découvrez-en davantage sur la [création d'un listing d'application](/docs/apps/developer-platform/list-apps/listing-your-app).
* Dans l'onglet *Informations sur les listings*, ajoutez des options pour planifier une démonstration :
* Pour ajouter un lien de prise de rendez-vous, cliquez sur le menu déroulant **Ajouter l'URL de vos réunions** et sélectionnez une **page de planification**. Pour créer une nouvelle page de planification, cliquez sur **Créer un lien de prise de rendez-vous**. Découvrez-en davantage sur l'utilisation de [pages de planification](https://knowledge.hubspot.com/meetings-tool/create-and-edit-scheduling-pages).
* Pour ajouter un formulaire, cliquez sur le menu déroulant **Ajouter un formulaire de contact** et sélectionnez un **formulaire**. Pour créer un nouveau formulaire, cliquez sur **Créer un formulaire de contact**. Découvrez-en davantage sur [l'utilisation de formulaires de contact](https://knowledge.hubspot.com/forms/create-and-edit-forms).

* Dans l'angle supérieur droit, cliquez sur **Valider et soumettre**.
Une fois vos modifications approuvées, vos clients verront une option dans l'angle supérieur droit de votre listing d'application pour planifier une démonstration ou demander à être contactés. Si vous avez ajouté une page de planification et un formulaire de contact, les deux options seront disponibles dans le menu déroulant *Planifier une démonstration*.

# Marketplace des applications | Fournissez les informations d'identification de test pour votre application
Source: https://developers.hubspot.fr/docs/apps/developer-platform/list-apps/testing-credentials
# Understand updated app installation flow with the option for partner sign in
Source: https://developers.hubspot.fr/docs/apps/developer-platform/list-apps/understand-app-install-flow
# Understand technology partner tiers
Source: https://developers.hubspot.fr/docs/apps/developer-platform/list-apps/understand-technology-partner-tiers
# Afficher les contacts créés à partir du Marketplace
Source: https://developers.hubspot.fr/docs/apps/developer-platform/list-apps/view-contacts-created-from-the-marketplace
Découvrez comment accéder à une liste de contacts qui ont interagi avec vos listings d'applications du marketplace de HubSpot.
Lorsque des contacts interagissent avec votre listing d'application du marketplace HubSpot, ils sont ajoutés à une liste de contacts spécifique dans le compte de développeur associé. Vous pouvez ensuite les contacter pour voir si l'application répondrait à leurs besoins.
## Avant de commencer
Avant de commencer à travailler avec cette fonctionnalité, assurez-vous de bien comprendre les étapes à suivre à l'avance, ainsi que ses limites.
### Comprendre les exigences
* Le compte de développeur associé à l'application doit utiliser les outils gratuits de HubSpot.
* Les contacts apparaîtront sur la liste lorsqu'ils effectueront l'une des actions suivantes sur votre listing d'application :
* Cliquez sur une vidéo ou une capture d'écran.
* Cliquez sur « Afficher le guide d'installation ».
* Cliquez sur « Site Web de l'entreprise ».
### Comprendre les limites et les considérations
* Seuls les contacts connectés à HubSpot lorsqu'ils accèdent au listing d'applications seront ajoutés à la liste.
## Accéder aux contacts du listing d'applications
* Dans le compte de développeur HubSpot associé à votre application, accédez à **CRM** > **Listes**.
* Cliquez sur la **liste** intitulée « marketplace des applications - \[Nom de l'application] ». Si vous avez plusieurs applications, chacune d'entre elles aura une liste séparée.

* Vous pouvez voir les informations suivantes pour les contacts :
* Premier Nom
* Nom de famille
* Entreprise
* E-mail
# Mappage des alias
Source: https://developers.hubspot.fr/docs/cms/start-building/building-blocks/fields/alias-mapping
# Héritage des paramètres de marque
Source: https://developers.hubspot.fr/docs/cms/start-building/building-blocks/fields/brand-and-settings-inheritance
Découvrez comment utiliser les paramètres de marque, tels que les logos et les couleurs de marque, dans un thème ou dans des fichiers HubL/HTML et CSS.
Grâce aux [paramètres de marque](https://knowledge.hubspot.com/settings/customize-branding-for-your-hubspot-content#customize-your-company-logo-and-colors), les utilisateurs peuvent configurer les couleurs, les logos et les favicons de l'entreprise à utiliser dans les contenus HubSpot. Cela vous permet d'accéder à ces paramètres de marque avec des jetons dans le fichier `fields.json` d'un thème et dans les fichiers HTML/HubL et CSS. Vous pouvez également accéder aux couleurs de la marque dans le fichier `fields.json` d'un module.
Après avoir ajouté ces jetons dans un fichier `fields.json`, les créateurs de contenu peuvent modifier leurs valeurs dans l'éditeur de paramètres de thème. Lorsque vous ajoutez ces jetons dans un HTML, un HubL ou un CSS, les valeurs seront fortement codées et ne pourront pas être modifiées dans l'éditeur de page par les créateurs de contenu.
Découvrez ci-dessous les variables de configuration de marque disponibles ainsi que des exemples de mise en œuvre.
## Variables des paramètres de marque
La liste suivante est une liste des options accessibles depuis la zone des paramètres de la marque, dans la valeur de l'objet `property_value_paths` ou dans les fichiers HTML/HubL et CSS.
### Couleurs
Les couleurs de la marque sont accessibles à la fois dans le [fichier fields.json](#fields-json-color) d'un thème ou d'un module et dans les fichiers HTML/HubL et CSS à l'aide des jetons HubL suivants :
* **Principal :**
* `{{brand_settings.primaryColor}}`
* `{{brand_settings.colors[0]}}`

* **Secondaire :** `{{brand_settings.secondaryColor}}`

* **Couleurs du thème :**
* `{{brand_settings.accentColor1}}`
* `{{brand_settings.accentColor2}}`
* `{{brand_settings.accentColor3}}`

* **Couleurs supplémentaires :**
* `{{brand_settings.colors[1]}}`
* `{{brand_settings.colors[2]}}`
* `{{brand_settings.colors[3]}}`

Pour accéder directement au code hexadécimal d'une couleur, incluez un filtre `hex` dans le jeton. Par exemple : `{{brand_settings.primaryColor.hex}}`
Pour inclure les couleurs des paramètres de marque dans le fichier `fields.json` d'un thème ou d'un module, utilisez le format suivant :
```json theme={null}
//Example of using the primary color in within a theme's
// field.json file
{
"name": "branding_color",
"label": "branding_color",
"type": "color",
"default": {
"color": "#26ff55",
"opacity": 60
},
"inherited_value": {
"property_value_paths": {
"color": "brand_settings.primaryColor"
}
}
}
```
> [!WARNING]
>
> Il se peut que les comptes n'aient pas de couleurs supplémentaires configurées dans leurs paramètres de marque. Si votre code fait référence à une couleur héritée qui n'existe pas dans les paramètres de marque, la logique de repli suivante est utilisée :
>
> * `secondaryColor` revient à la première couleur supplémentaire (`colors[1]`).
> * `accentColor1` revient à la deuxième couleur supplémentaire (`colors[2]`).
> * `accentColor2` revient à la troisième couleur supplémentaire (`colors[3]`).
> * `accentColor3` revient à la quatrième couleur supplémentaire (`colors[4]`).
> * Les couleurs supplémentaires (par exemple : `colors[3]`) reviendront à la valeur `default`. S'il n'y a pas de jeu de couleur de propriété par défaut, `primaryColor` sera utilisé.
### Logos
Les logos de marques sont accessibles dans le fichier `fields.json` d'un module et dans les fichiers HTML/HubL et CSS.
Vous pouvez utiliser les jetons suivants pour accéder au logo principal défini dans les paramètres de la marque :
* `{{brand_settings.primaryLogo}}`
* `{{brand_settings.logos[0]}}`

Tous les logos supplémentaires sont accessibles en utilisant `{{brand_settings.logos[1-19]}}`.
En outre, vous pouvez accéder aux attributs de logo suivants :
* **URL du logo :** `{{brand_settings.primaryLogo.link}}`
* **Texte alternatif du logo :** `{{brand_settings.primaryLogo.alt}}`
* **Hauteur du logo :** `{{brand_settings.primaryLogo.height}}`
* **Largeur du logo :** `{{brand_settings.primaryLogo.width}}`
* **Lien vers l'image du logo :** `{{brand_settings.primaryLogo.src}}`
### Favicons
Les favicons de marques ne sont accessibles que dans les fichiers HTML/HubL et CSS.
Vous pouvez utiliser les jetons suivants pour accéder au logo principal défini dans les paramètres de la marque :
* `{{brand_settings.primaryFavicon}}`
* `{{brand_settings.favicons[0]}}`

Tous les favicons supplémentaires sont accessibles en utilisant `{{brand_settings.favicons[1-19]}}`.
Vous pouvez accéder directement à l'URL du logo en incluant un filtre `src`. Par exemple : `{{brand_settings.primaryFavicon.src}}`.
# Ajouter des polices personnalisées à un thème
Source: https://developers.hubspot.fr/docs/cms/start-building/building-blocks/fields/custom-fonts
# oEmbed
Source: https://developers.hubspot.fr/docs/cms/start-building/building-blocks/fields/oembed
# Écrire les champs du module et du thème à l'aide de JavaScript
Source: https://developers.hubspot.fr/docs/cms/start-building/building-blocks/fields/write-fields-using-javascript
# Contenu global
Source: https://developers.hubspot.fr/docs/cms/start-building/building-blocks/global-content
`Le contenu global est un contenu qui peut être réutilisé dans tous vos modèles pour créer des éléments d'information cohérents, tels que des en-têtes de site Web, des pieds de page, des barres latérales, des logos ou d'autres éléments.`
Le contenu global est un contenu qui est partagé entre plusieurs rubriques d'un site Web. Les exemples courants sont les en-têtes, les pieds de page et les barres latérales de sites web. En tant que développeur, vous spécifierez quels composants doivent être globaux en utilisant des partials globaux ou en rendant les modules globaux. HubSpot propose une expérience d'édition différente pour les éditeurs de contenu qui leur permet de modifier facilement le contenu global et de prévisualiser les modifications sur les pages avant de les publier. Pour en savoir plus sur la modification de votre contenu global, veuillez consulter l'article [Utiliser du contenu global dans plusieurs modèles](https://knowledge.hubspot.com/design-manager/use-global-content-across-multiple-templates) de la base de connaissances HubSpot.

## Présentation
Le contenu global est idéal pour afficher les mêmes informations sur plusieurs pages. Par exemple, l'en-tête et le pied de page de votre site web, tout comme l'en-tête en haut de cette page.

Vous trouverez ci-dessous d'autres exemples de domaines dans lesquels vous pouvez utiliser le contenu global :
* Navigation secondaire dans les différentes rubriques de votre site Web
* Pieds de page (ou sous-pieds) avec les droits d'auteurs
* Barres latérales des articles de blog (pour afficher les articles récents, une liste des auteurs, etc.)
> [!WARNING]
>
> Le contenu global étant utilisé à de multiples endroits sur un site Web, il est d'autant plus important de [concevoir et d'élaborer vos partials et modules globaux dans un souci d'accessibilité](/docs/cms/best-practices/improve-existing-sites/accessibility).
### Partials globaux vs Modules globaux
En tant que développeur, vous pouvez créer des partials globaux et des modules globaux, avec quelques différences clés entre les deux :
* Les partials globaux sont un type de modèle créé à l'aide de HTML et HubL qui peut être réutilisé sur l'ensemble de votre site web. Les types de partials les plus courants sont les en-têtes de sites Web, les barres latérales et les pieds de page.
* Les modules globaux sont des modules composés d'un ou plusieurs éléments de contenu qui peuvent être utilisés sur plusieurs pages de votre site. Parmi les types courants de modules globaux figurent des éléments tels que les formulaires d'inscription au blog, les éléments de navigation secondaire et les appels à l'action.
Veuillez éviter d'inclure des modules globaux dans les partials globaux, car cela peut créer une expérience d'édition de contenu négative.
> [!NOTE]
>
> Tous les modules et champs de vos partials et modules globaux sont facilement modifiables dans l'[éditeur de contenu global](https://knowledge.hubspot.com/design-manager/use-global-content-across-multiple-templates).
## Partials globaux
### Créer un partial global
Un partial global est un type de modèle que vous pouvez créer localement via l'ILC de HubSpot à l'aide de la [commande create](https://developers.hubspot.fr/docs/guides/cms/tools/local-development-cli#create), comme indiqué ci-dessous.
```shell theme={null}
hs create template
```
Lorsque vous êtes invité à choisir un type de modèle, sélectionnez `global partial`.
Cela créera votre modèle dans le répertoire souhaité avec les annotations de modèle suivantes incluses dans le fichier HTML.
```html theme={null}
```
Pour voir un exemple de partial de contenu global, [veuillez consulter notre modèle sur GitHub.](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/partials/header.html)
Ajouter des zones de glisser-déposer à des partials globaux
Vous pouvez activer les fonctionnalités de glisser-déposer de contenu dans vos partials globaux en ajoutant des balises `dnd_area` similaires à celles des modèles de page. Pour plus d'informations, consultez notre [documentation sur la zone de glisser-déposer](/docs/cms/reference/hubl/tags/dnd-areas).
### Inclure un partial global dans votre modèle existant
Pour ajouter un partial global dans l’un de vos modèles existants, utilisez la balise HubL `global_partial` tout en faisant référence au chemin d’accès à votre partial. Vous trouverez ci-dessous un exemple tiré du [boilerplate du CMS](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/layouts/base.html#L21) utilisant cette balise.
```hubl theme={null}
{% global_partial path="../partials/header.html" %}
```
Lorsque des partials globaux sont générés, ils contiennent un cadre `
` autour du partial global. Cet élément est utilisé par l'éditeur de page pour identifier que le contenu est un partial global.
```html theme={null}
```
> [!WARNING]
>
> ### Remarque:
>
> n'utilisez pas `global_partial` dans le `` d’un modèle. Cela déboucherait sur un HTML non valide.
>
> Dans la plupart des situations où vous souhaitez utiliser un partial global dans l’en-tête, il peut être plus logique d’utiliser un module global à la place, avec un [`{%require_head%}`](/docs/cms/reference/hubl/tags/standard-tags#require-head) pour insérer du code personnalisé dans l’en-tête, tout en fournissant des champs de module.
## Modules globaux
Vous pouvez créer des modules globaux comme tout autre module via le ILC en exécutant la commande `hs create`, comme indiqué ci-dessous.
```shell theme={null}
hs create module
```
Un module global est différencié par l’indicateur `global` dans le fichier `meta.json` du module.
```json theme={null}
// meta.json file
{
"css_assets": [],
"external_js": [],
"global": true,
"help_text": "",
"host_template_types": ["PAGE"],
"js_assets": [],
"other_assets": [],
"smart_type": "NOT_SMART",
"tags": [],
"is_available_for_new_content": false
}
```
Vous pouvez également [créer des modules globaux dans HubSpot à l'aide du gestionnaire de conception](https://knowledge.hubspot.com/design-manager/create-and-edit-modules).
Pour en savoir plus sur l'utilisation des modules, consultez les ressources connexes suivantes :
* [Vue d'ensemble des modules](https://developers.hubspot.fr/docs/guides/cms/content/modules/overview)
* [Modules par défaut de HubSpot](/docs/cms/reference/modules/default-modules)
* [Configuration de modules](/docs/cms/reference/modules/configuration)
* [Utilisation de modules dans les modèles](/docs/cms/reference/modules/using-modules-in-templates)
# Recherche de contenu
Source: https://developers.hubspot.fr/docs/cms/start-building/building-blocks/modules/content-search
Utilisation de la fonctionnalité de recherche native du site dans HubSpot CMS, Content Search. HubSpot CMS dispose d'une fonctionnalité intégrée de recherche sur le site pour permettre à vos visiteurs de trouver facilement le contenu qu'ils recherchent.
HubSpot CMS dispose d'une fonctionnalité intégrée de recherche sur le site pour permettre à vos visiteurs de trouver facilement le contenu qu'ils recherchent. Tout votre contenu HubSpot est automatiquement indexé dans le moteur de recherche natif de HubSpot, ce qui vous évite de devoir configurer un outil de recherche tiers pour votre site Web.
## Recherche de contenu en cours
Le moteur de recherche est accessible via l'[API de recherche de site](/docs/api-reference/cms-site-search-v3/guide). Cette API prend en charge de nombreuses options de filtrage pour vous permettre de créer une expérience de recherche puissante et hautement personnalisée sur votre site Web. Par exemple, si vous souhaitez effectuer une recherche sur votre blog, vous pouvez utiliser l'option `type=BLOG_POST` pour obtenir uniquement les articles de blog. Ou, si vous voulez intégrer la recherche dans la version espagnole de votre site Web, vous pouvez interroger `langue=es` pour ne renvoyer que les pages en espagnol.
L'API les renvoie au format JSON qui peut être analysé avec JavaScript pour afficher les résultats sur votre site Web. Tous les types de contenu renverront le domaine, le titre, l'URL et la langue de la page. La description renvoyée est un échantillon de texte du contenu qui correspond le mieux au terme recherché. Un élément `` encadrera le texte parfaitement adapté, ce qui vous permettra de mettre en évidence le texte correspondant avec la CSS.
Selon le type de contenu recherché, les résultats renvoient des informations légèrement différentes. Vous pouvez ainsi afficher différemment les résultats pour des types de contenu spécifiques. Par exemple, les articles de blog renverront des informations sur les balises de l'article, l'auteur et la date de publication.
```json theme={null}
// json
{
"total": 850,
"offset": 0,
"limit": 10,
"results": [
{
"id": 3761238962,
"score": 0.30858153,
"type": "SITE_PAGE",
"domain": "designers.hubspot.com",
"url": "https://developers.hubspot.com/docs/cms/search",
"language": "en",
"title": "Content Search",
"description": "Using HubSpot’s native search engine, content search, to implement search on your website"
},
{
"id": 3254581958,
"score": 0.30858153,
"type": "BLOG_POST",
"domain": "designers.hubspot.com",
"url": "https://designers.hubspot.com/blog/getting-started-with-local-development",
"featuredImageUrl":"https://designers.hubspot.com/hubfs/local-development.jpg"
"title": "Getting Started with Local Development",
"description":"The beta Local Development Tooling connects your local workflow to HubSpot, allowing you to utilize version control, your favorite text editor and various web development technologies when developing on the HubSpot CMS."
"authorFullName": "William Spiro",
"tags": [
"Website Development",
"Local Development"
],
"publishedDate": 1447938000000
}
}
```
## Appliquer la recherche sur votre site Web
Il existe deux modules par défaut à utiliser pour appliquer facilement la recherche sur votre site Web, qui utilisent l'[API de recherche de site](/docs/api-reference/cms-site-search-v3/guide) : `search_input` et `search_results`.
### Barre de recherche du site
Une barre de saisie dans laquelle les visiteurs peuvent saisir des termes à rechercher. Ce module peut se trouver n'importe où sur votre site Web. Ce module peut être inclus dans un modèle avec `{% module "search_input" path="@hubspot/search_input" %}`.
```hubl theme={null}
{% module "search_input" path="@hubspot/search_input" %}
```
### Résultats de la recherche sur le site
Renvoie une liste de contenu basée sur le terme recherché. Ce module peut se trouver n'importe où sur votre site Web. Ce module peut être inclus dans un modèle avec
```hubl theme={null}
{% module "search_results" path="@hubspot/search_results" %}
```
Si la fonctionnalité de ces modules ne correspond pas à la manière dont vous souhaitez que la recherche fonctionne sur votre site Web, vous pouvez créer vos propres modules ou fonctionnalités de recherche. Les modules de recherche par défaut sont conçus pour être étendus en fonction de vos besoins de recherche. Vous pouvez visualiser et cloner ces modules dans le Gestionnaire de conception en recherchant leurs noms dans le Finder, ou vous pouvez les récupérer dans votre environnement local à l'aide de la [CLI CMS](https://developers.hubspot.fr/docs/guides/cms/tools/local-development-cli) en exécutant `hs fetch @hubspot/search_input.module` ou `hs fetch @hubspot/search_results.module`.

## Modèle de résultats de recherche
Chaque domaine a sa propre page de résultats de recherche par défaut. Le modèle et le chemin d'accès de cette page sont définis dans **Paramètres > Site Web > Pages** sous l' [onglet Pages système](https://app.hubspot.com/l/settings/website/pages/all-domains/system-pages) pour des domaines spécifiques. Par exemple, consultez le [modèle de boilerplate de résultats de recherche du thème CMS](https://github.com/HubSpot/cms-theme-boilerplate/blob/master/src/templates/system/search-results.html). Le domaine défini pour la page de résultats de recherche est automatiquement connecté aux modules de recherche par défaut. Cependant, vous pouvez utiliser l'[API de recherche de site web](/docs/api-reference/cms-site-search-v3/guide) pour créer vos résultats de recherche comme vous le souhaitez sur n'importe quelle page de votre site web.
## Comment la priorité de la recherche est-elle déterminée ?
L'ordre des résultats de recherche est déterminé par une série de comparaisons pondérées du contenu de la page par rapport au terme recherché par le visiteur. Le contenu de la page est séparé en champs de comparaison avec une pondération différente en fonction de l'endroit où se situe le contenu dans le code HTML de vos pages. Les champs de comparaison sont regroupés par ordre d'importance :
1. Titre HTML
2. Métadescription
3. Éléments HTML H1
4. Éléments HTML H2
5. Éléments HTML H3
6. Autres éléments HTML
Remarque : Cette liste est susceptible d'être modifiée.
Si vous souhaitez indiquer à notre indexeur de booster spécifiquement certains éléments d'une page, vous pouvez encadrer le contenu dans une classe `hs-search-keyword`.
## Contrôle de l'indexation pendant le développement
Lors du développement d'un nouveau site, il est utile de pouvoir tester la recherche sur le site sans se soucier de son indexation par les moteurs de recherche tels que Google.
Dans votre [`robots.txt`](https://knowledge.hubspot.com/fr/cos-general/customize-your-robots-txt-file) vous pouvez demander à HubSpot de tout explorer, tout en bloquant les autres robots.
```shell theme={null}
# Block all bots
User-agent: *
Disallow: /
# Allow HubSpot Site Search Indexing
User-agent: HubSpotContentSearchBot
Allow: /
```
> [!WARNING]
>
> Si l'une de vos pages comporte une balise méta indiquant « no index », la page ne sera toujours pas indexée, même si elle est autorisée dans le fichier `robots.txt`.
>
> N'oubliez pas de vérifier votre fichier `robots.txt` avant le lancement pour vous assurer que tout est indexé comme vous le souhaitez.
## Comportement d'indexation par défaut
Comme le CMS connaît l'intention de certains types de pages, la recherche de contenu est en mesure de limiter l'indexation en toute sécurité pour permettre l'indexation des pages de type contenu. Exemples de pages de type contenu :
* Pages du site
* Pages de destination
* Articles de la base de connaissances
* Articles de blog
**Les pages système et les pages protégées par un mot de passe ne sont pas indexées.** Les pages réservées au contrôle de l'accès au CMS ne s'afficheront dans la recherche de contenu de HubSpot que pour les utilisateurs qui sont connectés et ont accès aux pages.
## Comment puis-je exclure des pages des résultats de recherche ?
Si vous empêchez une page d'être indexée par les moteurs de recherche via le fichier de votre site Web [`robots.txt`](https://knowledge.hubspot.com/fr/cos-general/customize-your-robots-txt-file) ou via les balises `meta`, elle ne sera pas indexée pour la recherche sur le site.
Dans votre `fichier robots.txt`, ajoutez `disallow`.
```shell theme={null}
# Block all bots
User-agent: *
Disallow: /path-to-page
# Block just HubSpot Site Search Indexing
User-agent: HubSpotContentSearchBot
Disallow: /path-to-page
```
Vous pouvez également ajouter une métabalise `NOINDEX, NOFOLLOW` dans `` au niveau de la page ou du modèle.
```html theme={null}
```
> [!TIP]
>
> Il n'est pas nécessaire de bloquer les robots en utilisant à la fois `robots.txt` et la balise meta. Cela peut prêter à confusion si vous décidez d'autoriser l'indexation d'une page.
## Comment exclure des sections d'une page de l'indexation dans les recherches ?
Parfois, certaines zones d'une page ne sont pas utiles à faire apparaître dans les résultats de recherche. Il peut s'agir du contenu d'un en-tête, d'un pied de page, d'une barre latérale, etc. Lorsque c'est le cas, vous pouvez ajouter la classe `hs-search-hidden` à votre HTML pour que la recherche ignore le contenu de ces zones.
# Modules d'e-mail par défaut
Source: https://developers.hubspot.fr/docs/cms/start-building/building-blocks/modules/default-email-modules
# Formulaires HubSpot
Source: https://developers.hubspot.fr/docs/cms/start-building/building-blocks/modules/forms
Découvrez comment ajouter des formulaires à votre site web HubSpot ou à des pages externes à l'aide de modules, de HubL ou d'un code d'intégration. Ensuite, découvrez comment les styliser.
Utilisez des formulaires HubSpot pour capturer les informations des visiteurs du site, auxquelles vous pouvez accéder via HubSpot. Vous pouvez partager des liens vers des formulaires directement avec les utilisateurs, [soumettre des données de formulaire via l'API](https://developers.hubspot.fr/docs/guides/api/marketing/forms) et les intégrer sur les pages de votre site web à l'aide du CMS.
Les formulaires font partie intégrante de HubSpot et peuvent être créés dans un compte HubSpot de n'importe quel niveau d'abonnement. Non seulement les formulaires sont importants pour la conversion des clients, mais aussi parce que les données des formulaires peuvent être utilisées dans d'autres outils et ressources HubSpot, tels que le contenu intelligent, les listes, les workflows, la personnalisation du contenu, etc.
Après avoir [créé un formulaire HubSpot](https://knowledge.hubspot.com/fr/forms/create-forms), vous pouvez l'ajouter à vos modèles et pages. Il existe plusieurs façons d'ajouter un formulaire à un modèle, en fonction de votre cas d'utilisation :
* [Utilisation du module de formulaire par défaut](#the-default-form-module)
* [Ajout d'un champ de formulaire à un module personnalisé](#form-fields-in-custom-modules)[](#using-the-form-hubl-tag)
* [Intégration à l'aide du code d'intégration de formulaire](#using-the-form-embed-code)
## Le module de formulaire par défaut
Si votre modèle comporte [des zones de glisser-déposer](/docs/cms/reference/hubl/tags/dnd-areas), les créateurs de contenu peuvent ajouter le [module de formulaire par défaut](/docs/cms/reference/modules/default-modules#form) à une page à partir de l'éditeur de page, puis configurer les options de formulaire dans la barre latérale gauche.
Pour coder un module de formulaire directement dans un modèle avec des zones de glisser-déposer, mentionnez-le en tant que `dnd_module`.
```hubl theme={null}
{% dnd_area "dnd_area" class='body-container body-container__landing', label='Main section' %}
{% dnd_section vertical_alignment='MIDDLE' %}
{% dnd_column width=6, offset=6 %}
{% dnd_row %}
{% dnd_module path='@hubspot/form' %}
{% end_dnd_module %}
{% end_dnd_row %}
{% end_dnd_column %}
{% end_dnd_section %}
{% end_dnd_area %}
```
Pour ajouter un module de formulaire à un modèle en dehors d'une zone de glisser-déposer, mentionnez-le plutôt comme un `module` standard.
```hubl theme={null}
{% module "form"
path="@hubspot/form"
form={
"form_id": "9e633e9f-0634-498e-917c-f01e355e83c6",
"response_type": "redirect",
"message": "Thanks for submitting the form.",
"redirect_id": null,
"redirect_url": "http://www.google.com"
}
%}
```
Avec l'une ou l'autre implémentation, vous pouvez ajouter des paramètres au libellé de module pour spécifier des paramètres tels que le formulaire à utiliser et les options de redirection, comme indiqué dans l'exemple de code ci-dessus. Voir la [documentation des modules par défaut](/docs/cms/reference/modules/default-modules#form) pour plus d'informations sur les paramètres disponibles.
### Cloner le module par défaut
En plus d'utiliser le module par défaut tel quel, vous pouvez le cloner pour le rendre modifiable, ce qui vous permet de le personnaliser au besoin. Par exemple, vous pouvez cloner le module de formulaire par défaut, ajouter un champ de couleur, puis envelopper le code HTML du module dans un libellé `` avec un style pour ajouter la couleur en arrière-plan :
* Dans le gestionnaire de conception de la barre latérale gauche, accédez au dossier **@hubspot**, puis cliquez avec le bouton droit sur **form.module** et sélectionnez **Cloner le module**.

* Dans la barre latérale droite, cliquez sur **Ajouter un champ**, puis sélectionnez **Couleur**.
* Ajoutez un libellé `` autour du contenu HTML, puis ajoutez un style pour référencer le champ de couleur, tel que :
``

## Champs de formulaire dans les modules personnalisés
Lors de la création d'un module personnalisé, vous pouvez y inclure un formulaire en ajoutant un [champ de formulaire](/docs/cms/reference/fields/module-theme-fields#form), ainsi que le bloc de code du champ au module HTML. Par exemple, vous pouvez ajouter un formulaire de demande de consultation à un module qui contient une image d'un produit et une proposition de valeur descriptive.
Pour ajouter un champ de formulaire à un module personnalisé à partir du gestionnaire de conception :
* Dans la barre latérale droite de l'éditeur de module, cliquez sur **Ajouter un champ**, puis sélectionnez **Formulaire**.

* Après avoir ajouté le champ, passez la souris sur le champ dans la barre latérale droite, puis cliquez sur **Actions** et sélectionnez **Copier le bloc de texte**.

* Collez le bloc de texte dans le champ HTML du module.

### Limiter les options de formulaire dans l'éditeur
Une fois ajouté à une page, les créateurs de contenu ont généralement le contrôle sur de nombreux aspects du formulaire, y compris le formulaire à utiliser et les champs de formulaire eux-mêmes. Cependant, vous pouvez limiter la quantité de contrôle donnée dans l'éditeur de page en modifiant [localement](/docs/developer-tooling/local-development/hubspot-cli/install-the-cli) le fichier `fields.json` du module de formulaire pour inclure les champs suivants :
| Paramètre | Type | Description |
| - | - | - |
| `disable_inline_form_editing` | Chaîne | Permet de définir la propriété `disable_inline_form_editing` sur la valeur `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"`. |
Par exemple, si vous avez créé un module qui ne doit être utilisé que pour les formulaires permettant aux visiteurs de contacter les différents services de votre entreprise, vous pouvez autoriser les créateurs de contenu à ne sélectionner que les formulaires qui utilisent les propriétés des tickets.
```json theme={null}
// Form field
{
"id": "843b4f0f-0ed7-5b10-e86a-5cc8a0f11a0c",
"name": "form_field_1",
"display_width": null,
"label": "Form",
"required": false,
"locked": false,
"type": "form",
"disable_inline_form_editing": true,
"required_property_types": ["TICKET"],
"default": {
"response_type": "inline",
"message": "Thanks for submitting the form."
}
}
```
## Utiliser le code d'intégration de formulaire
Lorsqu'un module ou une balise HubL n'est pas la solution idéale, ou si vous souhaitez ajouter un formulaire à une page externe, vous pouvez l'intégrer à la place en utilisant le [code d'intégration de formulaire](https://knowledge.hubspot.com/fr/forms/how-can-i-share-a-hubspot-form-if-im-using-an-external-site#add-the-form-embed-code). Vous pouvez également personnaliser le code d'intégration du formulaire pour étendre les fonctionnalités du formulaire. Affichez toutes les options de personnalisation du code d'intégration de formulaire et plus encore dans le guide de référence des formulaires.
> [!WARNING]
>
> ### Remarque :
>
> * Les options de personnalisation de formulaire sont uniquement disponibles pour les formulaires créés dans HubSpot qui ont été [définis comme HTML brut](https://knowledge.hubspot.com/fr/forms/how-can-i-share-a-hubspot-form-if-im-using-an-external-site#with-css-in-your-external-stylesheet-marketing-hub-professional-enterprise-or-legacy-marketing-hub-basic-only). Le compte HubSpot doit disposer d'un abonnement ***Marketing Hub*** ou ***Content Hub*** *Pro* ou *Entreprise*.
> * Les formulaires HubSpot ne doivent être chargés qu'à l'aide du fichier JavaScript hébergé par HubSpot. Faire une copie du code d'intégration du formulaire et l'héberger soi-même n'est pas pris en charge. Les améliorations apportées par HubSpot pour améliorer la sécurité, l'antispam, l'accessibilité et les performances ne se répercuteront pas sur votre formulaire si vous décidez d'héberger vous-même le code intégré de formulaire HubSpot.
Vous trouverez ci-dessous un exemple de code d'intégration de formulaire sans aucune personnalisation.
```html theme={null}
```
| Paramètre | Type | Description |
| - | - | - |
| `portalId` | Nombre ou chaîne | L'ID du compte HubSpot dans lequel le formulaire a été créé. Il est utilisé pour récupérer la définition du formulaire. |
| `formId` | Chaîne | L'ID du formulaire, qui est utilisé pour récupérer la définition du formulaire. |
| `region` | String | La [région](https://knowledge.hubspot.com/fr/account-security/hubspot-cloud-infrastructure-and-data-hosting-frequently-asked-questions) du compte dans laquelle le formulaire a été créé. Il est utilisé pour récupérer la définition du formulaire. Les valeurs possibles sont : `na1` ou `eu1`. |
### Ajouter une internationalisation
Par défaut, HubSpot fournit un nombre de messages de validation dans de nombreuses langues différentes, auxquels vous pouvez accéder à l'aide du paramètre `locale`. Vous pouvez également ajouter des langues personnalisées ou remplacer les messages d'erreur et les mois/jours du sélecteur de date affichés sur le formulaire à l'aide du paramètre `translation`.
Découvrez-en davantage sur l'internationalisation et les messages d'erreur de validation de formulaire dans la [documentation de référence sur les formulaires](https://developers.hubspot.fr/docs/reference/cms/forms).
```js theme={null}
hbspt.forms.create({
portalId: "",
formId: "",
locale: "en",
translations: {
en: {
fieldLabels: {
email: "Electronic mail",
},
required: "Hey! That's required!",
submitText: "Custom Submit Button Text",
submissionErrors: {
MISSING_REQUIRED_FIELDS: "Please fill in all required fields!",
},
},
},
});
```
## Événements de formulaires
Les formulaires offrent deux façons de lier des fonctionnalités à des événement : les rappels dans le code intégré de formulaire HubSpot et les événements de formulaire global. Pour en savoir plus sur les rappels de code d'intégration de formulaire disponibles et les événements de formulaire globaux, consultez la [documentation de référence sur les formulaires](https://developers.hubspot.fr/docs/reference/cms/forms).
```js theme={null}
// Example form embed code callback
hbspt.forms.create({
portalId: "",
formId: "",
onBeforeFormSubmit: function ($form) {
// YOUR SCRIPT HERE
},
});
// Example listener
window.addEventListener("message", event => {
if (event.data.type === "hsFormCallback" && event.data.eventName === "onFormSubmitted") {
someAnalyticsLib("formSubmitted");
console.log("Form Submitted! Event data: ${event.data}");
}
});
```
## Style de formulaire
Bien que HubSpot propose [un style de formulaire à partir d'un paramètre global](https://knowledge.hubspot.com/fr/forms/set-global-form-colors-and-fonts) et [un niveau de paramètre spécifique au formulaire](https://knowledge.hubspot.com/fr/forms/create-forms#style-and-preview-your-form), vous pouvez également créer un style de formulaire en fonction de son ajout à vos pages CMS.
> [!WARNING]
>
> ### Remarque :
>
> Tous les formulaires générés sur le CMS Hub (sauf via le code d'intégration de formulaire) ignoreront les styles configurés via les paramètres de formulaire globaux ou les paramètres spécifiques à chaque formulaire.
### Styliser des formulaires via le module de formulaire par défaut ou la balise HubL
Les formulaires HubSpot ajoutés aux pages HubSpot peuvent être stylisés à l'aide de la CSS de votre site web. HubSpot comprend un certain nombre de classes et d'attributs différents sur les formulaires générés où vous pouvez appliquer un style. Pour commencer, veuillez consulter la [CSS de formulaire du boilerplate HubSpot](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/css/elements/_forms.css), qui présente les bonnes pratiques pour styliser les formulaires.
### Styliser des formulaires via un module personnalisé
Les formulaires à l'intérieur de modules personnalisés peuvent être stylisés via une CSS dans le volet CSS du module dans le gestionnaire de conception. En étendant la CSS au module, le style accompagnera le module chaque fois qu'il sera ajouté à une page. Il est recommandé d'ajouter un encadrement au formulaire, puis d'utiliser ce wrapper en tant que sélecteur de niveau principal pour la CSS. Cela empêchera le style de formulaire de votre module personnalisé d'être remplacé par des styles supplémentaires dans la feuille de style principale de vos sites web. Voici une capture d'écran du module personnalisé avec un style de formulaire ajouté au volet CSS.

### Définir un style personnalisé pour les formulaires intégrés
Si vous disposez d'un abonnement ***Marketing Hub*** ou ***CMS Hub*** *Pro* ou *Entreprise*, vous pouvez utiliser les définitions de variables CSS pour définir des styles globaux, personnaliser des boutons et d'autres entrées, ainsi que styliser vos formulaires à plusieurs étapes et vos barres de progression.
Découvrez-en davantage sur l'[application de définitions CSS personnalisées à votre formulaire intégré](https://developers.hubspot.fr/docs/reference/cms/forms#define-custom-styling-for-embedded-forms-using-css).
### Styliser des formulaires ajoutés via le code d'intégration de formulaire
Lorsque vous utilisez le code d'intégration de formulaire, vous pouvez styliser le formulaire en utilisant les [paramètres de style de formulaire globaux](https://knowledge.hubspot.com/fr/forms/set-global-form-colors-and-fonts) ou en utilisant la CSS de votre site web.
L'utilisation des paramètres de style de formulaire globaux vous permet de configurer les paramètres par défaut pour chaque formulaire du compte. Vous pouvez également [remplacer ces styles pour un formulaire dans l'éditeur de formulaire](https://knowledge.hubspot.com/fr/forms/create-forms#style-and-preview-your-form).

Si vous disposez d'un abonnement ***Marketing Hub*** ou ***CMS Hub*** *Pro* ou *Entreprise*, vous pouvez sélectionner l'option **Définir comme formulaire HTML brut** lors de la création d'un formulaire. Ce paramètre restitue le formulaire en HTML au lieu d'un iFrame, ce qui facilite le style du formulaire incorporé avec la CSS.
Découvrez-en davantage sur le [style des formulaires intégrés dans la base de connaissances](https://knowledge.hubspot.com/fr/forms/how-can-i-share-a-hubspot-form-if-im-using-an-external-site).

# Masquer les modules et les sections dans l'éditeur de page
Source: https://developers.hubspot.fr/docs/cms/start-building/building-blocks/modules/hide-modules-and-sections
# Menus et navigation
Source: https://developers.hubspot.fr/docs/cms/start-building/building-blocks/modules/menus-and-navigation
HubSpot dispose de quelques outils intégrés pour faciliter la création et la gestion de ces menus, et, côté code, de multiples solutions pour l'affichage des menus afin que vous puissiez choisir la solution qui convient le mieux à votre site web.
Incluez des menus de navigation sur votre site Web pour aider les utilisateurs à trouver les informations dont ils ont besoin. Les menus de navigation sont souvent situés dans les en-têtes, les barres latérales et les pieds de page d'un site web. HubSpot fournit quelques solutions intégrées pour ajouter des menus à vos pages, en fonction de votre cas d'utilisation, mais vous pouvez également créer vos propres menus si nécessaire. Votre compte comprend également une [page de paramètres pour la création et la gestion des menus](#navigation-settings), que les différentes méthodes de menu peuvent référencer.
* **Menus par défaut :** HubSpot fournit deux types de menus par défaut qui peuvent être utilisés selon les besoins. Ces menus peuvent être ajoutés en tant que modules dans l'éditeur de page dans des [zones de glisser-déposer](https://developers.hubspot.fr/docs/guides/cms/content/templates/drag-and-drop/overview) ou dans des modèles, ou vous pouvez les ajouter à des modules personnalisés à l'aide de [balises HubL](#menu-hubl-tags).
* **Menu :** couramment utilisé pour la navigation globale, comme dans l'en-tête ou le pied de page du site Web, le menu standard par défaut vous permet de sélectionner un menu que vous avez configuré dans vos paramètres de navigation, puis de le configurer davantage avec des options telles que les niveaux maximaux, les paramètres d'affichage et l'orientation.
* **Menu simple :** couramment utilisé pour la navigation spécifique aux pages, telles que les pages piliers, le module de menu simple vous permet de créer des menus au niveau de la page. Plutôt que de faire référence à un menu que vous avez créé dans vos paramètres de navigation, les éléments de menu simples sont gérés dans l'éditeur de contenu et ont moins d'options de configuration que le menu standard. Cela permet aux créateurs de contenu de mettre à jour les menus sur des pages spécifiques au besoin sans affecter la navigation globale.
* \*\*Menus personnalisés : \*\*lorsque les options de menu par défaut ne correspondent pas à vos besoins, vous pouvez créer vos propres solutions personnalisées. Cela peut aller de la création de modules personnalisés qui incluent des menus par défaut à l'aide du [menu standard et des balises HubL simple\_menu](#menu-hubl-tags), à l'utilisation de la [fonction menu() HubL](#menu-hubl-function) pour créer une solution entièrement personnalisée à l'aide de groupes de répéteurs ou HubDB. Cela étant dit, lors de la création d'un menu personnalisé compliqué, vous devez garder à l'esprit l'expérience de l'éditeur. Dans de nombreux cas, il peut être plus logique d'utiliser le `menu` et les champs `simple_menu` en tandem avec la fonction `menu()` afin qu'il y ait un équilibre entre la solution personnalisée et l'expérience d'édition intuitive.
Ci-dessous, découvrez les différentes façons d'inclure des menus sur les pages et comment gérer les paramètres de navigation dans HubSpot.
## Paramètres de navigation
Dans chaque compte, HubSpot inclut des [paramètres de navigation](https://knowledge.hubspot.com/cos-general/set-up-your-site-s-navigation-menus) afin que vous puissiez créer des menus multiniveaux à référencer dans les modules de menu et les balises. Cela crée une source unique de vérité pour un ensemble d'éléments de menu, vous n'aurez donc besoin de mettre à jour un menu qu'une seule fois pour mettre à jour toutes les pages référençant ce menu. Vous pouvez créer autant de menus que nécessaire, et chaque menu est livré avec des options de clonage, de suppression, de renommage et d'affichage de l'historique des révisions.
Pour créer et gérer des menus dans HubSpot, accédez à **Paramètres** > **Site Web** > **Menus de navigation**. En savoir plus sur les paramètres de navigation dans la [Base de connaissances de HubSpot](https://knowledge.hubspot.com/website-pages/set-up-your-site-s-navigation-menus).

Lorsque vous travaillez avec des menus dans HubL, vous devrez peut-être référencer l'ID du menu. Cela ne s'applique pas aux menus simples, car leurs éléments de menu sont définis dans l'éditeur.
Lors de la création d'un module personnalisé, le moyen le plus simple d'obtenir l'ID de menu est de créer un champ de menu. Ce champ permet au créateur de contenu de sélectionner un menu dans un menu déroulant et renvoie l'ID de menu. Si vous avez besoin de coder en dur l'ID du menu, vous pouvez le récupérer à partir de l'URL lorsque vous affichez le menu dans la page des paramètres de navigation.

Notez que, lorsque vous arrivez pour la première fois sur la page, l'ID de menu par défaut ne s'affiche pas dans l'URL. Pour obtenir l'ID de ce menu par défaut, vous devrez sélectionner un autre menu, puis sélectionner à nouveau le menu par défaut.
> [!NOTE]
>
> Une bonne pratique pour les en-têtes de site, qui contiennent souvent la longue navigation principale, est de fournir un ["lien « passer au contenu »](/docs/cms/best-practices/improve-existing-sites/accessibility#adding-a-skip-to-content-link). Cela permet aux utilisateurs qui naviguent au clavier d'éviter les menus trop longs.
## Balises de menu HubL
Utilisez le `menu` et les balises HubL `simple_menu` pour ajouter des fonctionnalités de menu aux modules personnalisés. L'ajout de la balise à un module affichera le menu sur la page. Pour permettre aux créateurs de contenu de configurer les options du menu dans l'éditeur de page, vous devrez également inclure le [menu](/docs/cms/reference/fields/module-theme-fields#form) ou le [champ de menu simple](/docs/cms/reference/fields/module-theme-fields#simple-menu) dans le module.
Ci-dessous, en savoir plus sur chaque type de balise de menu.
### Menu standard
La [balise Menu HubL](/docs/cms/reference/hubl/tags/standard-tags#menu) génère un menu HTML standard avec des noms de classe déjà fournis pour les niveaux de profondeur, les états actifs et si l'élément a des enfants. La balise menu peut être utilisée dans des [modules personnalisés](https://developers.hubspot.fr/docs/guides/cms/content/modules/overview), ce qui permet de créer facilement des menus de navigation pour la navigation principale et la navigation dans les barres latérales. Cette balise attend que vous fournissiez [l'ID du menu](#menu-id).
```hubl theme={null}
{% menu "menu" %}
{% menu "my_menu" id=456, site_map_name='Default', overrideable=False, root_type='site_root', flyouts='true', max_levels='2', flow='horizontal', label='Advanced Menu' %}
```
### Menu simple
La balise [Menu simple](/docs/cms/reference/hubl/tags/standard-tags#simple-menu) fonctionne comme la balise Menu en générant un [menu HTML standard](https://developers.hubspot.fr/docs/guides/cms/content/default-menu-markup) avec des noms de classe pour les niveaux de profondeur, les états actifs et si l'élément a des enfants. La différence est que cette balise attend que vous fournissiez un dictionnaire de la structure du menu au lieu d'un ID de menu. C'est utile lorsque vous souhaitez que les champs d'un module déterminent la structure d'un menu au lieu d'utiliser les paramètres de navigation. Par exemple, vous pouvez utiliser ce type de module pour la table des matières d'une page pilier.
```hubl theme={null}
{% simple_menu menu_tree=[{"contentType": null, "subCategory": null, "pageLinkName": null, "pageLinkId": null, "isPublished": false, "categoryId": null, "linkParams": null, "linkLabel": "Home", "linkTarget": null, "linkUrl": "http://www.hubspot.com", "children": [], "isDeleted": false}, {"contentType": null, "subCategory": null, "pageLinkName": null, "pageLinkId": null, "isPublished": false, "categoryId": null, "linkParams": null, "linkLabel": "About", "linkTarget": null, "linkUrl": "http://www.hubspot.com/internet-marketing-company", "children": [{"contentType": null, "subCategory": null, "pageLinkName": null, "linkUrl": "http://www.hubspot.com/company/management", "isPublished": false, "children": [], "linkParams": null, "linkLabel": "Our Team", "linkTarget": null, "pageLinkId": null, "categoryId": null, "isDeleted": false}], "isDeleted": false}, {"contentType": null, "subCategory": null, "pageLinkName": null, "pageLinkId": null, "isPublished": false, "categoryId": null, "linkParams": null, "linkLabel": "Pricing", "linkTarget": null, "linkUrl": "http://www.hubspot.com/pricing", "children": [], "isDeleted": false}] %}
```
## Modules de menu par défaut
HubSpot fournit des modules par défaut que vous pouvez ajouter aux modèles codés, ainsi que des pages dans l'éditeur de pages lorsqu'un modèle comprend des [zones de glisser-déposer](/docs/cms/reference/hubl/tags/dnd-areas). Chaque module aura une expérience d'édition différente, le menu standard ayant plus d'options de configuration que le menu simple.
Comme les modules ne peuvent pas être imbriqués, vous ne pouvez pas les placer à l'intérieur d'autres modules. Vous devriez plutôt utiliser les [balises Menu ou Menu simple](#hubl-menu-tags).
```hubl theme={null}
{% module "main_nav" path="@hubspot/menu", label="Menu" id="123456" %}
{% module "menu" path="@hubspot/simple_menu", label="Simple Menu" menu_tree=[{"contentType": null, "subCategory": null, "pageLinkName": null, "pageLinkId": null, "isPublished": false, "categoryId": null, "linkParams": null, "linkLabel": "Home", "linkTarget": null, "linkUrl": "http://www.hubspot.com", "children": [], "isDeleted": false}, {"contentType": null, "subCategory": null, "pageLinkName": null, "pageLinkId": null, "isPublished": false, "categoryId": null, "linkParams": null, "linkLabel": "About", "linkTarget": null, "linkUrl": "http://www.hubspot.com/internet-marketing-company", "children": [{"contentType": null, "subCategory": null, "pageLinkName": null, "linkUrl": "http://www.hubspot.com/company/management", "isPublished": false, "children": [], "linkParams": null, "linkLabel": "Our Team", "linkTarget": null, "pageLinkId": null, "categoryId": null, "isDeleted": false}], "isDeleted": false}, {"contentType": null, "subCategory": null, "pageLinkName": null, "pageLinkId": null, "isPublished": false, "categoryId": null, "linkParams": null, "linkLabel": "Pricing", "linkTarget": null, "linkUrl": "http://www.hubspot.com/pricing", "children": [], "isDeleted": false}] %}
```
### Balisage de menu standard
Les modules de menu par défaut sont alimentés par leurs balises de menu HubL respectives (`menu` et `simple_menu`) pour générer du HTML de menu standard. Comme les autres modules HubSpot, les modules de menu sont encadrés dans un balisage de module d'encadrement. Ces balises `div` et `span` rendent le module éditable avec l'éditeur de contenu. Le balisage de menu des modules de menu et de menu simple est le même, à l'exception de certaines des classes appliquées aux conteneurs d'encadrement et de menu.
```html theme={null}
```
Comme indiqué ci-dessus, le menu réel s'affiche sous la forme d'un `ul` encadré par une `div` avec la classe `hs-menu-wrapper`. Cet encadrement aura des classes supplémentaires en fonction de la configuration du module dans l'éditeur de page, telles que l'activation des lanceurs. En savoir plus sur [les classes ajoutées par ces paramètres](#classes-added-by-settings) ci-dessous.
Dans l'`ul`, chaque élément de menu est une balise `a` encadrée dans un `li`. La balise `li` possède une classe qui indique la profondeur de l'élément dans l'arborescence des menus (par exemple : `hs-menu-depth-1`). Lorsqu'un élément de menu contient un élément enfant imbriqué, le `li` correspondant aura la classe supplémentaire `hs-item-has-children`. Le menu enfant s'affiche sous la forme d'un `ul` imbriqué avec la classe `hs-menu-children-wrapper`.
Lorsque vous visitez une page incluse dans votre arborescence de menus, la classe `active-branch` est ajoutée aux éléments `li` parents et une classe **`active`** est ajoutée à l'élément `li` particulier de cette page.
### Style de menu standard
Au niveau du module, qu'il s'agisse de modifier un module de menu dans l'éditeur de page ou de modifier un champ de menu dans un module personnalisé, vous aurez quelques options de configuration. Les champs *Menu*, *Type de menu avancé* et *Niveaux max* vous permettent de contrôler que les éléments de menu sont rendus comme `li` dans le balisage de la page. Mais les options d'orientation et de lanceurs auront un impact sur les sélecteurs CSS ajoutés au menu de l'encadrement `div`. Vous pouvez ensuite cibler ces sélecteurs dans votre CSS.

Ci-dessous, en savoir plus sur les classes qui sont ajoutées au menu de l'encadrement `div` en fonction de ces paramètres de champ.
| Classe | Description |
| - | - |
| `hs-menu-flow-horizontal` | Ajouté à l'encadrement `div` lorsque le menu est réglé sur l'orientation horizontale. |
| `hs-menu-flow-vertical` | Ajouté à l'encadrement `div` lorsque le menu est réglé sur l'orientation verticale. |
| `flyouts` | Ajouté à l'encadrement `div` lorsque l'option *Activer les lanceurs* est sélectionnée. |
| `no-flyouts` | Ajouté à l'encadrement `div` lorsque *Activer les lanceurs* n'est pas sélectionné. |
Pour vous aider à commencer à styliser les menus, voici quelques exemples de sélecteurs CSS qui peuvent être utilisés pour styliser la balise de menu et le module de menu par défaut.
```css theme={null}
/* Menus */
.hs-menu-wrapper ul {
/* Targets all unordered lists within HubSpot menus */
}
/* Horizontal Menu
========================================================================== */
.hs-menu-wrapper.hs-menu-flow-horizontal ul {
/* Targets all unordered lists within horizontal menus */
}
.hs-menu-wrapper.hs-menu-flow-horizontal ul li {
/* Targets all list items within horizontal menus */
}
.hs-menu-wrapper.hs-menu-flow-horizontal ul li a {
/* Targets all links within horizontal menus */
}
.hs-menu-wrapper.hs-menu-flow-horizontal > ul {
/* Targets the top-level unordered list within horizontal menus */
}
.hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-menu-depth-1 {
/* Targets top-level list items within the top-level unordered list */
}
.hs-menu-wrapper.hs-menu-flow-horizontal > ul li a {
/* Targets top-level list links within the top-level unordered list */
}
.hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-item-has-children {
/* Targets list items with children with the top-level unordered list */
}
.hs-menu-wrapper.hs-menu-flow-horizontal.flyouts > ul li.hs-item-has-children ul.hs-menu-children-wrapper {
/* Targets second-level unordered lists when flyouts are enabled (for styling dropdowns) */
}
.hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-item-has-children ul.hs-menu-children-wrapper li a {
/* Targets links within second-level unordered lists */
}
.hs-menu-wrapper.hs-menu-flow-horizontal.flyouts
> ul
li.hs-item-has-children
ul.hs-menu-children-wrapper
li.hs-item-has-children
ul.hs-menu-children-wrapper {
/* Targets third-level unordered lists (for styling dropdowns)*/
}
.hs-menu-wrapper.hs-menu-flow-horizontal.flyouts > ul li.hs-item-has-children:hover > ul.hs-menu-children-wrapper {
/* Targets second-level unordered list when top-level menu item is hovered (use to reveal dropdowns) */
}
.hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-item-has-children.active-branch {
/* Targets top-level active branch unordered list */
}
.hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-item-has-children.active-branch > ul.hs-menu-children-wrapper {
/* Targets second-level unordered list within active branch */
}
.hs-menu-wrapper.hs-menu-flow-horizontal li.active a {
/* Targets the link within the active list item */
}
/* Vertical Menu
========================================================================== */
.hs-menu-wrapper.hs-menu-flow-vertical ul {
/* Targets all unordered lists within vertical menus */
}
.hs-menu-wrapper.hs-menu-flow-vertical ul li a {
/* Targets all list items within vertical menus */
}
.hs-menu-wrapper.hs-menu-flow-vertical ul li a {
/* Targets all links within vertical menus */
}
.hs-menu-wrapper.hs-menu-flow-vertical > ul {
/* Targets the top-level unordered list within vertical menus */
}
.hs-menu-wrapper.hs-menu-flow-vertical > ul li.hs-menu-depth-1 > a {
/* Targets top-level links in vertical menus */
}
.hs-menu-wrapper.hs-menu-flow-vertical > ul li.hs-item-has-children {
/* Targets top-level list items with children */
}
/* No flyouts
========================================================================== */
.hs-menu-wrapper.hs-menu-flow-vertical.no-flyouts .hs-menu-children-wrapper {
/* Targets child menus when flyouts are disabled */
}
.hs-menu-wrapper.hs-menu-flow-horizontal.no-flyouts > ul li.hs-item-has-children ul.hs-menu-children-wrapper {
/* Targets second-level child menus when flyouts are disabled */
}
```
## Fonction HubL menu()
La fonction [menu()](/docs/cms/reference/hubl/functions#menu) existe pour vous permettre de créer des structures de menu entièrement personnalisées. Elle renvoie un objet que vous pouvez itérer pour générer un menu. De nombreuses [propriétés sont fournies pour les éléments du menu](/docs/cms/reference/hubl/variables#menu-node-variables). Sachez que lorsque vous utilisez la fonction Menu [, vous êtes entièrement responsable de l'accessibilité de votre menu](/docs/cms/best-practices/improve-existing-sites/accessibility), de sa structure et de son style.
```hubl theme={null}
{% set node = menu(987) %}
{% for child in node.children %}
{{ child.label }}
{% endfor %}
{% set default_node = menu("default") %}
{% for child in default_node.children %}
{{ child.label }}
{% endfor %}
```
Le [Thème Boilerplate du CMS HubSpot](https://github.com/HubSpot/cms-theme-boilerplate) contient un [exemple de module de menu construit avec la fonction menu()](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/modules/menu.module/module.html). Vous pouvez le modifier en fonction de vos besoins pour créer des menus complexes.
# Vue d'ensemble des modules
Source: https://developers.hubspot.fr/docs/cms/start-building/building-blocks/modules/overview
Il est essentiel de comprendre les modules pour pouvoir comprendre HubSpot CMS et sa puissance. Les modules sont des composants réutilisables qui peuvent être utilisés dans des modèles ou ajoutés à des pages via des zones de glisser-déposer et des colonnes flexibles.
Il est essentiel de comprendre les modules pour pouvoir comprendre HubSpot CMS et sa puissance. Les modules sont des composants réutilisables qui peuvent être utilisés dans des modèles ou ajoutés à des pages via des [zones de glisser-déposer](/docs/cms/start-building/building-blocks/drag-and-drop/tutorial) et des[ colonnes flexibles](https://developers.hubspot.fr/docs/reference/cms/hubl/tags/standard-tags#flexible-column). En plus d'utiliser les modules fournis par HubSpot, les développeurs peuvent créer leurs propres modules pour tout, des témoignages aux galeries de photos. Les modules sont créés [à l'aide des outils de développement locaux](/docs/cms/start-building/building-blocks/modules/overview) ou [en utilisant le Gestionnaire de conception](https://knowledge.hubspot.com/cos-general/create-and-edit-modules).
Un module est composé de deux parties :
1. Une [interface utilisateur](#the-user-interface-for-editing) créée par une liste de champs que les utilisateurs verront lors de l'édition d'une instance de module.
2. Un fragment de modèle HTML+HubL avec CSS et JS associés qui définissent comment le HTML sera généré
## Voici un exemple
Pour mieux comprendre ce qu'est un module, examinons un module simple, « Membre de l'équipe ». Le module se compose d'une photo, du nom du membre de l'équipe, de son titre et d'une courte biographie. Il ressemble à une partie d'une page Web du CMS :

### L'interface utilisateur pour l'édition
Le développeur construit l'interface utilisateur (IU) des modules en utilisant des champs. Le développeur choisit ensuite les champs à utiliser en fonction du type de module à construire, des données nécessaires et de l'expérience d'édition. Dans ce cas, le module comprend :
1. un champ d'image, pour la photo d'un membre de l'équipe
2. deux champs de texte, pour le nom et la fonction du membre de l'équipe
3. et un champ de texte enrichi, pour une courte biographie.
Lorsqu'un créateur de contenu modifie un module, l'interface utilisateur est construite sur la base des champs que le développeur a ajoutés au module et de la façon dont chaque champ est configuré.

## Comparaison du module et de l'instance de module
Il existe deux termes fréquemment utilisés concernant les modules. Il est important de comprendre la différence entre les deux.
* **Module** - : blocs de construction réutilisables qui peuvent être ajoutés aux modèles et aux pages.
* **Instance de module** - : les modules individuels rendus sur la page. Ils peuvent avoir des valeurs de champ distinctes et, par conséquent, avoir un aspect différent des autres instances de module du même module.
## Fields.json
Les champs d'un module sont définis en JSON comme un tableau d'objets. Chaque champ a un nom, un type et une valeur par défaut. D'autres propriétés sont également disponibles en fonction du type de champ qui contrôle l'expérience d'édition.
```json theme={null}
// fields.json
[
{
"name": "team_member_photo",
"label": "Team Member Photo",
"required": true,
"responsive": true,
"resizable": true,
"type": "image",
"default": {
"src": "",
"alt": ""
}
},
{
"name": "team_member_name",
"label": "Team member name",
"required": true,
"type": "text",
"default": "Joshua Beck"
},
{
"name": "team_member_position",
"label": "Team member position",
"required": true,
"type": "text",
"default": "CEO, Co-Founder"
},
{
"name": "team_member_bio",
"label": "Team member bio",
"required": true,
"type": "richtext",
"default": "
Joshua has over 20 years of experience in the tech industry. He helped start this company in 2015 with the mission of helping people grow. In his spare time he loves hanging out with his kids, going to the beach, and cooking.
"
}
]
```
Pour en savoir plus sur tous les champs disponibles, voir [Champs de module et de thème](https://developers.hubspot.fr/docs/reference/cms/fields/module-theme-fields).
### Utilisation des données du champ du module pour rendre le HTML
Les valeurs de chaque champ sont disponibles dans le fragment HTML+HubL d'un module via une variable `module`. Les données de chaque champ sont accessibles via les propriétés de la variable du module. En utilisant le module membre de l'équipe comme exemple, le nom du membre de l'équipe est accessible via `{{ module.team_member_name }}`.
```hubl theme={null}
{{ module.team_member_name }}
{{ module.team_member_position }}
{{ module.team_member_bio }}
```
## Utilisation des modules dans les modèles
Les modules sont ajoutés aux modèles en utilisant la balise [module](https://developers.hubspot.fr/docs/reference/cms/modules/using-modules-in-templates#basic-module-syntax), [module\_block](https://developers.hubspot.fr/docs/reference/cms/modules/using-modules-in-templates#block-syntax) ou [dnd\_module](https://developers.hubspot.fr/docs/reference/cms/hubl/tags/dnd-areas) et en indiquant le chemin d'accès au module comme paramètre. Les valeurs par défaut des champs d'un module peuvent également être remplacées au niveau du modèle en ajoutant des paramètres à la balise du module qui correspond au nom du champ, comme le montre la deuxième partie de l'exemple ci-dessous.
```hubl theme={null}
{% module "unique_identifier" path="/modules/team-member.module" %}
{# override default values in a module instance #}
{% module "unique_identifier"
path="/modules/team-member.module",
team_member_name="Brian Halligan",
team_member_position="CEO"
%}
```
> [!NOTE]
>
> Les modules ne peuvent pas être imbriqués les uns dans les autres. La plupart du temps, lorsque vous voulez le faire c'est pour des raisons de mise en page. Les sections dans les [zones de glisser-déposer](/docs/cms/start-building/building-blocks/drag-and-drop/overview) sont souvent la meilleure solution.
## Les modules sont un excellent outil dans la boîte à outils d'accessibilité
Les modules sont utilisés sur tout un site Web, parfois sur plusieurs pages, voire de nombreuses fois sur une page. C'est pourquoi l'[élaboration du HTML, de la CSS et du JS de votre module en tenant compte de l'accessibilité](https://developers.hubspot.fr/docs/guides/cms/content/accessibility) peut avoir un grand impact sur l'utilisation de votre site par les personnes handicapées ou non.
## Les modules peuvent faciliter la localisation
De la même manière que pour l'accessibilité, élaborer des modules afin que tout le contenu du module soit basé sur des champs permet de le localiser ultérieurement. Par exemple, vous pouvez avoir un module « Articles à la une ». Au lieu de coder en dur le texte « Articles à la une », utilisez un champ de texte ou de texte enrichi. Le texte peut ensuite être modifié dans d'autres langues. Pour en savoir plus sur la localisation sur le CMS, allez à[ multi-langue](https://developers.hubspot.fr/docs/guides/cms/content/multi-language-content).
## Pour commencer
Pour commencer, consultez notre tutoriel [Démarrer avec les modules](/docs/cms/start-building/building-blocks/modules/overview).
## Aller plus loin
* [Configurer un module](https://developers.hubspot.fr/docs/reference/cms/modules/configuration)
* [Utilisation de modules dans les modèles](https://developers.hubspot.fr/docs/reference/cms/modules/using-modules-in-templates)
* [Modules par défaut](https://developers.hubspot.fr/docs/reference/cms/modules/default-modules)
* [L'éditeur de module](/docs/cms/start-building/building-blocks/modules/overview)
# Vue d'ensemble du thème
Source: https://developers.hubspot.fr/docs/cms/start-building/building-blocks/overview
Développer des thèmes de CMS HubSpot qui permettent aux développeurs de construire des systèmes de conception dans lesquels les créateurs de contenu peuvent travailler.
Un thème est un ensemble portable et contenu de ressources de développement conçues pour permettre d'éditer du contenu avec fluidité. Vous pouvez [créer des thèmes localement à l'aide de HubSpot CLI](/docs/developer-tooling/local-development/hubspot-cli/install-the-cli) en utilisant les outils, les technologies et les workflows que vous préférez. Les environnements et les comptes disposent de la portabilité des thèmes et de leurs fichiers associés. Apprenez à développer des thèmes avec la vidéo de présentation de la HubSpot Academy ci-dessous :
## Les thèmes en tant que package
Les thèmes étant un ensemble, ils se présentent en cascade dans l'application HubSpot, à différents endroits, pour permettre une expérience de création de contenu efficace. Les développeurs peuvent utiliser des thèmes pour créer un système de conception permettant aux créateurs de contenu de travailler. Il est possible d'intégrer une certaine souplesse et des directives dans un thème pour répondre aux besoins de votre entreprise.
### Création de la page
Lorsque les créateurs de contenu génèrent de nouvelles pages, ils sont invités à sélectionner le thème à partir duquel créer la page, puis à choisir le modèle à utiliser dans le thème.

L'image d'aperçu du thème, ainsi que d'autres configurations pour un thème, sont définies dans le [fichier theme.json](#theme-json).
### Champs du thème
Les thèmes permettent aux développeurs de créer un ensemble de [champs de thème](#fields-json), similaires aux champs de module, qui donnent aux créateurs de contenu la possibilité de régler divers boutons et cadrans conçus par un développeur afin d'avoir un contrôle stylistique global d'un site web sans avoir à modifier le CSS. Les développeurs [utilisent HubL pour accéder aux valeurs des champs de thème](#using-theme-field-values) dans l'ensemble de leur CSS. Les créateurs de contenu utilisent l'éditeur de thème pour modifier les champs du thème, prévisualiser ces modifications par rapport aux modèles existants dans un thème, et publier leurs modifications.

Les champs du thème sont définis par le [fichier fields.json d'un thème](#fields-json).
Lorsque vous modifiez un thème en [mode test](/docs/cms/start-building/building-blocks/overview#test-mode), vous pouvez également copier les paramètres JSON du thème. Cela vous permet de coller toutes les mises à jour dans le fichier `fields.json` local du thème.

### Modules de thème
Les modules d'un thème doivent être conçus spécifiquement pour être utilisés dans les modèles de ce thème. L'éditeur de contenu met l'accent sur ces modules de thème, ce qui permettra aux créateurs de contenu d'ajouter rapidement et facilement aux pages qu'ils construisent des modules conçus pour fonctionner correctement dans le contexte de cette page. Les modules par défaut et le reste des modules de votre compte HubSpot seront toujours disponibles.

Lors du développement d'un thème, vous pouvez [masquer les modules et les sections de l'éditeur de page](/docs/cms/start-building/building-blocks/modules/hide-modules-and-sections) pour créer une expérience de création de contenu plus rationalisée.
## Structure des fichiers du thème
Un thème est un répertoire unique de fichiers. Vous pouvez inclure des fichiers HTML, CSS et Javascript, des modules et des fichiers supplémentaires organisés de n'importe quelle manière dans des sous-répertoires du dossier du thème parent. Deux fichiers JSON sont nécessaires pour construire un thème : `theme.json` et `fields.json`. Ces fichiers doivent être inclus dans le dossier racine du thème.
Pour commencer avec un exemple, voir le [Boilerplate CMS HubSpot](https://github.com/HubSpot/cms-theme-boilerplate)

> [!NOTE]
>
> Pour l'instant, les fichiers .json ne peuvent être créés et téléchargés sur un compte HubSpot que par le biais des [outils de développement local](/docs/developer-tooling/local-development/hubspot-cli/install-the-cli).
### theme.json
Le fichier `theme.json` contient les méta-informations relatives au répertoire de votre thème, telles que le libellé lisible du thème, sa capture d'écran de prévisualisation et diverses configurations relatives au comportement du thème. Votre fichier `theme.json` ressemblera à ce qui suit :
```json theme={null}
// theme.json
{
"label": "Cool Theme",
"preview_path": "./templates/home-page.html",
"screenshot_path": "./images/templates/homepage.jpg",
"enable_domain_stylesheets": false,
"version": "1.0",
"author": {
"name": "Jon McLaren",
"email": "noreply@hubspot.com",
"url": "https://theme-provider.com/"
},
"documentation_url": "https://theme-provider.com/cool-theme/documentation",
"license": "./license.txt",
"example_url": "https://theme-provider.com/cool-theme/demo",
"is_available_for_new_content": true
}
```
| Paramètre | Type | Description |
| - | - | - |
| `label` | Chaîne | : le libellé lisible du thème est utilisé là où le thème est affiché dans l'application HubSpot, comme dans l'écran de sélection des modèles et l'éditeur de thème. |
| `preview_path` | Chaîne | : un chemin relatif vers un fichier de modèle dans le thème qui devrait être le modèle par défaut est utilisé lors de la prévisualisation d'un thème dans l'éditeur de thème. |
| `screenshot_path` | Chaîne | : un chemin d'accès relatif vers un fichier image est utilisé pour donner une instantanée de l'aspect du thème là où la sélection du thème a lieu, comme dans l'écran de sélection du modèle. |
| `enable_domain_stylesheets` | Booléen | : une activation ou désactivation des feuilles de style attachées à des domaines dans les paramètres du site web et incluses dans les modèles du thème. La valeur par défaut est définie sur `false`. |
| `version` | Chaîne | : un numéro de version entier prenant en charge les versions `.`. |
| `Author` | Objet | : un champ d'objet pour fournir des informations personnelles en tant que fournisseur du thème.`name` Le nom du fournisseur. `email` L'adresse e-mail du service client du fournisseur. `url` Le site web du fournisseur. |
| `documentation_url` | Chaîne | : le lien vers la documentation associée au thème. |
| `example_url` | Chaîne | : le lien vers l'exemple réel du thème. |
| `license` | String | : un [Identifiant SPDX](https://spdx.org/licenses/) valide ou chemin d'accès relatif à la licence dans votre thème. Cette licence dicte l'utilisation et la modification autorisées par le créateur du thème. Utile lors du téléchargement sur le marketplace. |
| `is_available_for_new_content` | Booléen | : le booléen qui détermine si un thème s'affiche dans la page du créateur de contenu pour être sélectionné. La valeur par défaut est définie sur `true`. |
### fields.json
Le fichier `fields.json` contrôle les champs et groupes de champs disponibles dans l'éditeur de thème, y compris les [champs de style](https://developers.hubspot.fr/docs/guides/cms/content/fields/overview#style-fields). Les champs que vous incluez dépendront du degré de contrôle que vous souhaitez donner aux créateurs de contenu dans l'éditeur de page. Le nombre de champs disponibles pour les thèmes est plus limité que pour les modules, car les champs de thème sont mieux adaptés aux options de style, tandis que le [contenu global](/docs/cms/start-building/building-blocks/global-content) est mieux adapté au contenu du thème.
Par exemple, plutôt que d'ajouter un champ de texte dans le fichier `field.json` du thème pour le slogan de votre site, il devrait être ajouté en tant que module global afin que les créateurs de contenu puissent mettre à jour le slogan à partir de l'éditeur de page plutôt que de l'éditeur de thème.
Les champs qui peuvent être utilisés dans les thèmes sont les suivants :
* [Booléen](/docs/cms/reference/fields/module-theme-fields#boolean)
* [Bordure](/docs/cms/reference/fields/module-theme-fields#border)
* [Choix](/docs/cms/reference/fields/module-theme-fields#choice)
* [Couleur](/docs/cms/reference/fields/module-theme-fields#color)
* [Police](/docs/cms/reference/fields/module-theme-fields#font)
* [Image](/docs/cms/reference/fields/module-theme-fields#image)
* [Nombre](/docs/cms/reference/fields/module-theme-fields#number)
* [Espacement](/docs/cms/reference/fields/module-theme-fields#spacing)
Obtenez plus d'informations sur les options possibles pour les champs de thème en consultant la [documentation sur les modules et les champs de thème](/docs/cms/reference/fields/module-theme-fields).
#### Utilisation des valeurs des champs de thème
Pour accéder aux valeurs des champs, utilisez la notation par points et préfixez le chemin d'accès à la valeur dans `fields.json` avec le thème. Vous pouvez utiliser la valeur d'un champ thématique dans vos feuilles de style en utilisant une syntaxe similaire à `{{ theme.path.to.value }}`. Par exemple, le champ de police décrit ci-dessous :
```json theme={null}
// fields.json
[
{
"type": "group",
"name": "typography",
"label": "Typography",
"children": [
{
"type": "font",
"name": "h1_font",
"label": "Heading 1",
"load_external_fonts": true,
"default": {
"color": "#000",
"font": "Merriweather",
"font_set": "GOOGLE",
"variant": "700",
"size": "48"
}
}
]
}
]
```
Serait référencé en CSS par :
```css theme={null}
h1 {
font-size: {{ theme.typography.h1_font.size }}px;
font-family: {{ theme.typography.h1_font.font }};
color: {{ theme.typography.h1_font.color }};
text-decoration: {{ theme.typography.h1_font.styles.text-decoration }};
font-style: {{ theme.typography.h1_font.styles.font-style }};
font-weight: {{ theme.typography.h1_font.styles.font-weight }};
}
```
## Aperçu d'un thème
Les développeurs ont parfois besoin de s'assurer du bon fonctionnement de leurs champs sans avoir d'impact sur les pages réelles. C'est justement le but du mode de test des thèmes.
### Mode de test
Le mode de test vous offre un environnement sûr pour tester les champs de votre thème et vous assurer qu'ils fonctionnent correctement. L'interface ressemble exactement à l'[aperçu/éditeur de thème que les créateurs de contenu peuvent voir](https://knowledge.hubspot.com/website-pages/edit-your-global-theme-settings#edit-theme-settings), mais elle garantit que vous ne modifierez pas les paramètres de votre site web. Pour se protéger contre les modifications accidentelles des paramètres du thème, la publication est bloquée lorsque vous êtes en mode test. Vous êtes en mode test si `?testmode=true` apparaît dans votre barre d'adresse, et si une icône de mode test s'affiche dans l'en-tête de l'éditeur de thème.

Deux méthodes permettent d'activer le mode test :
* Pour activer le mode test depuis le gestionnaire de conception :
* Dans le gestionnaire de conception, sélectionnez votre **thème** dans le Finder.
* En haut du menu latéral de gauche, cliquez sur le bouton **Aperçu**.
.png)
* Pour activer le mode test à partir de l'éditeur de la page :
* Dans l'éditeur de page, cliquez sur l'onglet **Conception** dans le menu latéral de gauche, puis cliquez sur **Modifier les paramètres du thème**.

Ajoutez `?testmode=true` à l'URL, puis appuyez sur **Entrée**. Vous passerez alors en mode test.
Vous pouvez aussi ouvrir les paramètres de votre thème à partir de l'éditeur de page. Une fois entré, ajoutez le paramètre de requête `?testmode=true` à l'URL dans votre barre d'adresse.
## Ressources associées
* [Premiers pas avec les thèmes](/docs/cms/start-building/building-blocks/themes/getting-started)
* [Comment ajouter des fonctionnalités de thème à des sites existants ?](/docs/cms/best-practices/improve-existing-sites/add-theme-features-to-existing-sites)
* [Thème boilerplate HubSpot](/docs/cms/start-building/building-blocks/themes/hubspot-cms-boilerplate)
# Sections
Source: https://developers.hubspot.fr/docs/cms/start-building/building-blocks/sections/sections
Les sections sont l'élément enfant le plus à l'extérieur de dnd_area. Les sections peuvent être réutilisées grâce à des modèles de section ou en les enregistrant dans l'éditeur de pages.
Le conteneur le plus à l'extérieur d'une [zone glisser-déposer](https://developers.hubspot.fr/docs/guides/cms/content/templates/drag-and-drop/overview) est appelé section. Les sections ne peuvent être imbriquées dans aucun autre [élément dnd](https://developers.hubspot.fr/docs/guides/cms/content/templates/drag-and-drop/overview#drag-and-drop-areas-and-their-elements), mais peuvent contenir des modules, des [lignes](https://developers.hubspot.fr/docs/guides/cms/content/templates/drag-and-drop/overview#row) et des [colonnes.](https://developers.hubspot.fr/docs/guides/cms/content/templates/drag-and-drop/overview#column) Dans l'éditeur de page, les créateurs de contenu peuvent ajouter des sections à la page, puis les modifier et les styliser selon leurs besoins. Les créateurs de contenu peuvent également créer et enregistrer des sections à utiliser sur d'autres pages du même thème, ce qui rend la création de contenu plus efficace.
Dans cet article, vous en apprendrez davantage sur les sections et sur la manière de les utiliser dans l'éditeur de pages. Lors du développement d'un thème, vous pouvez consulter le guide afin de [masquer les modules et les sections](/docs/cms/start-building/building-blocks/modules/hide-modules-and-sections) de l'éditeur de page pour créer une expérience de création de contenu plus rationalisée.

## Présentation
Les sections peuvent être créées [dans l'éditeur de contenu par un créateur de contenu](https://knowledge.hubspot.com/fr/website-pages/edit-page-content-in-a-drag-and-drop-area#create-a-section) ou intégrées par un développeur dans [`dnd_area`](https://developers.hubspot.fr/docs/guides/cms/content/templates/drag-and-drop/overview) avec la balise [`dnd_section`](/docs/cms/reference/hubl/tags/dnd-areas#drag-and-drop-section-code-dnd-section-code-).
Les options de style disponibles dans l'éditeur sont également disponibles lors du codage d'un modèle. Par exemple :
```hubl theme={null}
{% dnd_area 'dnd_area'
label='Main section',
%}
{% dnd_section
background_image={
'backgroundPosition': 'MIDDLE_CENTER',
'backgroundSize': 'cover',
'imageUrl': 'https://example.com/path/to/image.jpg'
},
margin={
'top': 32,
'bottom': 32
},
padding={
'top': '1em',
'bottom': '1em',
'left': '1em',
'right': '1em'
},
max_width=1200,
vertical_alignment='MIDDLE'
%}
{% end_dnd_section %}
{% end_dnd_area %}
```
Pour obtenir une documentation complète sur tous les paramètres des éléments de glisser-déposer disponibles et des exemples d'utilisation, consultez les [balises dnd\_area](/docs/cms/reference/hubl/tags/dnd-areas).
Vous pouvez utiliser les sections pour élaborer rapidement des modèles faciles à lire. Étant donné que vous ne spécifiez que le contexte dans lequel les instances spécifiques du modèle sont différentes, vous pouvez toujours revenir en arrière et modifier ce modèle de section.
> [!WARNING]
>
> **Remarque :** la modification d'une section entraînera sa mise à jour dans toutes les instances de cette section, à l'exception des pages existantes qui utilisent un modèle faisant référence à la section. Les pages créées précédemment avec un modèle contenant une section incluse devront être mises à jour manuellement pour utiliser la nouvelle version de la section. Cela permet d'éviter d'apporter accidentellement des modifications radicales. Pour mettre à jour une section, un créateur de contenu peut se rendre dans l'éditeur de page, ajouter la nouvelle section à la page, puis supprimer l'ancienne version.
## Créer des sections réutilisables
Dans un thème, vous pouvez inclure des sections préconfigurées que les créateurs de contenu peuvent ajouter aux pages utilisant ce thème dans l'éditeur de pages. Ces sections réutilisables sont construites comme des fichiers modèles de section et sont codées avec la même syntaxe que celle que vous utiliseriez à l'intérieur de `dnd_area`.
> [!WARNING]
>
> **Remarque :** pour rendre une section disponible pour plusieurs thèmes, vous devrez ajouter le fichier modèle de la section à chaque thème. De même, les sections créées par les créateurs de contenu dans l'éditeur de contenu ne seront disponibles que dans ce thème.
Ci-dessous, vous apprendrez à créer des fichiers modèles de section et à les référencer dans d'autres fichiers modèles.
### Fichiers de modèles de section
Les modèles de section sont désignés par `templateType: section` dans leur [annotation de modèle](/docs/cms/start-building/building-blocks/templates/html-hubl-templates#template-annotations).
```html theme={null}
```
| Paramètre | Type | Description | Valeur |
| - | - | - | - |
| `templateType` | Chaîne | Définit le type de modèle utilisé pour déterminer où le modèle peut être utilisé et quelles données sont disponibles. | `section` |
| `label` | Chaîne | Utilisée dans l'éditeur de pages pour fournir un nom compréhensible pour la section. | |
| `description` | Chaîne | Description supplémentaire de la section au-delà de ce que vous pouvez faire avec un libellé. S'affiche dans l'éditeur de page. 255 caractères maximum. | |
| `screenshotPath` | Chaîne/chemin | Chemin d'accès à une capture d'écran de la section. Utilisé pour donner aux créateurs de contenu une référence visuelle simple de l'aspect de la section. | |
Un modèle de section doit commencer et se terminer par une balise `dnd_section`. Il ne peut y avoir qu'un seul `dnd_section` dans un modèle de section. À l'intérieur de cette section, vous pouvez placer des modules, des lignes et des colonnes, en suivant les mêmes règles `dnd_area` que celles qui s'appliquent à l'[ajout d'un dnd\_area à un modèle de page](/docs/cms/reference/hubl/tags/dnd-areas#dnd-area). L'exception est que vous définissez le contenu d'une seule section et de ses éléments de glisser-déposer.
```hubl theme={null}
{% dnd_section
padding={
'top': 200,
'right': 20,
'bottom': 200,
'left': 20
},
background_image={
'backgroundPosition': 'MIDDLE_CENTER',
'backgroundSize': 'cover',
'imageUrl': context.backgroundImage || get_asset_url('../images/blank-page-banner.png')
},
max_width=778,
vertical_alignment='MIDDLE'
%}
{% dnd_column %}
{% dnd_row %}
{% dnd_module path='@hubspot/rich_text' %}
{% module_attribute 'html' %}
{{ context.content || '
Communicate Your Way
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dapibus posuere mi, in pretium ante posuere a. Aliquam a risus at eros molestie pretium.
' }}
{% end_module_attribute %}
{% end_dnd_module %}
{% end_dnd_row %}
{% dnd_row %}
{% dnd_module
path='../modules/button',
button_text={{ context.buttonText || 'Subscribe' }}
horizontal_alignment='CENTER'
%}
{% end_dnd_module %}
{% end_dnd_row %}
{% end_dnd_column %}
{% end_dnd_section %}
```
### Ajouter une section partielle à un modèle
Après avoir créé une section, vous pouvez y faire référence dans un `dnd_area` en utilisant une balise `include_dnd_partial`. Cette balise fournit le chemin d'accès au fichier de la section, comme indiqué ci-dessous :
```hubl theme={null}
{% dnd_area 'dnd_area' class='body-container body-container--home-page', label='Main section' %}
{# Banner Section #}
{% include_dnd_partial path='../sections/banner.html' context={} %}
{# End Banner Section #}
{% end_dnd_area %}
```
> [!NOTE]
>
> Dans l'exemple ci-dessus, notez l'argument contextuel dans la balise `include_dnd_partial` . Cela vous permet de transférer des variables spécifiques du modèle de page à la section, en remplaçant les valeurs par défaut dans le fichier de la section. [Voir la section contexte](#section-context) pour plus d'informations.
### Contenu de la section
Vous pouvez utiliser des variables de contexte de section pour remplacer les valeurs par défaut au niveau de la section et du module. Les variables de contexte de section sont définies par vous et ne sont pas associées directement aux modules et à leurs champs.
Dans votre balise de page, vous pouvez définir ces variables de contexte grâce au paramètre `context` de la balise `include_dnd_partial`.
```hubl theme={null}
{% dnd_area 'dnd_area' class='body-container body-container--home-page', label='Main section' %}
{# Banner Section #}
{% include_dnd_partial path='../sections/banner.html'
context={
'content': '
Home Page
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dapibus posuere mi, in pretium ante posuere a. Aliquam a risus at eros molestie pretium.
',
'buttonText': 'Buy Now'
}
%}
{# End Banner Section #}
{% end_dnd_area %}
```
Toutes les variables que vous ajoutez à votre paramètre `context` seront disponibles pour être référencées dans votre modèle de section. L'exemple suivant montre comment définir l'URL de l'image et le contenu de la zone de texte riche et du bouton défini en contexte, le cas échéant.
```hubl theme={null}
{% dnd_section
background_image={
'backgroundPosition': 'MIDDLE_CENTER',
'backgroundSize': 'cover',
'imageUrl': context.backgroundImage || get_asset_url('../images/blank-page-banner.png')
},
max_width=778
%}
{% dnd_column %}
{% dnd_row %}
{% dnd_module path='@hubspot/rich_text' %}
{% module_attribute 'html' %}
{{ context.content || '
Communicate Your Way
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dapibus posuere mi, in pretium ante posuere a. Aliquam a risus at eros molestie pretium.
' }}
{% end_module_attribute %}
{% end_dnd_module %}
{% end_dnd_row %}
{% dnd_row %}
{% dnd_module
path='../modules/button',
button_text={{ context.buttonText || 'Subscribe' }}
horizontal_alignment='CENTER'
%}
{% end_dnd_module %}
{% end_dnd_row %}
{% end_dnd_column %}
{% end_dnd_section %}
```
> [!NOTE]
>
> Notez que lorsque des variables de contexte sont utilisées, il existe un filtre `||` *OR* pour fournir un contenu par défaut si aucun contenu n'est fourni. Par exemple, dans le module bouton, si `context.buttonText` a une valeur, la page l'utilisera. Dans le cas contraire, le texte est défini sur `Subscribe`.
### Classes de section
Dans les modèles de section, vous pouvez ajouter des classes au wrapper de la section à l'aide du paramètre class. Cela ajoutera la classe que vous avez spécifiée au champ de classe de l'élément html de la section dnd. Il est recommandé, dans la mesure du possible, d'utiliser des contrôles de style intégrés aux sections pour permettre aux créateurs de contenu de les modifier.
> [!WARNING]
>
> **Remarque :** les classes de section ne sont prises en charge que dans les modèles de section.
```hubl theme={null}
{% dnd_section
class='my-hero-section'
padding={
'top': 200,
'right': 20,
'bottom': 200,
'left': 20
},
background_image={
'backgroundPosition': 'MIDDLE_CENTER',
'backgroundSize': 'cover',
'imageUrl': context.backgroundImage || get_asset_url('../images/blank-page-banner.png')
},
max_width=778,
vertical_alignment='MIDDLE'
%}
...
```
> [!WARNING]
>
> Les créateurs de contenu ne peuvent pas modifier, ajouter ou supprimer des classes. Elles ne peuvent être supprimées qu'en recréant une section manuellement dans l'éditeur.
>
> En outre, vous devez éviter de modifier la disposition des enfants de la section à l'aide de CSS ou de JavaScript. Cela peut créer une expérience d'édition de page désagréable pour le créateur de contenu.
### Prévisualiser votre section
La manière la plus simple de prévisualiser votre section pendant le développement est d'utiliser le gestionnaire de conception. Ouvrez un modèle contenant un [`dnd_area`](/docs/cms/reference/hubl/tags/dnd-areas) qui appelle votre modèle de section à l'aide d'une balise `include_dnd_partial`. Dans l'angle supérieur droit, cliquez sur aperçu. Vous pouvez ainsi continuer à mettre à jour votre section et voir vos changements reflétés immédiatement. Vous n'avez pas à créer une nouvelle page pour chaque modification apportée.
## Copie de section HubL
Dans l'éditeur de page, vous pouvez copier le balisage HubL d'une section par glisser-déposer afin de réutiliser le code si nécessaire. Cela peut s'avérer utile lorsque l'on souhaite recréer des sections de glisser-déposer dans un fichier codé.
Pour copier le balisage HubL d'une section :
* Accédez à votre contenu :
* **Pages de site web** : dans votre compte HubSpot, naviguez vers **Contenu** > **Pages de site web**.
* **Pages de destination** : dans votre compte HubSpot, accédez à **Contenu** > **Pages de destination**.
* Cliquez sur une page pour la modifier.
* Dans l'éditeur de page, ajoutez le paramètre suivant à l'URL, puis appuyez sur **Entrée** : `?developerMode=true`
* Une fois la page rechargée, vous serez maintenant en mode développeur. Vous pouvez quitter le mode développeur à tout moment en cliquant sur **Quitter le mode développeur** dans l'angle supérieur droit.

* Placez le curseur sur la section que vous souhaitez copier, puis cliquez sur l'icône de la **flèche vers le bas**. Sélectionner **Copier en tant que HubL**. Le balisage HubL sera alors copié dans votre presse-papiers.

## Ressources associées
* [Présentation des zones de glisser-déposer](https://developers.hubspot.fr/docs/guides/cms/content/templates/drag-and-drop/overview)
* [Balises HubL de la zone de glisser-déposer](/docs/cms/reference/hubl/tags/dnd-areas)
* [Utilisation de modules dans les modèles](/docs/cms/reference/modules/using-modules-in-templates)
* [Démarrer avec les zones de glisser-déposer](/docs/cms/start-building/building-blocks/drag-and-drop/tutorial)
* [Comment activer le mode développeur dans l'éditeur de pages de CMS Hub - YouTube](https://www.youtube.com)
# Modèles de blogs
Source: https://developers.hubspot.fr/docs/cms/start-building/building-blocks/templates/blog
Les modèles de listing de blog et d'article de blog peuvent être utilisés pour personnaliser l'apparence du blog d'un site.
> **Produits pris en charge**
Les blogs HubSpot sont constitués de pages de listing de blog et des articles de blog individuels. En plus de répertorier les articles de blog individuels, le modèle de listing de blog est également utilisé pour restituer les pages de listing d'auteur et de balise. Vous pouvez créer un modèle unique pour restituer toutes les pages de listing et d'article de blog ou créer deux modèles distincts.
Découvrez ci-dessous le balisage des modèles de blog, les composants des modèles et les options de personnalisation.
## Créer un modèle commun pour les pages de listing et d'articles
Pour créer un modèle qui restitue les pages de listing et d'article, ajoutez l'[annotation](/docs/cms/start-building/building-blocks/templates/html-hubl-templates#template-annotations) `templateType: blog` en haut de votre fichier de modèle. Si vous utilisez un modèle pour restituer les deux, vous utiliserez une [fonction if](/docs/cms/reference/hubl/if-statements) qui détermine si l'utilisateur consulte une page de listing ou un article individuel. Si vous utilisez les [mises en page du gestionnaire de conception en glisser-déposer](/docs/cms/start-building/building-blocks/drag-and-drop/drag-and-drop-templates), cette fonction `if` est intégrée à l'interface utilisateur des boutons de module de contenu du blog.
En utilisant l'instruction `if is_listing_view`, vous pouvez écrire séparément le code de l'article et celui de la liste.
```hubl theme={null}
{% if is_listing_view %}
Markup for blog listing template
{% else %}
Markup for blog post template
{% endif %}
```
## Créer des modèles de listing et d'articles distincts
Vous pouvez également choisir d'avoir des modèles distincts pour les [articles de blog](https://developers.hubspot.fr/docs/guides/cms/content/templates/overview#blog-post) et les [pages de listing](https://developers.hubspot.fr/docs/guides/cms/content/templates/overview#blog-listing), ce qui peut contribuer à rendre votre code plus propre et plus facile à lire en tant que développeur, tout en rendant les modèles plus faciles à sélectionner pour les créateurs de contenu. Plutôt que d'utiliser l'annotation `templateType: blog` en haut d'un modèle, incluez les [annotations](https://developers.hubspot.fr/docs/guides/cms/content/templates/overview#template-types) suivantes en haut de vos deux modèles :
* **Modèle d'article de blog :** `templateType: blog_post`
* **Modèle de liste de blog :** `templateType: blog_listing`

Lors de la création de modèles distincts pour les articles et les listes, la vérification `is_listing_view` n'est pas nécessaire. Au lieu de cela, vous devez [sélectionner manuellement des modèles distincts](https://knowledge.hubspot.com/fr/blog/manage-your-blog-template-and-settings#select-your-blog-templates) dans les paramètres de blog du compte.
Vous pouvez également [migrer un modèle de blog unifié existant pour en faire un modèle d'article de blog ou un modèle de liste de blogs](https://developers.hubspot.fr/docs).
### Modèles de pages de listing
L'annotation `templateType: blog_listing` rend le modèle disponible pour la [sélection dans les paramètres du blog](https://knowledge.hubspot.com/fr/blog/manage-your-blog-template-and-settings), spécifiquement pour la vue de la liste. Avec ce type de modèle, les créateurs de contenu peuvent également modifier la page d'inscription dans l'éditeur de pages. En incluant également des [zones de glisser-déposer](https://developers.hubspot.fr/docs/guides/cms/content/templates/drag-and-drop/overview) dans le modèle, les modules peuvent être ajoutés et supprimés dans l'éditeur en glisser-déposer, comme c'est le cas pour les autres pages du CMS. Consultez les [modèles de blog CMS boilerplate](https://github.com/HubSpot/cms-theme-boilerplate/pull/349) pour voir des exemples d'inclusion de zones de glisser-déposer.
La liste des articles est générée par une [boucle for](/docs/cms/reference/hubl/loops) qui parcourt les articles de votre blog. `contents` est une séquence prédéfinie de contenu qui contient tous les articles de ce blog.
```hubl theme={null}
{% for content in contents %}
Post item markup that renders with each iteration.
{% endfor %}
```
> [!NOTE]
>
> Il est recommandé de faire en sorte que toutes les chaînes de texte de votre modèle de liste de blogs soient contrôlées par des champs. Cela facilite la création de blogs [multilingues](/docs/cms/start-building/features/multi-language-content) et donne plus de contrôle aux créateurs de contenu.
## Créer un module de liste de blogs
Vous pouvez permettre aux créateurs de contenu de placer des modules sur le périmètre du contenu de la liste de blogs, par exemple sur les côtés, ou au-dessus et en dessous. Pour ce faire, il est recommandé de créer un module de liste de blogs qui utilise une [boucle for liste de blogs.](/docs/cms/start-building/building-blocks/templates/blog#blog-listing-for-loop) À titre d'exemple, consultez le [module de liste de blog CMS boilerplate](https://github.com/HubSpot/cms-theme-boilerplate/tree/main/src/modules/blog-listings.module). [](https://github.com/HubSpot/cms-theme-boilerplate/tree/main/src/modules/blog-listings.module)
Bien que HubSpot fournisse des [paramètres de blog](https://knowledge.hubspot.com/fr/blog/manage-your-blog-template-and-settings#select-your-blog-templates) pour l'affichage de résumés et l'utilisation d'images en vignette, vous pouvez également intégrer ces fonctionnalités dans votre module. Cela permet aux créateurs de contenu de définir ces fonctionnalités dans l'éditeur de page, plutôt que dans les paramètres du blog.
## Pages d'auteur de blog, de balise et de liste simple
En plus des pages d'articles de blog et de listes de blogs, les blogs HubSpot ont également des pages pour les auteurs de blogs, les balises d'articles de blog et des pages de listes simples. Ces pages supplémentaires utilisent le même modèle que la page de listing du blog pour restituer leur contenu.
> [!NOTE]
>
> Comme le modèle de page de liste est également partagé par la page d'auteur du blog, de balise et d'annonce simple, les mises à jour publiées sur le modèle s'appliqueront également à ces pages.
Pour configurer individuellement la mise en page de ces pages, vous pouvez utiliser les instructions `if` pour restituer le contenu de chaque type de page de manière conditionnelle.
### Fonction if blog\_author
Dans le balisage standard de listing de blog de HubSpot, il existe une instruction conditionnelle `if blog_author`. Cette affirmation est considérée comme vraie lorsque l'on consulte la page d'un auteur, qui répertorie les articles publiés par l'auteur. Le modèle de boilerplate comprend le nom de l'auteur, sa biographie et ses comptes de réseaux sociaux.
```hubl theme={null}
{% if blog_author %}
{% else %}
```
### Fonction if tag
Vous pouvez utiliser une instruction `if tag` pour ne restituer le code que sur une page de liste de sujets de blog, que les visiteurs peuvent voir lorsqu'ils cliquent sur un sujet de blog sur votre site. L'exemple ci-dessous est un bloc de texte prédéfini qui utilise la variable de titre de page pour imprimer automatiquement le nom de la balise en haut d'une page de listing de balise.
```hubl theme={null}
{% if tag %}
Posts about {{ page_meta.html_title|split(" | ")|last }}
{% endif %}
```
### Fonction if not simple\_list\_page
Il existe deux types de pages de liste de blogs qui peuvent être restituées pour afficher les articles de blogs : la page de liste ordinaire et la page de liste simple.
* La liste ordinaire parcourt le nombre d'articles spécifié par le paramètre de blog de listing d'article et pagine en conséquence.
* Une liste simple est une liste de tous vos articles et ne prend pas en charge la pagination. La liste simple n'est pas affectée par le [paramètre de limite d'articles de blog](/docs/cms/start-building/introduction/developer-environment/website-settings#number-of-posts-per-listing-page) et contient généralement les liens vers les 200 articles de blog les plus récents. L'adresse de votre page de listing simple est l'URL de votre blog avec `/all` ajouté à la fin du chemin.
Vous pouvez utiliser une instruction `if not simple_list_page` pour déterminer ce qui doit être restitué dans une liste simple par rapport à une liste ordinaire. Une version simplifiée de cette instruction est présentée ci-dessous.
> [!NOTE]
>
> Notez que l'instruction `if` utilise la logique inverse, ce qui signifie que l'instruction `else` définit la vue en liste simple. Vous pouvez éventuellement utiliser une [fonction unless](/docs/cms/reference/hubl/if-statements#unless-statements) à la place.
```hubl theme={null}
{% if not simple_list_page %}
Iterated post markup for regular listing
{% else %}
{% endif %}
```
## Pagination de listing
Les pages de listing de blog ont une pagination générée automatiquement. Votre modèle de listing peut inclure une logique permettant aux visiteurs de consulter facilement les articles de votre blog. Le [blog de boilerplate](https://boilerplate.hubspotcms.com/blog) permet une pagination simple et numérique grâce au [balisage suivant](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/modules/blog-pagination.module/module.html) :
```hubl theme={null}
{% if contents.total_page_count > 1 %}
{% endif %}
```
## Balisage boilerplate
Ci-dessous, vous trouverez le balisage boilerplate des modèles d'article de blog et de page de liste de blogs. Vous pouvez également consulter ce balisage dans le boilerplate du CMS sur GitHub, comme indiqué dans chaque section.
### Balisage des modèles d'article
Tous les articles d'un blog sont générés par un seul modèle de blog. `Content` est un objet de données prédéfini qui contient des informations sur l'article de blog demandé. Les [articles de boilerplate](https://boilerplate.hubspotcms.com/blog) sont restitués avec le [balisage suivant](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/blog-post.html) :
```hubl theme={null}
{% if content.blog_post_author.has_social_profiles %}
{% if content.blog_post_author.facebook %}
Facebook
{% endif %}
{% if content.blog_post_author.linkedin %}
LinkedIn
{% endif %}
{% if content.blog_post_author.twitter %}
Twitter
{% endif %}
{% if content.blog_post_author.google_plus %}
Google+
{% endif %}
{% endif %}
```
### Balisage des modèles de listing
Le contenu de la [page de listing de blog du boilerplate](https://boilerplate.hubspotcms.com/blog) pour la boucle for est restitué avec le [balisage suivant](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/blog-index.html) :
```hubl theme={null}
{% for content in contents %}
{# On the blog homepage the first post will be featured above older posts #}
{% if (loop.first && current_page_num == 1 && !topic) %}
{% endif %}
{% endfor %}
```
## Ressources associées
* [Variables de blog](/docs/cms/reference/hubl/variables#blog-variables)
* [Modèles de blogs](/docs/cms/start-building/building-blocks/templates/blog)
* [Thème boilerplate HubSpot](/docs/cms/start-building/building-blocks/themes/hubspot-cms-boilerplate)
* [Comment créer un blog](https://knowledge.hubspot.com/fr/blog/create-a-new-blog)
* [Importer votre blog dans HubSpot](https://knowledge.hubspot.com/fr/blog/import-your-content-into-hubspot)
# Balisage des modèles d'e-mails
Source: https://developers.hubspot.fr/docs/cms/start-building/building-blocks/templates/email-template-markup
L'article suivant porte sur la façon dont les modèles d'e-mails standard de HubSpot sont codés. Les clients de messagerie ne prennent en charge que certaines fonctionnalités HTML et CSS. Par conséquent, le codage de modèles d'e-mails dont le rendu est cohérent d'un client à l'autre requiert une bonne dose d'expérience et de patience. Pour vous faciliter la vie, les modèles d'e-mails HubSpot peuvent être créés sous forme de modèles conviviaux ou de fichiers codés.
> **Produits pris en charge**
Dans cet article, découvrez comment sont codés les modèles d'e-mails standard de HubSpot. Lorsque vous créez des modèles d'e-mails personnalisés, n'oubliez pas que les clients d'e-mail ne prennent en charge que [certaines fonctions HTML et CSS](http://www.campaignmonitor.com/css/). C'est pourquoi le codage de modèles d'e-mails dont le rendu est cohérent d'un client à l'autre requiert une bonne dose d'expérience et de patience.
Consultez la base de connaissances de HubSpot pour savoir comment [créer des mises en page de modèles dans l'application](https://knowledge.hubspot.com/fr/design-manager/create-page-email-and-blog-templates-in-the-layout-editor) ou comment [enregistrer un e-mail existant en tant que modèle](https://knowledge.hubspot.com/fr/marketing-email/save-your-marketing-email-as-a-template).
## Variables de modèle d'e-mail obligatoires
Afin d'envoyer des e-mails avec HubSpot, vos modèles doivent inclure certaines informations. Consultez les [variables HubL d'e-mail obligatoires](/docs/cms/reference/hubl/variables#required-email-template-variables). Lorsque vous travaillez avec des modèles codés, vous souhaiterez également utiliser des [modules](https://developers.hubspot.fr/docs/guides/cms/content/modules/overview) pour vous assurer que le contenu de chaque e-mail peut être facilement modifié.
## hs-inline-css et data-hse-inline-css
L'une des difficultés du codage de modèles d'e-mails, quel que soit le client, est [le manque de prise en charge des CSS](http://www.campaignmonitor.com/css/) dans un élément `
{# coded OR drag-and-drop email templates: #}
Column 1
Column 2
```
```text résultat.txt theme={null}
Column 1
Column 2
```
## Modèle d'e-mail adaptable
La mise en page par défaut du modèle d'e-mail de HubSpot utilise le balisage ci-dessous. Ces mises en page adaptatives comprennent des requêtes média qui rendent les images et les tableaux adaptatifs. Les mises en page adaptables utilisent des [variables de couleur et de police](/docs/cms/reference/hubl/variables#color-and-font-settings) associées à **Paramètres > Marketing > E-mail**.
> [!WARNING]
>
> Lorsque vous travaillez avec la mise en page adaptative de HubSpot, tout élément `
` dont la classe comprend le texte « colonne » sera rendu adaptatif.
```hubl theme={null}
{% if content.html_title and content.html_title != "" %}{{ content.html_title }}{% else %}{{ content.body.subject }}{% endif %}
{% if content.meta_description %}{% endif %}
{% text "preview_text" label="Preview Text This will be used as the preview text that displays in some email clients", value="", no_wrapper=True %}
{% if content.create_page %}
Not rendering correctly? View this email as a web page here.
{% endif %}
{% logo "logo_image" suppress_company_name=True, overrideable=True, label='Logo' %}
{% content_attribute "email_body" %}
Hi {{ contact.firstname }},
Describe what you have to offer the customer. Why should they read? What did you promise them in the subject line? Tell them something cool. Make them laugh. Make them cry. Well, maybe don't do that...
Use a list to:
Explain the value of your offer
Remind the reader what they’ll get out of taking action
```
## Modèle d'e-mail statique
Les modèles statiques de HubSpot utilisent un balisage différent et n'incluent pas les requêtes média qui rendent l'e-mail adaptatif. Les mises en page statiques utilisent également des [variables de couleur et de police](/docs/cms/reference/hubl/variables#color-and-font-settings) associées à **Paramètres > Marketing > E-mail**.
```hubl theme={null}
{% if content.html_title and content.html_title != "" %}{{ content.html_title }}{% else %}{{ content.body.subject }}{% endif %}
{% if content.meta_description %}{% endif %}
{% text "preview_text" label="Preview Text This will be used as the preview text that displays in some email clients", value="", no_wrapper=True %}
{% if content.create_page %}
Not rendering correctly? View this email as a web page here.
{% endif %}
{% logo "logo_image" suppress_company_name=True, overrideable=True, label="Logo" %}
{% content_attribute "email_body" %}
Hi {{ contact.firstname }},
Describe what you have to offer the customer. Why should they read? What did you promise them in the subject line? Tell them something cool. Make them laugh. Make them cry. Well, maybe don't do that...
Use a list to:
Explain the value of your offer
Remind the reader what they’ll get out of taking action
```
## Partir de zéro
Lorsque vous créez un e-mail .html à partir de zéro dans le gestionnaire de conception, HubSpot génère automatiquement le balisage ci-dessous.
```hubl theme={null}
{% if content.html_title and content.html_title != '' %}{{ content.html_title }}{% else %}{{ content.body.subject }}{% endif %}
{% if content.meta_description %}{% endif %}
{% text "preview_text" label="Preview Text This will be used as the preview text that displays in some email clients", value="", no_wrapper=True %}
{% if content.create_page %}
Not rendering correctly? View this email as a web page here.
{% endif %}
{{ site_settings.company_name }}
{{ site_settings.company_street_address_1 }}
{{ site_settings.company_street_address_2 }}
{{ site_settings.company_city }}
{{ site_settings.company_state }}
{{ site_settings.company_zip }}
{{ site_settings.company_country }}
You received this email because you are subscribed to {{ subscription_name }} from {{ site_settings.company_name }}.
Update your email preferences to choose the types of emails you receive.
Unsubscribe from all future emails
```
# Modèles HTML et HubL
Source: https://developers.hubspot.fr/docs/cms/start-building/building-blocks/templates/html-hubl-templates
Les modèles du CMS Hub sont écrits en HTML et en HubL. Ces modèles sont capables de contenir des régions que les créateurs de contenu peuvent facilement modifier eux-mêmes.
Les modèles HTML et HubL peuvent être utilisés pour [chaque type de modèle](https://developers.hubspot.fr/docs/guides/cms/content/templates/overview#template-types) sur le CMS Hub. Ces modèles sont des fichiers .html qui prennent en charge le [langage de modélisation HubL](/docs/cms/reference/hubl/operators-and-expression-tests). Comme ces modèles codés prennent en charge HubL, la meilleure expérience de prévisualisation consiste à utiliser [l'aperçu du modèle dans le gestionnaire de conception ](https://knowledge.hubspot.com/fr/website-pages/understand-a-hubspot-template-setup)ou à visualiser les pages sur un compte sandbox. Les modèles HTML et HubL peuvent contenir des partiels[](#partials), qui peuvent être utilisés pour séparer des morceaux de code couramment utilisés, tels qu'un en-tête ou un pied de page.
Les modèles HTML et HubL donnent un plus grand contrôle aux développeurs que les [modèles de type glisser-déposer du gestionnaire de conception visuelle](/docs/cms/start-building/building-blocks/drag-and-drop/drag-and-drop-templates). À leur tour, les développeurs peuvent offrir de meilleures expériences aux créateurs de contenu grâce à [la fonctionnalité de glisser-déposer](/docs/cms/reference/hubl/tags/dnd-areas), ce qui n'est possible qu'avec les modèles HTML et HubL.

> [!NOTE]
>
> Le modèle ci-dessus est le [modèle base.html](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/layouts/base.html) inclus dans le [boilerplate du CMS HubSpot](/docs/cms/start-building/building-blocks/themes/hubspot-cms-boilerplate), qui permet de bien démarrer dans le développement avec HubSpot.
## Familiarité et outils
Étant donné que les modèles HTML et HubL sont des fichiers codés, vous pouvez utiliser vos outils préférés pour les modifier localement. Il est recommandé d'utiliser les [outils de développement local](https://developers.hubspot.fr/docs/guides/cms/tools/local-development-cli) de HubSpot afin que vous puissiez [charger](https://developers.hubspot.fr/docs/guides/cms/tools/local-development-cli#upload), [récupérer](https://developers.hubspot.fr/docs/guides/cms/tools/local-development-cli#fetch), [consulter](https://developers.hubspot.fr/docs/guides/cms/tools/local-development-cli#watch), [créer](https://developers.hubspot.fr/docs/guides/cms/tools/local-development-cli#create) ou gérer de manière sécurisée des fichiers dans le système de fichiers du développeur ainsi que dans le gestionnaire de fichiers.
La création de modèles HTML et HubL avec HubSpot est similaire à l'utilisation d'un autre langage de modélisation que vous avez peut-être utilisé auparavant. La principale différence réside dans le fait que HubSpot adopte une position bien arrêtée sur les meilleures façons de faire certaines choses afin d'offrir la meilleure expérience possible aux créateurs de contenu et de décharger le développeur d'une grande partie du travail de maintenance et d'optimisation des performances.
Par exemple, si vous souhaitez charger un fichier CSS sur une page pour certains modules, au lieu d'utiliser ``, vous devez inclure la feuille de style via `css_assets` dans le [fichier meta.json du module](/docs/cms/reference/modules/configuration#adding-css-and-javascript-dependencies). Cela permet à HubSpot de charger de façon conditionnelle la CSS uniquement lorsque le module est présent sur une page, minimisant ainsi la quantité de CSS inutiles chargées.
Découvrez-en davantage sur [l'optimisation de votre workflow de développement HubSpot](/docs/cms/start-building/introduction/developer-environment/creating-an-efficient-development-workflow).
## Annotations de modèles
Les annotations de modèles, incluses en haut d'un modèle, configurent des paramètres de modèle importants, tels que le type de modèle et s'il peut être utilisé pour créer un nouveau contenu. Les annotations de modèles peuvent être modifiées à tout moment au cours du processus de développement. Découvrez-en davantage sur les annotations de modèles disponibles ci-dessous.
```html theme={null}
...
```
| Annotation | Type | Description |
| - | - | - |
| `templateType` | Chaîne | Permet d'indiquer le type de modèle d'un fichier. Les valeurs sont les suivantes :
|
| `isAvailableForNewContent` | Chaîne | Permet d'indiquer si un modèle est disponible à la sélection dans le processus de création de contenu. Les valeurs sont : `true`, `false`. Les modèles définis sur la valeur `false` n’ont pas besoin d’inclure les [variables requises](/docs/cms/reference/hubl/variables#required-page-template-variables). Les modèles de type `page` qui sont définis sur la valeur false peuvent également être utilisés comme [partiel standard](#partials). |
| `enableDomainStylesheets` | Chaîne | Permet d'indiquer si le modèle doit charger les [feuilles de style de domaine](https://knowledge.hubspot.com/fr/design-manager/create-edit-and-attach-css-files-to-style-your-site#attach-or-remove-stylesheets-on-a-domain-level). Les valeurs comprennent : `true`, `false`. |
| `Label` | Chaîne | La description conviviale du modèle, affichée dans l'écran de sélection du modèle. Par exemple : `About Page`, `Homepage`, `Pricing`. |
| `screenshotPath` | Chaîne | La capture d'écran à afficher lorsqu'un créateur de contenu sélectionne un modèle. Cette capture d'écran devrait permettre de différencier facilement vos modèles. |
## En-tête et pied de page inclus
Les modèles de HubSpot exigent la présence de deux balises, sauf si le fichier est un partiel de modèle. Les deux balises sont :
* `{{ standard_header_includes }}` - Permet d’ajouter intelligemment la CSS requise combinée et minifiée.
* `{{ standard_footer_includes }}` - Permet d’ajouter intelligemment du JavaScript au bas d’une page de façon dynamique, pour le script de suivi HubSpot et les modules par exemple.
Ces balises doivent être présentes dans un modèle ou ses enfants [partiels](#partials) pour être publiés et utilisés.
## Partiels
Les partiels de modèles sont des fichiers HTML et HubL qui peuvent être inclus dans d'autres fichiers codés. Les partiels vous permettent d'adopter une approche plus modulaire en partageant le même balisage pour plusieurs modèles. Par exemple, un en-tête peut être rendu en tant que partiel afin que vous puissiez facilement l'inclure comme composant sans avoir à le coder à nouveau.
### Partiels standards
Un partiel standard est un modèle ou un composant réutilisable contenant du contenu qui peut être modifié sur des pages individuelles. Cela permet aux créateurs de contenu de modifier le contenu au besoin, par opposition aux partiels globaux qui partagent toujours le même contenu. Par exemple, le code suivant extrairait le module de barre latérale dans un autre fichier de modèle.
Les partiels standards doivent inclure les [annotations](/docs/cms/start-building/building-blocks/templates/html-hubl-templates#template-annotations) suivantes en haut du fichier de modèle :
* `templateType: page`
* `isAvailableForNewContent: false`
```hubl theme={null}
{% include "../partial/sidebar.html" %}
```
### Partiels globaux
Un partiel global est un type de [contenu global](/docs/cms/start-building/building-blocks/global-content#global-partials) qui peut être utilisé sur plusieurs modèles avec du contenu qui est partagé sur toutes les instances du partiel. Les partiels globaux sont souvent utilisés pour les en-têtes et les pieds de page, dont vous pouvez voir un exemple dans l'[en-tête](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/partials/header.html) et le [pied de page](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/partials/footer.html) du boilerplate de CMS Hub. Ces partiels sont ensuite appelés dans [base.html](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/layouts/base.html) à l’aide de la balise `global_partial`.
Les partiels globaux doivent inclure l'[annotation](/docs/cms/start-building/building-blocks/templates/html-hubl-templates#template-annotations) `templateType: global_partial` en haut du fichier.
```hubl theme={null}
{% global_partial path="../partials/header.html" %}
```
### Blocs et extensions
Lors de la création de modèles complexes, vous pouvez créer des blocs compartimentés qui étendent un modèle parent.
Par exemple, vous pouvez créer un modèle parent qui inclut les variables [`standard_header_includes`](/docs/cms/reference/hubl/variables#required-page-template-variables) et [`standard_footer_includes`](/docs/cms/reference/hubl/variables#required-page-template-variables) requises. Dans ce modèle, vous définissez un bloc unique à l’aide de la syntaxe suivante où `body` est un nom unique :
```hubl theme={null}
{% block body %}
{% endblock body %}
```
Ensuite, dans le modèle enfant, vous pouvez étendre le modèle parent, puis insérer plus de contenu dans le bloc `body`.
```hubl theme={null}
{% extends "./layouts/base.html" %}
{% block body %}
Page Content
Bullet 1
Bullet 2
Bullet 3
{% endblock %}
```
Cette méthode est utilisée dans le modèle [base.html](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/layouts/base.html) du boilerplate de CMS Hub, qui est ensuite étendu par les autres modèles dans le [dossier de modèles](https://github.com/HubSpot/cms-theme-boilerplate/tree/main/src/templates).
### Groupes globaux
Les [groupes globaux](https://knowledge.hubspot.com/fr/design-manager/use-global-content-across-multiple-templates) créés à l'aide du générateur de modèles par glisser-déposer dans le gestionnaire de conception peuvent également être inclus. La syntaxe est affichée ci-dessous :
```hubl theme={null}
{% include "/path/to/global_header.template.json" %}
```
# Legacy quote templates
Source: https://developers.hubspot.fr/docs/cms/start-building/building-blocks/templates/legacy-quotes
# Vue d'ensemble des modèles
Source: https://developers.hubspot.fr/docs/cms/start-building/building-blocks/templates/overview
Les modèles sont des encadreurs de pages ou d'e-mails réutilisables qui placent généralement des modules et des partials dans une mise en page. Les créateurs de contenu sélectionnent un modèle à utiliser avant de créer une page ou un e-mail.
Les modèles définissent la mise en page de vos pages, vos e-mails et vos thèmes HubSpot. Un modèle se compose de modules et de partials, et peut faire référence à d'autres ressources telles que des feuilles de style et des fichiers JavaScript. Les modèles peuvent être créés soit à l'aide de [HubSpot CLI](/docs/cms/start-building/introduction/react-plus-hubl/react-plus-hubl-quickstart), soit dans le [Gestionnaire de conception de HubSpot](https://knowledge.hubspot.com/fr/design-manager/create-page-email-and-blog-templates-in-the-layout-editor). Pour les créateurs de contenu, le modèle est la première chose qu'ils sélectionneront, à la création d'une page ou d'un e-mail.
Découvrez ci-dessous comment créer un modèle, les différents types de modèles et ce qui est inclus dans vos modèles.
## Créer un modèle
Pour créer un modèle, vous pouvez utiliser le [gestionnaire de conception dans HubSpot](https://knowledge.hubspot.com/fr/design-manager/create-page-email-and-blog-templates-in-the-layout-editor) ou exécuter la commande CLI `hs create template`.
```shell theme={null}
hs create template [dest]
```
| Paramètre | Description |
| - | - |
| `name` | Le nom du modèle |
| `dest` | Le chemin du répertoire local dans lequel vous voulez créer le modèle. S'il n'est pas inclus, le modèle sera créé dans le répertoire dans lequel vous vous trouvez actuellement. |
* À l'aide des touches flèches, accédez au [type de modèle](#template-types) que vous souhaitez créer, puis appuyez sur la touche **Entrée**.
Le modèle sera alors créé localement. Lorsque vous souhaitez rendre le modèle disponible pour une utilisation dans votre compte HubSpot, [chargez](https://developers.hubspot.fr/docs/guides/cms/tools/local-development-cli#upload) le modèle sur votre compte. Vous pouvez également utiliser la commande [watch](https://developers.hubspot.fr/docs/guides/cms/tools/local-development-cli#watch) pour télécharger automatiquement tous les nouveaux fichiers et les modifications apportées aux fichiers existants dans le répertoire de travail actuel et les répertoires enfants.
## Aperçu d'un modèle
Après avoir mis à jour un modèle, vous pouvez le prévisualiser pour vous assurer qu'il s'affiche et agit comme vous l'attendez. Il existe plusieurs façons dans HubSpot de prévisualiser un modèle :
* **Prévisualisation d'un modèle dans le gestionnaire de conception :** idéal pour les vérifications visuelles rapides ou lorsque vous devez prévisualiser un article de blog/une liste/un modèle combiné.
* **Création d'une nouvelle ressource à partir d'un modèle :** idéal pour tester l'éditeur en glisser-déposer et l'expérience de création de contenu.
### Aperçu avec le gestionnaire de conception
Prévisualiser des modèles à l'aide du gestionnaire de conception peut être particulièrement utile pour des vérifications visuelles rapides. L'aperçu du modèle vous permet également de configurer des options d'affichage, telles que les dimensions de viewport.
Pour prévisualiser un modèle dans le gestionnaire de conception :
* Dans votre compte HubSpot, accédez à **Marketing** > **Fichiers et modèles** > **Outils de conception**.
* À l'aide de l'explorateur de fichiers de la barre latérale de gauche, cliquez sur le **modèle** que vous souhaitez prévisualiser.
* Dans l'angle supérieur droit, cliquez sur **Aperçu**.
* Sélectionnez **Aperçu en ligne avec options d'affichage** pour afficher un aperçu du modèle avec des options pour tester la réactivité et les paramètres de domaine tels que les feuilles de style. Cette option affiche la page dans un iFrame. Cela vous permet également de choisir entre les blogs et l'article de blog ou la vue de liste pour les modèles de blog.
* Sélectionnez **Aperçu sans options d'affichage** pour prévisualiser le modèle sans options supplémentaires.

### Aperçu avec une nouvelle page
Pour modifier les zones de glisser-déposer, les valeurs des paramètres par défaut des modules ou d'autres changements importants, il est préférable de [créer une page de site web](https://knowledge.hubspot.com/fr/website-and-landing-pages/create-and-customize-pages), un [blog](https://knowledge.hubspot.com/fr/blog/create-a-new-blog), un [article de blog](https://knowledge.hubspot.com/fr/blog/create-and-publish-blog-posts) ou un [e-mail](https://knowledge.hubspot.com/fr/marketing-email/create-marketing-emails-in-the-drag-and-drop-email-editor) en utilisant le modèle. Vous pouvez ensuite essayer différentes valeurs de champ de module et tester ce à quoi ressemblera votre modèle une fois en ligne et l'optimiser pour offrir la meilleure expérience au créateur de contenu. Vous pouvez publier ces ressources ou les laisser en mode brouillon à des fins de test.
En outre, vous pouvez utiliser la [préparation de contenu](https://knowledge.hubspot.com/fr/website-pages/redesign-and-relaunch-your-site-with-content-staging#new) ou un [compte sandbox de développeur](https://offers.hubspot.com/free-cms-developer-sandbox) pour créer et afficher des ressources sans avoir d'impact sur un compte de production.
## Types de modèle
Les modèles peuvent être utilisés pour différents types de contenu, tels que des pages de site web et des articles de blog. Dans les modèles codés, vous désignez le type de modèle en ajoutant une annotation en haut du fichier.
Découvrez ci-dessous les différents types de modèles et les annotations que vous pouvez utiliser pour désigner chaque type.
> [!WARNING]
>
> ### Remarque :
>
> Un créateur de contenu peut échanger le modèle d'une page contre un autre modèle du même type, selon qu'il possède ou non des balises [dnd\_area](https://developers.hubspot.fr/docs/reference/cms/hubl/tags/dnd-areas).
>
> * Les modèles construits avec l'éditeur visuel de mise en page par glisser-déposer peuvent être remplacés par d'autres modèles par glisser-déposer ou par des modèles codés avec ou sans les balises `dnd_area`.
> * Les modèles codés avec des balises *dnd\_area* ne peuvent être échangés que contre d'autres modèles codés avec des balises `dnd_area`.
> * Les modèles codés sans balises `dnd_area` ne peuvent être échangés que contre d'autres modèles codés sans balises `dnd_area`.
### Page
```html theme={null}
templateType: page
```
Les modèles de page correspondent au type de modèle le plus ouvert. Ils peuvent servir de page web ou de [page de destination](https://blog.hubspot.com/blog/tabid/6307/bid/7177/what-is-a-landing-page-and-why-should-you-care.aspx), quelle qu'en soit la forme. Les [mises en page](#layout-css) ne sont pas pré-remplies avec des composants. Les modèles de page codés sont préremplis avec un balisage sommaire comprenant des balises HubL suggérées pour les méta-informations, le titre, [notamment](#included-cms-files) les en-têtes et pieds de page obligatoires. Les exemples de pages qui utilisent généralement un modèle de page incluent, mais ne sont pas limités à :
* [Page d'accueil](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/home.html)
* [À propos de nous](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/about.html)
* [Contact](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/contact.html)
### E-mail
```html theme={null}
templateType: email
```
Les modèles d'e-mails sont utilisés par l'[outil e-mail](https://www.hubspot.fr/products/marketing/email). Ils sont soumis aux exigences les plus strictes, car ils doivent être affichés dans de nombreux clients de messagerie différents et se conformer aux meilleures pratiques pour garantir une bonne délivrabilité. Les modèles d'e-mails [HTML et HubL](/docs/cms/start-building/building-blocks/templates/html-hubl-templates) et ceux du gestionnaire de conception par glisser-déposer sont préremplis de composants de base lors de leur création. Les modèles avec ce `templateType` sont uniquement visibles pour la sélection de modèles lors de la [création d'un e-mail](https://knowledge.hubspot.com/fr/marketing-email/create-and-send-marketing-emails-with-the-updated-classic-editor).
Afin de rester conformes à la norme [CAN-SPAM](https://knowledge.hubspot.com/fr/marketing-email/edit-office-location-information-in-email-footers), les modèles d'e-mails comportent un ensemble de [variables obligatoires](https://developers.hubspot.fr/docs/reference/cms/hubl/variables#required-email-template-variables) qui doivent être incluses.
Les modèles d'e-mail disposent également d'une fonctionnalité intégrée permettant d'ajouter [inline-css](/docs/cms/start-building/building-blocks/templates/email-template-markup#hs-inline-css-and-data-hse-inline-css) aux éléments `
{% end_require_css %}
{##### Module HTML #####}
```
### Styles et JavaScript
* Styles :
* Les modules ne doivent pas avoir de groupe de style vide.
* Le codage en dur des styles en ligne dans les modules est déconseillé. Au lieu de cela, utilisez des styles en ligne dynamiques en activant les champs pour contrôler le style.
* JavaScript :
* JavaScript doit pouvoir représenter plusieurs instances d'un module. JavaScript dans JS Pane ne sera chargé qu'une fois par page, quel que soit le nombre d'occurrences de modules.
* JavaScript doit référencer les éléments DOM par des noms de classe spécifiques pour garantir que les éléments extérieurs au module ne sont pas affectés par inadvertance.
Lors de la création de modules, vous pouvez utiliser une variable intégrée appelée `{{name}}`. Cette variable extrait l'ID d'instance du module (qui peut être utilisé dans le panneau HTML+HubL uniquement) pour favoriser le balisage CSS et JS pour les modules complexes. [Découvrez-en davantage à ce sujet dans la documentation des développeurs.](/docs/cms/reference/modules/files#require-css-block)
## Organisation des champs
Les exigences suivantes en matière d'organisation et de regroupement des champs doivent être respectées.
### Onglet Contenu
* Lorsqu'il y a au moins un contrôle au sein d'un groupe de champs, tous les contrôles doivent être regroupés en catégories libellées selon leur fonction.
* Les champs de module ajoutés à l'onglet *Contenu* doivent permettre de personnaliser le contenu d'un module. Par exemple, les contrôles d'image, d'icône, de texte alternatif et de lien.
### Onglet Styles
Les groupes de champs de style de module doivent être cohérents et suivre un modèle. Découvrez ci-dessous l'ordre recommandé pour vos groupes de champs de style. Ces groupes peuvent être soit au niveau supérieur, soit [imbriqués dans un groupe](#multi-level-grouping). Les groupes vides peuvent également être supprimés :
* [Préréglages](#presets)
* Texte
* Arrière-plan
* Bordure
* Curseur
* Angle
* Espacement
* Alignement
* Groupes de styles personnalisés qui ne correspondent pas à ce qui précède
* Avancé
Les types de champs suivants doivent être contenus dans l'onglet *Styles*, le cas échéant :
* [Alignement](/docs/cms/reference/fields/module-theme-fields#alignment)
* [Image d'arrière-plan](/docs/cms/reference/fields/module-theme-fields#background-image)
* [Bordure](/docs/cms/reference/fields/module-theme-fields#border)
* [Couleur](/docs/cms/reference/fields/module-theme-fields#color)
* [Police](/docs/cms/reference/fields/module-theme-fields#font)
* [Dégradé](/docs/cms/reference/fields/module-theme-fields#gradient)
* [Espacement](/docs/cms/reference/fields/module-theme-fields#spacing)
* [Alignement du texte](/docs/cms/reference/fields/module-theme-fields#text-alignment)
Lorsque vous déplacez des champs de l'onglet *Contenu* vers l'onglet *Styles*, découvrez comment [utiliser le mappage d'alias](/docs/cms/start-building/building-blocks/fields/alias-mapping) pour préserver le style des modules déjà utilisés sur les pages en direct.
* Les options d'animation doivent toujours être positionnées à la fin de la liste des groupes de champs.
* Les options qui permettent aux créateurs de contenu d'ajouter des extraits de code ou des CSS doivent être regroupées à la fin de la liste des groupes de champs sous un champ intitulé *Avancé*.
* Les contrôles doivent être uniformisés dans tous les modules. Par exemple, tous les éléments qui peuvent avoir un contrôle de rayon de bordure doivent proposer ce contrôle. Évitez de proposer des contrôles sur des modules qui sont absents sur d'autres.
* Les champs de module ajoutés à l'onglet *Style* doivent permettre de styliser le module. Par exemple :
* Les options de style incluent la couleur, le style de texte, l'alignement, l'espacement, la bordure et le rayon d'angle.
* Les animations incluent des effets au survol et concernant les diapositives.
* Les préréglages incluent des thèmes sombres et clairs qui sont destinés à changer de nombreux styles en même temps.
### Exemples d'organisation des champs
#### Préréglages
Les préréglages peuvent être utilisés lorsque vous souhaitez donner aux créateurs de contenu un ensemble limité d'options, souvent liées aux paramètres du thème. Par exemple, le module *Icône* inclus dans le thème Growth contient des préréglages pour les couleurs *Dark* et *Light*, ce qui permet une cohérence lorsqu'il est utilisé sur le site web.
#### Regroupement multi-niveaux
Lorsque vous décidez de garder les champs de style au niveau supérieur ou de les imbriquer, tenez compte de l'exemple suivant.
Le module *Icône* inclus dans le thème Growth répertorie tous ses styles au niveau supérieur, car il s'agit d'un composant unique. Ses options de style ont donc toutes un impact sur le composant unique.

Le module *Carte d'intervenant* inclus dans le thème Growth contient plusieurs composants : l'image de la carte et son contenu textuel. Les styles de module sont donc regroupés par composant afin que le créateur de contenu dispose d'un processus plus clair pour le style de chaque composant.

#### Regroupement de champs individuels
Le module de bouton ci-dessous contient des groupes pour les *préréglages*, le *texte*, l'*arrière-plan* et plus encore. Bien que le groupe de champs *Angle* contienne uniquement le contrôle du rayon, il est toujours regroupé pour créer une expérience de création de contenu uniforme.

# Directives du marketplace des modèles HubSpot
Source: https://developers.hubspot.fr/docs/cms/marketplace/template-guidelines
Le marketplace des modèles HubSpot aide des milliers de clients sans accès direct à un développeur à étendre leur présence en ligne. Il est repose sur la contribution de développeurs comme vous, qui créent des thèmes, modèles et modules esthétiques et faciles d'emploi.
Le [marketplace des modèles HubSpot](https://ecosystem.hubspot.com/marketplace/templates) aide des milliers de clients sans accès direct à un développeur à étendre leur présence en ligne. Il est alimenté par des développeurs qui créent des modèles faciles à utiliser pour les clients.
Vous pouvez vendre deux types de modèles sur le marketplace des modèles HubSpot : des [thèmes](https://ecosystem.hubspot.com/marketplace/website) et des [modules](https://ecosystem.hubspot.com/marketplace/modules).
## Pourquoi devrais-je vendre des modèles sur le marketplace ?
Le marketplace HubSpot a beaucoup à offrir aux développeurs ou aux agences qui cherchent à créer une nouvelle source de revenus.
* **Non exclusif :** vous avez travaillé dur pour créer vos modèles. Votre modèle ne devrait pas être uniquement disponible sur notre marketplace. Vous êtes également libre d'utiliser vos modèles en dehors du marketplace pour vos propres projets.
* \*\*Créez une fois, vendez plusieurs fois : \*\*lorsque votre modèle est listé sur le marketplace, il devient une opportunité de vente multiple. Il vous suffit de créer une seule fois votre modèle pour ensuite le vendre à plusieurs clients.
* \*\*Accélérez la croissance de votre entreprise : \*\*beaucoup de développeurs qui partagent leurs modèles (gratuits et payants) sur le marketplace de HubSpot ont vu leurs entreprises croître à la fois grâce aux revenus du marketplace et aux services supplémentaires demandés par les acheteurs.
* **Rejoignez une communauté de créateurs et mettez en valeur vos compétences :** connectez-vous à un écosystème solidaire en pleine croissance pour aider à façonner l'avenir du marketplace des modèles HubSpot tout en apportant plus de visibilité à vos offres et services.
## Présentation et conditions
Pour commencer à vendre sur le marketplace de modèles, [créez un compte fournisseur de marketplace de modèles](https://app.hubspot.com/signup-hubspot/asset-provider).
Toute soumission de modèle doit respecter les conditions de conformité, de conception et de qualité de code. Chaque type de modèle a également ses propres conditions, qui doivent être remplies afin d'être listé sur le marketplace. Vous pouvez consulter ces critères ci-dessous :
Avant de commencer à créer des modèles pour le marketplace, HubSpot recommande vivement de consulter ses directives sur la [création pour le marketplace des modèles HubSpot](https://www.hubspot.com/template-providers), le [branding](https://www.hubspot.com/providers/template/branding-guidelines), l'[utilisation des marques de commerce](https://legal.hubspot.com/tm-usage-guidelines) et l'[utilisation du contenu](https://www.hubspot.com/content-usage-guidelines). Les modèles qui enfreignent ces directives seront immédiatement supprimés du marketplace, comme décrit dans les conditions supplémentaires de HubSpot.
### Exigences en matière de thème
Un ensemble portable et contenu de modèles, de modules, de contenus globaux et de paramètres de style conçus pour fonctionner ensemble et permettre une expérience d'édition de contenu conviviale pour les professionnels du marketing.
[Consulter les exigences en matière de thème](https://developers.hubspot.com/docs)
### Exigences en matière de module
Les thèmes soumis contiennent des modules, qui sont des composants réutilisables pouvant être utilisés dans des modèles ou ajoutés à des pages via des zones de glisser-déposer et des colonnes flexibles. Vous pouvez également soumettre des modules indépendants. Ce sont des modules qui peuvent être ajoutés à n'importe quel thème dans l'éditeur de contenu de HubSpot.
[Consulter les exigences en matière de module](https://developers.hubspot.com/docs)
### Conditions relatives aux pages de listing
Les conditions auxquelles il faut se conformer lors de la soumission de modèles et de leurs pages de listing sur le marketplace des modèles HubSpot. Ces normes s'appliquent à tous les modèles présents sur le marketplace.
[Afficher les conditions relatives aux pages de listing](https://developers.hubspot.com/docs)
### Politiques du marketplace des modèles
Conditions et détails de conformité pour les modèles de listing sur le marketplace des modèles.
[Afficher les politiques du marketplace des modèles](https://developers.hubspot.com/docs)
## Lister et mettre à jour les thèmes sur le marketplace des modèles
Lorsque vous avez créé votre modèle, soumettez-le pour approbation afin qu'il soit répertorié sur le marketplace des modèles HubSpot. Une fois soumis, les modèles feront l'objet d'un processus d'examen et d'approbation par l'équipe du marketplace des modèles HubSpot. [Découvrez comment lister et mettre à jour vos modèles dans le marketplace des modèles.](https://developers.hubspot.com/docs)
## Passerelles de paiement prises en charge
HubSpot offre actuellement la possibilité aux fournisseurs du marketplace de se connecter aux passerelles de paiement suivantes pour recevoir des paiements :
* PayPal ([pays pris en charge](https://www.paypal.com/us/webapps/mpp/country-worldwide) | [paiements internationaux](https://www.paypal.com/us/cshelp/article/what-are-the-cross-border-fees-when-selling-internationally-help550))
* Stripe ([pays pris en charge](https://stripe.com/global) | [paiements internationaux](https://docs.stripe.com/connect/cross-border-payouts))
Les paiements des clients sont reçus par la méthode de paiement connectée à votre compte de fournisseur de marketplace :
* Dans votre compte HubSpot, accédez à **marketplace** > **Informations sur le fournisseur**.
* Dans la section *Mode de paiement*, consultez ou mettez à jour les informations de paiement.
HubSpot n'est pas responsable des problèmes de passerelle de paiement qui peuvent survenir pendant le processus d'achat. HubSpot ne touche rien sur les transactions, et toutes les transactions sont traitées indépendamment de la plateforme HubSpot. Si votre mode de paiement cesse de fonctionner pour quelque raison que ce soit, vos ressources peuvent être temporairement supprimées de la liste pour éviter une expérience client négative.
HubSpot a des clients dans le monde entier. Lors de la configuration de vos passerelles de paiement, nous vous recommandons vivement d'accepter les paiements provenant de devises internationales (paiements internationaux).
HubSpot encourage fortement les fournisseurs du marketplace des modèles à utiliser la passerelle de paiement Stripe si elle est disponible dans leur pays. Si Stripe n'est pas [disponible dans votre pays](https://stripe.com/global), nous recommandons l'utilisation de la passerelle de paiement PayPal.
## Demandes de remboursement
Vous êtes susceptible de recevoir des demandes de remboursement de la part d'acheteurs. HubSpot recommande d'indiquer clairement votre politique de remboursement dans la description d'un listing et de fournir un lien vers la documentation relative à votre politique de remboursement. HubSpot encourage les fournisseurs à honorer les demandes de remboursement valides. Découvrez-en davantage sur les [directives générales relatives aux demandes de remboursement](https://knowledge.hubspot.com/resources/marketplace-refund-guidelines).
## Gérer vos transactions
Une fiche d'informations de transaction est créée dans votre compte fournisseur du marketplace des modèles pour chaque modèle téléchargé par un client. Toutes les transactions seront acheminées dans un pipeline de transactions appelé *Transactions du marketplace* avec la phase *Transactions*. Lorsqu'un remboursement est émis pour une transaction, la propriété *Remboursé à* sera définie sur la fiche d'informations de transaction.
Les fournisseurs peuvent [personnaliser le pipeline de transactions ainsi que les phases de transaction](https://knowledge.hubspot.com/object-settings/set-up-and-customize-pipelines) et [utiliser des propriétés de transaction dans des workflows](https://knowledge.hubspot.com/workflows/choose-your-workflow-actions#property-management)[.](https://knowledge.hubspot.com/object-settings/set-up-and-customize-pipelines)
## Suppression de listing de modèle
HubSpot se réserve le droit de supprimer les listings de marketplace pour des raisons comprenant, sans s'y limiter :
* Des bugs sont présents dans le modèle.
* Des modèles tiers sont présents dans la soumission.
* Le modèle est incompatible avec les [navigateurs pris en charge par HubSpot](https://knowledge.hubspot.com/account-security/browsers-supported-by-hubspot)
* L'utilisation de contenu protégé par des droits d'auteur, comme des images, des icônes, des polices, des fichiers audio et des vidéos qui ne sont pas autorisés pour la distribution.
* Des modèles suivent les utilisateurs sans leur consentement éclairé et explicite.
* Des modèles (y compris un lien vers du contenu à partir du marketplace des modèles ou de votre démo du modèle) qui comprennent :
* La promotion ou l'engagement à des activités illégales.
* Du contenu péjoratif, dénigrant et/ou malveillant.
* Des revendications malhonnêtes ou fausses.
* Du contenu offensant sur la race, la religion, l'âge, le sexe ou l'orientation sexuelle.
* Les modules seront supprimés s'ils affectent d'autres éléments sur la page/l'e-mail auquel ils sont ajoutés.
## Questions fréquentes
> **Le règlement P2B de l'Union européenne (12 juillet 2020) s'applique-t-il aux marketplaces d'applications et de modèles ?**
>
> Non, la dernière réglementation P2B de l'Union européenne, entrée en vigueur le 12 juillet 2020, ne s'applique pas aux marketplaces des applications et des modèles de HubSpot. [En savoir plus](https://wayback.archive-it.org/12090/*/https://ec.europa.eu/digital-single-market/en/business-business-trading-practices)
> **Dois-je disposer d'un type de compte HubSpot spécifique pour pouvoir soumettre des ressources dans le marketplace ?**
>
> Un [compte fournisseur du marketplace](https://www.hubspot.com/template-providers) est requis pour effectuer une soumission sur le marketplace des modèles.
>
> Certains partenaires gèrent leurs listes marketplace dans leur compte partenaire pour utiliser les modèles dans le même compte. D'autres partenaires gèrent leurs listes dans un compte marketplace distinct pour conserver les modèles séparés des autres modèles dans leur outil de gestion de conception.
> **Les produits publiés dans le marketplace existent-ils dans mon compte ou dans le système marketplace de HubSpot ?**
>
> Les produits soumis ou publiés sur le marketplace existent dans le système marketplace de HubSpot. Les fournisseurs peuvent ainsi continuer à les modifier dans leur propre compte sans que les modifications affectent les achats des clients. Pour mettre à jour une liste marketplace, un fournisseur doit à nouveau soumettre la liste afin qu'elle puisse être examinée et publiée à nouveau.
>
> Les clients ayant acheté des versions précédentes d'un produit dans une liste peuvent [passer à la dernière version](https://knowledge.hubspot.com/resources/marketplace-customers-frequently-asked-questions#update) gratuitement.
> **Comment mettre à jour le nom de mon entreprise ?**
>
> Après avoir répertorié un modèle sur le marketplace, vous devrez contacter le [support HubSpot](https://help.hubspot.com/) pour modifier le nom de votre entreprise.
> **Pourquoi ne puis-je pas voir tous mes produits lorsque j'essaye de créer une liste ?**
>
> Les possibles raisons pour lesquelles vous ne pouvez pas voir un produit lorsque vous essayez de créer une liste sont, entre autres, les suivantes :
>
> * Le modèle est actuellement listé dans le marketplace ou contient des éléments d'un modèle actuellement répertorié.
> * Le modèle n'est pas pris en charge sur le marketplace (e-mails transactionnels, e-mails de ticket, etc.).
> * Le modèle est un clone d'un modèle du marketplace.
> **Que dois-je utiliser comme lien d'aperçu ?**
>
> Lors de la création d'une URL de prévisualisation, vous devez utiliser votre propre nom de domaine si disponible. Si vous ne disposez pas d'un domaine disponible, HubSpot fournit à chaque compte un domaine système dans la structure d'URL suivante : `[AccountID].hs-sites.com`
>
> **Remarque** : HubSpot ne prend pas en charge les aperçus de modèles qui utilisent le sous-domaine `preview.hs-sites.com`.
> **Un seul modèle peut-il être utilisé dans plusieurs thèmes ?**
>
> Oui, un modèle unique peut être utilisé dans plusieurs thèmes. Un exemple commun d'utilisation d'un modèle dans plusieurs thèmes est le cas où un fournisseur propose une version Starter et une version Premium du même thème.
> **Dois-je soumettre à nouveau un thème ou un module si j'y apporte des modifications ?**
>
> Oui. Toute modification apportée à un thème ou à un module doit être soumise à nouveau au marketplace pour validation préalable et approbation par l'équipe qualité. Une fois les modifications approuvées, le listing et le modèle seront mis à jour dans le marketplace pour les clients.
> **Comment ajuster le prix d'un thème ou d'un module ?**
>
> Pour ajuster le prix d'un produit soumis, il faut le soumettre à nouveau au marketplace avec les informations mises à jour. Les prix ne peuvent pas être modifiés de gratuit à payant, ou vice versa une fois qu'un modèle est publié.
> **Comment recevoir des paiements marketplace ?**
>
> Les paiements sont reçus par la méthode de paiement que vous avez connectée à votre profil de fournisseur marketplace. Dans votre compte HubSpot, accédez à \*\*Marketplace \*\* > **Informations sur le fournisseur**. Dans la section *Mode de paiement*, consultez ou mettez à jour les informations de paiement.
>
> HubSpot ne touche rien sur les transactions, et toutes les transactions sont traitées indépendamment de la plateforme HubSpot.
> **Où puis-je obtenir du feedback de pairs ou entrer en contact avec d'autres fournisseurs du marketplace ?**
>
> Rejoignez le canal #marketplace dans Slack pour les développeurs de HubSpot en vous inscrivant sur [https://developers.hubspot.com/slack](https://developers.hubspot.com/community).
> **Lorsqu'un client demande un remboursement, les fichiers téléchargés restent-ils sur son compte HubSpot ?**
>
> Tous les fichiers associés au modèle ainsi que toutes les dépendances (par exemple, les pages créées avec le modèle, les modèles clonés et les modules) seront supprimés une fois le remboursement effectué.
> **Comment puis-je me tenir au courant des dernières exigences et modifications apportées concernant les développeurs ?**
>
> Pour rester informé des dernières modifications, consultez le [journal des modifications pour les développeurs de HubSpot](https://developers.hubspot.com/changelog) et abonnez-vous.
# Politiques relatives à la place de marché des modèles HubSpot
Source: https://developers.hubspot.fr/docs/cms/marketplace/template-policies
# Exigences relatives aux thèmes du marketplace des modèles HubSpot
Source: https://developers.hubspot.fr/docs/cms/marketplace/theme-requirements
Découvrez-en davantage sur les exigences auxquelles un thème doit répondre pour être soumis sur le marketplace des ressources.
'Exigences relatives aux thèmes du marketplace des modèles HubSpot';
'Marketplace des modèles | Exigences relatives aux thèmes (2022)';
'Découvrez-en davantage sur les exigences auxquelles un thème doit répondre pour être soumis sur le marketplace des ressources.';
Découvrez-en davantage sur les exigences qu'un thème doit remplir pour être soumis dans le marketplace des modèles HubSpot.
Si vous débutez dans la création de thèmes, nous vous recommandons vivement d'utiliser le boilerplate de thème CMS gratuit HubSpot, qui peut être téléchargé à partir du [répertoire Git](https://github.com/HubSpot/cms-theme-boilerplate) ou [importé dans l'interface utilisateur du gestionnaire de conception de votre compte](https://www.youtube.com).
En outre, vérifiez les [conditions relatives aux pages de listing du modèle](https://developers.hubspot.com/docs) lorsque vous soumettez votre modèle au marketplace des modèles HubSpot.
## Limites concernant les thèmes
Tenez compte des limites suivantes par thème :
* Les comptes ***CMS Hub*** gratuits ne peuvent pas utiliser la recherche sur le site web, les fonctionnalités CTA, ou les vidéos natives HubSpot. Découvrez-en davantage sur ce qui est inclus dans les abonnements ***CMS Hub*** dans le [catalogue de produits et de services de HubSpot](https://legal.hubspot.com/hubspot-product-and-services-catalog).
* Les thèmes sont soumis aux limites suivantes :
* 50 modèles [(nombre minimum de pages nécessaires)](#templates-css%2C-sections%2C-page-templates%2C-etc.)
* 50 modules (5 au minimum)
* 50 sections (5 au minimum)
* Les thèmes **ne doivent pas** contenir les éléments suivants :
* Modèles d'e-mails
* Fonctionnalité HubDB
* Fonctions sans serveur
* Champs d'objet CRM
* [Colonnes flexibles dans les modèles](https://developers.hubspot.com/docs#flexible-columns)
**Comparaison entre les modules et les sections**
Les sections sont utiles, car les créateurs de contenu ne peuvent les déposer que dans des zones de dépôt pleine largeur sur la page, ce qui vous aide en tant que développeur à garantir un excellent produit fini.
En particulier, les sections à disposition fixe, où le créateur de contenu ne peut pas déplacer d'éléments dans la section, sont un excellent outil pour fournir une mise en forme et une mise en page créatives qui ne pourraient pas être obtenues autrement à l'aide de l'éditeur en glisser-déposer.
Les sections offrent également des avantages supplémentaires en termes de convivialité pour le créateur de contenu, car il peut sélectionner des modules individuels à l'intérieur de la section, ce qui permet à leurs formulaires de modules d'être plus courts et plus ciblés sur l'élément qu'ils modifient.
## Conditions globales en matière de thème
* Tous les thèmes soumis doivent être distincts et originaux. Par exemple, le même thème avec un contenu de copie ou de variable différent n'est pas comptabilisé comme un thème distinct. [En savoir plus sur la conformité du marketplace des modèles HubSpot](https://developers.hubspot.com/docs#template-marketplace-compliance).
* Un thème doit être conçu avec des modèles HTML et HubL et des balises [dnd\_area](/docs/cms/reference/hubl/tags/dnd-areas).
* Les thèmes doivent respecter une grille de 12 colonnes.
### Structure des fichiers du thème
Tous les thèmes doivent contenir une structure de dossier appropriée et être regroupées sous un dossier « parent », qui doit décrire le listing de vos produits. Par exemple, si vous créez un thème nommé « SuperAwesome » pour le marketplace, votre structure doit ressembler à l'image ci-dessous. Découvrez-en davantage sur la [structure des fichiers de thème](https://developers.hubspot.com/docs#theme-file-structure).


### Chemin de fichier local relatif pour les modèles
Lorsque vous faites référence à des ressources du thème, vous devez utiliser un chemin de fichier local relatif. La meilleure façon de les inclure est d'utiliser la fonction [get\_asset\_url](/docs/cms/reference/hubl/functions#get-asset-url), qui renvoie l'URL publique d'une ressource, d'un fichier ou d'un modèle. Vous pouvez également [générer cette fonction](/docs/cms/reference/hubl/functions#get-asset-url) soit en faisant un clic droit sur un **fichier** et en sélectionnant **Copier l'URL publique**, soit en cliquant sur **Actions**, puis en sélectionnant **Copier l'URL publique**.
Par exemple, une feuille de style référencée par `require_css` et `get_asset_url` doit être formatée comme suit :
**Entrée**
```hubl theme={null}
{{require_css(get_asset_url('../../css/main.css')) }}
```
**Résultat**
```html theme={null}
//cdn2.hubspot.net/hub/1234567/hub_generated/template_assets/1565970767575/custom/styles/style.min.css
```
Dans la vidéo ci-dessous, examinez les différences dans la structure des fichiers de votre compte développeur par rapport aux fichiers livrés à un client de marketplace :
## Performances du thème
Un thème doit obtenir un score supérieur aux seuils suivants via Google Lighthouse :
* **Accessibilité sur ordinateur :** 65
* **Bonnes pratiques sur ordinateur :** 80
* **Performances sur ordinateur :** 70
* **Performances sur mobile :** 40
Découvrez comment [générer un rapport Google Lighthouse pour votre thème à l'aide de l'LC](/docs/developer-tooling/local-development/hubspot-cli/install-the-cli).
* Les fichiers de thème doivent pouvoir être minifiés.
* La taille des fichiers d'image ne doit pas dépasser 1 Mo.
* Toutes les balises d'image doivent avoir un attribut `alt` (la valeur `""` est acceptable).
* Toutes les balises d'image doivent avoir un attribut `loading` (la valeur `""` est acceptable).
### Prévisualiser les URL des thèmes
Lors de la création d'une URL de prévisualisation, vous devez utiliser votre propre nom de domaine. Vous ne pouvez pas utiliser le domaine fourni par HubSpot avec cette structure d'URL : `[AccountID].hs-sites.com`
Un site web en ligne, et non une image du site de démonstration, doit être utilisé.
Si, à un moment donné, votre démo en direct devient inaccessible, HubSpot se réserve le droit, moyennant notification au fournisseur, de supprimer votre thème jusqu'à ce que la démo en direct redevienne accessible.
## Utilisation de jQuery
jQuery [n'est pas activé par défaut](https://knowledge.hubspot.com/fr/website-pages/include-jquery-across-your-hubspot-pages) dans le compte HubSpot d'un client. Si votre thème repose sur jQuery, une version de jQuery doit être incluse pour s'assurer que le thème fonctionne comme prévu.
Par exemple, si vous incluez un module qui nécessite jQuery alors que le reste du site ne le nécessite pas, vous devrez utiliser le code suivant pour charger jQuery :
```hubl theme={null}
{# this checks if the "Include jQuery" option in Settings > CMS > Pages is checked #}
{% if not site_settings.include_jquery %}
{{ require_js("../jquery-3.4.1.js", "footer") }}
{% endif %}
```
## Configuration du thème (Theme.json)
Le fichier `theme.json` doit inclure les paramètres suivants :
```json theme={null}
// theme.json
{
"label": "Cool Theme",
"preview_path": "./templates/home-page.html",
"screenshot_path": "./images/templates/homepage.jpg",
"enable_domain_stylesheets": false,
"version": "1.0",
"author": {
"name": "Jon McLaren",
"email": "noreply@hubspot.com",
"url": "https://theme-provider.com/"
},
"documentation_url": "https://theme-provider.com/cool-theme/documentation",
"license": "./license.txt",
"example_url": "https://theme-provider.com/cool-theme/demo",
"is_available_for_new_content": true
}
```
Veuillez vérifier votre fichier `theme.json` et vous assurer de ce qui suit :
* Le nom du libellé correspond au nom de votre listing de thèmes.
* Si vous utilisez le CMS theme boilerplate gratuit de HubSpot, les valeurs du boilerplate ne doivent pas être présentes. Cela inclut les informations sur l'auteur, l'URL de la documentation, l'URL de l'exemple, etc.
* L'URL de la documentation résout et contient de la documentation sur l'utilisation de votre thème.
* Le chemin d'aperçu est un fichier valide dans votre thème.
* Le chemin de capture d'écran est un fichier valide et est lié à votre thème.
* L'exemple d'URL résout et conduit à une démonstration de votre thème. N'utilisez pas les sous-domaines `preview.hs-sites.com` ou `[AccountID].hs-sites.com` pour l'exemple d'URL.
En savoir plus sur [les paramètres theme.json](https://developers.hubspot.com/docs#theme-json).
## Paramètres du thème (Fields.json)
Le fichier `fields.json` contrôle les champs et groupes de champs disponibles dans l'éditeur de thème, y compris les champs de style. Les champs que vous incluez dépendront du degré de contrôle que vous souhaitez donner aux créateurs de contenu dans l'éditeur de page.
* Le fichier `fields.json` doit contenir au moins trois champs de couleur.
* Pour garantir la compatibilité entre des thèmes et des modules indépendants, les thèmes doivent inclure les conventions d'appellation de police et de couleur standards suivantes : `primary_color`, `secondary_color`, `heading_font` et `body_font`. Découvrez-en davantage sur la [compatibilité module-thème](https://developers.hubspot.com/docs#module-compatibility-with-themes)
Si les champs de thème ne disposent pas de champs `primary_color`, `secondary_color`, `heading_font` ou `body_font`, ils peuvent utiliser le champ `alternate_names`.
Découvrez-en davantage sur ces [paramètres fields.json](https://developers.hubspot.com/docs#fields-json) et [consultez un exemple de fichier fields.json](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/fields.json) à partir du boilerplate de CMS Hub.
Les paramètres du thème doivent également :
* Ne pas entrer en conflit avec des styles d'éditeur ou des styles définis via un module. Par exemple, n'utilisez pas `!important` dans votre feuille de style CSS, car il est difficile pour les utilisateurs finaux de le remplacer et cela provoquerait un conflit.
* Utiliser des libellés descriptifs pour chaque paramètre afin que les créateurs de contenu sachent ce qu'ils mettent à jour.
* S'appliquer à tous les modèles à l'intérieur d'un thème, sauf s'il existe un cas d'utilisation spécifique pour les styles supplémentaires. Par exemple, les modifications apportées au style et à la taille des en-têtes `h1` dans les paramètres du thème doivent s'appliquer à toutes les balises `h1` du thème.
Un thème **doit** inclure au minimum les champs de thème suivants :
**Champs de typographie :**
* Champ de police du corps du texte (balises `p`)
* Champs de police `h1` à `h6`
* Couleur du lien hypertexte (balises `a`), y compris le style au survol
**Champs de formulaire :**
* Couleur de l'arrière-plan du formulaire
* Couleur de la bordure du formulaire
* Couleur de libellé des formulaires
* Couleur de la bordure des champs de formulaire
* Bouton de formulaire, y compris les paramètres pour le texte du bouton, la couleur d'arrière-plan et le style au survol.
En outre :
* Les champs de votre thème doivent être regroupés de manière logique. Par exemple, plusieurs champs liés à la typographie doivent être réunis sous un groupe `Typography`.
* Les champs de thème doivent avoir des contrôles de couleur et de police distincts pour les boutons et les formulaires, ainsi que des contrôles de couleur, de logo et de police distincts pour l'en-tête et le pied de page.
* Si les modules d'un thème utilisent des logos, au moins un champ de logo doit hériter des [paramètres de marque](/docs/cms/start-building/building-blocks/fields/brand-and-settings-inheritance) du compte. Si vous utilisez un champ d'image pour afficher un logo, le champ d'image n'hérite pas obligatoirement des paramètres de marque.
## Modèles (CSS, Sections, Modèles de page, etc.)
### Sections
* Vous devez utiliser des [sections](https://developers.hubspot.com/docs#reusable-sections), le cas échéant. Un thème **doit** inclure au minimum cinq sections.
* Les sections doivent avoir des captures d'écran uniques et fonctionnelles.
* Les sections et les modules ne doivent pas être redondants.
### Modèles de page
Un thème doit inclure au minimum les types de modèle suivants :
* Un modèle de page de site web ou de page de destination.
* Lorsque vous incluez des modèles à plusieurs pages, chaque modèle doit avoir un objectif distinct. Par exemple, une page d'accueil, une page *À propos de nous*, une page de destination pleine largeur et une page de destination avec une barre latérale droite.
* Il est recommandé d'inclure au moins huit modèles de page dans un thème.
* Des modèles de listing de blog et d'article de blog distincts.
* **Modèle de listing de blog :** la page qui affiche tous les articles de blog dans un format de listing (appelé blogroll). Le titre du modèle doit indiquer qu'il s'agit de la page de listing.
* **Modèle d'article de blog :** la page de détail d'articles de blog qui affiche les différents articles de blog. Le titre du modèle doit indiquer qu'il s'agit de la page d'article de blog.
* Par ailleurs, les commentaires de blog et les cases d'auteur de blog doivent être mis en forme pour correspondre au thème.
* Les modèles de page système suivants :
* **Modèle d'erreur 404 :** affiché lorsque les visiteurs atteignent une page qui n'existe pas.
* **Modèle d'erreur 500 :** affiché lorsque le site rencontre une erreur interne.
* **Modèle d'invite de mot de passe :** affiché lorsqu'une page est protégée par un mot de passe.
* **Modèle des abonnements :** page de gestion des inscriptions permettant aux destinataires d'e-mails de gérer les types d'e-mails auxquels ils s'abonnent.
* **Modèle de mise à jour des abonnements** : la page de confirmation qui apparaît lorsque le destinataire des e-mails met à jour ses préférences d'abonnement.
* **Modèle d'enregistrement des désabonnements** : la page qui apparaîtra pour les destinataires des e-mails qui essayent de se désabonner, si HubSpot ne peut déterminer leur adresse e-mail.
* **Modèle de résultats de recherche** : affiche les résultats de recherche qui sont retournés lors de l'utilisation de la [recherche du site](/docs/cms/start-building/building-blocks/modules/content-search). Disponible pour les comptes ***CMS Hub*** payants uniquement.
### Nom du modèle de page
* Si vous avez des modèles avec des noms similaires, ajoutez des mots descriptifs qui indiquent la différence entre eux.
* Maintenez la cohérence de la majuscule, supprimez les traits d'union et évitez d'utiliser des raccourcis (par exemple, utilisez arrière-plan au lieu de ap).
* Le nom de votre entreprise ou le nom du thème n'a pas besoin d'être inclus dans le nom du modèle.
## Modules
Pour en savoir plus sur les conditions relatives aux modules de thème et aux modules individuels, [cliquez ici](https://developers.hubspot.com/docs).
## Contenu global
### Partiels globaux
Les [partiels globaux](/docs/cms/start-building/building-blocks/global-content) sont un type de modèle créé à l'aide de HTML et HubL qui peut être réutilisé sur l'ensemble de votre site web. Les types de partials les plus courants sont les en-têtes de sites Web, les barres latérales et les pieds de page. Découvrez comment [créer des partiels globaux](/docs/cms/start-building/building-blocks/global-content#creating-a-global-content-partial-template-using-local-development-tools).
* Les thèmes doivent inclure des partiels globaux. Les - partiels globaux doivent inclure une [zone de glisser-déposer.](https://developers.hubspot.com/docs) Par exemple, vous ne pouvez pas masquer la zone de glisser-déposer avec une classe « masquer ».
* Vous devez incorporer des zones de glisser-déposer utilisables dans les en-têtes et les pieds de page.
* Pour les menus utilisés globalement à travers un site, les utilisateurs doivent également pouvoir [sélectionner un menu de navigation HubSpot](/docs/cms/start-building/building-blocks/modules/menus-and-navigation) qu'ils ont créé dans les paramètres de leur compte.
Évitez d'inclure des modules globaux dans les partiels globaux, car cela peut créer une expérience utilisateur négative.
## Prise en charge multilingue
Les thèmes doivent pouvoir prendre en charge plusieurs versions linguistiques et doivent spécifier les langues qu'ils prennent en charge. Pour ce faire, vous pouvez ajouter un [module de sélecteur de langue](/docs/cms/reference/modules/default-modules#language-switcher) dans un en-tête global, ce qui permet aux clients de localiser facilement les options de langue et de choisir la langue de leur choix.
* Vous ne devez afficher qu'une seule langue à la fois. Par exemple, évitez d'avoir à la fois l'anglais et l'espagnol dans l'interface utilisateur en même temps.
* Évitez d'utiliser du texte codé en dur. Par exemple, plutôt que de coder le texte d'un bouton de listing de blog comme *En savoir plus*, définissez le texte dans un champ afin que l'utilisateur final puisse mettre à jour le texte sans avoir à entrer dans le code.
## Éléments mobiles et réactifs
Les thèmes doivent être capables d'adapter leur contenu à l'appareil sur lequel il est consulté. Ils doivent également offrir une bonne expérience utilisateur sur différents appareils. Cela comprend, sans s'y limiter :
* Menu de navigation principal
* Curseurs et onglets
* Grandes images
* Éviter le défilement horizontal (sauf intention)
# Champs de module et de thème
Source: https://developers.hubspot.fr/docs/cms/reference/fields/module-theme-fields
HubSpot dispose de nombreux types de champs différents. Utilisez-les pour ajouter de la flexibilité et de la personnalisation à vos thèmes et modules.
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](https://developers.hubspot.fr/docs/cms/reference/fields/overview).
## 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.
```json theme={null}
{
"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é](https://developers.hubspot.fr/docs/cms/reference/fields/overview#field-visibility). | |
| `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](/docs/cms/start-building/building-blocks/fields/alias-mapping). | `False` |
## Alignement
Permet aux créateurs de contenu de positionner un élément dans un conteneur. Pour activer l'alignement du texte, utilisez le [champ d'alignement du texte](/docs/cms/reference/fields/module-theme-fields#text-alignment).
Les champs d'alignement sont pris en charge dans les [modules](https://developers.hubspot.fr/docs/cms/start-building/building-blocks/modules/overview) et peuvent être uniquement utilisés comme [champs de style](https://developers.hubspot.fr/docs/cms/reference/fields/overview#style-fields).

**JSON**
```json theme={null}
{
"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` |
**React**
```jsx theme={null}
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
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. [Découvrez-en davantage sur la propriété CSS générée.](https://developers.hubspot.fr/docs/cms/reference/fields/overview#generated-css)
Les champs d'image d'arrière-plan sont pris en charge dans les [modules](https://developers.hubspot.fr/docs/cms/start-building/building-blocks/modules/overview) et peuvent être uniquement utilisés comme [champs de style](https://developers.hubspot.fr/docs/cms/reference/fields/overview#style-fields).

**JSON**
```json theme={null}
{
"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` |
**React**
```jsx theme={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
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](/docs/cms/reference/hubl/functions) de blog pour obtenir des informations telles que les [auteurs du blog](/docs/cms/reference/hubl/functions#blog-authors), les [articles de blog récents](/docs/cms/reference/hubl/functions#blog-recent-posts), les [articles de blog récents avec une mention spécifique](/docs/cms/reference/hubl/functions#blog-recent-tag-posts), etc.
Les champs de blog sont pris en charge dans les modules.

**JSON**
```json theme={null}
{
"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` |
**React**
```jsx theme={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
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](#choice) 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](https://developers.hubspot.fr/docs/cms/reference/fields/overview#style-fields).

**JSON**
```json theme={null}
{
"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` |
**React**
```jsx theme={null}
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` |
> [!TIP]
>
> 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. [Découvrez-en davantage sur la propriété CSS générée.](https://developers.hubspot.fr/docs/cms/reference/fields/overview#generated-css)
Les champs de bordure sont pris en charge dans les [modules](https://developers.hubspot.fr/docs/cms/start-building/building-blocks/modules/overview). Les champs de bordure ne peuvent être utilisés que comme [champs de style](https://developers.hubspot.fr/docs/cms/reference/fields/overview#style-fields).

**JSON**
```json theme={null}
{
"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. | `{}` |
**React**
```jsx theme={null}
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
Les champs de choix permettent au créateur de contenu de sélectionner un ou plusieurs éléments dans une liste d'options. À l'aide de la propriété `display`, vous pouvez définir les options d'affichage dans un menu déroulant, une case d'option ou des cases à cocher, ou une gamme de boutons. Découvrez-en davantage sur les [options d'affichage des champs de choix ci-dessous](#choice-button-presets).
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](https://developers.hubspot.fr/docs/cms/reference/fields/overview#style-fields).

**JSON**
```json theme={null}
{
"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](#choice-button-presets) ci-dessous. | |
**React**
```jsx theme={null}
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](#choice-button-presets) 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.
```json example.json theme={null}
{
"name": "layout",
"type": "choice",
"label": "Layout",
"required": false,
"locked": false,
"display": "buttons",
"preset": "layout",
"choices": [
["cards_value", "cards"],
["tiles_value", "tiles"],
["minimal_value", "minimal"]
]
}
```
```text react.txt theme={null}
import { ModuleFields, ChoiceField } from '@hubspot/cms-components/fields';
```
| Préréglage | Choix de libellés | Exemple |
| - | - | - |
| `case` | `none` \| `upper` \| `lower` | |

\| | `expand_icon` | `caret` | `plus` | `chevron` |

\| | `icon_background_shape` | `none` | `square` | `rounded` | `circle` |

\| | `icon_size` | `small` | `medium` | `large` |

\| | `layout` | `cards` | `tiles` | `minimal` |

\| | `social_icon_background_shape` | `none` | `square` | `rounded` | `circle` |

\| | `social_icon_size` | `small` | `medium` | `large` |

|
## Couleurs
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.
Par défaut, l'entrée d'opacité d'un champ de couleur est masquée pour les modules d'e-mail, car certains clients de messagerie ne respectent pas les règles d'opacité. Vous pouvez afficher le champ d'opacité pour les modules d'e-mail en définissant `show_opacity` sur `true`.
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](https://developers.hubspot.fr/docs/cms/reference/fields/overview#style-fields).

**JSON**
```json theme={null}
{
"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` |
**React**
```jsx theme={null}
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
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](https://knowledge.hubspot.com/fr/ctas/create-calls-to-action-ctas) 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*.

**JSON**
```json theme={null}
{
"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](https://app.hubspot.com/l/ctas). | `null` |
**React**
```jsx theme={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](https://app.hubspot.com/l/ctas). | `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*.

**JSON**
```json theme={null}
{
"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](/docs/cms/start-building/features/data-driven-content/crm-objects#supported-crm-object-types) | |
| `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` |
**React**
```jsx theme={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](/docs/cms/start-building/features/data-driven-content/crm-objects#supported-crm-object-types) | |
| `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
Utilisez le champ Propriété d'objet du CRM pour accéder aux métadonnées de propriété, telles que le libellé et le nom de propriété, à partir d'un type d'objet spécifié. Cela permet aux créateurs de contenu de sélectionner parmi les propriétés de l'objet lorsqu'ils ont besoin d'afficher les détails des propriétés sur une page.
Par exemple, vous pouvez ajouter ce champ à un module de tableau personnalisé pour remplir les en-têtes de tableau en fonction des propriétés sélectionnées.
Les champs d'objets CRM sont pris en charge dans les modules.

**JSON**
```json theme={null}
{
"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](/docs/cms/start-building/features/data-driven-content/crm-objects#supported-crm-object-types). |
| `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).
**React**
```jsx theme={null}
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](/docs/cms/start-building/features/data-driven-content/crm-objects#supported-crm-object-types). |
| `default` | Objet | Contient la propriété par défaut à afficher. |
## 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.

**JSON**
```json theme={null}
{
"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` |
**React**
```jsx theme={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
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.

**JSON**
```json theme={null}
{
"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` |
**React**
```jsx theme={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
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.

**JSON**
```json theme={null}
{
"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` |
**React**
```jsx theme={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
Les champs d'intégration permettent à l'utilisateur d'ajouter une URL d'un [oEmbedsite compatible](https://oembed.com/#section7) 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 ](/docs/cms/start-building/building-blocks/fields/oembed).

**JSON**
```json theme={null}
{
"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](https://ecosystem.hubspot.com/marketplace/apps/apps-for-media). | |
| `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` |
**React**
```jsx theme={null}
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](https://ecosystem.hubspot.com/marketplace/apps/apps-for-media). | |
| `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
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.

**JSON**
```json theme={null}
{
"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` |
**React**
```jsx theme={null}
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
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](/docs/cms/reference/hubl/tags/standard-tags#form), via le paramètre `simple_email_campaign_id`.
Les champs d'e-mail de suivi sont pris en charge dans les modules.

**JSON**
```json theme={null}
{
"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` |
**React**
```jsx theme={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
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 standards sûres pour le web. Ces polices proviennent de [Google Fonts](https://fonts.google.com/) mais sont mises à disposition par HubSpot directement sur le domaine sur lequel la page se charge.
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](https://developers.hubspot.fr/docs/cms/reference/fields/overview#style-fields).

> [!WARNING]
>
> ### 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](https://developers.hubspot.fr/docs/cms/reference/fields/overview#inherited-fields), 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**
```json theme={null}
{
"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` |
**React**
```jsx theme={null}
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
Les champs de formulaire permettent à un créateur de contenu de concevoir un formulaire dans son compte. Vous pouvez ensuite l'utiliser pour rendre un formulaire sur une page en utilisant la [balise de formulaire HubL](/docs/cms/reference/hubl/tags/standard-tags#form).
Les champs de formulaire sont pris en charge dans les modules.

**JSON**
```json theme={null}
{
"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](/docs/cms/reference/hubl/tags/standard-tags#form) à 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. |
**React**
```jsx theme={null}
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](/docs/cms/reference/hubl/tags/standard-tags#form) à 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é
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 une CSS basée sur la valeur du champ. [Découvrez-en davantage sur la propriété CSS générée.](https://developers.hubspot.fr/docs/cms/reference/fields/overview#generated-css)
Les champs de dégradé sont pris en charge dans les [modules](https://developers.hubspot.fr/docs/cms/start-building/building-blocks/modules/overview). Les champs de dégradé ne peuvent être utilisés que comme [champs de style](https://developers.hubspot.fr/docs/cms/reference/fields/overview#style-fields).

**JSON**
```json theme={null}
{
"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. |
**React**
```jsx theme={null}
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
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 un tableau défini. 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*.

**JSON**
```json theme={null}
{
"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 }` |
**React**
```jsx theme={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
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](/docs/cms/reference/hubl/tags/standard-tags#form). Renvoie l'identifiant du tableau, que vous pouvez utiliser avec les [fonctions HubL de HubDB](/docs/cms/start-building/features/storage/hubdb#access-hubdb-data-using-hubl)).
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*.

**JSON**
```json theme={null}
{
"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` |
**React**
```jsx theme={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
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](https://developers.hubspot.fr/docs/cms/reference/fields/overview#style-fields).

**JSON**
```json theme={null}
{
"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` |
**React**
```jsx theme={null}
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 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 asynchrone des images](/docs/cms/best-practices/testing-staging-performance/lazy-loading).

Les champs d'image sont pris en charge dans les modules. Les images peuvent être utilisées comme [champs de style](https://developers.hubspot.fr/docs/cms/reference/fields/overview#style-fields). 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](#background-image). Il s'agit de respecter les meilleures pratiques en matière [d'accessibilité](/docs/cms/best-practices/improve-existing-sites/accessibility).
**JSON**
```json theme={null}
{
"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](/docs/cms/best-practices/testing-staging-performance/lazy-loading). 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](/docs/cms/best-practices/testing-staging-performance/lazy-loading) l'image sont affichées dans l'éditeur de page. | `false` |
**React**
```jsx theme={null}
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](/docs/cms/best-practices/testing-staging-performance/lazy-loading). 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](/docs/cms/best-practices/testing-staging-performance/lazy-loading) 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. Ils offrent cependant 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](#url).
Les champs de lien sont pris en charge dans les modules.

**JSON**
```json theme={null}
{
"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](https://moz.com/blog/nofollow-sponsored-ugc). | `false` |
**React**
```jsx theme={null}
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](https://moz.com/blog/nofollow-sponsored-ugc). | `false` |
## Logo
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 permettent également un [chargement asynchrone](/docs/cms/best-practices/testing-staging-performance/lazy-loading).
Les champs de logo sont pris en charge dans les modules.

**JSON**
```json theme={null}
{
"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](/docs/cms/best-practices/testing-staging-performance/lazy-loading) 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](/docs/cms/best-practices/testing-staging-performance/lazy-loading). 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 }` |
**React**
```jsx theme={null}
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](/docs/cms/best-practices/testing-staging-performance/lazy-loading) 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](/docs/cms/best-practices/testing-staging-performance/lazy-loading). 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 }` |
## Menu
Les champs de menu offrent aux créateurs de contenu une interface intuitive pour créer, modifier et sélectionner un [menu de navigation](/docs/cms/start-building/building-blocks/modules/menus-and-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](/docs/cms/start-building/building-blocks/global-content). Utilisez ce champ en tandem avec la [balise menu](/docs/cms/reference/hubl/tags/standard-tags#menu) ou la [fonction menu()](/docs/cms/reference/hubl/functions#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](#simple-menu).
Les champs de menu sont pris en charge dans les modules.

**JSON**
```json theme={null}
{
"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](/docs/cms/start-building/building-blocks/modules/menus-and-navigation#get-your-menu-id) du menu. La valeur par défaut de `null`, correspond au menu par défaut sous la navigation. | `null` |
**React**
```jsx theme={null}
import { ModuleFields, MenuField } from "@hubspot/cms-components/fields";
```
| Propriété | Type | Description | Par défaut |
| - | - | - | - |
| `default` | Entier | L'[ID de menu](/docs/cms/start-building/building-blocks/modules/menus-and-navigation#get-your-menu-id) du menu. La valeur par défaut de `null`, correspond au menu par défaut sous la navigation. | `null` |
## Nombre
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](https://developers.hubspot.fr/docs/cms/reference/fields/overview#style-fields).

**JSON**
```json theme={null}
{
"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. | |
**React**
```jsx theme={null}
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. | |
> [!NOTE]
>
> 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
Les champs de page fournissent une interface permettant aux créateurs de contenu de sélectionner des pages du site et des pages de destination.
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](/docs/cms/reference/hubl/functions#content-by-id) ou [content\_by\_ids](/docs/cms/reference/hubl/functions#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.

**JSON**
```json theme={null}
{
"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` |
**React**
```jsx theme={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
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](#text).
Les champs de texte enrichi sont pris en charge dans les modules.

**JSON**
```json theme={null}
{
"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](/docs/cms/reference/hubl/functions#get-asset-url) `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](/docs/cms/reference/fields/rich-text-editor) et les options disponibles pour les éditeurs de contenu. | |
**React**
```jsx theme={null}
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](/docs/cms/reference/hubl/functions#get-asset-url) `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](/docs/cms/reference/fields/rich-text-editor) et les options disponibles pour les éditeurs de contenu. | |
## Menu simple
Les champs de menu simple offrent aux créateurs de contenu une interface intuitive pour créer un [menu de navigation](/docs/cms/start-building/building-blocks/modules/menus-and-navigation) qui n'est pas réutilisable sur d'autres pages. Pour les menus qui doivent être réutilisables, utilisez le [champ de menu](#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.

**JSON**
```json theme={null}
{
"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. | `[]` |
**React**
```jsx theme={null}
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
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 une CSS basée sur la valeur du champ. [Découvrez-en davantage sur la propriété CSS générée.](https://developers.hubspot.fr/docs/cms/reference/fields/overview#generated-css)
Les champs d'espacement sont pris en charge dans les [modules](https://developers.hubspot.fr/docs/cms/start-building/building-blocks/modules/overview). Les champs d'espacement ne peuvent être utilisés que comme [champs de style](https://developers.hubspot.fr/docs/cms/reference/fields/overview#style-fields).

**JSON**
```json theme={null}
{
"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. | |
**React**
```jsx theme={null}
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
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](/docs/cms/reference/hubl/functions#blog-tag-url) et [Articles Balise de blog récente](/docs/cms/reference/hubl/functions#blog-recent-tag-posts).
Les champs de balise sont pris en charge dans les modules.

**JSON**
```json theme={null}
{
"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` |
**React**
```jsx theme={null}
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
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](#rich-text).
Les champs de texte sont pris en charge dans les modules.

**JSON**
```json theme={null}
{
"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. | `""` |
**React**
```jsx theme={null}
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
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](#alignment).
Les champs d'alignement du texte sont pris en charge dans les [modules](https://developers.hubspot.fr/docs/cms/start-building/building-blocks/modules/overview). Les champs d'alignement du texte ne peuvent être utilisés que comme [champs de style](https://developers.hubspot.fr/docs/cms/reference/fields/overview#style-fields).

**JSON**
```json theme={null}
{
"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` |
**React**
```jsx theme={null}
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
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](#link).
Les champs d'URL sont pris en charge dans les modules.

**JSON**
```json theme={null}
{
"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](https://knowledge.hubspot.com/fr/inbox/connect-whatsapp-to-the-conversations-inbox).
| `[ "EXTERNAL", "CONTENT", "FILE", "EMAIL_ADDRESS", "BLOG" ]` |
**React**
```jsx theme={null}
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](https://knowledge.hubspot.com/fr/inbox/connect-whatsapp-to-the-conversations-inbox).
| `[ "EXTERNAL", "CONTENT", "FILE", "EMAIL_ADDRESS", "BLOG" ]` |
## Vidéos
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.

**JSON**
```json theme={null}
{
"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` |
**React**
```jsx theme={null}
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 ». | `""` |
```
```
# Présentation des modules et des champs de thème
Source: https://developers.hubspot.fr/docs/cms/reference/fields/overview
Les modules et les thèmes HubSpot prennent en charge la personnalisation par les créateurs de contenu grâce à des champs. Les développeurs créent et organisent les champs via un fichier fields.json.
Dans les [modules](https://developers.hubspot.fr/docs/cms/start-building/building-blocks/modules/overview) et les [thèmes](/docs/cms/start-building/building-blocks/overview), les champs sont utilisés pour permettre aux créateurs de contenu de contrôler le style et les fonctionnalités des modules ainsi que des thèmes sur votre site web. Lorsque vous développez un module ou un thème, vous incluez des champs dans un fichier `fields.json`, qui sera ensuite traduit vers les éditeurs de thème et de contenu.

Découvrez ci-dessous comment créer et gérer des options pour les champs de module et de thème. Pour en savoir plus sur les types de champs spécifiques, consultez le [guide de référence sur les types de modules et de champs](https://developers.hubspot.fr/docs/cms/reference/fields/module-theme-fields).
## Créer et modifier des champs
Vous pouvez ajouter des champs au fichier `fields.json` d'un [module](https://developers.hubspot.fr/docs/cms/start-building/building-blocks/modules/overview) localement par le biais du [ILC HubSpot](/docs/developer-tooling/local-development/hubspot-cli/reference) et dans l'éditeur de module présent dans l'application. Pour ajouter des champs à un [thème](/docs/cms/start-building/building-blocks/overview), vous devez mettre à jour le fichier `fields.json` du thème en utilisant l'ILC.
### ILC HubSpot
Lors du [développement local d'un](/docs/developer-tooling/local-development/hubspot-cli/install-the-cli) module ou d'un thème, les champs peuvent être modifiés par le biais d'un fichier `fields.json` situé dans le dossier du module ou du thème. Pour les modules, ce fichier est automatiquement créé lors de l'utilisation de la commande [`hs create module`](/docs/developer-tooling/local-development/hubspot-cli/reference). Toutes les options de champ disponibles dans l'éditeur de module sont disponibles sous forme de propriétés que vous pouvez ajouter ou modifier dans le fichier `fields.json`. Cela comprend les champs, les groupes et les conditions des répéteurs. L'un des avantages de l'édition locale est qu'elle facilite l'[inclusion de vos modules dans les systèmes de contrôle de version tels que git](/docs/cms/start-building/introduction/developer-environment/github-integration).
### Éditeur de module
Le [gestionnaire de conception](/docs/cms/start-building/introduction/developer-environment/design-manager) dispose d'une interface utilisateur intégrée dédiée à l'éditeur de module qui vous permet de [créer](https://knowledge.hubspot.com/fr/design-manager/create-and-edit-modules), de regrouper et de [modifier les](https://knowledge.hubspot.com/fr/design-manager/create-and-edit-modules) champs de module. L'éditeur de module contient un aperçu du module qui vous permet de visualiser le module seul, ainsi que de tester ses champs. Vous devez toujours tester les modules sur un modèle que vous prévoyez d'utiliser afin de voir quels styles de modèles peuvent les affecter. Attention : si un module est contenu dans un dossier verrouillé, il ne peut pas être modifié de cette façon.

> [!WARNING]
>
> **Remarque :** si vous travaillez principalement en local, mais que vous souhaitez utiliser l'éditeur de module pour configurer les champs, veillez à [récupérer](/docs/developer-tooling/local-development/hubspot-cli/reference#fetch) vos modifications. Ceci est particulièrement important pour les personnes utilisant des systèmes de contrôle de version tels que git.
## Champs côte à côte
Par défaut, les champs de module des éditeurs de contenu s'empilent verticalement. Toutefois, vous pouvez placer des champs de module côte à côte en ajoutant la propriété `display_width` aux champs dans le fichier `fields.json` avec la valeur `half_width`.

Un champ unique avec un `display_width` de `half_width` apparaîtra en demi-largeur dans l'éditeur de contenu. Lorsque le champ situé au-dessus ou en dessous de ce champ dans le fichier `fields.json` est défini sur `half_width`, ils sont placés côte à côte.
```json theme={null}
// Example module fields.json file
[
{
"name": "number_field",
"label": "Number",
"required": false,
"locked": false,
"display": "slider",
"min": 1,
"max": 10,
"step": 1,
"type": "number",
"prefix": "",
"suffix": "",
"default": null,
"display_width": "half_width"
},
{
"label": "Description",
"name": "description",
"type": "text",
"required": true,
"default": "Add a description",
"display_width": "half_width"
}
]
```
## Groupes de champs
Lorsque les champs sont liés les uns aux autres, il est souvent judicieux de les regrouper visuellement. Pour ce faire, vous pouvez créer des groupes de champs, qui sont pris en charge à la fois dans les modules et les thèmes. Pour créer un groupe de champs localement, créez un objet dans `fields.json` avec l'élément `type` de `"group"`. Ensuite, incluez un tableau `children` pour contenir les champs que vous souhaitez regrouper.

```json theme={null}
[
{
"id": "9c00985f-01db-ac5d-73f5-80ed6c0c7863",
"name": "my_text",
"display_width": null,
"label": "Text",
"required": true,
"locked": false,
"validation_regex": "",
"allow_new_line": false,
"show_emoji_picker": false,
"type": "text",
"default": "Add text here"
},
{
"type": "group",
"name": "recipe_summary_group",
"label": "Recipe summary",
"expanded": true,
"inline_help_text": "Summarize the recipe (title and description)",
"children": [
{
"type": "text",
"label": "Recipe title",
"name": "recipe_title",
"placeholder": "Burrata salad"
},
{
"type": "text",
"label": "Recipe description",
"name": "recipe_description",
"placeholder": "fig mostarda, hazelnuts, arugula, vincotto, prosciutto, toasted sourdough"
}
]
}
]
```
Vous pouvez créer des groupes de champs supplémentaires à l'intérieur d'un groupe en ajoutant un autre type d'objet `"group"` dans le premier paramètre `children`. Ensuite, construisez le groupe de champs de la même manière que ci-dessus, en utilisant `children` pour contenir les champs. Vous pouvez imbriquer des groupes de champs jusqu'à une profondeur de trois.

```json theme={null}
[
{
"type": "group",
"name": "recipe_summary_group",
"label": "Recipe summary",
"inline_help_text": "Summarize the recipe (title and description)",
"display": "inline",
"children": [
{
"type": "text",
"label": "Recipe title",
"name": "recipe_title",
"placeholder": "Burrata salad"
},
{
"type": "text",
"label": "Recipe description",
"name": "recipe_description",
"placeholder": "fig mostarda, hazelnuts, arugula, vincotto, prosciutto, toasted sourdough"
},
{
"type": "group",
"name": "secondary_group",
"label": "Secondary group",
"expanded": false,
"children": [
{
"name": "bg_color",
"label": "Background color",
"sortable": false,
"required": false,
"locked": false,
"type": "color",
"default": {
"color": "#ff0000",
"opacity": 100
}
}
]
}
]
}
]
```
#### Options d'affichage du groupe de champs
Vous pouvez personnaliser le comportement d'affichage des groupes de champs suivant :
* **Expansion :** par défaut, les groupes de champs s'affichent réduits dans l'éditeur. Les groupes qui contiennent des groupes imbriqués s'affichent sous forme de boutons d'exploration qui ouvrent le groupe dans sa propre vue, le groupe situé le plus à l'intérieur affichant des séparateurs.

* **Type d'affichage :** par défaut, les groupes qui ne contiennent pas de groupes imbriqués s'afficheront sous forme de sections réductibles avec des séparateurs visuels autour de leurs enfants. Les groupes qui contiennent des groupes imbriqués s'affichent sous forme de boutons d'exploration qui ouvrent le groupe dans sa propre vue, le groupe situé le plus à l'intérieur affichant des séparateurs.
* **Icône du groupe :** si vous le souhaitez, vous pouvez inclure une icône Font Awesome qui s'affiche à gauche de l'étiquette.

```json theme={null}
[
{
"type": "group",
"name": "recipe_summary_group",
"label": "Recipe summary",
"display": "drilldown",
"inline_help_text": "Summarize the recipe (title and description)",
"icon": {
"name": "star",
"set": "fontawesome-5.14.0",
"type": "SOLID"
},
"children": [
{
"type": "text",
"label": "Recipe title",
"name": "recipe_title",
"placeholder": "Burrata salad"
},
{
"type": "text",
"label": "Recipe description",
"name": "recipe_description",
"placeholder": "fig mostarda, hazelnuts, arugula, vincotto, prosciutto, toasted sourdough"
}
]
}
]
```
| Paramètre | Type | Description |
| - | - | - |
| `display` | String | Le style d'affichage du groupe de champs. Peut être l'un des suivants :
`drilldown` : affiche le groupe réduit avec un bouton permettant d'ouvrir les enfants du groupe dans son propre panneau. Il s'agit de l'affichage par défaut pour les groupes qui contiennent des groupes imbriqués.
`accordion` : affiche le groupe réduit avec un bouton permettant de développer les enfants du groupe ci-dessous sous forme de section extensible. Il s'agit de l'affichage par défaut pour les groupes sans groupes imbriqués.
`inline` : affiche le groupe et ses enfants en ligne sans option permettant de réduire le groupe.
|
| `icon` | Objet | Ajoute une icône à gauche du libellé. Contient les paramètres suivants :
`name` : l'identifiant de l'icône Font Awesome.
`set` : l'[ensemble d'icônes](https://developers.hubspot.fr/docs/cms/reference/fields/module-theme-fields#icon) Font Awesome.
`type` : style d'icône (par exemple, `SOLID`, `REGULAR`).
|
| `expanded` | Booléen | indique si le groupe de champs est développé par défaut. |
#### Sortir des valeurs des champs dans les groupes de champs
Les groupes de champs créent des dict. qui contiennent les valeurs des champs que vous souhaitez éditer. Si vous imbriquez des groupes de champs, le groupe de champs imbriqué devient un dict. à l'intérieur du dict. du groupe de champs extérieur. Pour accéder à ces données, vous parcourez l'arborescence à partir du thème racine ou de la variable du module, selon le contexte.
```html example.html theme={null}
{# printing a value from a field group `recipe_summary` is the field group,
`title` is the text field. #} {{module.recipe_summary.title}}
```
```css example.css theme={null}
/* Printing a Font field's color value, when the font field is within a field group.
`typography` is the field group, `h1_font` is the field */
h1{
color: {{ theme.typography.h1_font.color }};
}
```
#### Éléments phares dans le groupe de champs imbriqués
Dans les cas où un groupe de champs est répété, vous pouvez spécifier une ou plusieurs de ces occurrences en tant qu'éléments phares, ce qui vous permet de styliser l'élément séparément pour le faire ressortir. Par exemple, cela peut être particulièrement utile pour une page produit où vous pouvez avoir un produit phare que vous souhaitez mettre en avant.
Vous pouvez spécifier un nombre maximum d'éléments phares par groupe de champs. Dans l'éditeur, les créateurs de contenu peuvent ensuite marquer les éléments comme phares selon leurs besoins.
.png)
Pour activer les éléments phares dans un groupe de champs, incluez la propriété `group_occurrence_meta` dans la configuration du groupe de champs. Cette propriété contient les propriétés suivantes :
* `featured_enabled` : défini sur `true` pour activer les éléments phares.
* `featured_limit` : le nombre maximum d'éléments phares à autoriser.
Le groupe de champs doit également inclure la propriété `occurrence`.
```json theme={null}
// Field group example
{
"label": "Card",
"name": "card",
"type": "group",
"occurrence": {
"default": 2,
"min": 1,
"sorting_label_field": "card.title"
},
"group_occurrence_meta": {
"featured_enabled": true,
"featured_limit": 3
},
"children": [
{
"label": "Image",
"name": "image",
"type": "image",
"responsive": true,
"resizable": true,
"show_loading": true,
"default": {
"loading": "lazy"
}
},
{
"label": "Content",
"name": "text",
"type": "richtext",
"enabled_features": [
"advanced_emphasis",
"alignment",
"block",
"emoji",
"font_family",
"font_size",
"lists",
"standard_emphasis"
],
"default": "
This is a title
Contextual advertising can be profitable. It can either pay for your hosting and maintenance costs for you website or it can pay for a lot more.
Contextual advertising can be profitable. It can either pay for your hosting and maintenance costs for you website or it can pay for a lot more.
"
},
{
"image": {
"loading": "lazy"
},
"text": "
This is a title
Contextual advertising can be profitable. It can either pay for your hosting and maintenance costs for you website or it can pay for a lot more.
"
}
]
}
```
Pour vérifier si un élément d'un groupe répété est présenté, vous pouvez interroger la propriété `hs_meta`. Le code ci-dessous utilise une [boucle for](https://developers.hubspot.fr/docs/cms/reference/hubl/loops) pour vérifier les éléments de groupe de champs qui sont définis comme phares, puis affiche le titre de chacun sous forme d'en-tête `h3`.
`{{ repeated_group_item.hs_meta.occurrence.featured }}`
```hubl theme={null}
Check out this week's featured items:
{% for item in module.card %}
{% if item.hs_meta.occurrence.featured %}
{{item.title}}
{% endif %}
{% endfor %}
```
## Champs de style
Les champs de style sont un type de groupe de champs spécifique dans le fichier `fields.json` d'un module ou d'un thème. Celui-ci permet aux créateurs de contenu de contrôler le style d'un module ou d'un thème dans l'éditeur de page et de thème. Découvrez ci-dessous comment ajouter des champs de style à un module ou à un thème. Découvrez les [meilleures pratiques pour utiliser et organiser les champs de style](https://developers.hubspot.fr/docs/cms/best-practices/fields).
### Champs de style du module
Les champs de style ajoutés à un module apparaissent dans l'onglet *Styles* de l'éditeur de page lors de l'édition du module :

Lorsque vous ajoutez des champs de style au fichier `fields.json` d'un module, vous les ajoutez dans un groupe de styles. Ce groupe, cependant, peut contenir plusieurs groupes en son sein, comme indiqué ci-dessous :
```json theme={null}
// Module style fields
[
{
"type": "group",
"name": "styles",
"tab": "STYLE",
"children": [
{
"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"
}
}
}
}
]
}
]
```
Les champs suivants peuvent être utilisés comme champs de style dans les modules. Découvrez chacun des types de champs dans le [module et le guide des types de champs](https://developers.hubspot.fr/docs/cms/reference/fields/module-theme-fields).
* [Alignement](https://developers.hubspot.fr/docs/cms/reference/fields/module-theme-fields#alignment)
* [Dégradé](https://developers.hubspot.fr/docs/cms/reference/fields/module-theme-fields#gradient)
* [Espacement](https://developers.hubspot.fr/docs/cms/reference/fields/module-theme-fields#spacing)
* [Image d'arrière-plan](https://developers.hubspot.fr/docs/cms/reference/fields/module-theme-fields#background-image)
* [Bordure](https://developers.hubspot.fr/docs/cms/reference/fields/module-theme-fields#border)
* [Booléen](https://developers.hubspot.fr/docs/cms/reference/fields/module-theme-fields#boolean)
* [Choix](https://developers.hubspot.fr/docs/cms/reference/fields/module-theme-fields#choice)
* [Nombre](https://developers.hubspot.fr/docs/cms/reference/fields/module-theme-fields#number)
* [Couleur](https://developers.hubspot.fr/docs/cms/reference/fields/module-theme-fields#color)
* [Icône](https://developers.hubspot.fr/docs/cms/reference/fields/module-theme-fields#icon)
* [Image](https://developers.hubspot.fr/docs/cms/reference/fields/module-theme-fields#image)
* [Police](https://developers.hubspot.fr/docs/cms/reference/fields/module-theme-fields#font)
* [Alignement du texte](https://developers.hubspot.fr/docs/cms/reference/fields/module-theme-fields#text-alignment)
Découvrez-en davantage sur les [types de champs de modules et de thèmes](https://developers.hubspot.fr/docs/cms/reference/fields/module-theme-fields).
Consultez le [boilerplate du CMS](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/modules/card.module/fields.json) pour obtenir un exemple de champs de style dans le fichier `fields.json` d'un module.
### Champs de style de thème
Les champs de style ajoutés à un thème apparaissent dans la barre latérale gauche de l'éditeur de thème :

Tous les champs de style contenus dans le fichier `fields.json` d'un thème seront ajoutés à la barre latérale gauche de l'éditeur de thème. Il n'est pas nécessaire de les placer dans un groupe de styles, comme illustré ci-dessous :
```json theme={null}
// Theme style fields
[
{
"label": "Global colors",
"name": "global_colors",
"type": "group",
"children": [
{
"label": "Primary",
"name": "primary",
"type": "color",
"visibility": {
"hidden_subfields": {
"opacity": true
}
},
"default": {
"color": "#494A52"
}
},
{
"label": "Secondary",
"name": "secondary",
"type": "color",
"visibility": {
"hidden_subfields": {
"opacity": true
}
},
"default": {
"color": "#F8FAFC"
}
}
]
},
{
"label": "Global fonts",
"name": "global_fonts",
"type": "group",
"children": [
{
"label": "Primary",
"name": "primary",
"type": "font",
"visibility": {
"hidden_subfields": {
"size": true,
"styles": true
}
},
"inherited_value": {
"property_value_paths": {
"color": "theme.global_colors.primary.color"
}
},
"default": {
"fallback": "sans-serif",
"font": "Lato",
"font_set": "GOOGLE"
}
},
{
"label": "Secondary",
"name": "secondary",
"type": "font",
"visibility": {
"hidden_subfields": {
"size": true,
"styles": true
}
},
"inherited_value": {
"property_value_paths": {
"color": "theme.global_colors.primary.color"
}
},
"default": {
"fallback": "serif",
"font": "Merriweather",
"font_set": "GOOGLE"
}
}
]
},
{
"name": "branding_color",
"label": "branding_color",
"type": "color",
"default": {
"color": "#3b7bc0", "opacity": 60
},
"inherited_value": {
"property_value_paths": {
"color": "brand_settings.primaryColor"
}
}
},
{
"name": "secondary_branding_color",
"label": "Secondary Branding color",
"type": "color",
"default": {
"color": "#ff6b6b", "opacity": 60
},
"inherited_value": {
"property_value_paths": {
"color": "brand_settings.colors[2]"
}
}
}
]
}
]
```
Les champs suivants peuvent être utilisés comme champs de style dans les thèmes. Découvrez chacun des types de champs dans le [module et le guide des types de champs](https://developers.hubspot.fr/docs/cms/reference/fields/module-theme-fields).
* [Booléen](https://developers.hubspot.fr/docs/cms/reference/fields/module-theme-fields#boolean)
* [Bordure](https://developers.hubspot.fr/docs/cms/reference/fields/module-theme-fields#border)
* [Choix](https://developers.hubspot.fr/docs/cms/reference/fields/module-theme-fields#choice)
* [Couleur](https://developers.hubspot.fr/docs/cms/reference/fields/module-theme-fields#color)
* [Police](https://developers.hubspot.fr/docs/cms/reference/fields/module-theme-fields#font)
* [Image](https://developers.hubspot.fr/docs/cms/reference/fields/module-theme-fields#image)
* [Nombre](https://developers.hubspot.fr/docs/cms/reference/fields/module-theme-fields#number)
* [Espacement](https://developers.hubspot.fr/docs/cms/reference/fields/module-theme-fields#spacing)
Découvrez-en davantage sur les [types de champs de modules et de thèmes](https://developers.hubspot.fr/docs/cms/reference/fields/module-theme-fields).
Consultez le [boilerplate du CMS](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/fields.json) pour obtenir un exemple de champs de style dans le fichier `fields.json` d'un thème.
> [!WARNING]
>
> **Remarque :** Si vous êtes un fournisseur du marketplace, vous ne devez pas remplacer les champs de contenu existants par des champs de style dans les modules existants. La modification de la hiérarchie des champs dans un fichier `fields.json` peut entraîner la perte des données des instances de module existantes. Ajoutez de nouveaux champs de style ou créez une nouvelle liste dans laquelle les champs sont regroupés de manière appropriée. Cela permet d'éviter que vos mises à jour ne constituent des changements brusques pour les clients qui utilisent vos thèmes. Pour mettre en place la migration à partir des anciens modules, consultez le [forum des idées HubSpot](https://community.hubspot.com/t5/HubSpot-Ideas/Create-a-path-to-make-it-possible-to-migrate-existing-fields-to/idi-p/450311#M85938).
### CSS générée
Certains champs de style permettent d'éditer directement des CSS en fonction de la valeur du champ. Cette fonction est particulièrement utile pour les champs qui peuvent contrôler des styles plus complexes, comme les dégradés. Les champs de style suivants ont une propriété `.css` générée :
* [Image d'arrière-plan](https://developers.hubspot.fr/docs/cms/reference/fields/module-theme-fields#background-image)
* [Bordure](https://developers.hubspot.fr/docs/cms/reference/fields/module-theme-fields#border)
* [Couleur](https://developers.hubspot.fr/docs/cms/reference/fields/module-theme-fields#color)
* [Police](https://developers.hubspot.fr/docs/cms/reference/fields/module-theme-fields#font)
* [Dégradé](https://developers.hubspot.fr/docs/cms/reference/fields/module-theme-fields#gradient)
* [Espacement](https://developers.hubspot.fr/docs/cms/reference/fields/module-theme-fields#spacing)
* [Alignement du texte](https://developers.hubspot.fr/docs/cms/reference/fields/module-theme-fields#text-alignment)
```hubl theme={null}
{% require_css %}
{% end_require_css %}
```
## Répéteurs
Lorsque vous créez des modules qui mettent en forme des informations, il arrive souvent que certains types d'informations se répètent. Un module de recette, par exemple, peut avoir un champ dédié aux « Ingrédients ». La plupart des recettes se composent de plus d'un ingrédient. En les dotant d'un champ de texte enrichi, il se peut que vous ne puissiez plus imposer de style cohérent ni ajouter de fonctionnalités pour chaque ingrédient. C'est là tout l'intérêt des répéteurs, dont HubSpot dispose de deux formes distinctes : les champs répétés et les groupes répétés.
### Champs répétés
Les champs répétés sont des champs normaux, mais les créateurs de contenu peuvent ajouter, supprimer et réorganiser les instances du champ. En utilisant l'exemple de module de recette ci-dessus, chaque ingrédient peut être un champ de texte répété.

Ainsi, le créateur de contenu peut ajouter autant d'ingrédients qu'il le souhaite. Les développeurs obtiennent un tableau qu'ils peuvent faire défiler pour imprimer cette liste d'ingrédients, en appliquant le formatage et les fonctionnalités désirés.
Les champs répéteurs sont utilisés de préférence dans des situations très simples. Il est souvent plus judicieux de [répéter les groupes](#repeating-groups).
> [!WARNING]
>
> **Remarque :** il n'est actuellement pas possible de définir l'ordre par défaut des champs répétés.
#### Champs répétés dans fields.json
```json theme={null}
// Repeating field example
{
"name": "ingredient",
"label": "Ingredient",
"required": false,
"locked": false,
"occurrence": {
"min": 1,
"max": null,
"sorting_label_field": null,
"default": 1
},
"allow_new_line": false,
"show_emoji_picker": true,
"type": "text",
"default": ["1 cup water"]
}
```
#### Boucle dans les éléments du module HTML+HubL
```html theme={null}
{% for item in module.ingredient %}
{{ item }}
{% endfor %}
```
### Groupes répétés
Les groupes répétés sont des groupes de champs dont l'option de répétition est activée. Les groupes répétés permettent aux créateurs de contenu d'ajouter, de supprimer et de réorganiser des groupes de champs. En utilisant l'exemple de module de recette, supposons que vous souhaitez intégrer votre liste d'ingrédients à une fonctionnalité de liste de courses au sein de votre module de recette.

La quantité d'un ingrédient serait un élément crucial de la liste de courses. Si l'on fournit cette information dans le champ de texte, le module devrait alors analyser le champ de texte et espérer parvenir à séparer la quantité de l'ingrédient. C'est là toute l'utilité des groupes répétés. Le résultat de ces champs est un objet qui peut être parcouru en boucle.
#### Groupes répétés dans fields.json
```json theme={null}
// Repeating field group example
{
"id": "ingredients",
"name": "ingredients",
"label": "Ingredients",
"required": false,
"locked": false,
"occurrence": {
"min": 1,
"max": null,
"sorting_label_field": "ingredients.ingredient",
"default": null
},
"children": [
{
"id": "ingredients.ingredient",
"name": "ingredient",
"label": "Ingredient",
"required": false,
"locked": false,
"validation_regex": "",
"allow_new_line": false,
"show_emoji_picker": false,
"type": "text",
"default": "Water"
},
{
"id": "ingredients.quantity",
"name": "quantity",
"label": "Quantity",
"required": false,
"locked": false,
"display": "text",
"min": 0,
"step": 1,
"type": "number",
"default": 1
},
{
"id": "ingredients.measurement",
"name": "measurement",
"label": "Measurement",
"help_text": "Unit of measurement (cups, tbsp, etc.)",
"required": false,
"locked": false,
"allow_new_line": false,
"show_emoji_picker": false,
"type": "text",
"default": "cups"
}
],
"type": "group",
"default": [
{
"ingredient": "Water",
"quantity": 1,
"measurement": "cups"
}
]
}
```
#### Boucle dans les champs répétés des modules
```html theme={null}
```
### Options du répéteur
Pour améliorer l'expérience d'édition et empêcher les éditeurs de contenu de fournir des valeurs que vous n'avez pas prises en compte dans le programme, nous vous permettons de définir des valeurs minimales et maximales pour le nombre d'éléments que les créateurs de contenu peuvent ajouter à un champ répété ou à un groupe répété.
Pour les groupes répétés, vous pouvez également définir le champ qui sert de libellé pour cet élément lors de l'affichage du répéteur.

```json theme={null}
"occurrence" : {
"min" : 1,
"max" : 4,
"sorting_label_field" : "ingredients.ingredient",
}
```
| Paramètre | Type | Description | Par défaut |
| - | - | - | - |
| `max` | Entier | Nombre maximum d'occurrences de ce groupe. Empêche le créateur de contenu d'ajouter plus que ce nombre d'éléments dans l'interface utilisateur. | `null` |
| `min` | Entier | Nombre minimum d'occurrences de ce groupe de champs. Empêche le créateur de contenu d'avoir moins de ce nombre d'éléments dans l'interface utilisateur. | `null` |
| `sorting_label_field` | Chaîne | Il s'agit de l'identifiant du champ dont il faut extraire le texte pour l'afficher dans l'interface utilisateur sur les cartes à glisser. Par défaut, il s'agit du premier champ du groupe. | |
## Champs hérités
La propriété `inherited_value` peut être configurée pour qu'un champ hérite de sa valeur par défaut d'autres champs. Pour définir la valeur par défaut d'un champ à partir de la valeur d'un autre champ, définissez `default_value_path` comme chemin d'accès au nom du champ cible. Lorsque `default_value_path` est défini, il ignorera tout `default` défini sur le champ.
Pour accéder aux valeurs d'autres champs, les chemins doivent inclure `module.` au début, comme lorsque vous accédez à la valeur dans le code HubL du module.
```json theme={null}
// Inherited fields
{
"name": "body_font",
"type": "font",
"default": {
"font": "Helvetica",
"color": "#C27BA0"
}
},
{
"name": "h1_font",
"type": "font",
"default": {},
"inherited_value": {
"default_value_path": "module.body_font",
"property_value_paths" : {
"font": "module.body_font.font",
"font_set": "module.body_font.font_set"
}
}
}
```
> [!NOTE]
>
> Étant donné que la famille de polices est déterminée par une combinaison de `font` et `font_set`, vous devez inclure les deux pour l'héritage des champs de police. Découvrez-en davantage sur le [champ de police](https://developers.hubspot.fr/docs/cms/reference/fields/module-theme-fields#font).
Pour les champs complexes (champs dont les valeurs sont des objets), les utilisateurs peuvent disposer d'une plus grande granularité sur les propriétés héritées grâce à l'option `property_value_path`. Tous les chemins référencés dans `inherited_value` peuvent également inclure des clés provenant de la valeur d'un champ pour les champs complexes.
Par exemple, les champs de couleur ont des valeurs d'objet qui contiennent la couleur du champ ainsi que son opacité. Ainsi, pour obtenir la valeur réelle d'une couleur sans son opacité, le chemin d'accès doit se terminer par `.color`. Par exemple, un champ de police ne peut hériter sa couleur que d'un champ de couleur distinct :
```json theme={null}
// Inherited fields with objects
{
"name": "secondary_color",
"type": "color",
"default": {
"color": "#C27BA0",
"opacity": 100
}
},
{
"name": "h1_font",
"type": "font",
"default": {
"font": "Helvetica",
"size": 12,
"size_unit": "px"
},
"inherited_value": {
"property_value_paths": {
"color": "module.secondary_color.color"
}
}
}
```
Vous pouvez également combiner les effets de `default_value_path` et de `property_value_paths` pour hériter d'une valeur par défaut d'un champ tout en héritant d'une valeur de propriété spécifique d'un champ différent :
```json theme={null}
// combining default_value_path and property_value_paths
{
"name": "body_font",
"type": "font",
"default": {
"font": "Helvetica",
"color": "#000000"
}
},
{
"name": "secondary_color",
"type": "color",
"default": {
"color": "#C27BA0",
"opacity": 100
}
},
{
"name": "h1_font",
"type": "font",
"default": {},
"inherited_value": {
"default_value_path": "module.body_font",
"property_value_paths": {
"color": "module.secondary_color.color"
}
}
}
```
Si un champ hérite d'un autre champ, mais qu'il est ensuite directement remplacé au niveau de la page ou dans les paramètres du thème, son lien avec le champ de contrôle est rompu. Les champs liés via `default_value_path` ou `property_value_paths` n'affecteront plus la valeur de ce champ.
## Visibilité du champ
Lors de la définition de champs de module et de thème personnalisés, vous pouvez configurer l'affichage d'un champ en ajoutant l'objet `visibility` au champ dans le fichier `fields.json`. Par exemple, vous pouvez définir un module de formulaire pour afficher une zone de texte enrichi lorsque le message de remerciement est sélectionné, mais un sélecteur de page lorsqu'une redirection est sélectionnée.
Vous pouvez définir la visibilité en fonction de la valeur de `controlling_field_path` ou d'une propriété spécifique dans ce champ à l'aide du paramètre `property`. Vous pouvez également appliquer la visibilité à un champ individuel ou à un groupe de champs pour contrôler la visibilité de tous les éléments du groupe.
```json theme={null}
"visibility" : {
"controlling_field_path" : "field_name",
"controlling_value_regex" : "regular_expression_in_controlling_field",
"property": "src",
"operator" : "EQUAL"
}
```
| Paramètre | Type | Description |
| - | - | - |
| `controlling_field_path` | Chaîne | Le chemin du champ qui contrôle la condition d'affichage.
Si le champ n'est pas imbriqué dans un groupe de champs, utilisez le nom du champ (par exemple : `field_name`).
Pour les champs imbriqués dans des groupes, le chemin doit correspondre à sa structure de groupe, séparée par un point. Par exemple :
`field_group_name.field_name`
`parent_group.child_group.field_name`
|
| `controlling_value_regex` | Chaîne | L'expression régulière dans le champ de contrôle qui doit être présente pour que le champ s'affiche. L'expression régulière doit correspondre à la chaîne entière (et non à un sous-ensemble) et est exécutée en fonction de la casse. |
| `operator` | Chaîne | L'opérateur qui définit la manière dont la valeur `controlling_value_regex` doit être respectée. Opérateurs possibles :
`NOT_EQUAL`
`EQUAL`
`EMPTY`
`NOT_EMPTY`
`MATCHES_REGEX`
|
| `property` | Chaîne | Définit la visibilité en fonction d'une propriété spécifique du champ cible. Par exemple, vous pouvez activer la visibilité lorsque la propriété `src` d'un champ d'image est égale à une valeur spécifique. Par défaut, si aucune valeur n'est fournie pour ce champ, la visibilité est basée sur la valeur de chaîne de `controlling_value_regex`. |
Vous pouvez également inclure un objet `occurrence_options` à l'intérieur de l'objet `visibility` pour cibler le nombre de valeurs d'un champ répété. Cet objet doit inclure `count` pour la comparaison et une définition `operator`. Par exemple, pour afficher un champ de texte uniquement lorsqu'un autre champ répété comporte au moins deux éléments, vous pouvez définir `visibility` comme suit :
```json theme={null}
[
{
"type": "group",
"name": "ingredients",
"label": "Recipe ingredients",
"display": "drilldown",
"children": [
{
"name": "ingredient",
"label": "Ingredient",
"occurrence": {
"min": 1,
"max": null,
"default": 1
},
"type": "text",
"default": ["1 cup water"]
},
{
"type": "text",
"label": "Conditional field",
"name": "conditional_field",
"visibility": {
"controlling_field_path": "ingredients.ingredient",
"occurrence_options": {
"count": 2,
"operator": "GREATER_THAN_OR_EQUAL"
}
}
}
]
}
]
```
Vous pouvez utiliser n'importe laquelle des valeurs suivantes `operater` :
* `"NOT_EQUAL"`
* `"EQUAL"`
* `"EMPTY"`
* `"NOT_EMPTY"`
* `"GREATER_THAN"`
* `"GREATER_THAN_OR_EQUAL"`
* `"LESS_THAN"`
* `"LESS_THAN_OR_EQUAL"`
### Visibilité avancée
L'attribut `visibility` ne peut prendre en charge qu'un seul critère à la fois. Pour inclure plusieurs critères avec plusieurs opérateurs ainsi que l'ordre des opérations, vous pouvez utiliser `advanced_visibility`.
```json theme={null}
"visibility_rules" : "ADVANCED",
"advanced_visibility" : {
"boolean_operator" : "AND",
"criteria" : [{
"controlling_field_path" : "field_name",
"controlling_value_regex" : "regular_expression_in_controlling_field",
"operator" : "MATCHES_REGEX"
},
{
"controlling_field_path" : "field_name",
"controlling_value_regex" : "regular_expression_in_controlling_field",
"operator" : "EQUAL"
}]
}
```
| Paramètre | Type | Description |
| - | - | - |
| `visibility_rules` | Chaîne | Par défaut, cette valeur est définie sur `SIMPLE`. Pour utiliser `advanced_visibility`, définissez sur `ADVANCED`. |
| `boolean_operator` | Chaîne | L'opérateur booléen pour les critères conditionnels. Peut être `AND` ou `OR`. |
| `criteria` | Tableau | Un tableau d'objets de visibilité qui définit les critères conditionnels qui doivent être remplis pour que le champ s'affiche. |
| `controlling_field_path` | Chaîne | Le chemin du champ qui contrôle la condition d'affichage.
Si le champ n'est pas imbriqué dans un groupe de champs, utilisez le nom du champ (ex : `field_name`).
Pour les champs imbriqués dans des groupes, le chemin doit correspondre à sa structure de groupe, séparée par un point. Par exemple :
`field_group_name.field_name`
`parent_group.child_group.field_name`
|
| `controlling_value_regex` | Chaîne | La valeur dans le champ de contrôle qui doit être respectée pour afficher le champ. Lors de l'utilisation de l'opérateur `MATCHES_REGEX`, l'expression régulière doit correspondre à la chaîne entière (et non à un sous-ensemble) et est exécutée en fonction de la casse. Un champ avec `controlling_field_path`, mais sans `controlling_value_regex` est visible si le champ de contrôle a une valeur non-nulle et non vide. |
| `operator` | Chaîne | L'opérateur qui définit la manière dont la valeur `controlling_value_regex` doit être respectée. Opérateurs possibles :
`NOT_EQUAL`
`EQUAL`
`EMPTY`
`NOT_EMPTY`
`MATCHES_REGEX`
La syntaxe de l'expression régulière est obligatoire lors de l'utilisation de `MATCHES_REGEX`. |
Par exemple, vous trouverez ci-dessous la première partie du code du [module de paiement par défaut](https://developers.hubspot.fr/docs/cms/reference/modules/default-modules). Pour consulter le code complet, vous pouvez cloner le module dans HubSpot, puis le télécharger dans votre environnement local pour afficher le fichier `fields.json` du module.
```json theme={null}
[
{
"id": "payment",
"name": "payment",
"display_width": null,
"label": "Payment",
"required": true,
"locked": false,
"type": "payment",
"default": {
"id": null,
"properties": {}
}
},
{
"id": "checkout_location",
"name": "checkout_location",
"display_width": null,
"label": "Checkout behavior",
"required": false,
"locked": false,
"visibility": {
"controlling_field_path": "payment",
"controlling_value_regex": "id\":\\d+",
"operator": "MATCHES_REGEX"
},
"display": "radio",
"choices": [
["new_tab", "Open in a new tab"],
["overlay", "Sliding overlay"]
],
"type": "choice",
"default": "new_tab"
},
{
"id": "button_text",
"name": "button_text",
"display_width": null,
"label": "Button text",
"required": true,
"locked": false,
"validation_regex": "",
"visibility": {
"controlling_field_path": "payment",
"controlling_value_regex": "id\":\\d+",
"operator": "MATCHES_REGEX"
},
"allow_new_line": false,
"show_emoji_picker": false,
"type": "text",
"default": "Checkout"
},
{
"id": "icon",
"name": "icon",
"display_width": null,
"label": "Icon",
"required": false,
"locked": false,
"visibility_rules": "ADVANCED",
"advanced_visibility": {
"boolean_operator": "AND",
"criteria": [
{
"controlling_field_path": "payment",
"controlling_value_regex": "id\":\\d+",
"operator": "MATCHES_REGEX"
},
{
"controlling_field_path": "add_icon",
"controlling_value_regex": "true",
"operator": "EQUAL"
}
],
"children": []
},
"children": [
{
"id": "icon.icon",
"name": "icon",
"display_width": null,
"label": "Icon",
"required": true,
"locked": false,
"icon_set": "fontawesome-5.0.10",
"type": "icon",
"default": {
"name": "hubspot",
"type": "SOLID",
"unicode": "f3b2"
}
},
{
"id": "icon.position",
"name": "position",
"display_width": null,
"label": "Position",
"required": true,
"locked": false,
"display": "select",
"choices": [
["left", "Left"],
["right", "Right"]
],
"type": "choice",
"default": "left"
}
],
"tab": "CONTENT",
"expanded": false,
"type": "group"
}
// rest of fields.json code
]
```
Le code ci-dessus entraîne le comportement suivant :
* Le premier champ (`payment`) est un champ obligatoire (menu déroulant) qui permet au créateur de contenu de sélectionner un lien de paiement spécifique. Dans HubSpot, un créateur de contenu verra les éléments suivants lors du premier ajout du module à la page :

* Une fois qu'un lien de paiement est sélectionné, les trois champs suivants (`checkout_location`, `button_text`, et `icon`) s'affichent. En effet, les champs ont un attribut `visibility` contrôlé par le champ de `payment` et nécessitant une valeur d'ID dans le paramètre `id` du champ de paiement.
Le champ `icon` lui-même utilise `advanced_visibility` pour apparaître uniquement lorsqu'un lien de paiement est présent dans le champ `payment` ET lorsque la case à cocher `add_icon` est sélectionnée.
En plus de définir la visibilité dans `fields.json`, vous pouvez définir la visibilité dans le gestionnaire de conception en modifiant les options *Conditions d'affichage* d'un champ.

Après avoir défini la visibilité dans le gestionnaire de conception, vous pouvez [récupérer](/docs/developer-tooling/local-development/hubspot-cli/reference#fetch) le module [à l'aide de l'ILC](/docs/developer-tooling/local-development/hubspot-cli/install-the-cli) pour afficher l'attribut `visibility` dans le fichier `fields.json` du module.
## Désactivation de champ conditionnel
Vous pouvez ajouter des conditions à un champ pour empêcher la modification lorsque les conditions spécifiées sont remplies. Vous pouvez également définir un message à afficher au-dessus du champ lorsqu'il est désactivé pour fournir un contexte dans l'éditeur de contenu.

Les conditions et le message sont définis dans l'objet `disabled_controls` du champ. Les conditions pour rendre un champ modifiable sont définies dans l'objet `rules`, qui suit le même format que [advanced\_visibility](#field-visibility).
Le code ci-dessous montre à la fois une mise en œuvre simple et avancée des critères `rules` :
* Le champ `simple_page` inclut une logique pour désactiver le champ si le champ `text_field` est défini sur `testing`.
* Le champ `fancy_page` inclut une logique pour désactiver le champ si `text_field` ou `text_field_2` est défini sur une valeur non égale à `testing` et `testing2` respectivement.
```json theme={null}
// example fields.json
[
{
"type": "text",
"name": "text_field",
"label": "Text field"
},
{
"type": "text",
"name": "text_field_2",
"label": "Text field 2"
},
{
"type": "page",
"label": "Simple Page",
"name": "simple_page",
"disabled_controls": {
"message": "This field is disabled",
"rules": {
"criteria": [
{
"controlling_field_path": "text_field",
"operator": "EQUAL",
"controlling_value_regex": "testing"
}
]
}
}
},
{
"type": "page",
"label": "Fancy Page",
"name": "fancy_page",
"disabled_controls": {
"message": "This field is disabled",
"rules": {
"boolean_operator": "OR",
"criteria": [
{
"controlling_field_path": "text_field",
"operator": "NOT_EQUAL",
"controlling_value_regex": "testing"
},
{
"controlling_field_path": "text_field_2",
"operator": "NOT_EQUAL",
"controlling_value_regex": "testing2"
}
]
}
}
}
]
```
| Paramètre | Type | Description |
| - | - | - |
| `message` | Chaîne | Le message à afficher dans l'éditeur de contenu lorsque le champ est désactivé. |
| `rules` | Objet | Les conditions d'activation du champ pour modification. |
| `criteria` | Tableau | Un tableau d'objets de condition qui définit les critères qui doivent être remplis pour que le champ s'affiche. Ce tableau peut contenir plusieurs objets de condition séparés par une logique `AND` ou `OR` via le paramètre `boolean_operator`. |
| `boolean_operator` | Chaîne | L'opérateur booléen pour les critères conditionnels. Peut être `AND` ou `OR`. Lorsqu'il n'est pas spécifié, la valeur par défaut est `AND`. |
| `controlling_field_path` | Chaîne | Le chemin du champ qui contrôle la condition d'affichage.
Si le champ n'est pas imbriqué dans un groupe de champs, utilisez le nom du champ (ex : `field_name`).
Pour les champs imbriqués dans des groupes, le chemin doit correspondre à sa structure de groupe, séparée par un point. Par exemple :
`field_group_name.field_name`
`parent_group.child_group.field_name`
|
| `controlling_value_regex` | Chaîne | La valeur dans le champ de contrôle qui doit être respectée pour afficher le champ. Lors de l'utilisation de l'opérateur `MATCHES_REGEX`, l'expression régulière doit correspondre à la chaîne entière (et non à un sous-ensemble) et est exécutée en fonction de la casse. Un champ avec `controlling_field_path`, mais sans `controlling_value_regex` est visible si le champ de contrôle a une valeur non-nulle et non vide. |
| `operator` | Chaîne | L'opérateur qui définit la manière dont la valeur `controlling_value_regex` doit être respectée. Opérateurs possibles :
`NOT_EQUAL`
`EQUAL`
`EMPTY`
`NOT_EMPTY`
`MATCHES_REGEX`
La syntaxe de l'expression régulière est obligatoire lors de l'utilisation de `MATCHES_REGEX`. |
## Mise en évidence des champs de l'éditeur de thème
Dans l'éditeur de thème, la mise en évidence de l'aperçu peut aider les créateurs de contenu à identifier les champs qui contrôlent les éléments de page. La mise en évidence de l'aperçu fonctionne en associant les champs du thème aux sélecteurs CSS qu'ils affectent, en ajoutant une zone autour de ces éléments lors du survol du champ dans l'éditeur de thème.
Pour configurer la mise en évidence d'aperçu pour les champs de thème, vous inclurez un fichier `editor-preview.json` dans le répertoire racine du thème pour mapper les champs de thème à une liste de sélecteurs CSS. Dans le fichier, vous inclurez un tableau pour chaque champ de style que vous souhaitez mettre en évidence contenant les sélecteurs CSS pertinents, en utilisant le format suivant :
```json theme={null}
// editor-preview.json
{
"selectors": {
"theme.settings.path.1": [ ],
"theme.settings.path.2": [ ],
}
}
```
Par exemple, le code ci-dessous mettra en évidence les éléments de la page qui sont contrôlés par le champ de police principal. Vous pouvez consulter l'exemple complet dans le fichier `editor-preview.json` du thème Growth par défaut.
```json theme={null}
// editor-preview.json
{
"selectors": {
"fonts.primary": [
"button, .button, .hs-button",
"form input[type='submit'], form .hs-button",
".error-page:before",
"p",
"blockquote > footer",
"form td.is-today .pika-button",
"form .is-selected .pika-button",
"th, td",
".blog-listing__post-tag",
".blog-listing__post-author-name, .blog-post__author-name",
".pagination__link-icon svg",
".tabs__tab",
"a",
".button.button--simple",
".pagination__link .pagination__link-icon svg",
".card--dark",
".card--light",
".card--light summary, .card--light p, .card--light h1, .card--light h2, .card--light h3, .card--light h4, .card--light h5, .card--light h6, .card--light a:not(.button), .card--light span, .card--light div, .card--light li, .card--light blockquote",
".card--light .accordion__summary:before",
"tfoot th, tfoot td",
".header__language-switcher-current-label > span",
".header__language-switcher-child-toggle svg",
".header__language-switcher .lang_list_class a:not(.button)",
".header__menu-link",
".header__menu-item--depth-1 > .header__menu-link:not(.button)",
".header__menu-item--depth-1 .header__menu-child-toggle svg",
".header__menu-toggle svg",
".header__language-switcher .header__language-switcher-current-label > span",
".header p, .header h1, .header h2, .header h3, .header h4, .header h5, .header h6, .header a:not(.button), .header span, .header li, .header blockquote, .header .tabs__tab, .header .tabs__tab, .header .tabs__tab, .header .tabs__tab",
".footer .hs-menu-wrapper a",
".footer h1, .footer h2, .footer h3, .footer h4, .footer h5, .footer h6, .footer p, .footer a:not(.button), .footer span, .footer div, .footer li, .footer blockquote, .footer .tabs__tab, .footer .tabs__tab, .footer .tabs__tab, .footer .tabs__tab",
".footer hr",
"form label",
"#email-prefs-form, #email-prefs-form h1, #email-prefs-form h2",
"form legend",
"form input[type='text'], form input[type='email'], form input[type='password'], form input[type='tel'], form input[type='number'], form input[type='search'], form select, form textarea",
".backup-unsubscribe input[type='email']",
"form .legal-consent-container, form .legal-consent-container .hs-richtext, form .legal-consent-container .hs-richtext p",
"form .hs-richtext, form .hs-richtext *, form .hs-richtext p, form .hs-richtext h1, form .hs-richtext h2, form .hs-richtext h3, form .hs-richtext h4, form .hs-richtext h5, form .hs-richtext h6",
"button, button, button, .button, .button, .button, .hs-button, .hs-button, .hs-button",
"button, .button, .hs-button",
".button.button--secondary, .button.button--secondary, .button.button--secondary",
".button.button--secondary",
".header__menu-item--depth-1 > .header__menu-link, .header__menu-item--depth-1 > .header__menu-link",
".header__menu-item--depth-1 > .header__menu-link",
".header__menu-submenu .header__menu-link, .header__menu-submenu .header__menu-link",
".header__language-switcher .lang_list_class a, .header__language-switcher .lang_list_class a",
".header__menu-submenu .header__menu-link:not(.button)",
".footer .hs-menu-wrapper a, .footer .hs-menu-wrapper a",
".footer .hs-menu-wrapper a",
"form .hs-richtext a",
".header__menu-item--depth-1 > .header__menu-link--active-link:not(.button)",
".footer .hs-menu-wrapper .active > a"
]
}
}
```

Pour commencer à générer ce fichier, exécutez la [commande d'ILC](/docs/developer-tooling/local-development/hubspot-cli/reference#generate-theme-field-selectors-for-in-app-highlighting) suivante pour créer le fichier. Lors de la création du fichier, un script s'exécutera pour configurer les mappages initiaux des sélecteurs de champ.
```shell theme={null}
hs theme generate-selectors
```
| Paramètre | Description |
| - | - |
| `theme-directory-path` | Le chemin d'accès au répertoire du thème. |
Après avoir exécuté la commande, vous devrez examiner et affiner le fichier `editor-preview.json` pour vous assurer que les champs et les sélecteurs sont mappés correctement. Si la commande [generate-selectors](/docs/developer-tooling/local-development/hubspot-cli/reference#generate-theme-field-selectors-for-in-app-highlighting) fera une supposition rudimentaire sur les champs qui affectent les sélecteurs, vous devrez apporter des corrections en fonction de la façon dont votre thème est construit. Par exemple, cette commande ne peut pas détecter si des modules remplacent le style ou si vous utilisez des macros.
Pour tester ces mappages, téléchargez le thème sur un compte, puis consultez l'éditeur de thème de ce compte (\*\*Paramètres \*\* > **Site web** > **Thèmes** > **Afficher le thème**).
# Configurer l'éditeur de texte enrichi
Source: https://developers.hubspot.fr/docs/cms/reference/fields/rich-text-editor
L'éditeur de texte enrichi à l'intérieur des modules personnalisés permet désormais aux développeurs de supprimer des composants de la barre d'outils de configuration.
En tant que développeur, il arrive que les éditeurs WYSIWYG fournissent des fonctionnalités qui, lorsqu'elles sont mal utilisées, peuvent entraver l'objectif d'une marque unifiée et causer des problèmes de conception et de flux de contenu. L'éditeur de texte enrichi à l'intérieur des modules personnalisés permet désormais aux développeurs de supprimer des composants de la barre d'outils de configuration via la propriété `enabled_features` à l'intérieur du fichier fields.json.
> [!WARNING]
>
> Remarque : Ce qui suit s'applique aux modules personnalisés utilisant le champ de texte enrichi en développement local uniquement. L'utilisation de cette fonctionnalité ne désactivera pas la fonctionnalité des options supprimées de l'éditeur de texte enrichi, uniquement l'affichage des options. Cela s'explique par des raisons de rétrocompatibilité, de sorte que le contenu existant n'est pas affecté.
## Comment utiliser enabled\_features
Dans votre fichier fields.json où vous avez votre objet de champ de texte enrichi, vous pouvez activer certaines fonctionnalités en ajoutant les options valides de la barre d'outils dans un tableau à la propriété `enabled_features`, comme indiqué ci-dessous :
```json theme={null}
// Rich text field with only Bold, Link, and Image available in the Toolbar
{
"name": "description",
"label": "Description",
"required": false,
"locked": false,
"type": "richtext",
"default": null,
"enabled_features": ["bold", "link", "image"]
}
```
L'éditeur de contenu verra alors l'éditeur de texte enrichi avec uniquement les options incluses activées, comme illustré dans l'image ci-dessous :
> [!NOTE]
>
> Remarque : Certaines fonctionnalités, telles que le bouton Effacer les styles qui vous permet de revenir au style par défaut de l'éditeur, seront toujours activées et ne peuvent pas être supprimées. Si la propriété `enabled_features` est omise, toutes les fonctionnalités apparaîtront.

## Liste de fonctionnalités
Voici une liste des fonctionnalités qui peuvent être activées individuellement lors de l'utilisation de la propriété `enabled_features`.
### Groupes de contrôles
| Option | Description |
| - | - |
| `colors` | Contrôles de la couleur du texte et de l'arrière-plan. |
| `fonts` | Contrôles de la famille de polices et de la taille de police. |
| `indents` | Contrôles du retrait négatif et du retrait. |
| `lists` | Contrôles de listes à puces et numérotées. |
| `standard_emphasis` | Contrôles du texte gras, italique et souligné. |
| `advanced_emphasis` | Contrôles de texte barré, d'exposant, d'indice et de format de code. |
| `glyphs` | Contrôles d'émojis, de caractères spéciaux et d'icônes. Non pris en charge dans les modules d'e-mail. Pour ajouter le sélecteur d'emoji aux modules d'e-mail, utilisez plutôt [emoji](#insert-buttons). |
### Formatage de texte
| Option | Description |
| - | - |
| `block` | Affiche le menu déroulant du sélecteur de style. |
| `font_family` | Affiche le menu déroulant du sélecteur de police. |
| `font_size` | Affiche le menu déroulant de la taille de la police. |
| `bold` | Affiche le bouton de texte en gras. |
| `italic` | Affiche le bouton de texte en italique. |
| `underline` | Affiche le bouton de texte souligné. |
| `text_color` | Affiche le bouton de couleur du texte. |
| `background_color` | Affiche le bouton de couleur d'arrière-plan. |
| `alignment` | Affiche le bouton d'alignement. |
| `bulleted_list` | Affiche le bouton de liste à puces. |
| `numbered_list` | Affiche le bouton de liste numérotée. |
| `lineheight` | Affiche le bouton de hauteur de ligne. |
| `outdent` | Affiche le bouton de retrait négatif. |
| `indent` | Affiche le bouton de retrait. |
| `strikethrough` | Affiche le bouton de texte barré. |
| `superscript` | Affiche le bouton d'exposant. |
| `subscript` | Affiche le bouton d'indice. |
| `code_format` | Affiche le bouton de format de code. |
### Insérer des boutons
| Option | Description |
| - | - |
| `link` | Affiche le bouton de lien. |
| `image` | Affiche le bouton d'image. Non pris en charge dans les modules d'e-mail. |
| `emoji` | Affiche le bouton d'émoji. |
| `personalize` | Affiche l'élément de barre d'outils de personnalisation. |
| `cta` | Affiche l'élément de menu de call-to-action sous le menu d'insertion. |
| `embed` | Affiche l'élément de menu d'intégration sous le menu d'insertion. |
| `video` | Affiche l'élément de menu vidéo sous le menu d'insertion. |
| `table` | Affiche l'élément de menu de tableau sous le menu d'insertion. |
| `charmap` | Affiche l'élément de menu de caractères spéciaux sous le menu d'insertion. |
| `anchor` | Affiche l'élément de menu d'ancrage sous le menu d'insertion. |
| `hr` | Affiche l'élément de menu de ligne horizontale sous le menu d'insertion. |
| `nonbreaking_space` | Affiche l'élément de menu d'espace insécable sous le menu d'insertion. |
| `icon` | Affiche l'élément de menu d'icône sous le menu d'insertion. |
### Options avancées
| Option | Description |
| - | - |
| `source_code` | Affiche l'élément de menu de code source sous le menu avancé. |
| `visual_blocks` | Affiche l'élément de menu d'affichage des blocs sous le menu avancé. |
# Filtres HubL
Source: https://developers.hubspot.fr/docs/cms/reference/hubl/filters
Liste de filtres HubL et exemples pour les développeurs CMS Hub.
Les filtres affectent le résultat final de votre HubL. Ils peuvent être appliqués à diverses annonces et expressions HubL pour modifier le balisage du modèle produit par le serveur.
La syntaxe de base d'un filtre est `|filtername`. Le filtre est ajouté directement après l'annonce ou l'expression, à l'intérieur de ses séparateurs. Certains filtres ont des paramètres supplémentaires qui peuvent être ajoutés entre parenthèses. La syntaxe de base d'un filtre avec un paramètre de type chaîne, nombre et booléen est : `|filtername("stringParameter", 10, true)`. Notez que les paramètres de type chaîne doivent être écrits entre guillemets. Notez également que les filtres HubL ont un alias qui peut être utilisé pour servir le même objectif que le filtre principal.
L'article suivant contient tous les filtres HubL pris en charge.
> [!WARNING]
>
> ### Remarque:
>
> vous pouvez appliquer les filtres HubL aux [jetons de personnalisation](https://knowledge.hubspot.com/website-pages/personalize-your-content), tels que les jetons de contact et d'entreprise, sur les pages de CMS Hub et de blog, mais pas dans les e-mails.
## abs
Obtient la valeur absolue d'un nombre. Vous pouvez utiliser ce filtre pour vérifier qu'un nombre est positif.
```text hubl.txt theme={null}
{% set my_number = -53 %}
{{ my_number|abs }}
```
```text sortie rendue.txt theme={null}
53
```
## add
Ajoute une valeur numérique à une autre valeur numérique. Ce filtre fonctionne de la même manière que l'[opérateur +](/docs/cms/reference/hubl/operators-and-expression-tests#math). Le paramètre entre parenthèses est l'addendum que vous combinez avec votre valeur numérique initiale.
```text hubl.txt theme={null}
{% set my_num = 40 %}
{{ my_num|add(13) }}
```
```text sortie rendue.txt theme={null}
53
```
## attr
Rend l'attribut d'un dictionnaire. Ce filtre est l'équivalent de l'impression d'une variable qui existe dans un dictionnaire, comme `content.absolute_url`.
```text hubl.txt theme={null}
{{ content|attr("absolute_url") }}
```
```text sortie rendue.txt theme={null}
https://developers.hubspot.com/docs/cms/hubl/filters
```
| Paramètre | Description |
| - | - |
| `attribute_name` | Indique l'attribut à imprimer |
## batch
Regroupe les éléments dans une séquence.
Dans l'exemple ci-dessous, une variable contient une séquence de types de fruits. Le filtre `batch` est appliqué à une boucle qui parcourt la séquence. La boucle imbriquée s'exécute trois fois pour imprimer 3 types de fruits par ligne, avant que la boucle externe ne s'exécute à nouveau. Remarquez dans la sortie finale, puisqu'il n'y a que 5 types de fruits, le dernier élément est remplacé par un ` ` (le deuxième paramètre).
```html example.html theme={null}
{% set rows = ["apples", "oranges", "pears", "grapes", "blueberries"] %}
{% for row in rows|batch(3, " ") %}
{% for column in row %}
{{ column }}
{% endfor %}
{% endfor %}
```
```html example.html theme={null}
apples
oranges
pears
grapes
blueberries
```
| Paramètre | Type | Description |
| - | - | - |
| `linecount` | Nombre | Le nombre d'éléments à inclure dans le lot. |
| `fill_with` | Chaîne | Indique ce qu'il faut inclure pour compléter les éléments manquants |
## between\_times
Calcule le temps entre deux objets datetime dans une unité de temps indiquée.
> [!WARNING]
>
> ### Remarque:
>
> vous devez uniquement utiliser ce filtre avec les variables qui renvoient une date. À compter du 30 septembre 2024, ce filtre ne renverra plus la date du jour lorsqu'une valeur nulle est transmise. Après cette date, une valeur nulle dans le filtre renverra la date 30 septembre 2024.
```text hubl.txt theme={null}
{% set begin = "2018-07-14T14:31:30+0530"|strtotime("yyyy-MM-dd'T'HH:mm:ssZ") %}
{% set end = "2018-07-20T14:31:30+0530"|strtotime("yyyy-MM-dd'T'HH:mm:ssZ") %}
{{ begin|between_times(end, "days") }}
```
```text sortie rendue.txt theme={null}
6
```
| Paramètre | Type | Description |
| - | - | - |
| `end` | Objet datetime | L'objet datetime de fin. |
| `timeunit` | Chaîne | Les unités de temps valides sont `nanos`, `micros`, `millis`, `seconds`, `minutes`, `hours`, `half_days`, `days`, `weeks`, `months`, `years`, `decades`, `centuries`, `millennia` et `eras`. |
## bool
Convertit une valeur de chaîne de texte en un booléen.
```text hubl.txt theme={null}
{% if "true"|bool == true %}hello world{% endif %}
```
```text sortie rendue.txt theme={null}
hello world
```
## capitalize
Met la première lettre d'une valeur variable en majuscule. Le premier caractère sera en majuscule, toutes les autres lettres seront en minuscules. Les mots suivants séparés par des espaces ou des traits d'union n'auront pas leur première lettre en majuscule.
```text hubl.txt theme={null}
{% set sentence = "the first letter of a sentence should always be capitalized." %}
{{ sentence|capitalize }}
```
```text sortie rendue.txt theme={null}
The first letter of a sentence should always be capitalized.
```
## center
Centre le texte dans une longueur de champ donnée à l'aide d'espaces. Ce filtre n'est pas recommandé et n'est pas particulièrement utile, car le compilateur HTML de HubSpot élimine automatiquement les espaces blancs ; cependant, il est inclus ici par souci d'exhaustivité.
L'exemple ci-dessous montre ce filtre appliqué à une variable dans une pré-balise, de sorte que les espaces blancs ne sont pas supprimés.
```html example.html theme={null}
{% set var = "string to center" %}
before{{ var|center(80) }}after
```
```html example.html theme={null}
before string to center after
```
\| Paramètre | Type | Description |
\| --------- | ------ | ---------------------------------------------------------------------------- | ---------------------------------------------------------------------------- |
\| `width` | Nombre | Précise la longueur de l'espace blanc dans lequel le texte doit être centré. | Précise la longueur de l'espace blanc dans lequel le texte doit être centré. |
## convert\_rgb
Convertit une valeur HEX en une chaîne RVB. C'est utile si vous devez convertir des variables de couleur en RVB pour les utiliser avec une déclaration CSS RVBA. Dans l'exemple ci-dessous, la valeur définie par un module de couleur est convertie en une valeur RVB et utilisée dans une déclaration CSS RVBA.
```html example.html theme={null}
{% set my_color = "#FFFFFF" %}
{{ my_color|convert_rgb }}
{% set my_color2="#000000" %}
```
```html example.html theme={null}
255, 255, 255
```
## cut
Supprime une chaîne d'une valeur. Ce filtre peut être utilisé pour faire correspondre et couper une partie spécifique d'une chaîne. Le paramètre indique la partie de la chaîne qui doit être supprimée. L'exemple ci-dessous supprime l'espace et le mot world de la valeur originale de la variable.
```text hubl.txt theme={null}
{% set my_string = "Hello world." %}
{{ my_string|cut(" world") }}
```
```text sortie rendue.txt theme={null}
Hello.
```
| Paramètre | Type | Description |
| - | - | - |
| `characters_to_cut` | Chaîne | La partie de la chaîne qui doit être supprimée. |
## datetimeformat (obsolète)
> [!WARNING]
>
> ### Remarque:
>
> Ce filtre est [obsolète](/docs/cms/versions-deprecations/deprecated/hubl/filters-functions#datetimeformat-function). Vous devrez plutôt utiliser le filtre [format\_datetime](#format-datetime), qui utilise une syntaxe plus standardisée.
## default
Si la valeur est indéfinie, elle renverra le premier paramètre, sinon la valeur de la variable sera imprimée. Si vous voulez utiliser la valeur par défaut avec des variables qui s'évaluent comme false, vous devez définir le deuxième paramètre sur `true`.
Le premier exemple ci-dessous imprime le message si la variable n'est pas définie. Le deuxième exemple applique le filtre à une chaîne vide, qui n'est pas indéfinie, mais il imprime un message à cause du deuxième paramètre.
```text hubl.txt theme={null}
{{ my_variable|default("my_variable is not defined") }}
{{ ""|default("the string was empty", true) }}
```
```text sortie rendue.txt theme={null}
my_variable is not defined the string was empty
```
| Paramètre | Type | Description |
| - | - | - |
| `default_value` | Chaîne | Valeur à renvoyer si la variable est indéfinie. Si la variable est définie, la valeur de la variable sera renvoyée à la place. |
| `truthy` | Booléen | À définir sur `true` pour une utilisation avec des variables évaluées à `false`. |
## dictsort
Trie un dictionnaire et donne des paires (clé, valeur). Les dictionnaires ne sont pas triés par défaut, mais vous pouvez imprimer un dictionnaire, trié par clé ou par valeur. Le premier paramètre est un booléen qui détermine si le tri prend en compte la casse ou non. Le deuxième paramètre détermine si le dictionnaire doit être trié par clé ou par valeur. L'exemple ci-dessous imprime un dictionnaire de contacts trié, avec tous les détails connus sur le contact.
```text hubl.txt theme={null}
{% for item in contact|dictsort(false, "value") %}
{{item}}
{% endfor %}
```
```text sortie rendue.txt theme={null}
A sorted contact dictionary
```
| Paramètre | Type | Description |
| - | - | - |
| `case_sensitive` | Booléen | Détermine si le tri prend en compte la casse |
| `sort_by` | `"key"` \| `"value"` | Détermine si le tri doit se faire par `key` ou par `value`. |
## difference
Renvoie la différence de deux ensembles ou listes. La liste renvoyée par le filtre contient tous les éléments uniques qui se trouvent dans la première liste, mais pas dans la seconde.
```text hubl.txt theme={null}
{{ [1, 2, 3]|difference([2, 3, 4, 5]) }}
```
```text sortie rendue.txt theme={null}
[1]
```
| Paramètre | Type | Description |
| - | - | - |
| `list` | Tableau | La deuxième liste à comparer pour trouver les différences par rapport à la liste originale. |
## divide
Divise la valeur actuelle par un diviseur. Le paramètre transmis est le diviseur. Ce filtre est une alternative à l'opérateur /.
```text hubl.txt theme={null}
{% set numerator = 106 %}
{{ numerator|divide(2) }}
```
```text sortie rendue.txt theme={null}
53
```
| Paramètre | Type | Description |
| - | - | - |
| `divisor` | Nombre | Le nombre par lequel il faut diviser la variable. |
## divisible
Une alternative au test d'expression `divisibleby`, le filtre divisible sera évalué comme true si la valeur est divisible par le nombre donné.
```text hubl.txt theme={null}
{% set num = 10 %}
{% if num|divisible(2) %}
The number is divisible by 2
{% endif %}
```
```text sortie rendue.txt theme={null}
The number is divisible by 2
```
| Paramètre | Type | Description |
| - | - | - |
| `divisor` | Nombre | Le nombre à utiliser pour évaluer si la valeur est divisible. |
## escape\_html
Échappe le contenu d'une entrée HTML. Accepte une chaîne et convertit les caractères `&`, `<`, `>`, `‘`, `”` et `escape_jinjava` en séquences conformes à HTML. Utilisez ce filtre pour les variables HubL qui sont utilisées en HTML mais qui ne doivent autoriser aucun HTML.
```html example.html theme={null}
{% set escape_string = "
```
## escape\_attr
Échappe le contenu d'une entrée d'attribut HTML. Accepte une chaîne et convertit les caractères `&`, `<`, `‘`, `”` et `escape_jinjava` en séquences conformes à HTML. Utilisez ce filtre pour les variables HubL qui sont ajoutées aux attributs HTML.
Notez que lorsque vous échappez des valeurs d'attributs qui acceptent les URL, telles que `href`, vous devez utiliser le filtre `escape_url` à la place.
```html example.html theme={null}
{% set escape_string = "This markup is printed as text" %}
```
```html example.html theme={null}
```
## escape\_jinjava
Convertit les caractères `{` et `}` de la chaîne en séquences conformes à Jinjava. Utilisez ce filtre si vous devez afficher un texte susceptible de contenir de tels caractères dans Jinjava.
```text hubl.txt theme={null}
{% set escape_string = "{{This markup is printed as text}}" %}
{{ escape_string|escape_jinjava }}
```
```text sortie rendue.txt theme={null}
{{This markup is printed as text}}
```
## escape\_js
Échappe les chaînes, notamment `escape_jinjava`, afin qu'elles puissent être insérées en toute sécurité dans une déclaration de variable JavaScript. Utilisez ce filtre pour les variables HubL utilisées dans les éléments de script HTML.
```text hubl.txt theme={null}
{% set escape_string = "\tThey said 'This string can safely be inserted into JavaScript.'" %}
{{ escape_string|escape_js }}
```
```text sortie rendue.txt theme={null}
\tThey said \x27This string can safely be inserted into JavaScript.\x27
```
## escape\_url
Échappe le contenu d'une entrée d'URL, applique les protocoles spécifiés, supprime les caractères invalides et dangereux et code les entités HTML. Renvoie une valeur vierge si une URL est valide. Utilisez ce filtre pour les variables HubL qui sont utilisées dans les attributs HTML qui doivent être des URL valides.
```text hubl.txt theme={null}
{% set escape_string = "http://example.com/with space/" %}
```
```text sortie rendue.txt theme={null}
```
## escapejson
Échappe les chaînes de caractères afin qu'elles puissent être utilisées comme des valeurs JSON.
```text hubl.txt theme={null}
{% set escape_string = "" %}
{% require_js position="head" %}
{% end_require_js %}
```
```text sortie rendue.txt theme={null}
```
## filesizeformat
Formate une valeur numérique dans une taille de fichier lisible par l'homme (c.-à-d. 13 kB, 4,1 Mo, 102 octets, etc.). Par défaut, les préfixes décimaux sont utilisés (par exemple, MB et GB), mais vous pouvez définir le paramètre `binary` sur `true` pour utiliser des préfixes binaires tels que Mebi (MiB) et Gibi (GiB).
```text hubl.txt theme={null}
{% set bytes = 10000 %}
{{ bytes|filesizeformat(binary=true) }}
```
```text sortie rendue.txt theme={null}
9.8 KiB
```
| Paramètre | Type | Description |
| - | - | - |
| `binary` | Booléen | S'il est défini sur `true`, des préfixes binaires sont utilisés, tels que Mebi (MiB) et Gibi (GiB). |
## first
Renvoie le premier élément d'une séquence.
```text hubl.txt theme={null}
{% set my_sequence = ["Item 1", "Item 2", "Item 3"] %}
{{ my_sequence|first }}
```
```text sortie rendue.txt theme={null}
Item 1
```
## float
Convertit la valeur en un nombre à virgule flottante. Si la conversion ne fonctionne pas, elle renvoie `0.0`. Vous pouvez remplacer cette valeur par défaut en utilisant le premier paramètre.
```text hubl.txt theme={null}
{% set my_text="25" %}
{{ my_text|float + 17 }}
```
```text sortie rendue.txt theme={null}
42.0
```
| Paramètre | Type | Description |
| - | - | - |
| `default` | Nombre | Nombre entier à renvoyer si la conversion ne fonctionne pas. |
## forceescape
Applique strictement l'échappement HTML. Dans l'environnement de HubSpot, il n'y a pas vraiment de cas d'utilisation pour l'échappement double, donc cette option se comporte généralement de la même manière que le filtre escape.
```html example.html theme={null}
{% set escape_string = "
```
## format
Applique le formatage des chaînes Python à un objet. `%s` peut être remplacé par une autre variable.
```text hubl.txt theme={null}
{{ "Hi %s %s"|format(contact.firstname, contact.lastname) }}
```
```text sortie rendue.txt theme={null}
Hi Monty Python
```
## format\_currency (obsolète)
> [!WARNING]
>
> ### Remarque:
>
> ce filtre est [obsolète](/docs/cms/versions-deprecations/deprecated/hubl/filters-functions). Utilisez plutôt le filtre [format\_currency\_value](#format-currency-value).
## format\_currency\_value
Formate un nombre donné sous forme de devise en fonction de la devise par défaut du portail et du paramètre régional transmis sous forme de paramètre. Remplace le filtre obsolète [format\_currency](/docs/cms/versions-deprecations/deprecated/hubl/filters-functions#format-currency).
```text hubl.txt theme={null}
{{ 100 | format_currency_value(locale='en-GB', currency='EUR', maxDecimalDigits=6, minDecimalDigits=1) }}
```
```text sortie rendue.txt theme={null}
€100.0
```
| Paramètre | Type | Description |
| - | - | - |
| `locale` | Chaîne | [La balise du langage local Java](https://www.oracle.com/java/technologies/javase/jdk8-jre8-suported-locales.html). La valeur par défaut est le paramètre `locale.Format : ISO639LanguageCodeInLowercase-ISO3166CountryCodeInUppercase` de la page. |
| `currency` | Chaîne | Le [code alphabétique ISO 4217](https://en.wikipedia.org/wiki/ISO_4217) de la devise, la valeur par défaut est la devise par défaut du portail. Les codes numériques ne sont pas acceptés. |
| `minDecimalDigits` | Nombre | Le nombre minimum de décimales à inclure dans le résultat. Le nombre de décimales de la devise est utilisé par défaut. |
| `maxDecimalDigits` | Nombre | Le nombre maximum de décimales à inclure dans le résultat. Le nombre de décimales de la devise est utilisé par défaut. |
## format\_date
Formate le composant de date d'un objet de date.
> [!WARNING]
>
> ### Remarque:
>
> vous devez uniquement utiliser ce filtre avec les variables qui renvoient une date. À compter du 30 septembre 2024, ce filtre ne renverra plus la date du jour lorsqu'une valeur nulle est transmise. Après cette date, une valeur nulle dans le filtre renverra la date 30 septembre 2024.
```text hubl.txt theme={null}
{{ content.publish_date | format_date('long') }}
{{ content.publish_date | format_date('yyyy.MMMM.dd') }}
{{ content.publish_date | format_date('medium', 'America/New_York', 'de-DE') }}
```
```text sortie rendue.txt theme={null}
November 28, 2022 02022.November.28 28.11.2022
```
| Paramètre | Type | Description |
| - | - | - |
| `format` | Modèle personnalisé `'short'` \|, `'medium'` \|, `'long'` \|, `'full'` \| | Le format à utiliser. Un modèle personnalisé reposant sur [Unicode LDML](https://unicode.org/reports/tr35/tr35-dates.html#Date_Format_Patterns). |
| `timeZone` | Chaîne | Le fuseau horaire de la date de sortie au format [IANA TZDB](https://data.iana.org/time-zones/tzdb/). |
| `locale` | Chaîne | Les paramètres régionaux à utiliser pour les formats reposant sur des paramètres régionaux. Voir la [liste des paramètres régionaux pris en charge](https://www.oracle.com/java/technologies/javase/java8locales.html). |
## format\_datetime
Formate les composants de date et d'heure d'un objet de date. Ce filtre remplace le filtre obsolète [datetimeformat](/docs/cms/versions-deprecations/deprecated/hubl/filters-functions#datetimeformat-filter). Par défaut, renvoie une date et une heure dans le fuseau horaire UTC-00:00.
> [!WARNING]
>
> ### Remarque:
>
> vous devez uniquement utiliser ce filtre avec les variables qui renvoient une date. À compter du 30 septembre 2024, ce filtre ne renverra plus la date du jour lorsqu'une valeur nulle est transmise. Après cette date, une valeur nulle dans le filtre renverra la date 30 septembre 2024.
```text hubl.txt theme={null}
{{ content.publish_date | format_datetime('medium', 'America/New_York', 'de-DE') }}
```
```text sortie rendue.txt theme={null}
12/31/69 7:00 PM
```
| Paramètre | Type | Description |
| - | - | - |
| `format` | Modèle personnalisé `'short'` \|, `'medium'` \|, `'long'` \|, `'full'` \| | Le format à utiliser. Un modèle personnalisé reposant sur [Unicode LDML](https://unicode.org/reports/tr35/tr35-dates.html#Date_Format_Patterns). En cas d'utilisation de `long` ou `full`, l'horodatage inclura un Z pour indiquer le décalage d'origine du fuseau UTC (c.-à-d. `2:23:00 PM Z`). Pour supprimer l'indicateur Z, spécifiez un attribut `timeZone`. |
| `timeZone` | Chaîne | Le fuseau horaire de la date de sortie au format [IANA TZDB](https://data.iana.org/time-zones/tzdb/). Par défaut, renvoie l'heure UTC. |
| `locale` | Chaîne | Les paramètres régionaux à utiliser pour les formats reposant sur des paramètres régionaux. Voir la [liste des paramètres régionaux pris en charge](https://www.oracle.com/java/technologies/javase/java8locales.html). |
## format\_number
Formate un nombre donné en fonction d'un paramètre régional spécifié. Inclut un second paramètre qui définit la précision décimale maximale.
```text hubl.txt theme={null}
{{ 1000|format_number('en-US') }}
{{ 1000.333|format_number('fr') }}
{{ 1000.333|format_number('en-US', 2) }}
```
```text sortie rendue.txt theme={null}
1,000
1 000,333
1,000.33
```
| Paramètre | Type | Description |
| - | - | - |
| `locale` | Chaîne | Les paramètres régionaux à utiliser pour le formatage. Voir la [liste des paramètres régionaux pris en charge](https://www.oracle.com/java/technologies/javase/java8locales.html). |
| `maxDecimalDigits` | Nombre | Le nombre maximum de décimales à inclure dans le résultat. Par défaut, le nombre de chiffres décimaux de la valeur saisie est utilisé. |
## format\_time
Formate le composant d'heure d'un objet de date.
> [!WARNING]
>
> ### Remarque:
>
> vous devez uniquement utiliser ce filtre avec les variables qui renvoient une date. À compter du 30 septembre 2024, ce filtre ne renverra plus la date du jour lorsqu'une valeur nulle est transmise. Après cette date, une valeur nulle dans le filtre renverra la date 30 septembre 2024.
```text hubl.txt theme={null}
{{ content.updated | format_time('long') }}
{{ content.updated | format_time('hh:mm a') }}
{{ content.updated | format_time('medium', 'America/New_York', 'de-DE') }}
```
```text sortie rendue.txt theme={null}
3:25:06 PM Z 03:25 PM 10:25:44
```
| Paramètre | Type | Description |
| - | - | - |
| `format` | Modèle personnalisé `'short'` \|, `'medium'` \|, `'long'` \|, `'full'` \| | Le format à utiliser. Un modèle personnalisé reposant sur [Unicode LDML](https://unicode.org/reports/tr35/tr35-dates.html#Date_Format_Patterns). En cas d'utilisation de `long` ou `full`, l'horodatage inclura un Z pour indiquer le décalage d'origine du fuseau UTC (c.-à-d. `2:23:00 PM Z`). Pour supprimer l'indicateur Z, spécifiez un attribut `timeZone`. |
| `timeZone` | Chaîne | Le fuseau horaire de la date de sortie au format [IANA TZDB](https://data.iana.org/time-zones/tzdb/). Par défaut, renvoie l'heure UTC. |
| `locale` | Chaîne | Les paramètres régionaux à utiliser pour les formats reposant sur des paramètres régionaux. Voir la [liste des paramètres régionaux pris en charge](https://www.oracle.com/java/technologies/javase/java8locales.html). |
## fromjson
Convertit une chaîne JSON en un objet.
```text hubl.txt theme={null}
{% set obj ='{ "name":"Brian","role":"Owner" }' %}
{{ obj|fromjson }}
```
```text sortie rendue.txt theme={null}
{role=Owner, name=Brian}
```
## geo\_distance
Calcule la distance ellipsoïdale 2D entre deux points sur la Terre.
```text hubl.txt theme={null}
{{ row.location | geo_distance(37.3435, -122.0344, "mi") }} MI
```
```text sortie rendue.txt theme={null}
861.1655563461395 MI
```
## groupby
Regroupe une séquence d'objets selon un attribut commun. Le paramètre définit l'attribut commun pour le regroupement.
```html example.html theme={null}
{% for group in contents|groupby("blog_post_author") %}
{{ group.grouper }}
{% for content in group.list %}
{{ content.name }}
{% endfor %}
{% endfor %}
```
```text sortie rendue.txt theme={null}
Blog author 1
Post by Blog author 1
Post by Blog author 1
Post by Blog author 1
Blog author 2
Post by Blog author 2
Post by Blog author 2
Post by Blog author 2
Blog author 3
Post by Blog author 3
Post by Blog author 3
Post by Blog author 3
```
| Paramètre | Description |
| - | - |
| `attribute` | L'attribut à utiliser pour le regroupement. |
## indent
Met en retrait le texte dans une longueur de champ donnée en utilisant les espaces. Ce filtre n'est pas recommandé et n'est pas particulièrement utile, car le compilateur HTML de HubSpot élimine automatiquement les espaces blancs. Toutefois, il est inclus ici par souci d'exhaustivité. L'exemple ci-dessous montre un filtre `indent` appliqué à une variable dans une balise `
`, de sorte que les espaces blancs ne sont pas supprimés. Le premier paramètre contrôle la quantité d'espaces blancs et le second booléen permet d'indenter ou non la première ligne.
```html example.html theme={null}
{% set var = "string to indent" %}
{{ var|indent(2, true) }}
```
```text sortie rendue.txt theme={null}
string to indent
```
| Paramètre | Type | Description |
| - | - | - |
| `width` | Nombre | La quantité d'espaces blancs à appliquer. |
| `indent-first` | Booléen | Lorsque cette option est définie sur `true`, la première ligne sera mise en retrait. |
## int
Convertit la valeur en un nombre entier. Si la conversion ne fonctionne pas, elle renvoie `0`. Vous pouvez remplacer cette valeur par défaut en utilisant le premier paramètre.
```text hubl.txt theme={null}
{% set string="25" %}
{{ string|int + 17 }}
```
```text sortie rendue.txt theme={null}
42
```
| Paramètre | Type | Description |
| - | - | - |
| `default` | Nombre | Nombre entier à renvoyer si la conversion ne fonctionne pas. |
## intersect
Renvoie l'intersection de deux ensembles ou listes. La liste renvoyée par le filtre contient tous les éléments uniques qui sont contenus dans les deux listes.
```text hubl.txt theme={null}
{{ [1, 2, 3]|intersect([2, 3, 4, 5]) }}
```
```text sortie rendue.txt theme={null}
[2, 3]
```
| Paramètre | Type | Description |
| - | - | - |
| `list` | Tableau | La deuxième liste à comparer pour trouver l'intersection de la liste avec la liste originale. |
## ipaddr
Évalue comme `true` si la valeur est une adresse IPv4 ou IPv6 valide.
```text hubl.txt theme={null}
{% set ip = "1.0.0.1" %}
{% if ip|ipaddr %}
The string is a valid IP address
{% endif %}
```
```text sortie rendue.txt theme={null}
The string is a valid IP address
```
## join
Renvoie une chaîne qui est la concaténation des chaînes de la séquence. Le séparateur entre les éléments est une chaîne vide par défaut, vous pouvez le définir avec le paramètre facultatif. Le deuxième paramètre peut être utilisé pour indiquer un attribut à joindre.
```text hubl.txt theme={null}
{% set my_list = [1, 2, 3] %}
{% set sep = "---" %}
{{ my_list|join }}
{{ my_list|join("|") }}
{{ my_list|join(sep) }}
```
```text sortie rendue.txt theme={null}
123 1|2|3 1---2---3
```
| Paramètre | Type | Description |
| - | - | - |
| `delimiter` | Chaîne | Le délimiteur à utiliser lors de la concaténation de chaînes. |
| `attribute` | Variable HubL | Attribut de valeur à joindre à un objet. |
## last
Renvoie le dernier élément d'une séquence.
```text hubl.txt theme={null}
{% set my_sequence = ["Item 1", "Item 2", "Item 3"] %}
{% my_sequence|last %}
```
```text sortie rendue.txt theme={null}
Item 3
```
## length
Renvoie le nombre d'éléments d'une séquence ou d'un mappage.
```text hubl.txt theme={null}
{% set services = ["Web design", "SEO", "Inbound Marketing", "PPC"] %}
{{ services|length }}
```
```text sortie rendue.txt theme={null}
4
```
## list
Convertit les valeurs en une liste. Les chaînes seront renvoyées sous forme de caractères distincts, sauf si elles sont contenues dans des délimiteurs de séquence entre crochets `[ ]`.
```text hubl.txt theme={null}
{% set one = 1 %}
{% set two = 2 %}
{% set three = "three" %}
{% set four = ["four"] %}
{% set list_num = one|list + two|list + three|list + four|list %}
{{ list_num }}
```
```text sortie rendue.txt theme={null}
[1, 2, t, h, r, e, e, four]
```
## log
Calcule le logarithme naturel d'un nombre.
```text hubl.txt theme={null}
{{ 10|log }}
{{ 65536|log(2) }}
```
```text sortie rendue.txt theme={null}
2.302585092994046 16.0
```
| Paramètre | Type | Description |
| - | - | - |
| `base` | Nombre | La base à utiliser pour le calcul du journal. |
## lower
Convertit toutes les lettres d'une valeur en minuscules.
```text hubl.txt theme={null}
{% set text="Text to MAKE LowercaSe" %}
{{ text|lower }}
```
```text sortie rendue.txt theme={null}
text to make lowercase
```
## map
Applique un filtre sur une séquence d'objets ou recherche un attribut. C'est utile lorsque vous traitez une liste d'objets lorsque vous n'êtes réellement intéressé que par une certaine valeur de celle-ci.
L'utilisation de base est le mappage d'un attribut. Par exemple, si vous voulez utiliser la logique conditionnelle pour vérifier si une valeur est présente dans un attribut particulier d'un dictionnaire. Vous pouvez également le laisser utiliser un filtre en transmettant le nom du filtre et les arguments après.
```text hubl.txt theme={null}
{# Usage 1 #}
Apply a filter to a sequence:
{% set seq = ["item1", "item2", "item3"] %}
{{ seq|map("upper") }}
{# Usage 2 #}
Look up an attribute:
{{ content|map("currentState")}}
```
```text sortie rendue.txt theme={null}
Apply a filter to a sequence: [ITEM1, ITEM2, ITEM3]
Look up an attribute: [DRAFT]
```
| Paramètre | Type | Description |
| - | - | - |
| `filter` | Chaîne | Filtre à appliquer à la séquence d'objets. |
## md5
Calcule le [hachage md5](https://en.wikipedia.org/wiki/MD5) de l'objet donné
```text hubl.txt theme={null}
{{ content.absolute_url|md5 }}
```
```text sortie rendue.txt theme={null}
923adb4ce05a4c6342c04c80be88d15e
```
## minus\_time
Soustrait un nombre d'heures à partir d'un objet datetime.
```text hubl.txt theme={null}
{% set date = "2018-07-14T14:31:30+0530"|strtotime("yyyy-MM-dd'T'HH:mm:ssZ") %}
{{ date }}
{{ date|minus_time(2, "months") }}
```
```text sortie rendue.txt theme={null}
2018-07-14 14:31:30 2018-05-14 14:31:30
```
| Paramètre | Type | Description |
| - | - | - |
| `diff` | Nombre | Montant à soustraire. |
| `timeunit` | Chaîne | Les unités de temps valides sont `nanos`, `micros`, `millis`, `seconds`, `minutes`, `hours`, `half_days`, `days`, `weeks`, `months`, `years`, `decades`, `centuries`, `millennia` et `eras`. |
## multiply
Multiplie une valeur par un nombre. Fonctionne de la même manière que l'[opérateur \*](/docs/cms/reference/hubl/operators-and-expression-tests).
```text hubl.txt theme={null}
{% set n = 20 %}
{{ n|multiply(3) }}
```
```text sortie rendue.txt theme={null}
60
```
## plus\_time
Ajoute un nombre d'heures à un objet datetime.
```text hubl.txt theme={null}
{% set date = "2018-07-14T14:31:30+0530"|strtotime("yyyy-MM-dd'T'HH:mm:ssZ") %}
{{ date }}
{{ date|plus_time(5, "days") }}
```
```text sortie rendue.txt theme={null}
2018-07-14 14:31:30 2018-07-19 14:31:30
```
| Paramètre | Type | Description |
| - | - | - |
| `diff` | Nombre | Montant à soustraire. |
| `timeunit` | Chaîne | Les unités de temps valides sont `nanos`, `micros`, `millis`, `seconds`, `minutes`, `hours`, `half_days`, `days`, `weeks`, `months`, `years`, `decades`, `centuries`, `millennia` et `eras`. |
## pprint
Impression d'une variable avec mise en forme. Ceci imprime le type de variable et d'autres informations utiles pour le débogage.
```text hubl.txt theme={null}
{% set this_var ="Variable that I want to debug" %}
{{ this_var|pprint }}
```
```text sortie rendue.txt theme={null}
(String: Variable that I want to debug)
```
## random
Renvoie un élément aléatoire de la séquence.
> [!WARNING]
>
> ### Remarque:
>
> si vous utilisez ce filtre, la page sera [pré-rendue](/docs/cms/best-practices/testing-staging-performance/prerendering) périodiquement et non pas chaque fois que le contenu de la page est mis à jour. Cela signifie que le contenu filtré ne sera pas mis à jour à chaque rechargement de page.
>
> Cela peut ne pas être un problème pour certains types de contenu, tels que l'affichage d'une liste aléatoire d'articles de blog. Cependant, si vous souhaitez que le contenu change aléatoirement à chaque chargement de page, vous devez plutôt utiliser JavaScript pour rendre aléatoire le contenu côté client.
```text hubl.txt theme={null}
{% for content in contents|random %}
```
## regex\_replace
Recherche un motif regex et le remplace par une séquence de caractères. Le premier argument est un motif regex de style RE2, le second est la chaîne de remplacement.
Découvrez-en davantage sur la [syntaxe des regex RE2](https://github.com/google/re2/wiki/Syntax).
```text hubl.txt theme={null}
{{ "contact-us-2"|regex_replace("[^a-zA-Z]", "") }}
```
```text sortie rendue.txt theme={null}
contactus
```
## reject
Filtre une séquence d'objets en appliquant un [test d'expression](/docs/cms/reference/hubl/operators-and-expression-tests) à l'objet et en rejetant ceux dont le test a réussi.
```text hubl.txt theme={null}
{% set some_numbers = [10, 12, 13, 3, 5, 17, 22] %}
{{ some_numbers|reject("even") }}
```
```text sortie rendue.txt theme={null}
[13, 3, 5, 17]
```
| Paramètre | Type | Description |
| - | - | - |
| `exp_text` | Chaîne | Le nom du [test d'expression](/docs/cms/reference/hubl/operators-and-expression-tests#expression-tests) à appliquer à l'objet. |
## rejectattr
Filtre une séquence d'objets en appliquant un test à l'attribut d'un objet et en rejetant ceux dont le test a réussi.
```html example.html theme={null}
{% for content in contents|rejectattr("post_list_summary_featured_image") %}
```
| Paramètre | Type | Description |
| - | - | - |
| `attribute_name` | Chaîne | Indique l'attribut à sélectionner. Vous pouvez accéder aux attributs imbriqués en utilisant la notation par points. |
| `exp_test` | Chaîne | Le nom du [test d'expression](/docs/cms/reference/hubl/operators-and-expression-tests#expression-tests) à appliquer à l'objet. |
## render
Rend les chaînes contenant HubL au début afin que la sortie puisse être transmise dans d'autres filtres.
```html example.html theme={null}
{{ personalization_token("contact.lastname", "default value")|render|lower }}
```
```html example.html theme={null}
mclaren
```
## replace
Remplace toutes les instances d'une sous-chaîne par une nouvelle.
```html example.html theme={null}
{% if topic %}
Posts about {{ page_meta.html_title|replace("Blog | ", "") }}
{% endif %}
```
```html example.html theme={null}
Posts about topic name
```
| Paramètre | Type | Description |
| - | - | - |
| `old` | Chaîne | La sous-chaîne qui doit être remplacée. |
| `new` | Chaîne | Chaîne de remplacement. |
| `count` | Nombre | Si ce paramètre est fourni, seules les occurrences du premier décompte sont remplacées. |
## reverse
Inverse l'objet ou renvoie un itérateur qui parcours dans l'autre sens. Pour inverser une liste, utilisez [.reverse()](/docs/cms/reference/hubl/functions#reverse)
```text hubl.txt theme={null}
{% set nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] %}
{% for num in nums|reverse %}
{{ num }}
{% endfor %}
```
```text sortie rendue.txt theme={null}
10 9 8 7 6 5 4 3 2 1
```
## root
Calcule la racine carrée d'une valeur
```text hubl.txt theme={null}
{{ 16|root }}
{{ 625|root(4) }}
```
```text sortie rendue.txt theme={null}
4 5
```
| Paramètre | Type | Description |
| - | - | - |
| `nth_root` | Nombre | La racine nième à utiliser pour le calcul. |
## round
Arrondit un nombre à une précision donnée.
```text hubl.txt theme={null}
{{ 52.5|round }}
{{ 52.5|round(0, "floor") }}
```
```text sortie rendue.txt theme={null}
53 52
```
| Paramètre | Type | Description |
| - | - | - |
| `precision` | Nombre | Indique la précision de l'arrondi. |
| `rounding_method` | `'common'` (défaut) \| `'ceil'` \| `'floor'` | `common` arrondit vers le haut ou vers le bas (par défaut) ; `ceil` arrondit toujours vers le haut ; `floor` arrondit toujours vers le bas. |
## safe
Marquer une valeur comme sûre, ce qui signifie que dans un environnement où l'échappement automatique est activé, cette variable ne sera pas échappée.
```text hubl.txt theme={null}
{{ content.post_list_content|safe }}
```
```html example.html theme={null}
HTML post content that is not escaped.
```
## sanitize\_html
Nettoie le contenu d'une entrée HTML pour la sortie de contenu en texte enrichi. Accepte une chaîne, puis supprime les balises HTML qui ne sont pas autorisées. Utilisez ce filtre pour les variables HubL utilisées en HTML qui devraient permettre un HTML sécurisé.
Vous pouvez inclure les paramètres suivants pour autoriser des types spécifiques de balises HTML : `FORMATTING`, `BLOCKS`, `STYLES`, `LINKS`, `TABLES`. `IMAGES`. Par exemple : `sanitize_html(IMAGES)`.
L'utilisation de `sanitize_html` inclura tous les paramètres dans le filtre.
Vous pouvez également inclure un paramètre `STRIP` pour supprimer tout le HTML. Tout le contenu est également exécuté via `escape_jinjava` pour empêcher l'interprétation imbriquée.
```text hubl.txt theme={null}
{% set escape_string = "This
markup is printed as text.
" %}
{{ escape_string|sanitize_html("IMAGES") }}
```
```html example.html theme={null}
This markup is printed as text.
```
## select
Filtre une séquence d'objets en appliquant un test aux objets et en ne sélectionnant que ceux dont le test a réussi.
```text hubl.txt theme={null}
{% set some_numbers = [10, 12, 13, 3, 5, 17, 22] %}
{{ some_numbers|select("even") }}
```
```html example.html theme={null}
[10, 12, 22]
```
| Paramètre | Type | Description |
| - | - | - |
| `exp_text` | Chaîne | Le test d'expression à appliquer à l'objet. |
## selectattr
Filtre une séquence d'objets en appliquant un test à un attribut d'un objet et en ne sélectionnant que ceux dont le test a réussi.
```html example.html theme={null}
{% for content in contents|selectattr("post_list_summary_featured_image") %}
```
| Paramètre | Type | Description |
| - | - | - |
| `attribute_name` | Chaîne | L'attribut à tester. Vous pouvez accéder aux attributs imbriqués en utilisant la notation par points. |
| `exp_test` | Chaîne | Le nom du [test d'expression](/docs/cms/reference/hubl/operators-and-expression-tests#expression-tests) à appliquer à l'objet. |
| `val` | Chaîne | Valeur à tester. |
## shuffle
Rend aléatoire l'ordre d'itération d'une séquence. L'exemple ci-dessous mélange une boucle de blog standard.
> [!WARNING]
>
> ### Remarque:
>
> si vous utilisez ce filtre, la page sera [pré-rendue](/docs/cms/best-practices/testing-staging-performance/prerendering) périodiquement et non pas chaque fois que le contenu de la page est mis à jour. Cela signifie que le contenu filtré ne sera pas mis à jour à chaque rechargement de page.
>
> Cela peut ne pas être un problème pour certains types de contenu, tels que l'affichage d'une liste aléatoire d'articles de blog. Cependant, si vous souhaitez que le contenu change aléatoirement à chaque chargement de page, vous devez plutôt utiliser JavaScript pour rendre aléatoire le contenu côté client.
```html example.html theme={null}
{% for content in contents|shuffle %}
```
## slice
Découpe un itérateur et renvoie une liste de listes contenant ces éléments. Le premier paramètre indique le nombre d'éléments qui seront découpés, et le second paramètre indique les caractères à utiliser pour remplir les tranches vides.
```html example.html theme={null}
{% set items = ["laptops", "tablets", "smartphones", "smart watches", "TVs"] %}
{% for column in items|slice(3," ") %}
{% for item in column %}
{{ item }}
{% endfor %}
{% endfor %}
```
```html example.html theme={null}
laptops
tablets
smartphones
smart watches
TVs
```
| Paramètre | Type | Description |
| - | - | - |
| `slices` | Nombre | Combien d'éléments seront découpés. |
| `filler` | Chaîne | Indique les caractères à utiliser pour remplir les tranches vides. |
## sort
Trie une table itérative. Ce filtre nécessite que tous les paramètres soient triés en utilisant un attribut dans HubSpot. Le premier paramètre est un booléen pour inverser l'ordre de tri. Le deuxième paramètre détermine si le tri prend en compte la casse. Et le dernier paramètre indique l'attribut à utiliser pour le tri. Dans l'exemple ci-dessous, les articles d'un blog sont rendus et classés par ordre alphabétique de leur nom.
```html example.html theme={null}
{% set my_posts = blog_recent_posts("default", limit=5) %}
{% for item in my_posts|sort(False, False, "name") %}
{{ item.name }}
{% endfor %}
```
```html example.html theme={null}
A post
B post
C post
D post
E post
```
| Paramètre | Type | Description |
| - | - | - |
| `reverse` | Booléen | À définir sur `true` pour inverser l'ordre de tri. |
| `case_sensitive` | Booléen | À définir sur `true` pour rendre le tri sensible à la casse. |
| `attribute` | Chaîne | Attribut à utiliser pour le tri. Omettre lors du tri d'une liste. |
## split
Divise la chaîne d'entrée en une liste selon le séparateur donné. Le premier paramètre indique le séparateur avec lequel la variable doit être divisée. Le deuxième paramètre détermine combien de fois la variable doit être divisée. Tous les autres éléments restent groupés. Dans l'exemple ci-dessous, une chaîne de noms est séparée au niveau du `;` pour les quatre premiers noms.
```html example.html theme={null}
{% set string_to_split = "Mark; Irving; Helly; Dylan; Milchick; Harmony;" %}
{% set names = string_to_split|split(";", 4) %}
{% for name in names %}
{{ name }}
{% endfor %}
```
```html example.html theme={null}
Mark
Irving
Helly
Dylan; Milchick; Harmony;
```
| Paramètre | Type | Description |
| - | - | - |
| `character_to_split_by` | Chaîne | Indique le séparateur avec lequel la variable doit être divisée. |
| `number_of_splits` | Nombre | Détermine le nombre de fois que la variable doit être divisée. Tous les autres éléments resteraient groupés. |
## chaîne
Convertit un type de variable différent en une chaîne. Dans l'exemple ci-dessous, un entier est converti en chaîne (`pprint` est utilisé pour confirmer le changement de type de variable).
```text hubl.txt theme={null}
{% set number_to_string = 45 %}
{{ number_to_string|string|pprint }}
```
```text sortie rendue.txt theme={null}
(String: 45)
```
## striptags
Efface les balises SGML/XML et remplace les espaces blancs adjacents par un espace. Ce filtre peut être utilisé pour supprimer toutes les balises HTML d'une variable.
```html example.html theme={null}
{% set some_html = "
Some text
" %}
{{ some_html|striptags }}
```
```html example.html theme={null}
some text
```
## strtodate
Convertit une chaîne de date et un format de date en un objet de date.
```text hubl.txt theme={null}
{{ '3/3/21'|strtodate('M/d/yy') }}
```
```text sortie rendue.txt theme={null}
2021-03-03 00:00:00
```
| Paramètre | Type | Description |
| - | - | - |
| `dateFormat` | Chaîne | Le [format de date](https://docs.oracle.com/javase/7/docs/api/java/text/SimpleDateFormat.html) à utiliser. |
## strtotime
Convertit une chaîne datetime et un format datetime en un objet datetime.
```text hubl.txt theme={null}
{{ "2018-07-14T14:31:30+0530"|strtotime("yyyy-MM-dd'T'HH:mm:ssZ")|unixtimestamp }}
```
```text sortie rendue.txt theme={null}
1531558890000
```
| Paramètre | Type | Description |
| - | - | - |
| `datetimeFormat` | Chaîne | Le [format de date et d'heure](https://docs.oracle.com/javase/7/docs/api/java/text/SimpleDateFormat.html) à utiliser. |
## sum
Ajoute des valeurs numériques dans une séquence. Le premier paramètre peut indiquer un attribut facultatif et le second paramètre définit une valeur à renvoyer s'il n'y a rien dans la variable à additionner.
```text hubl.txt theme={null}
// Simple sum
{% set sum_this = [1, 2, 3, 4, 5] %}
{{ sum_this|sum }}
// Sum of attribute
{% set items = [15, 10] %}
{% set dict_var = [{"name": "Item1", "price": "20"}, {"name": "Item2", "price": "10"}] %}
Total: {{ dict_var|sum(attribute="price") }}
```
```text sortie rendue.txt theme={null}
15 Total: 30
```
| Paramètre | Type | Description |
| - | - | - |
| `attribute` | Chaîne | Attribut à additionner. |
| `return_if_nothing` | Chaîne | Valeur à renvoyer s'il n'y a rien dans la variable à additionner. |
## symmetric\_difference
Renvoie la différence symétrique de deux ensembles ou listes. La liste renvoyée par le filtre contient tous les éléments uniques qui figurent dans la première liste, mais pas dans la seconde, ou qui figurent dans la seconde liste, mais pas dans la première.
```text hubl.txt theme={null}
{{ [1, 2, 3]|symmetric_difference([2, 3, 4, 5]) }}
```
```text sortie rendue.txt theme={null}
[1, 4, 5]
```
| Paramètre | Type | Description |
| - | - | - |
| `list` | Tableau | La deuxième liste à comparer pour trouver la différence symétrique avec la liste originale. |
## title
Renvoie une version au format titre de la valeur (c'est-à-dire que les mots commencent par des lettres majuscules mais que tous les autres caractères sont des minuscules).
```text hubl.txt theme={null}
{% set my_title="my title should be title case" %}
{{ my_title|title }}
```
```text sortie rendue.txt theme={null}
My Title Should Be Title Case
```
## tojson
Écrit un objet sous forme de chaîne JSON.
```text hubl.txt theme={null}
{% for content in contents %}
{{ content.blog_post_author|tojson }}
{% endfor %}
```
```json example.json theme={null}
{
"portalId": 1234567,
"id": 12312253109,
"created": 1566413741989,
"updated": 1566414012799,
"deletedAt": 0,
"fullName": "Sample User",
"email": "sampleUser@example.com",
"userId": null,
"username": null,
"slug": "sample-user",
"jsonBody": {
"avatar": "https://app.hubspot.com/settings/avatar/109d6874a0cb066c1c7263ac5df6ce7a",
"bio": "Sample Bio",
"facebook": "",
"linkedin": "",
"twitter": "",
"website": "https://www.hubspot.com"
},
"bio": "Sample Bio",
"facebook": "",
"linkedin": "",
"avatar": "https://app.hubspot.com/settings/avatar/109d6874a0cb066c1c7263ac5df6ce7a",
"gravatarUrl": "https://app.hubspot.com/settings/avatar/108bb5ac667ded34796271437dfe8d58",
"twitterUsername": "",
"hasSocialProfiles": false,
"website": "https://www.hubspot.com",
"twitter": "",
"displayName": "Sample User"
}
```
## trim
Supprime les espaces blancs de début et de fin. HubSpot supprime déjà les espaces blancs du balisage, mais ce filtre est documenté par souci d'exhaustivité.
```text hubl.txt theme={null}
{{ " remove whitespace " }}
{{ " remove whitespace "|trim }}
```
```text sortie rendue.txt theme={null}
remove whitespace remove whitespace
```
## truncate
Coupe le texte après un certain nombre de caractères. La valeur par défaut est 255. Les caractères HTML sont inclus dans ce décompte.
> [!WARNING]
>
> **Remarque :** comme ce filtre s'appuie sur les espaces entre les mots pour raccourcir les chaînes, il se peut qu'elle ne fonctionne pas comme prévu pour les langues sans espace entre caractères, comme le japonais.
```text hubl.txt theme={null}
{{ "I only want to show the first sentence. Not the second."|truncate(40) }}
{{ "I only want to show the first sentence. Not the second."|truncate(35, true, "..........") }}
```
```text sortie rendue.txt theme={null}
I only want to show the first sente..........
```
| Paramètre | Type | Description |
| - | - | - |
| `number_of_characters` | Nombre | Nombre de caractères autorisés avant que le texte ne soit tronqué. La valeur par défaut est 255. |
| `breakword` | Booléen | Si `true`, le filtre coupe le texte en longueur. Si `false`, le dernier mot est supprimé. |
| `end` | Chaîne | Remplace les caractères de fin par « ... » par défaut après la troncature. |
## truncatehtml
Tronque une chaîne donnée, en respectant le balisage HTML (c'est-à-dire qu'il fermera correctement toutes les balises imbriquées). Cela empêchera une balise de rester ouverte après la troncature. Les caractères HTML ne sont pas pris en compte dans le total des caractères.
> [!WARNING]
>
> **Remarque :** comme ce filtre s'appuie sur les espaces entre les mots pour raccourcir les chaînes, il se peut qu'elle ne fonctionne pas comme prévu pour les langues sans espace entre caractères, comme le japonais.
```html example.html theme={null}
{% set html_text = "
I want to truncate this text without breaking my HTML
```
| Paramètre | Type | Description |
| - | - | - |
| `number_of_characters` | Nombre | Nombre de caractères autorisés avant que le texte ne soit tronqué. La valeur par défaut est 255. |
| `end` | Chaîne | Remplace les caractères de fin par « ... » par défaut après la troncature. |
| `breakword` | Booléen | Valeur booléenne. Si `true`, le filtre coupe le texte en longueur. Si `false` (par défaut), le dernier mot est supprimé. Si vous n'utilisez qu'un seul des paramètres facultatifs, utilisez des arguments de type mot-clé, comme `truncatehtml(70, breakwords = false)`. |
## unescape\_html
Convertit le texte avec des entités codées en HTML en leurs équivalents Unicode.
```text hubl.txt theme={null}
{% set escape_string = "me & you" %}
{{ escape_string|unescape_html }}
```
```text sortie rendue.txt theme={null}
me & you
```
## union
Renvoie l'union de deux ensembles ou listes. La liste renvoyée par le filtre contient tous les éléments uniques qui se trouvent dans l'une ou l'autre des listes.
```text hubl.txt theme={null}
{{ [1, 2, 3]|union([2, 3, 4, 5]) }}
```
```text sortie rendue.txt theme={null}
[1, 2, 3, 4, 5]
```
| Paramètre | Type | Description |
| - | - | - |
| `list` | Tableau | La deuxième liste à joindre à la liste originale. |
## unique
Extrait un ensemble unique d'une séquence ou d'un dictionnaire d'objets. Lors du filtrage d'un dictionnaire, tel qu'une liste d'articles renvoyée par une fonction, vous pouvez indiquer quel attribut est utilisé pour dédupliquer les éléments du dictionnaire.
```text hubl.txt theme={null}
{% set my_sequence = ["one", "one", "two", "three" ] %}
{{ my_sequence|unique }}
```
```text sortie rendue.txt theme={null}
[one, two, three]
```
| Paramètre | Type | Description |
| - | - | - |
| `attr` | Chaîne | Indique l'attribut qui doit être utilisé lors du filtrage d'une valeur dictionnaire. |
## unixtimestamp
Ce filtre convertit un objet datetime en un horodatage unix.
> [!WARNING]
>
> ### Remarque:
>
> vous devez uniquement utiliser ce filtre avec les variables qui renvoient une date. À compter du 30 septembre 2024, ce filtre ne renverra plus la date du jour lorsqu'une valeur nulle est transmise. Après cette date, une valeur nulle dans le filtre renverra la date 30 septembre 2024.
```text hubl.txt theme={null}
{{ local_dt }}
{{ local_dt|unixtimestamp }}
```
```text sortie rendue.txt theme={null}
2017-01-30 17:11:44 1485814304000
```
## upper
Convertit toutes les lettres d'une valeur en majuscules.
```text hubl.txt theme={null}
{% set text="text to make uppercase" %}
{{ text|upper }}
```
```text sortie rendue.txt theme={null}
TEXT TO MAKE UPPERCASE
```
## urlencode
Quitte et encode l'URL d'une chaîne utilisant le formatage UTF-8. Accepte à la fois les dictionnaires et les chaînes régulières ainsi que les itérables par paire.
```text hubl.txt theme={null}
{% set encode_value="Escape & URL encode this string" %}
{{ encode_value|urlencode }}
```
```text sortie rendue.txt theme={null}
Escape+%26+URL+encode+this+string
```
## urldecode
Décode les chaînes d'URL encodées vers l'URL d'origine. Accepte à la fois les dictionnaires et les chaînes régulières ainsi que les itérables par paire.
```text hubl.txt theme={null}
{% set decode_value="Escape+%26+URL+decode+this+string" %}
{{ decode_value|urldecode }}
```
```text sortie rendue.txt theme={null}
Escape & URL decode this string
```
## urlize
Convertit les URL en texte brut en liens cliquables. Si vous transmettez au filtre un nombre entier supplémentaire, il raccourcira les URL à ce nombre. Le deuxième paramètre est un booléen qui indique si le lien est rel="no follow". Le dernier paramètre vous permet de préciser si le lien s'ouvrira dans un nouvel onglet.
| Paramètre | Type | Description |
| - | - | - |
| `shorten_text` | Nombre | Nombre entier qui raccourcira les URL au nombre désiré. |
| `no_follow` | Booléen | Lorsqu'il est défini sur `true`, le lien inclura `rel="no follow"`. |
| `target="_blank"` | Chaîne | Indique si le lien s'ouvrira dans un nouvel onglet. |
```text hubl.txt theme={null}
{{ "http://hubspot.com/"|urlize }}
{{ "http://hubspot.com/"|urlize(10,true) }}
{{ "http://hubspot.com/"|urlize("",true) }}
{{ "http://hubspot.com/"|urlize("",false,target="_blank") }}
```
```html example.html theme={null}
http://hubspot.com/http://...http://hubspot.com/http://hubspot.com/
```
## wordcount
Compte le nombre de mots dans une chaîne.
> [!WARNING]
>
> Si la chaîne contient du HTML, utilisez le filtre `striptags` pour obtenir un compte précis.
```text hubl.txt theme={null}
{% set count_words = "Count the number of words in this variable" %}
{{ count_words|wordcount }}
```
```text sortie rendue.txt theme={null}
8
```
## wordwrap
Provoque le retour à la ligne des mots après un nombre de caractères donné. Cela fonctionne mieux dans un `
` car HubSpot supprime les espaces blancs par défaut.
```text hubl.txt theme={null}
{% set wrap_text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam efficitur, ipsum non sagittis euismod, ex risus rhoncus lectus, vel maximus leo enim sit amet dui. Ut laoreet ultricies quam at fermentum." %}
{{ wrap_text|wordwrap(10) }}
```
```text sortie rendue.txt theme={null}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam efficitur, ipsum
non sagittis euismod, ex risus rhoncus lectus, vel maximus leo enim sit amet
dui. Ut laoreet ultricies quam at fermentum.
```
| Paramètre | Description |
| - | - |
| `character_count` | Nombre de caractères avec le retour à la ligne du contenu. |
## xmlattr
Crée une chaîne d'attributs HTML/XML, basée sur les éléments d'un dictionnaire. Toutes les valeurs qui ne sont ni nulles ni indéfinies sont automatiquement échappées. Il ajoute automatiquement un espace devant l'élément si le filtre renvoie quelque chose, sauf si le premier paramètre est false.
```html example.html theme={null}
{% set html_attributes = {"class": "bold", "id": "sidebar"} %}
```
```html example.html theme={null}
```
| Paramètre | Type | Description |
| - | - | - |
| `autospace` | Booléen | À définir sur `true` pour ajouter un espace devant l'élément. |
# Fonctions HubL
Source: https://developers.hubspot.fr/docs/cms/reference/hubl/functions
Un listing de référence de toutes les fonctions HubL disponibles.
Les fonctions dans HubL sont similaires aux filtres car elles acceptent des paramètres et génèrent une valeur. Cependant, toutes les fonctions n'ont pas besoin d'être appliquées à une valeur de modèle initiale, mais interagissent avec d'autres zones de votre environnement HubSpot.
Si vous gérez un site web plus ancien, vous pouvez également consulter la [liste des fonctions HubL obsolètes](/docs/cms/versions-deprecations/deprecated/hubl/filters-functions).
Découvrez ci-dessous chaque fonction HubL et sa syntaxe.
## append
Ajoute un seul élément à la fin d'une liste.
```text hubl.txt theme={null}
{% set numbers_under_5 = [1,2,3] %}
{% do numbers_under_5.append(4) %}
{{numbers_under_5}}
```
```text sortie rendue.txt theme={null}
[1, 2, 3, 4]
```
| Paramètre | Type | Description |
| - | - | - |
| `item` | Tout | Élément à ajouter à la liste. |
## blog\_all\_posts\_url
La fonction `blog_all_posts_url` renvoie une URL complète vers la page de listing de tous les articles du blog indiqué.
L'exemple ci-dessous montre comment cette fonction peut être utilisée comme `href` d'une ancre.
```html example.html theme={null}
All Marketing blog posts
```
```html example.html theme={null}
All Marketing blog posts
```
| Paramètre | Type | Description |
| - | - | - |
| `selected_blog` | ID du blog ou "default" | Indique le blog à utiliser. L'ID du blog est renvoyé selon le [champ blog du module](/docs/cms/reference/fields/module-theme-fields#blog). |
## blog\_author\_url
La fonction `blog_author_url` renvoie une URL complète vers la page de listing de l'auteur du blog indiqué.
L'exemple ci-dessous montre comment cette fonction peut être utilisée comme `href` d'une ancre. Cette fonction peut être combinée avec `blog_authors` comme le montrent les exemples de cette fonction.
```html example.html theme={null}
Brian Halligan
```
```html example.html theme={null}
Brian Halligan
```
| Paramètre | Type | Description |
| - | - | - |
| `selected_blog` | ID du blog ou "default" | Spécifie le blog dans lequel se trouve la page de listing de l'auteur. Vous pouvez spécifier un blog par ID ou utiliser `"default"` pour sélectionner le blog par défaut. L'ID du blog est renvoyé selon le [champ blog du module](/docs/cms/reference/fields/module-theme-fields#blog). |
| `author_slug` | Chaîne ou variable HubL | Indique l'auteur vers lequel le lien doit être établi. Peut utiliser soit `content.blog_post_author.slug` ou un nom en minuscule avec un trait d'union. Exemple : `"jane-doe"`. |
## blog\_authors
La fonction `blog_authors` renvoie une séquence d'objets auteurs de blog pour le blog indiqué, triés par slug en ordre croissant. Cette séquence peut être stockée dans une variable et être parcourue pour créer des filtres d'articles d'auteurs personnalisés.
Le nombre d'articles publiés par chaque auteur peut être consulté avec `author.live_posts`.
> [!WARNING]
>
> **Remarque :** cette fonction est limitée à 250 auteurs. Cette fonction est également limitée à 10 appels par page.
La première ligne de l'exemple ci-dessous montre comment la fonction renvoie une séquence d'objets auteur. La suite de l'exemple montre un cas d'utilisation consistant à enregistrer une séquence dans une variable, puis à parcourir les objets auteur, en imprimant un ensemble de liens de listing d'auteurs. L'exemple suppose que le blog a 4 auteurs.
```html example.html theme={null}
{{ blog_authors("default", 250) }}
{% set my_authors = blog_authors("default", 250) %}
```
| Paramètre | Type | Description |
| - | - | - |
| `selected_blog` | ID du blog ou "default" | Indique le blog à utiliser, soit un blog spécifique selon son ID, soit le blog par défaut avec `"default"`. L'ID du blog est renvoyé selon le [champ blog du module](/docs/cms/reference/fields/module-theme-fields#blog). |
| `limit` | Entier | Définit la limite du nombre d'auteurs récupérés. |
## blog\_by\_id
La fonction `blog_by_id` renvoie un blog selon l'ID. L'exemple de code ci-dessous montre l'utilisation de cette fonction pour générer un élément de liste avec lien hypertexte.
> [!WARNING]
>
> **Remarque :** cette fonction est limitée à 10 appels par page.
```html example.html theme={null}
{% set my_blog = blog_by_id(47104297) %}
```
| Paramètre | Type | Description |
| - | - | - |
| `selected_blog` | ID du blog ou "default" | Indique le blog à utiliser, soit un blog spécifique selon son ID, soit le blog par défaut avec `"default"`. L'ID du blog est renvoyé selon le [champ blog du module](/docs/cms/reference/fields/module-theme-fields#blog). |
## blog\_page\_link
La fonction `blog_page_link` génère l'URL d'une vue paginée du listing de votre blog. La fonction prend un paramètre numérique, qui vous permet de générer des liens pour la page actuelle, suivante, précédente ou une page spécifique. Cette fonction est généralement utilisée dans l'attribut `href` des balises d'ancrage de la pagination et doit être utilisée sur le modèle de listing de votre blog.
Les exemples ci-dessous montrent cette fonction utilisée comme un `href` d'ancre. Le premier exemple affiche la page actuelle. Le deuxième exemple utilise le paramètre numéro 7 pour la septième page. Le troisième exemple utilise la variable `next_page_num` pour générer un lien relatif au numéro de la page actuelle (vous pouvez également utiliser la variable `last_page_num` pour la page précédente). Le dernier exemple utilise la variable `current_page_num` et un opérateur `+` pour créer un lien supérieur de 4 à la page actuelle.
```html example.html theme={null}
Current pagePage 7NextPage Plus 4
```
```html example.html theme={null}
Page 1Page 7NextPage Plus 4
```
| Paramètre | Type | Description |
| - | - | - |
| `page` | Nombre ou variable HubL | Numéro de page utilisé pour générer l'URL ou la variable HubL pour le numéro de page. |
## blog\_popular\_posts
Cette fonction rend un nombre déterminé d'articles populaires en une séquence. La séquence peut ensuite être enregistrée dans une variable et être parcourue par une boucle for, créant un listing personnalisé de vos articles les plus populaires.
Les résultats de cette fonction sont mis en cache pendant six heures. Pour récupérer des articles de blog en utilisant HubL d'une manière qui évite la mise en cache, vous pouvez utiliser [blog\_recent\_tag\_posts](#blog-recent-tag-posts) à la place.
Dans l'exemple de code ci-dessous, la première ligne montre comment la fonction renvoie une séquence. La séquence est enregistrée en tant que variable qui est ensuite utilisée dans une [boucle for](/docs/cms/reference/hubl/loops). [Toute variable d'article de blog](/docs/cms/reference/hubl/variables#blog-variables) doit utiliser le nom de l'élément individuel de la boucle plutôt que `content.`. Dans l'exemple, `pop_post.name` est utilisé. Cette technique peut être utilisée sur les modèles de blog et les pages de site web.
> [!WARNING]
>
> **Remarque :** cette fonction est limitée à 200 articles. Cette fonction est également limitée à 10 appels par page.
```html example.html theme={null}
{% set pop_posts = blog_popular_posts("default", 5, ["marketing-tips", "sales-tips"], "popular_past_month", "AND") %}
{% for pop_post in pop_posts %}
{{ pop_post.name }}
{% endfor %}
```
```html example.html theme={null}
[Popular post title 1, Popular post title 2, Popular post title 3, Popular post
title 4, Popular post title 5]
Popular post title 1
Popular post title 2
Popular post title 3
Popular post title 4
Popular post title 5
```
| Paramètre | Type | Description |
| - | - | - |
| `selected_blog` | ID du blog ou "default" | Indique le blog à utiliser, soit un blog spécifique selon son ID, soit le blog par défaut avec `"default"`. |
| `limit` | Entier | Indique le nombre d'articles à ajouter à la séquence jusqu'à une limite de 200. Si elle n'est pas spécifiée, la valeur par défaut est 10. |
| `tag_slug` | Tableau | Liste facultative de balises permettant de filtrer les articles. |
| `time_frame` | Chaîne | Période d'analyse facultative pour filtrer les articles. La valeur par défaut est `"popular_past_year"`. Doit être l'un des éléments suivants :
`"popular_all_time"`
`"popular_past_year"`
`"popular_past_six_months"`
`"popular_past_month"`
Ce paramètre est obligatoire lors de l'inclusion du paramètre `logical_operator`. |
| `logical_operator` | Chaîne | Lorsque `tag_slug` contient plusieurs balises, utilisez cet opérateur pour filtrer les résultats avec la logique `AND` ou `OR`. Par défaut, cette fonction utilise la logique `OR` pour renvoyer les publications étiquetées avec l'une des balises spécifiées. Lorsque vous incluez ce paramètre, `time_frame` est requis. |
## blog\_post\_archive\_url
La fonction `blog_post_archive_url` renvoie une URL complète vers la page de listing des archives pour les valeurs de date données sur le blog indiqué. Cette fonction comporte deux paramètres obligatoires et deux paramètres facultatifs. Le premier paramètre est un ID de blog ou simplement le mot clé `"default"`. Le second est l'année des articles archivés que vous souhaitez afficher.
Les paramètres facultatifs comprennent le mois et le jour des archives archivés que vous souhaitez afficher, respectivement.
L'exemple ci-dessous montre comment cette fonction peut être utilisée comme `href` d'une ancre.
```html example.html theme={null}
Posts from July 5th, 2017
```
```html example.html theme={null}
Posts from July 5th, 2017
```
| Paramètre | Type | Description |
| - | - | - |
| `selected_blog` | ID du blog ou "default" | Indique le blog à utiliser, soit un blog spécifique selon son ID, soit le blog par défaut avec `"default"`. |
| `year` | Entier | L'année. |
| `month` | Entier | Le mois facultatif. |
| `day` | Entier | Le jour facultatif. |
## blog\_recent\_author\_posts
La fonction `blog_recent_author_posts` renvoie une séquence d'objets d'article de blog pour l'auteur indiqué, triés en commençant par le plus récent. Cette séquence d'articles peut être enregistrée dans une variable et être parcourue par une boucle for, créant un listing d'articles personnalisé d'un auteur particulier.
La fonction prend trois paramètres. Le premier paramètre indique à partir de quel blog collecter les articles d'un auteur. La valeur doit être `"default"` ou l'ID d'un blog particulier (disponible dans l'URL du tableau de bord Blog) Le deuxième paramètre indique l'auteur à utiliser. Ce paramètre peut utiliser la balise **`content.blog_post_author.slug`** pour utiliser l'auteur de l'article actuel ou accepter un nom en minuscule avec trait d'union tel que `"brian-halligan"`. Le troisième paramètre indique combien d'articles sont récupérés.
La première ligne de l'exemple ci-dessous montre comment la fonction renvoie une séquence d'articles d'un auteur. Dans cet exemple, plutôt que d'indiquer un nom d'auteur exact, l'auteur actuel de l'article est utilisé. La séquence est enregistrée dans une variable et parcourue en boucle. [Toute variable d'article de blog](/docs/cms/reference/hubl/variables#blog-variables) doit utiliser le nom de l'élément individuel de la boucle plutôt que `content.`. Dans l'exemple, `author_post.name` est utilisé. Cette technique peut être utilisée sur les modèles de blog et de page.
> [!WARNING]
>
> **Remarque :** cette fonction est limitée à 200 articles et à 10 appels par page.
```html example.html theme={null}
{{ blog_recent_author_posts("default", content.blog_post_author.slug, 5 ) }}
{% set author_posts = blog_recent_author_posts("default", content.blog_post_author.slug, 5) %}
{% for author_post in author_posts %}
{{ author_post.name }}
{% endfor %}
```
```html example.html theme={null}
[Post by author title 1, Post by author title 2, Post by author title 3, Post by
author title 4, Post by author title 5]
Post by author title 1
Post by author title 2
Post by author title 3
Post by author title 4
Post by author title 5
```
| Paramètre | Type | Description |
| - | - | - |
| `selected_blog` | ID du blog ou "default" | Indique le blog à utiliser. L'ID du blog est renvoyé selon le [champ blog du module](/docs/cms/reference/fields/module-theme-fields#blog). |
| `author_slug` | Chaîne | Indique l'auteur sur lequel le filtre doit porter. |
| `limit` | Entier | Indique le nombre d'articles à ajouter à la séquence jusqu'à une limite de 200. |
## blog\_recent\_posts
La fonction `blog_recent_posts` renvoie une séquence d'objets d'articles de blog pour le blog indiqué, triés en commençant par le plus récent. Cette séquence d'articles peut être enregistrée dans une variable et être parcourue par une boucle for, créant un listing personnalisé de vos articles les plus populaires.
La fonction prend deux paramètres. Le premier paramètre indique le blog à partir duquel collecter les articles populaires. La valeur doit être `"default"` ou l'ID d'un blog particulier (disponible dans l'URL du tableau de bord Blog) Le deuxième paramètre indique le nombre d'articles à récupérer.
La première ligne de l'exemple ci-dessous montre comment la fonction renvoie une séquence. La séquence est enregistrée dans une variable et parcourue en boucle. [Toute variable d'article de blog](/docs/cms/reference/hubl/variables#blog-variables) doit utiliser le nom de l'élément individuel de la boucle plutôt que `content.`. Dans l'exemple, `rec_post.name` est utilisé. Cette technique peut être utilisée, non seulement sur les modèles de blog, mais aussi sur les pages ordinaires.
> [!WARNING]
>
> **Remarque :** cette fonction est limitée à 200 articles et à 10 appels par page.
```html example.html theme={null}
{{ blog_recent_posts("default", 5) }}
{% set rec_posts = blog_recent_posts("default", 5) %}
{% for rec_post in rec_posts %}
{{ rec_post.name }}
{% endfor %}
```
```html example.html theme={null}
[Recent post title 1, Recent post title 2, Recent post title 3, Recent post
title 4, Recent post title 5]
Recent post title 1
Recent post title 2
Recent post title 3
Recent post title 4
Recent post title 5
```
| Paramètre | Type | Description |
| - | - | - |
| `selected_blog` | ID du blog ou "default" | Indique le blog à utiliser, soit un blog spécifique selon son ID, soit le blog par défaut avec `"default"`. L'ID du blog est renvoyé selon le [champ blog du module](/docs/cms/reference/fields/module-theme-fields#blog). |
| `limit` | Entier | Indique le nombre d'articles à ajouter à la séquence, au maximum 200. |
## blog\_recent\_tag\_posts
La fonction `blog_recent_tag_posts` renvoie une séquence d'objets d'articles de blog pour une ou plusieurs balises indiquées, triés en commençant par le plus récent. Cette séquence d'articles peut être enregistrée dans une variable et être parcourue par une boucle for, créant un listing d'articles personnalisé d'une ou plusieurs balises particulières.
Dans l'exemple de code ci-dessous :
* La première ligne montre comment la fonction renvoie une séquence d'articles par balise.
* La deuxième ligne montre comment enregistrer la fonction dans une variable de séquence. Le reste du code utilise ensuite une boucle for pour parcourir les valeurs de la variable. [Toute variable d'article de blog](/docs/cms/reference/hubl/variables#blog-variables) doit utiliser le nom de l'élément individuel de la boucle plutôt que `content.`. Dans l'exemple, `tag_post.name` est utilisé. Vous pouvez utiliser cette technique sur les pages de blog et de site web.
Découvrez-en davantage sur la [création d'une liste d'articles de blog connexes](/docs/cms/reference/hubl/tags/related-blog-posts).
> [!WARNING]
>
> **Remarque :** cette fonction est limitée à 100 articles et à 10 appels par page.
```html example.html theme={null}
{{ blog_recent_tag_posts("default", "marketing-tips", 5) }}
{% set tag_posts = blog_recent_tag_posts("default", ["marketing", "fun", "inbound"], 3, "AND") %}
{% for tag_post in tag_posts %}
{{ tag_post.name }}
{% endfor %}
```
```html example.html theme={null}
[Post about Marketing 1, Post about Marketing 2, Post about Marketing 3, Post
about Marketing 4, Post about Marketing 5]
Post about Marketing
Post about Fun
Post about Inbound
```
| Paramètre | Type | Description |
| - | - | - |
| `selected_blog` | ID du blog ou "default" | Indique le blog à utiliser, soit un blog spécifique selon son ID, soit le blog par défaut avec `"default"`. L'ID du blog est renvoyé selon le [champ blog du module](/docs/cms/reference/fields/module-theme-fields#blog). |
| `tag_slug` | Chaîne | Indique la balise sur laquelle le filtre doit porter. Vous pouvez inclure jusqu'à 10 balises, séparées par des virgules. Les balises avec plusieurs mots doivent être en minuscules avec des espaces remplacées par des traits d'union. |
| `limit` | Entier | Indique le nombre d'articles à ajouter à la séquence. Ce paramètre est obligatoire lors de l'inclusion d'un paramètre `logical_operator`. |
| `logical_operator` | Chaîne | Lorsque `tag_slug` contient plusieurs balises, utilisez cet opérateur pour filtrer les résultats avec la logique `AND` ou `OR`. Par défaut, cette fonction utilise la logique `OR` pour renvoyer les publications étiquetées avec l'une des balises spécifiées. Lorsque vous incluez ce paramètre, `limit` est requis. |
## blog\_tag\_url
La fonction `blog_tag_url` renvoie une URL complète vers la page de listing de la balise du blog indiquée.
Cette fonction accepte deux paramètres. Le premier paramètre indique dans quel blog se trouve la page de listing de la balise. Le deuxième paramètre indique la balise à mettre en lien. Ce paramètre peut utiliser **`topic.slug`** pour une balise particulière de `content.topic_list` ou accepter un nom en minuscule avec un trait d'union tel que `"marketing-tips"`.
L'exemple ci-dessous montre comment cette fonction peut être utilisée comme href d'une ancre.
```html example.html theme={null}
Inbound Marketing
```
```html example.html theme={null}
Inbound Marketing
```
| Paramètre | Type | Description |
| - | - | - |
| `selected_blog` | ID du blog ou "default" | Indique le blog à utiliser, soit un blog spécifique selon son ID, soit le blog par défaut avec `"default"`. |
| `tag_slug` | Chaîne | Indique la balise vers laquelle le lien doit être établi. |
## blog\_tags
La fonction `blog_tags` renvoie une séquence des 250 balises les plus présentes dans les blogs (en fonction du nombre d'articles de blog associés) pour le blog indiqué, triées par nombre d'articles de blog.Cette séquence peut être stockée dans une variable et être parcourue pour créer des filtres d'articles de balises personnalisés. Le nombre d'articles pour chaque balise peut être consulté avec `tag.live_posts`.
Cette fonction accepte deux paramètres. Le premier paramètre indique le blog à partir duquel récupérer les balises. Le deuxième paramètre fixe une limite au nombre de balises récupérées.
La première ligne de l'exemple ci-dessous montre comment la fonction renvoie une séquence d'objets balises. La suite de l'exemple montre un cas d'utilisation consistant à enregistrer une séquence dans une variable, puis à parcourir les objets balise, en imprimant un ensemble de liens de balise. L'exemple suppose que le blog a 4 balises.
> [!WARNING]
>
> **Remarque :** cette fonction est limitée à 250 balises.
```html example.html theme={null}
{{ blog_tags("default", 250) }}
{% set my_tags = blog_tags("default", 250) %}
```
| Paramètre | Type | Description |
| - | - | - |
| `selected_blog` | ID du blog ou "default" | Indique le blog à utiliser. L'ID du blog est renvoyé selon le [champ blog du module](/docs/cms/reference/fields/module-theme-fields#blog). |
| `limit` | Entier | Le nombre maximum de balises à renvoyer. |
## blog\_total\_post\_count
Cette fonction renvoie le nombre total d'articles publiés dans le blog indiqué. Si aucun paramètre n'est indiqué, il comptera les articles de votre blog par défaut. Vous pouvez également indiquer `"default"` ou l'ID d'un blog différent à comptabiliser. L'ID du blog est disponible dans l'URL de votre tableau de bord pour un blog particulier.
> [!WARNING]
>
> **Remarque :** cette fonction est limitée à 10 appels par page.
```text hubl.txt theme={null}
{{ blog_total_post_count }}
{{ blog_total_post_count(359485112) }}
```
```text sortie rendue.txt theme={null}
16 54
```
| Paramètre | Type | Description |
| - | - | - |
| `selected_blog` | ID du blog ou "default" | Indique le blog à comptabiliser. L'ID du blog est renvoyé selon le [champ blog du module](/docs/cms/reference/fields/module-theme-fields#blog). |
## clear
Supprime tous les éléments d'une liste. Contrairement à `pop()`, il ne renvoie rien.
```text hubl.txt theme={null}
{% set words = ["phone","home"] %}
{% do words.clear() %}
{{words}}
```
```text sortie rendue.txt theme={null}
[]
```
## color\_contrast
Cette fonction valide le contraste des couleurs en fonction des [normes WCAG](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum). Vous devrez inclure deux couleurs comme arguments, et vous pouvez inclure un argument facultatif pour spécifier l'évaluation (`AA` ou `AAA`). Renvoie `true` ou `false` selon que les couleurs respectent/dépassent la norme.
```text hubl.txt theme={null}
{{color_contrast('#FFFFFF','#273749')}}
{{color_contrast('rgb(255, 255, 255)','rgb(229, 237, 245)','AAA')}}
Hey there
```
```text sortie rendue.txt theme={null}
true false Hey there
```
| Paramètre | Type | Description |
| - | - | - |
| `color_1` | Couleur | La première couleur à comparer. Accepte :
les codes hexadécimaux à 6 chiffres (`#FFFFFF`)
les codes hexadécimaux à 3 chiffres (`#F0A`)
les codes couleur RVB (`rgb(12,31,1)`)
Peut également utiliser une variable qui stocke un code de couleur hexadécimal ou RVB. Par exemple :`theme.primary_color.color` |
| `color_2` | Couleur | La deuxième couleur à comparer à la première. |
| `rating` | Chaîne | La norme WCAG à utiliser pour l'évaluation. Peut être soit `AA` (par défaut) ou `AAA`. |
## color\_variant
Cette fonction éclaircit ou assombrit une valeur hex ou une variable couleur d'une quantité définie. Le premier paramètre est la couleur hex (par exemple ("#FFDDFF") ou une variable stockant une valeur hex. Le deuxième paramètre est la quantité pour l'ajustement, de 0 à 255. Cette fonction peut être utilisée dans les fichiers CSS pour créer une variation de couleur. Un autre bon cas d'utilisation est de l'utiliser avec un paramètre couleur d'un module couleur, pour permettre aux utilisateurs d'indiquer une couleur primaire qui génère automatiquement une variation de couleur.
Dans l'exemple ci-dessous, la couleur hex #3A539B est stockée dans une variable appelée `base_color`. La couleur est modifiée par -80, ce qui donne un bleu plus foncé (#00034B).
```text hubl.txt theme={null}
{% set base_color ="#3A539B" %}
{{ color_variant(base_color, -80) }}
```
```text sortie rendue.txt theme={null}
#00034b
```
| Paramètre | Type | Description |
| - | - | - |
| `base_color` | Chaîne de couleurs hex | La couleur de départ à modifier. Par exemple : `#F7F7F7`. |
| `brightness_offset` | Entier | Un nombre positif ou négatif utilisé pour éclaircir ou assombrir la couleur de base. |
## content\_by\_id
La fonction **`content_by_id`** renvoie une page de destination, une page de site web ou un article de blog par ID. Le seul paramètre accepté par cette fonction est un ID du contenu numérique.
L'exemple de code ci-dessous montre l'utilisation de cette fonction pour générer un élément de liste avec lien hypertexte.
> [!WARNING]
>
> **Remarque :** cette fonction est limitée à 10 appels par page.
```html example.html theme={null}
{% set my_content = content_by_id(4715624297) %}
```
| Paramètre | Type | Description |
| - | - | - |
| `id` | ID | L'ID du contenu à rechercher. |
## content\_by\_ids
La liste d'ID de contenu donnée, renvoie un dictionnaire de pages de destination, de pages de site web ou d'articles de blog correspondant à ces ID.
Cette fonction prend un paramètre, une liste d'ID de pages ou d'articles de blog à rechercher, placés dans un tableau. Jusqu'à 100 objets de contenu peuvent être transmis. L'exemple de code ci-dessous montre l'utilisation de cette fonction pour générer une liste d'éléments de liste avec lien hypertexte.
> [!WARNING]
>
> **Remarque :** cette fonction est limitée à 10 appels par page.
```html example.html theme={null}
{% set contents = content_by_ids([4715624297, 4712623297, 5215624284]) %}
```
| Paramètre | Type | Description |
| - | - | - |
| `ids` | Liste | Une liste d'ID de pages ou d'articles de blog à rechercher. Jusqu'à 100 objets de contenu peuvent être transmis. |
## copy
Renvoie une copie simplifiée de la liste. Équivalent à `a[:]`.
Une *copie simplifiée* construit un nouvel objet composé, puis (dans la mesure du possible) insère dans celui-ci des *références* aux objets présents dans l'original.
```text hubl.txt theme={null}
{% set a = ["ham"] %}
{% set b = a.copy() %}
a: {{a}}
b: {{b}}
After Append
{% do a.append("swiss") %}
a: {{a}}
b: {{b}}
```
```text sortie rendue.txt theme={null}
a: [ham] b: [ham] After Append a: [ham, swiss] b: [ham]
```
## count
Renvoie le nombre de fois qu'une variable existe dans une liste.
```html example.html theme={null}
{% set attendees = ["Jack","Jon","Jerry","Jessica"] %}
{% set jon_count = attendees.count("Jon") %}
There are {{jon_count}} Jon's in the list.
After append:
{% do attendees.append("Jon") %}
{% set jon_count_after_append = attendees.count("Jon") %}
There are now {{jon_count_after_append}} Jon's in the list.
```
```html example.html theme={null}
There are 1 Jon's in the list.
After append:
There are now 2 Jon's in the list.
```
## crm\_associations
Obtient une liste d'enregistrements CRM associés à un autre enregistrement par son ID d'enregistrement, sa catégorie d'association et son ID de définition d'association.
Cette fonction renvoie un objet avec les attributs suivants : `has_more`, `total`, `offset` et `results`.
* `has_more` indique qu'il y a plus de résultats disponibles au-delà de ce lot (total > offset).
* `total` est le nombre total de résultats disponibles.
* `offset` est le décalage à utiliser pour le prochain lot de résultats.
* *`results`* renvoie un tableau des objets associés indiqués correspondant aux paramètres de la fonction
> [!WARNING]
>
> **Remarque :** pour des raisons de sécurité, parmi les [types d'objets standards de HubSpot](https://knowledge.hubspot.com/fr/get-started/manage-your-crm-database#standard-objects), seuls les objets `product` et `marketing_event` peuvent être récupérés sur une page accessible au public. Tout autre type d'objet standard doit être hébergé sur une page qui est soit [protégée par un mot de passe](https://knowledge.hubspot.com/fr/website-pages/password-protect-a-page) ou qui nécessite une [connexion au contrôle d'accès CMS](https://knowledge.hubspot.com/fr/website-pages/require-member-registration-to-access-private-content). Les objets personnalisés n'ont pas cette même restriction.
```text hubl.txt theme={null}
{% set associated_contacts = crm_associations(847943847, "HUBSPOT_DEFINED", 2, "limit=3&years_at_company__gt=2&orderBy=email", "firstname,email", false) %}
{{ associated_contacts }}
```
```text sortie rendue.txt theme={null}
{has_more=true, offset=3, total=203, results=[{firstname=Aimee, id=905,
email=abanks@company.com}, {firstname=Amy, id=1056, email=abroma@company.com},
{firstname=Abigael, id=957, email=adonahu@company.com}]}
```
> [!WARNING]
>
> **Remarque :** cette fonction peut être appelée au maximum 10 fois par page. Chaque appel `crm_associations` peut renvoyer au maximum 100 objets. La limite par défaut est de 10 objets.
| Paramètre | Type | Description |
| - | - | - |
| `id` | ID | de l'enregistrement à partir duquel les associations doivent être trouvées. |
| `association category` | Chaîne | La catégorie de la définition de l'association. Les valeurs possibles sont : `HUBSPOT_DEFINED`, `USER_DEFINED` et `INTEGRATOR_DEFINED`. Ce paramètre peut être omis pour les types d'association intégrés définis par HubSpot. |
| `association type id` | Entier | L'ID de la définition de l'association à utiliser. Pour les objets standards pris en charge par HubSpot, voir l'[ID du type d'association à utiliser](https://developers.hubspot.fr/docs/guides/api/crm/associations). Sinon, cet ID d'association peut être trouvé dans [l'API de schéma d'objets CRM](/docs/cms/start-building/features/data-driven-content/crm-objects#getting-a-custom-object-type-s-details). |
| `query` | Chaîne | L'`id` de l'enregistrement OU une chaîne de requête, délimitée par `&`. Toutes les expressions sont combinées par un ET. Les opérateurs pris en charge :
`eq` (par défaut),
`neq`
`lt`
`lte`
`gt`
`gte`
`is_null`
`not_null`
`in`
`nin`
`contains` (pour les propriétés à plusieurs valeurs ou de chaîne, comme *"firstname\_\_contains=Tim"*)
Les requêtes peuvent inclure les paramètres suivants :
`limit` : le nombre maximum de résultats renvoyés dans la réponse. Par exemple, `limit=50`.
`offset` : pour paginer les résultats si le nombre de résultats renvoyés est supérieur au paramètre de limite. Par exemple, `offset=51`.
`orderBy` : classer les résultats selon une propriété spécifique. Par exemple : `orderBy=email`.
|
| `properties` | Chaîne | Facultative. Une liste de propriétés à renvoyer, séparées par des virgules. Par défaut, un petit ensemble de propriétés communes est renvoyé. La propriété de l'ID est toujours renvoyée.Une liste complète des propriétés peut être trouvée en utilisant les points de terminaisons [obtenir toutes les propriétés du contact](https://developers.hubspot.fr/docs/reference/api/crm/properties/v1-contacts#get-all-contact-properties) et [obtenir toutes les propriétés de l'entreprise](https://developers.hubspot.fr/docs/reference/api/crm/properties/v1-companies#get-all-company-properties). |
| `formatting` | Booléen | Facultatif. Formatez les valeurs telles que les dates et les devises en fonction des paramètres de ce portail. Omettre ou transmettre `false` pour les chaînes brutes. |
## crm\_object
Récupère un seul enregistrement CRM par requête ou selon son ID. Les enregistrements sont renvoyés sous la forme d'un dictionnaire de propriétés et de valeurs.
Cette fonction peut également être [utilisée avec des objets personnalisés et des objets intégrateurs](/docs/cms/start-building/features/data-driven-content/crm-objects).
> [!WARNING]
>
> **Remarque :** pour des raisons de sécurité, parmi les [types d'objets standards de HubSpot](https://knowledge.hubspot.com/fr/get-started/manage-your-crm-database#standard-objects), seuls les objets `product` et `marketing_event` peuvent être récupérés sur une page accessible au public. Tout autre type d'objet standard doit être hébergé sur une page qui est soit [protégée par un mot de passe](https://knowledge.hubspot.com/fr/website-pages/password-protect-a-page) ou qui nécessite une [connexion au contrôle d'accès CMS](https://knowledge.hubspot.com/fr/website-pages/require-member-registration-to-access-private-content). Les objets personnalisés n'ont pas cette même restriction.
> [!TIP]
>
> Quelle est la différence entre `in` et `contains` ?
>
> `in` renvoie quelque chose si la valeur de la propriété correspond à l'une des valeurs données. Alors que `contains` renvoie quelque chose seulement si les valeurs de la propriété, pour sélection multiple, ont toutes les valeurs données.
```text hubl.txt theme={null}
{% set contact = crm_object("contact", "email=contact@company.com", "firstname,lastname", false) %}
{% set contact = crm_object("contact", 123) %}
{{ contact.firstname }}
{{ contact.lastname }}
```
```text sortie rendue.txt theme={null}
Brian Halligan
```
> [!WARNING]
>
> **Remarque :** cette fonction ne peut être appelée qu'au maximum 10 fois par page.
| Paramètre | Type | Description |
| - | - | - |
| `object_type` | Chaîne | Le nom du type d'objet. Les noms des types d'objets tiennent compte de la casse.[Les types d'objets pris en charge](/docs/cms/start-building/features/data-driven-content/crm-objects#supported-crm-object-types). Pour trouver les noms des types d'objets spécifiques aux comptes et aux intégrateurs disponibles dans votre compte, utilisez l'[API de schéma d'objets CRM](/docs/cms/start-building/features/data-driven-content/crm-objects#getting-a-custom-object-type-s-details) pour obtenir les définitions des types et rechercher la propriété name. Elle contient le nom du type d'objet interne qui doit être utilisé dans la l'intégrateur functionFor pour les types d'objets spécifiques à l'intégrateur et au compte ayant le même nom que les objets intégrés, utilisez les objets [nom entièrement qualifié](/docs/cms/start-building/features/data-driven-content/crm-objects#getting-a-custom-object-type-s-details) (FQN). |
| `query` | Chaîne | Facultative. L'`id` de l'enregistrement OU une chaîne de requête, délimitée par `&`. Toutes les expressions sont combinées par un ET. Les opérateurs pris en charge :
`eq` (par défaut)
`neq`
`lt`
`lte`
`gt`
`gte`
`is_null`
`not_null`
`in`
`nin`
`contains`, (pour les propriétés à plusieurs valeurs ou de chaîne, comme *"firstname\_\_contains=Tim"*)
Les requêtes peuvent inclure les paramètres suivants :
`limit` : le nombre maximum de résultats renvoyés dans la réponse. Par exemple, `limit=50`.
`offset` : pour paginer les résultats si le nombre de résultats renvoyés est supérieur au paramètre de limite. Par exemple, `offset=51`.
`orderBy` : classer les résultats selon une propriété spécifique. Par exemple : `orderBy=email`.
|
| `properties` | Chaîne | Facultative. Une liste de propriétés à renvoyer, séparées par des virgules. Par défaut, un petit ensemble de propriétés communes est renvoyé. La propriété de l'ID est toujours renvoyée.Une liste complète des propriétés peut être trouvée en utilisant les points de terminaisons [obtenir toutes les propriétés du contact](https://developers.hubspot.fr/docs/reference/api/crm/properties/v1-contacts#get-all-contact-properties) et [obtenir toutes les propriétés de l'entreprise](https://developers.hubspot.fr/docs/reference/api/crm/properties/v1-companies#get-all-company-properties). |
| `formatting` | Booléen | Facultatif. Formatez les valeurs telles que les dates et les devises en fonction des paramètres de ce portail. Transmettre `false` pour les chaînes brutes. |
> [!WARNING]
>
> **Remarque :** lors de la création d'une requête, les valeurs `range`, `distinct`, `ndistinct` et `startswith` sont des mots-clés réservés. Pour interroger une propriété qui utilise l'un de ces noms, vous devez utiliser le format suivant : `range__eq=` (plutôt que `range=`).
## crm\_objects
Obtient une liste d'enregistrements pour un type d'objet spécifique à partir du CRM de HubSpot.
Cette fonction renvoie un objet avec les attributs suivants : `has_more`, `total`, `offset` et `results`.
* `has_more` indique qu'il y a plus de résultats disponibles au-delà de ce lot (total > offset).
* `total` est le nombre total de résultats disponibles.
* `offset` est le décalage à utiliser pour le prochain lot de résultats.
* `results` renvoie un tableau des objets indiqués correspondant aux paramètres de la fonction
Les résultats peuvent être triés en utilisant au moins un paramètre de classement dans la requête. Par exemple, `crm_objects("contact", "firstname=Bob&order=lastname&order=createdate")` classera les contacts portant le prénom `"Bob"` par nom de famille, puis par `createdate`. Pour inverser un tri, ajoutez `-` devant le nom de la propriété, par exemple `order=-createdate`. La fonction d'objets CRM peut également être [utilisée avec des objets personnalisés et des objets intégrateurs](/docs/cms/start-building/features/data-driven-content/crm-objects).
> [!WARNING]
>
> **Remarque :** pour des raisons de sécurité, parmi les [types d'objets standards de HubSpot](https://knowledge.hubspot.com/fr/get-started/manage-your-crm-database#standard-objects), seuls les objets `product` et `marketing_event` peuvent être récupérés sur une page accessible au public. Tout autre type d'objet standard doit être hébergé sur une page qui est soit [protégée par un mot de passe](https://knowledge.hubspot.com/fr/website-pages/password-protect-a-page) ou qui nécessite une [connexion au contrôle d'accès CMS](https://knowledge.hubspot.com/fr/website-pages/require-member-registration-to-access-private-content). Les objets personnalisés n'ont pas cette même restriction.
```text hubl.txt theme={null}
{% set objects = crm_objects("contact", "firstname__not_null=&limit=3", "firstname,lastname") %}
{{ objects }}
```
```text sortie rendue.txt theme={null}
{has_more=true, offset=3, total=331, results=[{firstname=Brian, id=44151,
lastname=Halligan}, {firstname=Dharmesh, id=44051, lastname=Shah},
{firstname=George, id=88551, lastname=Washington}]}
```
> [!WARNING]
>
> **Remarque :** cette fonction peut être appelée au maximum 10 fois par page. Chaque appel `crm_objects` peut renvoyer au maximum 100 objets. La limite par défaut est de 10 objets.
| Paramètre | Type | Description |
| - | - | - |
| `object_type` | Chaîne | Le type d'objet par nom. Les noms des types d'objets tiennent compte de la casse. Le singulier et le pluriel sont acceptés pour les types d'objets standards (par exemple, `contact`, `contacts`). Découvrez-en davantage sur les [types d'objets pris en charge](/docs/cms/start-building/features/data-driven-content/crm-objects#supported-crm-object-types). Pour trouver les noms des types d'objets spécifiques aux comptes et aux intégrateurs disponibles dans votre compte, utilisez l'[API de schéma d'objets CRM](/docs/cms/start-building/features/data-driven-content/crm-objects#getting-a-custom-object-type-s-details) pour obtenir les définitions des types et la propriété name. Pour les types d'objets spécifiques à l'intégrateur et au compte ayant le même nom que les objets intégrés, utilisez les objets [nom entièrement qualifié](/docs/cms/start-building/features/data-driven-content/crm-objects#getting-a-custom-object-type-s-details) (FQN). |
| `query` | Chaîne | Facultative. L'ID de l'enregistrement ou une chaîne de requête, délimitée par `&`. Toutes les expressions sont combinées par un ET.Les opérateurs pris en charge :
`eq` (par défaut)
`neq`
`lt`
`lte`
`gt`
`gte`
`is_null`
`not_null`
`in`
`nin`
`contains`, (pour les propriétés à plusieurs valeurs ou de chaîne, comme *"firstname\_\_contains=Tim"*)
Exemple : `"email=contact@company.com"` |
| `properties` | Chaîne | Facultative. Une liste de propriétés à renvoyer, séparées par des virgules. Par défaut, un petit ensemble de propriétés communes est renvoyé. La propriété ID est toujours renvoyée. Une liste complète des propriétés peut être trouvée en utilisant les points de terminaisons [obtenir toutes les propriétés du contact](https://developers.hubspot.fr/docs/reference/api/crm/properties/v1-contacts#get-all-contact-properties) et [obtenir toutes les propriétés de l'entreprise](https://developers.hubspot.fr/docs/reference/api/crm/properties/v1-companies#get-all-company-properties). L'ID de l'enregistrement est toujours inclus dans les propriétés de l'objet renvoyé, même s'il n'est pas explicitement ajouté dans la liste des propriétés. |
| `formatting` | Booléen | Facultatif. Formatez les valeurs telles que les dates et les devises en fonction des paramètres de ce portail. Transmettre `false` pour les chaînes brutes. |
> [!WARNING]
>
> **Remarque :** lors de la création d'une requête, les valeurs `range`, `distinct`, `ndistinct` et `startswith` sont des mots-clés réservés. Pour interroger une propriété qui utilise l'un de ces noms, vous devez utiliser le format suivant : `range__eq=` (plutôt que `range=`).
## crm\_property\_definition
Obtenir la définition de la propriété pour un type d'objet et un nom de propriété donnés.
Les types d'objets pris en charge sont les objets standards HubSpot (par exemple, contacts), les objets spécifiques au portail et les objets intégrateurs.
**HubL**
```hubl theme={null}
{{ crm_property_definition("house_listing", "agent_name") }}
```
| Paramètre | Type | Description |
| - | - | - |
| `object_type` | Chaîne | Le nom du type d'objet. Les noms des types d'objets tiennent compte de la casse. [Les types d'objets pris en charge](/docs/cms/start-building/features/data-driven-content/crm-objects#supported-crm-object-types). Pour trouver les noms des types d'objets spécifiques aux comptes et aux intégrateurs disponibles dans votre compte, utilisez l'[API de schéma d'objets CRM](/docs/cms/start-building/features/data-driven-content/crm-objects#getting-a-custom-object-type-s-details) pour obtenir les définitions des types et rechercher la propriété name. Elle contient le nom du type d'objet interne qui doit être utilisé dans la l'intégrateur functionFor pour les types d'objets spécifiques à l'intégrateur et au compte ayant le même nom que les objets intégrés, utilisez les objets [nom entièrement qualifié](/docs/cms/start-building/features/data-driven-content/crm-objects#getting-a-custom-object-type-s-details) (FQN). |
| `property_name` | Chaîne | Le nom de la propriété, sans tenir compte de la casse, dont la définition doit être récupérée. |
## crm\_property\_definitions
Obtenir les définitions de propriété pour un type d'objet et un ensemble de noms de propriétés donnés.
Les types d'objets pris en charge sont les objets standards HubSpot (par exemple, contacts), les objets spécifiques au portail et les objets intégrateurs.
**HubL**
```hubl theme={null}
{{ crm_property_definitions("house_listing", "agent_name,address") }}
```
| Paramètre | Type | Description |
| - | - | - |
| `object_type` | Chaîne | Le nom du type d'objet. Les noms des types d'objets tiennent compte de la casse. [Les types d'objets pris en charge](/docs/cms/start-building/features/data-driven-content/crm-objects#supported-crm-object-types). Pour trouver les noms des types d'objets spécifiques aux comptes et aux intégrateurs disponibles dans votre compte, utilisez l'[API de schéma d'objets CRM](/docs/cms/start-building/features/data-driven-content/crm-objects#getting-a-custom-object-type-s-details) pour obtenir les définitions des types et rechercher la propriété name. Elle contient le nom du type d'objet interne qui doit être utilisé dans la l'intégrateur functionFor pour les types d'objets spécifiques à l'intégrateur et au compte ayant le même nom que les objets intégrés, utilisez les objets [nom entièrement qualifié](/docs/cms/start-building/features/data-driven-content/crm-objects#getting-a-custom-object-type-s-details) (FQN). |
| `property_name` | Chaîne | Facultative. Les noms de propriétés séparés par des virgules, sans tenir compte de la casse, pour lesquels il faut récupérer la définition. S'il est vide, les définitions de toutes les propriétés seront récupérées. |
## cta
Étant donné que les modules CTA possèdent de nombreux paramètres qui contiennent des variations de leur code, vous pouvez utiliser la fonction CTA pour générer facilement un CTA particulier dans un modèle, une page ou un e-mail. Cette fonction est celle que l'éditeur de texte enrichi utilise lorsque vous ajoutez un CTA via l'éditeur.
> [!WARNING]
>
> **Remarque :** cette fonction est limitée à 10 appels par page.
```text hubl.txt theme={null}
{{ cta("ccd39b7c-ae18-4c4e-98ee-547069bfbc5b") }}
{{ cta("ccd39b7c-ae18-4c4e-98ee-547069bfbc5b", "justifycenter") }}
```
```html example.html theme={null}
Start a HubSpot trial
Start a HubSpot trial
```
| Paramètre | Type | Description |
| - | - | - |
| `guid` | Chaîne | L'ID du CTA à rendre. Se trouve dans l'URL de l'écran de détails du CTA. |
| `align_opt` | Énumération | Ajuste l'alignement du CTA. Les valeurs comprennent : `justifyleft`, `justifycenter`, `justifyright`, `justifyfull`. |
## extend
Étend une liste en ajoutant tous les éléments d'une table itérative. En d'autres termes, insérer tous les éléments d'une liste dans une autre liste.
```text hubl.txt theme={null}
{% set vehicles = ["boat","car","bicycle"] %}
{% set more_vehicles = ["airplane","motorcycle"] %}
{% do vehicles.extend(more_vehicles) %}
{{vehicles}}
```
```text sortie rendue.txt theme={null}
[boat, car, bicycle, airplane, motorcycle]
```
## file\_by\_id
Cette fonction renvoie les métadonnées d'un fichier par ID. Elle accepte un seul paramètre, l'ID numérique du fichier à rechercher. Pour récupérer plusieurs fichiers à la fois, utilisez plutôt la fonction [files\_by\_ids](#files_by_ids).
> [!WARNING]
>
> **Remarque :** cette fonction est limitée à 10 appels par page.
```text hubl.txt theme={null}
{% set file = file_by_id(123) %}
{{ file.friendlyUrl }}
```
```text sortie rendue.txt theme={null}
https://www.hubspot.com/hubfs/HubSpot_Logos/HSLogo_color.svg
```
| Paramètre | Type | Description |
| - | - | - |
| `file_id` | Nombre | L'ID du fichier à rechercher. |
## files\_by\_ids
Renvoie les métadonnées de plusieurs fichiers par ID. Cela accepte un tableau d'ID de fichiers.
> [!WARNING]
>
> **Remarque :** cette fonction est limitée à 10 appels par page et peut accepter jusqu'à 100 ID de fichier.
```text hubl.txt theme={null}
{% set files = files_by_ids([123,456])%}
{% for file in files %}
URL:{{file.friendlyUrl}}
{% endfor %}
```
```text sortie rendue.txt theme={null}
URL:https://api-na1.hubspot.com/filemanager/api/v2/files/123/example-file-1
URL:https://api-na1.hubspot.com/filemanager/api/v2/files/456/example-file-2
```
| Paramètre | Type | Description |
| - | - | - |
| `file_id` | Nombre | Les ID des fichiers à rechercher, séparés par des virgules (jusqu'à 100). |
Par exemple, vous pouvez utiliser cette fonction pour parcourir les fichiers téléchargés d'une fiche d'informations d'un contact. Pour parcourir les résultats, vous devrez utiliser le [filtre HubL divisé](/docs/cms/reference/hubl/filters#split), car la propriété CRM sera renvoyée sous la forme d'une chaîne séparée par un point-virgule.
```hubl theme={null}
{% set objects = crm_objects("contact", "email=bh@hubspot.com", "file").results %}
{% for item in objects %}
{% set fileIDs = item.file|split(";") %}
{% set files = files_by_ids(fileIDs) %}
{% for file in files %}
{% endfor %}
{% endfor %}
```
## flag\_content\_for\_access\_check
Lorsqu'un article de blog est [configuré pour l'accès à l'auto-inscription](https://knowledge.hubspot.com/fr/blog/use-self-registration-for-private-blog-content), les visiteurs devront s'inscrire ou se connecter pour afficher le contenu complet de l'article. Les ressources de listing de blog par défaut de HubSpot incluent automatiquement cette fonctionnalité, et incluront également un indicateur d'icône de cadenas pour les articles qui nécessitent une auto-inscription pour y accéder. En savoir plus sur la [création de solutions personnalisées à l'aide de cette fonction et de son API correspondante](/docs/cms/start-building/features/memberships/overview#private-blog-posts-with-self-registration).
Cette fonction vérifie si un article de blog est accessible au visiteur actuel. Lorsqu'elle est appelée, la fonction est remplacée par l'attribut suivant :
`hs-member-content-access=`
A value of `true` indicates that the blog post requires the visitor to log in to view the full content.
```text hubl.txt theme={null}
{% for content in contents %}
...
{% endfor %}
```
```text sortie rendue.txt theme={null}
...
```
| Paramètre | Type | Description |
| - | - | - |
| `ID` | ID | L'ID du contenu qui sera vérifié par rapport au visiteur actuellement connecté. |
## follow\_me\_links
Renvoie les [liens de compte de réseau social définis dans les paramètres du compte](https://knowledge.hubspot.com/fr/design-manager/use-default-modules-in-your-template#add-social-accounts-to-the-follow-me-module). Utilisé dans le [module follow\_me par défaut](/docs/cms/reference/modules/default-modules#follow-me).
```text hubl.txt theme={null}
{% set fm = follow_me_links() %}
{{ fm }}
```
```text sortie rendue.txt theme={null}
[FollowMeLink{type=URL, id=5142734, altName=RSS,
followMeUrl=http://website.com/rss.xml, iconName=rss,
name=http://website.com/rss.xml}]
```
## format\_address
Formate une adresse en fonction des paramètres régionaux du contexte.
```text hubl.txt theme={null}
{{ format_address('en-us', { address: "25 First Street", address2: "2nd Floor", city: "Cambridge", state: "MA", country: "United States", zip: "02141"}) }}
```
```text sortie rendue.txt theme={null}
[25 First Street, 2nd Floor, Cambridge, MA 02141, United States]
```
| Paramètre | Type | Description |
| - | - | - |
| `locale` | Chaîne | Les paramètres régionaux selon lesquels formater l'adresse. |
| `address` | Chaîne | L'adresse postale. |
| `address2` | Chaîne | La deuxième ligne de l'adresse, comme le numéro d'étage ou d'appartement. |
| `city` | Chaîne | La ville de l'adresse. |
| `state` | Chaîne | L'état de l'adresse. |
| `country` | Chaîne | Le pays de l'adresse. |
| `zip` | Chaîne | Le code postal de l'adresse. |
## format\_company\_name
Formate le nom d'une entreprise en ajoutant des titres honorifiques japonais, le cas échéant.
```text hubl.txt theme={null}
{{ format_company_name("companyName", addJapaneseHonorifics) }}
```
```text sortie rendue.txt theme={null}
HubSpot
```
| Paramètre | Type | Description |
| - | - | - |
| `companyName` | Chaîne | Le nom de l'entreprise. |
| `useHonorificIfApplicable` | Booléen | Lorsque cet élément est défini sur `true` et que la langue du contexte est le japonais, un titre honorifique d'entreprise japonais sera ajouté, le cas échéant. |
## format\_name
Formate le nom d'une personne en plaçant le nom de famille avant le prénom et ajoute des titres honorifiques japonais, le cas échéant.
```text hubl.txt theme={null}
{{ format_name("firstName", "surname", addJapaneseHonorifics) }}
```
```text sortie rendue.txt theme={null}
Hobbes Baron
```
| Paramètre | Type | Description | Par défaut |
| - | - | - | - |
| `firstName` | Obligatoire | Le prénom de la personne. | |
| `surname` | Chaîne | Le nom ou prénom de la personne. | `False` |
| `useHonorificIfApplicable` | Booléen | Lorsque cet élément est défini sur `true` et que la langue du contexte est le japonais, un titre honorifique japonais sera ajouté, le cas échéant. | |
## format\_datetime
Formate les composants de date et d'heure d'un objet de date, comme pour le filtre HubL [format\_datetime](/docs/cms/reference/hubl/filters#format_datetime). Cette fonction remplace la fonction obsolète `datetimeformat`.
```text hubl.txt theme={null}
{{ format_datetime(content.publish_date, "short", "America/New_York", "en") }}
```
```text sortie rendue.txt theme={null}
12/31/69 7:00 PM
```
| Paramètre | Type | Description |
| - | - | - |
| `format` | Chaîne | Le format à utiliser. Peut être l'un des éléments suivants :
`short`
`medium`
`long`
`full`
un modèle personnalisé reposant sur [Unicode LDML](https://unicode.org/reports/tr35/tr35-dates.html#Date_Format_Patterns)
|
| `timeZone` | Chaîne | Le fuseau horaire de la date de sortie au format [IANA TZDB](https://data.iana.org/time-zones/tzdb/). |
| `locale` | Chaîne | Les paramètres régionaux à utiliser pour les formats reposant sur des paramètres régionaux. |
## geo\_distance
Cette fonction contient 4 paramètres et calcule la distance ellipsoïdale 2D entre deux points sur la Terre. Utilisez cette fonction comme une requête de filtre pour obtenir des données HubDB.
```html example.html theme={null}
{% for row in hubdb_table_rows(1234567, "geo_distance(loc,1.233,-5.678,mi)__gt=500") %}
{{row.name}}
{% endfor %}
```
```html example.html theme={null}
Cambridge, MA
Salem, MA
San Diego, CA
Chicago, IL
```
| Paramètre | Type | Description |
| - | - | - |
| `point1` | Emplacement | Emplacement à partir d'une colonne HubDB. |
| `point2_lat` | Latitude | Latitude du point2. |
| `point2_long` | Longitude | Longitude du point2. |
| `units` | Chaîne | Unités pour la valeur de renvoi. Les options sont `FT` pour pieds, `MI` pour miles, `M` pour mètres ou `KM` pour kilomètres. |
## get\_asset\_url
Cette fonction renvoie l'URL publique d'un modèle ou d'un fichier de code indiqué. Le paramètre de cette fonction est le chemin d'accès de la ressource dans le gestionnaire de conception. Les URL des fichiers codés sont mises à jour à chaque fois que vous les publiez ; par conséquent, en utilisant cette fonction, vous vous assurez de toujours utiliser la dernière version du fichier.
Vous pouvez générer automatiquement cette fonction dans l'application, soit en faisant un clic droit sur un **fichier** et en sélectionnant **Copier l'URL publique**, soit en cliquant sur **Actions**, puis en sélectionnant **Copier l'URL publique**.
L'exemple ci-dessous permet d'obtenir l'URL d'un fichier JavaScript créé dans le gestionnaire de conception qui peut être inclus comme `src` d'une balise `
```
## resize\_image\_url
Réécrit l'URL de l'image stockée dans le Gestionnaire de fichiers en une URL qui redimensionnera l'image sur demande. La fonction accepte un paramètre obligatoire et cinq paramètres facultatifs. Au moins un paramètre facultatif doit être transmis.
Obligatoire
* **URL :** chaîne, URL d'une image hébergée par HubSpot.
Facultatif
* **width :** nombre, la nouvelle largeur de l'image en pixels.
* **height :** nombre, la nouvelle hauteur de l'image en pixels.
* **length :** nombre, la nouvelle longueur du plus grand côté, en pixels.
* **upscale :** booléen, utilise les dimensions de l'image redimensionnée même si elles augmentent l'échelle de l'image originale (les images peuvent apparaître floues).
* **upsize :** booléen, renvoie l'image redimensionnée même si elle est plus grande que l'originale en octets.
> [!WARNING]
>
> **Remarque :** les images supérieures à 4 096 pixels en hauteur ou en largeur ne seront pas automatiquement redimensionnées. Au lieu de cela, vous devrez [redimensionner manuellement l'image](https://knowledge.hubspot.com/fr/files/automatic-image-resizing-on-hubspot-content).
```text hubl.txt theme={null}
{{ resize_image_url("http://your.hubspot.site/hubfs/img.jpg", 0, 0, 300) }}
```
```text sortie rendue.txt theme={null}
http://your.hubspot.site/hubfs/img.jpg?length=300&name=img.jpg
```
| Paramètre | Type | Description |
| - | - | - |
| `url` | Chaîne | URL d'une image hébergée par HubSpot. |
| `width` | Entier (px) | La nouvelle largeur de l'image, en pixels. |
| `height` | Entier (px) | La nouvelle hauteur de l'image, en pixels. |
| `length` | Entier (px) | La nouvelle longueur du plus grand côté, en pixels. |
| `upscale` | Booléen | Utilise les dimensions de l'image redimensionnée même si elles augmentent l'échelle de l'image originale (les images peuvent apparaître floues). La valeur par défaut est `false`. |
| `upsize` | Booléen | Renvoie l'image redimensionnée même si elle est plus grande que l'originale en octets.La valeur par défaut est `false`. |
## reverse
Inverse le classement des éléments d'une liste. Il ne prend pas de paramètres. Pour inverser un objet ou renvoyer un itérateur pour parcourir la liste en sens inverse, utilisez [`|reverse`](/docs/cms/reference/hubl/filters#reverse)
```text hubl.txt theme={null}
{% set numbers = [1,2,3,4] %}
{% do numbers.reverse() %}
{{numbers}}
```
```text sortie rendue.txt theme={null}
[4, 3, 2, 1]
```
## set\_response\_code
Définir le code de réponse comme le code indiqué. [404](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/404) est le seul code pris en charge pour le moment. Si vous l'utilisez, votre page renverra une erreur `404`.
```text hubl.txt theme={null}
{{ set_response_code(404) }}
```
```text sortie rendue.txt theme={null}
```
| Paramètre | Type | Description |
| - | - | - |
| `code` | Entier | Le code de réponse HTTP. Actuellement, `404` est le seul code pris en charge. |
## super
Cette fonction imprime le contenu du modèle parent dans un modèle enfant en utilisant la balise [extends](/docs/cms/reference/hubl/overview#blocks-and-extends).
Par exemple, dans le code ci-dessous, un modèle HTML de base a été créé avec un bloc HubL nommé `sidebar` et enregistré sous `parent.html`. Un deuxième fichier de modèle est créé et va étendre ce fichier parent. Normalement, le `
` serait imprimé dans le bloc de la barre latérale du HTML parent. Mais en utilisant `super`, le contenu du bloc de la barre latérale du modèle parent est combiné avec le contenu du modèle enfant.
```html example.html theme={null}
{% extends "custom/page/web_page_basic/parent.html" %}
{% block sidebar %}
Table Of Contents
{{ super() }}
{% endblock %}
```
```html example.html theme={null}
This is the parent template
Table of contents
Sidebar content from parent.
```
## today
Renvoie le début de la journée (12h00). Vous pouvez éventuellement ajouter un paramètre pour modifier le fuseau horaire par rapport à l'UTC par défaut.
```text hubl.txt theme={null}
{{ today() }}
{{ today("America/New_York") }}
{{ unixtimestamp(today("America/New_York").plusDays(1)) }}
```
```text sortie rendue.txt theme={null}
2018-10-23T00:00Z 2018-10-23T00:00-04:00[America/New_York] 1540353600000
```
## to\_local\_time
Convertit un horodatage UNIX en heure locale, en fonction des paramètres de votre rapport HubSpot. Vous pouvez ensuite appliquer un filtre datetimeformat pour formater la date.
```text hubl.txt theme={null}
{{ to_local_time(eastern_dt) }}
```
```text sortie rendue.txt theme={null}
2015-05-13 10:37:31
```
| Paramètre | Type | Description |
| - | - | - |
| `date` | Horodatage | UNIX à convertir en heure locale. |
## topic\_cluster\_by\_content\_id
Renvoie un dictionnaire HubL représentant le groupe thématique associé à un élément de contenu (déterminé par l'id de contenu transmis), y compris les métadonnées sur la page pilier associée, le thème principal et les sous-thèmes. Peut être utilisé pour établir un "auto-link" entre un élément de contenu et la page pilier qui lui est associée \[si elle existe].
Les métadonnées disponibles se trouvent dans : attachableContent (les métadonnées du contenu actuel), topic (les métadonnées du thème associé du contenu actuel), coreTopic (les métadonnées du thème principal du groupe associé), et pillarPage (les métadonnées de la page pilier associées).
Utilisez `{{ topicCluster|pprint }}` pour obtenir un affichage complet des propriétés/attributs disponibles.
```html example.html theme={null}
{{ topic_cluster_by_content_id(content.id) }}
{%- if content.id -%}
{%- set topicCluster = topic_cluster_by_content_id(content.id) -%}
{%- if topicCluster.pillarPage.url.value and topicCluster.pillarPage.publishState == "PUBLISHED" -%}
```
> [!WARNING]
>
> **Remarque :** cette fonction est limitée à 10 appels par page.
| Paramètre | Type | Description |
| - | - | - |
| `content_id` | ID | L'id de la page à rechercher. |
## truncate
La fonction truncate s'utilise de la même manière que le [filtre truncate](/docs/cms/reference/hubl/filters#truncate), mais utilise la syntaxe de la fonction au lieu de celle du filtre. Le premier paramètre indique la chaîne. Le deuxième paramètre indique la longueur à laquelle il faut tronquer. Le dernier paramètre indique les caractères à ajouter lorsque la troncature se produit.
> [!WARNING]
>
> **Remarque :** comme cette fonction s'appuie sur les espaces entre les mots pour raccourcir les chaînes, il se peut qu'elle ne fonctionne pas comme prévu pour les langues sans espace entre caractères, comme le japonais.
```text hubl.txt theme={null}
{{ truncate("string to truncate at a certain length", 19, false, "...") }}
{% set longString = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sodales ultricies velit sit amet ornare." %}
{{ truncate(longString, 40, false, "...") }}
```
```text sortie rendue.txt theme={null}
string to truncate ... Lorem ipsum dolor sit amet, consectetur ...
```
| Paramètre | Type | Description |
| - | - | - |
| `string_to_truncate` | Chaîne | Chaîne qui sera tronquée. |
| `length` | Entier | indique la longueur à laquelle le texte doit être tronqué (y compris les caractères HTML). |
| `killwords` | Booléen | Si elle est vraie, la chaîne coupera le texte en longueur, même si c'est au milieu d'un mot. |
| `end` | Chaîne | Les caractères qui seront ajoutés pour indiquer où le texte a été tronqué. |
## type
Cette fonction accepte un argument et renvoie le type d'un objet. La valeur de renvoie peut être : `"bool"`, `"datetime"`, `"dict"`, `"float"`, `"int"`, `"list"`, `"long"`, `"null"`, `"str"` ou `"tuple"`.
```text hubl.txt theme={null}
{{ type("Blog") }}
{% set my_type = type("Blog") %}
{{my_type}}
```
```text sortie rendue.txt theme={null}
str
```
## unixtimestamp
Cette fonction renvoie un horodatage unix lorsque vous fournissez un objet datetime.
```text hubl.txt theme={null}
{{ unixtimestamp(d) }}
```
```text sortie rendue.txt theme={null}
1565983117868
```
## update
Met à jour le dictionnaire avec les éléments d'un autre objet dictionnaire ou d'une table itérative de paires clé/valeur. Utilisez cette fonction pour combiner ou fusionner des objets.
```text hubl.txt theme={null}
{% set dict_var = {"authorName": "Douglas Judy", "authorTitle": "Mastermind" } %}
{% do dict_var.update({"authorFriend": "Jake"}) %}
{% do dict_var.update({"authorLocation": "unknown"}) %}
{{ dict_var }}
```
```text sortie rendue.txt theme={null}
{authorName=Douglas Judy, authorTitle=Mastermind, authorFriend=Jake,
authorLocation=unknown}
```
# Fonctions SI
Source: https://developers.hubspot.fr/docs/cms/reference/hubl/if-statements
Profitez d'un guide pratique des fonctions if HubL de HubSpot pour les développeurs CMS.
Vous pouvez inclure une logique conditionnelle dans vos modules et modèles en utilisant les [fonctions if](#basic-if-statement-syntax) et [unless](#unless-statements) de HubL. Les fonctions if contiennent souvent des [opérateurs pris en charge](/docs/cms/reference/hubl/operators-and-expression-tests) par HubL et peuvent être utilisées pour exécuter des [tests d'expression](/docs/cms/reference/hubl/operators-and-expression-tests#expression-tests).
> [!WARNING]
>
> ### Remarque:
>
> Si vous utilisez des [jetons de personnalisation](/docs/cms/reference/hubl/functions#personalization-token) dans une fonction conditionnelle de votre module d'e-mail, vous devez [activer les e-mails programmables pour ce module](/docs/cms/start-building/features/data-driven-content/emails-with-programmable-content).
>
> Les informations transmises via les API d'envoi unique ([v3](/docs/api-reference/marketing-marketing-emails-v3/guide) et [v4](/docs/api-reference/marketing-single-send-v4/guide)) ne fonctionneront pas dans les fonctions `if`, car les modèles sont compilés avant que les informations ne soient renseignées.
## Syntaxe de base des fonctions if
HubL utilise des fonctions if pour définir la logique d'un modèle. La syntaxe des fonctions if de HubL est très similaire à celle de la logique conditionnelle dans Python. Les fonctions `if` sont encadrées par des [délimiteurs de fonction](/docs/cms/reference/hubl/variables-macros-syntax), commençant par une fonction `if` d'ouverture et se terminant par une fonction `endif`.
L'exemple ci-dessous fournit la syntaxe de base d'une fonction if, où la condition est remplacée par la règle booléenne que vous allez évaluer comme étant vraie ou fausse.
```hubl theme={null}
{% if condition %}
If the condition is true print this to template.
{% endif %}
```
Maintenant que vous avez vu la syntaxe de base, penchons-nous sur quelques exemples concrets de fonctions if de base. Les exemples suivants présentent des fonctions if qui déterminent si un module HubL portant le nom `my_module` et si une variable nommée `my_module` sont présents ou non dans un modèle. Notez que sans aucun opérateur, la fonction if détermine si le module est défini ou non dans le contexte du modèle.
```hubl theme={null}
{% module "my_module" path="@hubspot/rich_text", label="My rich text module", html="Default module text" export_to_template_context=true %}
{% if widget_data.my_module %}
A module named "my_module" is defined in this template.
{% endif %}
{% set my_variable = "A string value for my variable" %}
{% if my_variable %}
The variable named my_variable is defined in this template.
{% endif %}
```
Notez que lors de l'évaluation du module HubL, le nom du module est laissé entre guillemets dans la fonction `if` et que lors du test de la variable, aucun guillemet n'est utilisé autour du nom de la variable. Dans les deux exemples ci-dessus, le module et la variable existent dans le modèle, de sorte que les fonctions sont évaluées pour imprimer le balisage. Notez que ces exemples testent uniquement si le module et la variable sont définis, et non s'ils ont une valeur ou non.
Examinons maintenant une fonction `if` qui évalue si un module a une valeur, au lieu d'évaluer s'il existe dans le modèle. Pour ce faire, nous devons utiliser le paramètre [export\_to\_template\_context](/docs/cms/reference/modules/export-to-template-context). Dans l'exemple ci-dessous, si l'élément de texte a une valeur dans l'éditeur de contenu, le balisage s'imprimera. Si le champ de texte du module était vide, aucun balisage ne serait restitué. Si vous travaillez dans des modules personnalisés, il existe une syntaxe simplifiée de `widget.widget_name` décrite dans l'[exemple ici](/docs/cms/reference/modules/configuration).
```text input.txt theme={null}
{% module "product_names" path="@hubspot/text", label="Enter the product names that you would like to render the coupon ad for", value="all of our products", export_to_template_context=True %}
{% if widget_data.product_names.value %}
For a limited time, get 50% off {{ widget_data.product_names.value}}!
{% endif %}
```
```text output.txt theme={null}
For a limited time get 50% off all of our products!
```
## Utilisation de elif et else
Les fonctions `if` peuvent être restituées de manière plus sophistiquée avec des fonctions conditionnelles supplémentaires ou avec une règle qui s'exécute lorsque la ou les conditions sont fausses. Les fonctions `elif` vous permettent d'ajouter des conditions supplémentaires à votre logique, qui seront évaluées après la condition précédente. Les fonctions **`else`** définissent une règle qui s'exécute lorsque toutes les autres conditions sont fausses. Vous pouvez avoir un nombre illimité de fonctions `elif` dans une seule fonction if, mais une seule fonction `else`.
Voici l'exemple de syntaxe de base d'une fonction if qui utilise l'[opérateur `<=`](/docs/cms/reference/hubl/operators-and-expression-tests#comparison) pour vérifier la valeur d'une variable. Dans cet exemple, le modèle imprime : « Le nombre de la variable nommée est inférieur ou égal à 6. »
```hubl theme={null}
{% set number = 5 %}
{% if number <= 2 %}
Variable named number is less than or equal to 2.
{% elif number <= 4 %}
Variable named number is less than or equal to 4.
{% elif number <= 6 %}
Variable named number is less than or equal to 6.
{% else %}
Variable named number is greater than 6.
{% endif %}
```
Voici un autre exemple qui utilise un module de choix pour rendre différents titres pour une page de carrières, en fonction du département choisi par l'utilisateur. L'exemple utilise l'[opérateur ==](/docs/cms/reference/hubl/operators-and-expression-tests#comparison), pour vérifier certaines valeurs prédéfinies dans le module de choix.
```hubl theme={null}
{% choice "department" label="Choose department", value="Marketing", choices="Marketing, Sales, Dev, Services" export_to_template_context=True %}
{% if widget_data.department.value == "Marketing" %}
Want to join our amazing Marketing team?!
We have exciting career opportunities on the {{ widget_data.department.value }} team.
We have exciting career opportunities on the {{ widget_data.department.value }} team.
{% elif widget_data.department.value == "Dev" %}
Do you love to ship code?
We have exciting career opportunities on the {{ widget_data.department.value }} team.
{% else %}
Want to work with our awesome customers?
We have exciting career opportunities on the {{ widget_data.department.value }} team.
{% endif %}
```
## Fonctions unless
Les fonctions `unless` sont des conditionnelles comme les fonctions `if`, mais elles fonctionnent selon la logique inverse. Elles restitueront et compileront le code entre les balises d'ouverture et de fermeture, sauf si la condition booléenne unique est vraie. Les fonctions commencent par **`unless`** et se terminent par **`endunless`. Les fonctions** `unless` prennent en charge les fonctions `else`, mais pas les fonctions `elif`.
Voici un exemple qui imprime un en-tête En construction, sauf si le champ de texte enrichi a une valeur. Si le champ de texte enrichi a du contenu, celui-ci s'affichera.
```hubl theme={null}
{% module "my_page_content" path="@hubspot/rich_text", label="Enter your page content", html="" export_to_template_context=true %}
{{ widget_data.my_page_content.html }}
{% unless widget_data.my_page_content.html %}
This page is under construction.
Come back soon!
{% endunless %}
```
## ifchanged
En plus des fonctions if et unless, HubL prend en charge les fonctions `ifchanged`. Ces fonctions peuvent être utilisées pour ne rendre le balisage que lorsqu'une variable a été modifiée depuis une invocation antérieure de cette balise.
## Fonctions if en ligne
HubL prend en charge les fonctions `if` en ligne. Celles-ci peuvent être utilisées pour écrire une logique conditionnelle de manière concise avec des [opérateurs et des tests d'expression](/docs/cms/reference/hubl/operators-and-expression-tests).
```hubl theme={null}
{% set color = "Blue" if is_blue is truthy else "Red" %} // color == "blue"
{{ "Blue" if is_blue is truthy else "Red" }} // "Blue"
{% set dl = true %}
Download PDF
```
## Opérateurs ternaires
Il est également possible d'utiliser des opérateurs ternaires pour écrire rapidement une logique conditionnelle avec des [opérateurs et des tests d'expression](/docs/cms/reference/hubl/operators-and-expression-tests#logical).
```hubl theme={null}
// If the variable is_blue is true, output "blue", otherwise output"red"
{{ is_blue is truthy ? "blue" : "red" }}
// Set the variable is_red to false if is_blue is true, otherwise set to true
{% set is_red = is_blue is truthy ? false : true %}
```
# Legacy quote template variables
Source: https://developers.hubspot.fr/docs/cms/reference/hubl/legacy-quote-variables
# Boucles for
Source: https://developers.hubspot.fr/docs/cms/reference/hubl/loops
Les boucles for peuvent être utilisées dans HubL pour itérer dans des séquences d'objets.
Les boucles for peuvent être utilisées dans HubL pour itérer dans des séquences d'objets. Elles seront le plus souvent utilisées pour rendre le [contenu du blog](/docs/cms/start-building/building-blocks/templates/blog) dans un format de liste, mais elles peuvent également être utilisées pour trier d'autres variables de séquence.
Les boucles for commencent par une fonction `{% for %}` et se terminent par une fonction `{% endfor %}`. Dans la fonction `{% for %}`, un seul élément de séquence est nommé, suivi de `in`, puis du nom de la séquence. Le code entre les fonctions `for` d'ouverture et de fermeture est imprimé à chaque itération, et comprend généralement la variable imprimée de l'élément de séquence individuel. Vous trouverez ci-dessous la syntaxe de base d'une boucle for :
```hubl theme={null}
{% for item in items %}
{{ item }}
{% endfor %}
```
Vous trouverez ci-dessous un exemple de base qui montre comment imprimer une séquence de valeurs de variable dans une liste.
```html example.html theme={null}
{% set languages = ["HTML", "CSS", "Javascript", "Python", "Ruby", "PHP", "Java"] %}
Languages
;
{% for language in languages %}
{{ language }}
{% endfor %}
```
```html example.html theme={null}
Languages
HTML
CSS
Javascript
Python
Ruby
PHP
Java
```
## Propriétés de boucle
Lorsqu'une boucle est itérative, vous pouvez utiliser la [logique conditionnelle](/docs/cms/reference/hubl/if-statements) pour définir son comportement. La propriété de variable `loop.index` tient un compte du nombre actuel d'itérations de la boucle. Il existe plusieurs autres propriétés de variable de boucle qui comptabilisent les itérations de différentes manières. Ces propriétés sont décrites ci-dessous :
| Variable | Description |
| - | - |
| `loop.cycle` | Une fonction d'aide pour faire un cycle entre une liste de séquences. Consultez l'explication ci-dessous. |
| `loop.depth` | Indique à quelle profondeur d'une boucle récursive se trouve actuellement le rendu. Commence au niveau 1. |
| `loop.depth0` | Indique à quelle profondeur d'une boucle récursive se trouve actuellement le rendu. Commence au niveau 0. |
| `loop.first` | Cette variable est définie sur true s'il s'agit de la première itération de la boucle. |
| `loop.index` | L'itération actuelle de la boucle. Cette variable commence la comptabilisation à 1. |
| `loop.index0` | L'itération actuelle de la boucle. Cette variable commence la comptabilisation à 0. |
| `loop.last` | Cette variable est définie sur true s'il s'agit de la dernière itération de la boucle. |
| `loop.length` | Le nombre d'éléments dans la séquence. |
| `loop.revindex` | Le nombre d'itérations à partir de la fin de la boucle. Compte à rebours jusqu'à 1. |
| `loop.revindex0` | Le nombre d'itérations à partir de la fin de la boucle. Compte à rebours jusqu'à 0. |
Vous trouverez ci-dessous quelques exemples qui utilisent différentes variables de boucle. L'exemple de base suivant utilise `loop.index` pour conserver un compte qui est imprimé à chaque itération.
```html example.html theme={null}
{% set loopy = ["Content", "Social", "Contacts", "Reports"] %}
{% for app in loopy %}
{{ loop.index }}. {{app}}
{% endfor %}
```
```html example.html theme={null}
1. Content
2. Social
3. Contacts
4. Reports
```
L'exemple suivant utilise une logique conditionnelle pour vérifier si la longueur de la boucle est `divisible par` certains nombres. La largeur de la division est alors restituée en conséquence. L'exemple utilise la boucle standard des articles de blog et suppose qu'il y a 6 articles dans la boucle.
```html example.html theme={null}
{% for content in contents %}
{% if loop.length is divisibleby 4 %}
```
## Boucles imbriquées
Les boucles peuvent également être imbriquées dans d'autres boucles. La boucle for enfant sera exécutée à chaque itération de la boucle for parent. Dans l'exemple ci-dessous, une liste d'éléments enfants est imprimée dans un élément `
```
## cycle
La balise cycle peut être utilisée dans une boucle for pour parcourir une série de valeurs de chaîne et les imprimer à chaque itération. L'une des applications les plus pratiques de cette technique consiste à appliquer des classes alternées à vos articles de blog dans une liste. Cette balise peut être utilisée sur plus de deux valeurs et répétera le cycle s'il y a plus d'itérations de boucle que de valeurs de cycle. Dans l'exemple ci-dessous, une classe d'éléments `odd` et `even` est appliquée aux articles d'une liste (l'exemple suppose qu'il y a 5 articles dans la boucle).
Veuillez noter qu'il n'y a **pas d'espace** entre les valeurs des chaînes de cycle séparées par des virgules.
```html example.html theme={null}
{% for content in contents %}
```
## Variables dans les boucles
> [!WARNING]
>
> Toutes les variables définies dans les boucles sont limitées à la portée de cette boucle et ne peuvent pas être exécutées depuis l'extérieur de la boucle.
Vous pouvez exécuter des variables définies en dehors d'une boucle, à partir d'une boucle, mais pas l'inverse.
## Paires (clé, valeur) dans les boucles
Si le dictionnaire d'informations que vous parcourez en boucle comporte des paires (clé, valeur), une simple boucle for n'aurait accès qu'aux valeurs. Si vous souhaitez avoir accès à la fois aux clés et aux valeurs dans la boucle for, le HubL sera formaté comme suit :
```text entrée.txt theme={null}
{% set dict_var = {"name": "Cool Product", "price": "$20", "size":"XL"} %}
{% for key, val in dict_var.items() %}
{{ key }}: {{ val }}
{% endfor %}
```
```text sortie.txt theme={null}
name: Cool Product
price: $20
size: XL
```
## Itérer un nombre défini de fois
Parfois, vous souhaitez itérer un nombre défini de fois, ce qui peut être utile pour générer du HTML ou des CSS. Pour ce faire, vous pouvez utiliser la fonction de plage.
```html example.html theme={null}
{% for x in range(0,5) %}
{{loop.index}}
{% endfor %}
```
```text sortie rendue.txt theme={null}
1 2 3 4 5
```
## Utilisation des balises HubL dans des boucles
Lorsque vous ajoutez une balise à une page, HubSpot attribue automatiquement un `id` au HTML d'encadrement. Cette balise est unique par nom de balise. Si vous devez utiliser une balise dans une boucle for, la définition de noms uniques n'est pas pratique. Ajoutez le paramètre `unique_in_loop` à votre balise pour générer des identifiants uniques. Ce paramètre ajoute le nom du module au numéro d'itération de la boucle en cours, ce qui garantit qu'il est unique. Les identifiants uniques ne sont pas seulement nécessaires à la validité du code HTML. Ils sont également importants pour l'[accessibilité](/docs/cms/best-practices/improve-existing-sites/accessibility).
```hubl theme={null}
{% for item in module.icon_field %}
{% icon
name="{{ item.name }}",
style="{{ item.type }}",
unicode="{{ item.unicode }}",
unique_in_loop=True
%}
{% endfor %}
```
# Opérateurs et tests d'expression
Source: https://developers.hubspot.fr/docs/cms/reference/hubl/operators-and-expression-tests
Afin d'étendre la logique et la fonctionnalité de vos modèles, HubL prend en charge plusieurs opérateurs et tests d'expression clés. Les opérateurs vous permettent d'exécuter des fonctions mathématiques, d'effectuer des comparaisons, de compliquer la logique des modèles et de modifier la restitution du balisage. En outre, cet article contient une liste complète des tests d'expression qui peuvent être utilisés dans HubL.
Afin d'étendre la logique et la fonctionnalité de vos modèles, HubL prend en charge plusieurs opérateurs et tests d'expression clés. Les [opérateurs](/docs/cms/reference/hubl/operators-and-expression-tests#operators) vous permettent d'exécuter des fonctions mathématiques, d'effectuer des comparaisons, de compliquer la logique des modèles et de modifier la restitution du balisage. En outre, cet article contient une liste complète des [tests d'expression](/docs/cms/reference/hubl/operators-and-expression-tests#expression-tests) qui peuvent être utilisés dans HubL.
## Opérateurs
Les opérateurs sont des symboles qui indiquent au compilateur HubL d'exécuter diverses opérations qui aboutissent à la sortie finale. Les opérateurs sont placés entre opérandes afin de relier les deux valeurs, que ce soit pour exécuter des fonctions mathématiques, effectuer des comparaisons ou implémenter des expressions booléennes.

Vous trouverez ci-dessous les opérateurs que vous pouvez utiliser dans HubL, organisés par type.
### Mathématiques
Les opérateurs mathématiques standard peuvent être utilisés pour calculer des valeurs dans le contexte d'un modèle.
```hubl theme={null}
{% set my_num = 11 %}
{% set my_number = 2 %}
{{ my_num + my_number }}
{{ my_num - my_number }}
{{ my_num / my_number }}
{{ my_num % my_number }}
{{ my_num // my_number }}
{{ my_num * my_number }}
{{ my_num ** my_number }}
```
| Symbole | Description |
| - | - |
| `+` | Ajoute deux objets, généralement des valeurs numériques. Pour concaténer des chaînes ou des listes, vous devez utiliser l'[opérateur`~`](#other-hubl-operators) à la place. |
| `-` | Soustrait un nombre d'un autre. |
| `/` | Divise des nombres. |
| `%` | Renvoie le reste de la division de nombres. |
| `//` | Divise deux nombres et renvoie le résultat entier tronqué. Par exemple, `{{ 20 // 7 }}` ou `2`. |
| `*` | Multiplie des nombres. |
| `**` | Élève l'opérande gauche à la puissance de l'opérande droit |
### Comparaison
Les opérateurs de comparaison peuvent être utilisés pour évaluer les valeurs pour la logique de modèle. Vous pouvez consulter quelques exemples d'utilisation d'opérateurs de comparaison dans les [fonctions if](/docs/cms/reference/hubl/if-statements).
```hubl theme={null}
{% set my_num = 11 %}
{% set my_number = 2 %}
{{ my_num == my_number }}
{{ my_num != my_number }}
{{ my_num > my_number }}
{{ my_num >= my_number }}
{{ my_num < my_number }}
{{ my_num <= my_number }}
```
| Symbole | sténographie | Description |
| - | - | - |
| `==` | eq | Égal à. Est défini sur true si les deux objets ont des valeurs égales. |
| `!=` | ne | N'est pas égal à. Est défini sur true si les deux objets ne sont pas égaux. |
| `>` | gt | Est supérieur à. Est défini sur true si la valeur de l'opérande gauche est supérieure à l'opérande droit. |
| `>=` | gte | Est supérieur ou égal à. Est défini sur true si l'opérande gauche est supérieur ou égal à l'opérande droit. |
| `<` | lt | Inférieur à. Est défini sur true si l'opérande gauche est inférieur à l'opérande droit. |
| `<=` | lte | Est inférieur ou égal à. Est défini sur true si l'opérande gauche est inférieur ou égal à l'opérande droit. |
> [!TIP]
>
> La version abrégée des opérateurs de comparaison est utilisable dans les filtres HubL qui impliquent de tester une expression comme [`|selectattr()`](/docs/cms/reference/hubl/filters#selectattr).
### Logique
Les opérateurs logiques vous permettent d'implémenter des expressions booléennes ainsi que de combiner plusieurs expressions en instructions conditionnelles uniques.
```text and.txt theme={null}
Two non-empty strings:
{{ "a" and "b" }}
Empty string and non-empty string:
{{ "" and "b" }}
Two non-zero numbers:
{{ 1 and 2 }}
Zero and non-zero number:
{{ 0 and 1 }}
Two non-empty lists:
{{ [1] and [2] }}
Empty list and non-empty list:
{{ [] and [2] }}
Two non-empty dicts:
{{ {a: 1} and {b: 2} }}
Empty dict and non-empty dict:
{{ {} and {b: 2} }}
```
```text or.txt theme={null}
Two non-empty strings:
{{ "a" or "b" }}
Empty string and non-empty string:
{{ "" or "b" }}
Two non-zero numbers:
{{ 1 or 2 }}
Zero and non-zero number:
{{ 0 or 1 }}
Two non-empty lists:
{{ [1] or [2] }}
Empty list and non-empty list:
{{ [] or [2] }}
Two non-empty dicts:
{{ {a: 1} or {b: 2} }}
Empty dict and non-empty dict:
{{ {} or {b: 2} }}
```
```text is / is not.txt theme={null}
Conditional using `is` operator:
{% set string = "strings are a cat's best friend" %}
{% if string is string_containing "cat" %}
Meow
{% else %}
Woof
{% endif %}
Conditional using `not` operator:
{% set string = "strings are a cat's best friend" %}
{% if string is not string_containing "cat" %}
Meow
{% else %}
Woof
{% endif %}
```
```text (expr).txt theme={null}
{% set my_num = 10 %}
{% set my_variable = 5 %}
{{ (my_num + 2) * my_variable }}
```
```text ?.txt theme={null}
{% set date = local_dt %}
{{ date ? date : 'No date'}}
{{ todays_date ? todays_date : 'No date'}}
```
| Symbole | Description |
| - | - |
| `and` | Renvoie `true` si l'opérande gauche et l'opérande droit sont exacts. Dans le cas contraire, renvoie `false`. Cet opérateur ne se comporte pas comme l'opérateur `and` en Python ou l'opérateur `&&` en JavaScript. Découvrez-en davantage sur l'utilisation des opérateurs `and` ci-dessous. |
| `or` | Renvoie le premier opérande s'il est exact. Sinon, renvoie le deuxième opérande. Cet opérateur est équivalent à `or` en Python et JavaScript`\|\|` Découvrez-en davantage sur l'utilisation des opérateurs `or` ci-dessous. |
| `is` | Associe deux opérandes pour un énoncé affirmatif. |
| `not` | Invalide une instruction conditionnelle, en conjonction avec `is`. |
| `(expr)` | Regroupe une expression conditionnelle pour l'ordre des opérations. Par exemple : `(10 - 2) * variable`. |
| `?` | L'[opérateur ternaire](/docs/cms/reference/hubl/if-statements) peut être utilisé pour écrire rapidement une logique conditionnelle. Il accepte 3 arguments (expression, condition true, condition false). Il évalue une expression et renvoie la condition correspondante. |
**Utilisation des opérateurs et/ou**
Dans HubL, l'opérateur `or` se comporte comme l'opérateur `or` en Python et l'opérateur `||` en JavaScript. Il renverra le premier opérande si l'expression conditionnelle est définie comme true, sinon il renverra le deuxième opérande. Un cas d'utilisation courant de l'opérateur `or` consiste à définir une valeur de secours lorsqu'une valeur de variable n'est pas définie.
```hubl theme={null}
Two non-empty strings:
{{ "a" or "b" }}
Empty string and non-empty string:
{{ "" or "b" }}
Defining a fallback value:
{{ some_variable or "default value" }}
```
Cependant, l'opérateur `and` se comporte différemment de l'opérateur `and` en Python et de l'opérateur `&&` en JavaScript. Dans HubL, `and` renvoie toujours une valeur booléenne : lorsque l'expression est évaluée comme true, `true` est renvoyée, sinon elle renvoie `false`. Les opérateurs Python et JavaScript, quant à eux, renverront une valeur d'opérande selon que l'instruction est définie sur true ou false.
```hubl theme={null}
Two non-empty strings:
{{ "a" and "b" }}
Empty string and non-empty string:
{{ "" and "b" }}
```
Dans HubL, les listes vides (`[]`) et les dictionnaires vides (`{}`) sont considérés comme faux. C'est équivalent au comportement de Python, mais différent de JavaScript, où `[]` et `{}` sont exacts.
```hubl theme={null}
Empty list and non-empty list:
{{ [] or [2] }}
Empty dict and non-empty dict:
{{ {} and {b: 2} }}
```
### Autres opérateurs HubL
Vous trouverez ci-dessous d'autres opérateurs HubL importants qui peuvent être utilisés pour effectuer diverses tâches.
| Symbole | Description |
| - | - |
| `in` | Vérifie si une valeur se trouve dans une séquence. |
| `is` | Effectue un [test d'expression](/docs/cms/reference/hubl/operators-and-expression-tests#expression-tests). |
| `\|` | Applique un filtre. |
| `~` | Concatène les valeurs. |
## Tests d'expression
Les tests d'expression sont diverses conditions booléennes qui peuvent être évaluées à l'aide d'opérateurs logiques.
### boolean
Vérifie si l'objet est booléen (au sens strict, pas dans sa capacité d'évaluation pour une expression véridique).
```text hubl.txt theme={null}
{% set isActive = false %}
{% if isActive is boolean %}
isActive is a boolean
{% endif %}
```
```text sortie rendue.txt theme={null}
isActive is a boolean
```
### containing
Vérifie si une variable de liste contient une valeur.
```text hubl.txt theme={null}
{% set numbers = [1, 2, 3] %}
{% if numbers is containing 2 %}
Set contains 2!
{% endif %}
```
```text sortie rendue.txt theme={null}
Set contains 2!
```
### containingall
Vérifie si une variable de liste contient toutes les valeurs d'une autre liste.
```text hubl.txt theme={null}
{% set numbers = [1, 2, 3] %}
{% if numbers is containingall [2, 3] %}
Set contains 2 and 3!
{% endif %}
{% if numbers is containingall [2, 4] %}
Set contains 2 and 4!
{% endif %}
```
```text sortie rendue.txt theme={null}
Set contains 2 and 3!
```
### defined
Vérifie si une variable est définie dans le contexte du modèle. Bien que vous puissiez utiliser ce test d'expression, l'écriture d'une fonction if sans aucun opérateur aura pour effet de vérifier par défaut si la variable est définie ou non.
Dans l'exemple ci-dessous, le paramètre color d'un module de couleur est testé. Si le paramètre color n'avait pas de valeur, le modèle afficherait une couleur de fond noire par défaut. S'il est défini, la couleur d'arrière-plan définie par l'utilisateur sera restituée.
```text hubl.txt theme={null}
{% color "my_color" color="#930101", export_to_template_context=True %}
```
```html example.html theme={null}
```
### divisibleby
Vérifie si un objet est divisible par un autre nombre.
Par exemple, ci-dessous, une boucle for est créée pour parcourir une liste de types d'animaux. Chaque type d'animal est imprimé dans une division et un style en ligne différent est appliqué toutes les 5 divisions (largeur :100 %). Ce concept pourrait être appliqué à un blog où un balisage différent est restitué pour un certain modèle d'article. Pour en savoir plus sur les boucles for et loop.index, [consultez cet article](/docs/cms/reference/hubl/loops).
```text hubl.txt theme={null}
{% set animals = ["lions", "tigers", "bears", "dogs", "sharks"] %}
{% for animal in animals %}
{% if loop.index is divisibleby 5 %}
```
### equalto
Vérifie si la valeur d'une variable est égale à une constante ou à une autre variable. Vous pouvez également utiliser l'opérateur `==` pour effectuer le même test.
Dans l'exemple ci-dessous, la largeur des articles du blog est ajustée en fonction du nombre total d'articles dans la boucle. L'exemple de sortie suppose qu'il y a 4 articles dans le blog.
```html example.html theme={null}
{% for content in contents %}
{% if loop.length is equalto 2 %}
Post content
{% elif loop.length is equalto 3 %}
Post content
{% elif loop.length is equalto 4 %}
Post content
{% else %}
Post content
Post content
Post content
Post content
```
### even
Vérifie si une variable numérique est un nombre pair.
L'exemple ci-dessous montre une boucle simplifiée d'énumération de blog, où si l'itération actuelle de la boucle est paire, une classe `even-post` est attribuée à la division d'élément d'article. Autrement, une classe `odd-post` est attribuée.
```html example.html theme={null}
{% for content in contents %}
{% if loop.index is even %}
```
### float
Vérifie si une variable numérique est un nombre à virgule flottante.
```html example.html theme={null}
{% set quantity = 1.20 %}
{% if quantity is float %}
quantity is a floating point number
{% endif %}
```
```html example.html theme={null}
quantity is a floating-point number
```
### integer
Vérifie si une variable est un nombre entier.
```html example.html theme={null}
{% set quantity = 120 %}
{% if quantity is integer %}
Quantity is an integer
{% endif %}
```
```html example.html theme={null}
Quantity is an integer
```
### iterable
Vérifie si une variable peut être parcourue en boucle.
Cet exemple vérifie une variable appelée `jobs` pour voir si elle peut être parcourue par itération. Comme la variable contient une liste de tâches, la [fonction if](/docs/cms/reference/hubl/if-statements) est définie sur `true` et la boucle s'exécute. Si la variable avait contenu une seule valeur, la fonction if aurait imprimé cette valeur avec un balisage différent à la place. [ Découvrez-en davantage sur les boucles for](/docs/cms/reference/hubl/loops).
```html example.html theme={null}
{% set jobs = ["Accountant", "Developer", "Manager", "Marketing", "Support"] %}
{% if jobs is iterable %}
Available positions
{% for job in jobs %}
{{ job }}
{% endfor %}
{% else %}
Available position
{{ jobs }}
{% endif %}
```
```html example.html theme={null}
Available positions
Accountant
Developer
Manager
Marketing
Support
```
### lower
Vérifie si une chaîne est en minuscules.
L'exemple ci-dessous utilise une [fonction unless](/docs/cms/reference/hubl/if-statements#unless-statements) et un filtre pour vérifier qu'une chaîne de texte saisie dans un module de texte est toujours en minuscules.
```html example.html theme={null}
{% module "my_text" path="@hubspot/text" label="Enter text", value="Some TEXT that should be Lowercase", export_to_template_context=True %}
{% unless widget_data.my_text.value is lower %}
{{ widget_data.my_text.value|lower }}
{% endunless %}
```
```text sortie rendue.txt theme={null}
some text that should be lowercase
```
### mapping
Vérifie si un objet est un dictionnaire
L'exemple ci-dessous vérifie si l'objet de contact est un dictionnaire.
```html example.html theme={null}
{% if contact is mapping %}
This object is a dictionary.
{% else %}
This object is not a dictionary.
{% endif %}
```
```text sortie rendue.txt theme={null}
This object is a dictionary.
```
### none
Vérifie si une variable a une valeur `null`.
```html example.html theme={null}
{% module "user_email" path="@hubspot/text" label="Enter user email", value="example@hubspot.com", export_to_template_context=True %}
{% unless widget_data.user_email.value is none %}
{{ widget_data.user_email.value }}
{% endunless %}
```
```text sortie rendue.txt theme={null}
example@hubspot.com
```
### number
Vérifie si la valeur d'une variable est un nombre.
L'exemple ci-dessous vérifie si une variable est ou non une variable et, si tel est le cas, la convertit en millions.
```html example.html theme={null}
{% set my_var = 40 %}
{% if my_var is number %}
{{ my_var * 1000000 }}
{% else %}
my_var is not a number.
{% endif %}
```
```text sortie rendue.txt theme={null}
40000000
```
### odd
Vérifie si une variable numérique est un nombre impair.
Vous trouverez ci-dessous le même exemple que le test d'expression inverse even décrit précédemment.
```html example.html theme={null}
{% for content in contents %}
{% if loop.index is odd %}
```
### sameas
Vérifie si deux variables ont ou non la même valeur.
L'exemple ci-dessous définit deux variables et vérifie ensuite si elles sont identiques ou non.
```text hubl.txt theme={null}
{% set var_one = True %}
{% set var_two = True %}
{% if var_one is sameas var_two %}
The variables values are the same.
{% else %}
The variables values are different.
{% endif %}
```
```text sortie rendue.txt theme={null}
The variables values are the same.
```
### sequence
Semblable au test **iterable**, ce test d'expression vérifie si une variable est une séquence.
L'exemple ci-dessous vérifie si une variable est une séquence, puis parcourt cette séquence de genres musicaux.
```html example.html theme={null}
{% set genres = ["Pop", "Rock", "Disco", "Funk", "Folk", "Metal", "Jazz", "Country", "Hip-Hop", "Classical", "Soul", "Electronica" ] %}
{% if genres is sequence %}
Favorite genres
{% for genre in genres %}
{{ genre }}
{% endfor %}
{% else %}
Favorite genre:
{{ genres }}
{% endif %}
```
```html example.html theme={null}
Pop
Rock
Disco
Funk
Folk
Metal
Jazz
Country
Hip-Hop
Classical
Soul
Electronica
```
### chaîne
Vérifie si la valeur stockée dans une variable est du texte.
L'exemple ci-dessous vérifie si une variable est une chaîne de caractères et, si tel est le cas, applique un filtre de titre pour modifier la capitalisation.
```text hubl.txt theme={null}
{% set my_var = "title of section" %}
{% if my_var is string %}
{{ my_var|title }}
{% else %}
my_var is not a string
{% endif %}
```
```text sortie rendue.txt theme={null}
Title Of Section
```
### string\_containing
Vérifie si une sous-chaîne fournie est contenue dans une autre chaîne. Ce test d'expression est utilisé en conjonction avec l'opérateur `is`.
```text hubl.txt theme={null}
{% if content.domain is string_containing ".es" %}
Markup that will only render on content hosted on .es domains
{% elif content.domain is string_containing ".jp" %}
Markup that will only render on content hosted on .jp domains
{% else %}
Markup that will render on all other domains
{% endif %}
```
```text sortie rendue.txt theme={null}
Markup that will render on all other domains
```
### string\_startingwith
Vérifie si une chaîne commence par une chaîne particulière. Il est utilisé en conjonction avec l'opérateur `is`.
```text hubl.txt theme={null}
{% if content.slug is string_startingwith "es/" %}
Markup that will only render on content hosted in a /es/ subdirectory
{% elif content.slug is string_startingwith "jp/" %}
Markup that will only render on content hosted in a /jp/ subdirectory
{% else %}
Markup that will render on all subdirectories
{% endif %}
```
```text sortie rendue.txt theme={null}
Markup that will render on all subdirectories
```
### truthy
Vérifie si une expression est égale à `True`.
L'exemple ci-dessous utilise un module de case à cocher booléenne pour afficher un message d'alerte.
```html example.html theme={null}
{% boolean "check_box" label="Show alert", value=True, export_to_template_context=True %}
{% if widget_data.check_box.value is truthy %}
Danger!
{% endif %}
```
```html example.html theme={null}
Danger!
```
### undefined
Vérifie si une variable est indéfinie dans le contexte du modèle. Ce test est différent du test d'expression `none`, dans la mesure où le test undefined est défini sur `true` lorsque la variable est présente mais n'a pas de valeur, alors que none est défini sur `true` lorsque la variable a une valeur nulle.
L'exemple ci-dessous vérifie l'existence de la variable "my\_var" dans un modèle.
```text hubl.txt theme={null}
{% if my_var is undefined %}
A variable named "my_var" does not exist on this template.
{% else %}
{{ my_var }}
{% endif %}
```
```text sortie rendue.txt theme={null}
A variable named "my_var" does not exist on this template.
```
### upper
Vérifie si une chaîne est entièrement en majuscules. Vous trouverez ci-dessous un exemple inverse du test d'expression `lower` [ci-dessus](#lower).
```text hubl.txt theme={null}
{% module "my_text" path="@hubspot/text" label="Enter text", value="Some TEXT that should be Uppercase", export_to_template_context=True %}
{% unless widget_data.my_text.value is upper %}
{{ widget_data.my_text.value|upper }}
{% endunless %}
```
```text sortie rendue.txt theme={null}
SOME TEXT THAT SHOULD BE UPPERCASE
```
### within
Vérifie si une variable est présente dans une liste.
```text hubl.txt theme={null}
{% set numbers = [1, 2, 3] %}
{% if 2 is within numbers %}
2 is in the list!
{% endif %}
{% if 4 is within numbers %}
4 is in the list!
{% endif %}
```
```text sortie rendue.txt theme={null}
2 is in the list!
```
# HubL Syntax
Source: https://developers.hubspot.fr/docs/cms/reference/hubl/overview
# Balises HubL de la zone de glisser-déposer
Source: https://developers.hubspot.fr/docs/cms/reference/hubl/tags/dnd-areas
Les balises HubL sont utilisées pour construire des zones de glisser-déposer qui permettent aux développeurs de créer des sections de pages qui prennent en charge les modifications de mise en page, de style et de contenu directement dans les éditeurs de contenu.
[Les zones de glisser-déposer](https://developers.hubspot.fr/docs/guides/cms/content/templates/drag-and-drop/overview) permettent aux développeurs de créer des sections de pages et des partials globaux qui prennent en charge les modifications de mise en page, de style et de contenu directement dans les éditeurs de contenu. Voir le [tutoriel sur la création d'une zone de glisser-déposer](/docs/cms/start-building/building-blocks/drag-and-drop/tutorial) pour une introduction à la création de zones de glisser-déposer.
Les zones de glisser-déposer sont basées sur une grille réactive à 12 colonnes. Les balises par glisser-déposer rendent le balisage avec des noms de classe désignant les colonnes et les lignes. Vous devrez ajouter une feuille de style pour cibler ces noms de classe. Un exemple de styles de mise en page que vous pouvez mettre en œuvre se trouve dans le [Boilerplate de CMS Hub](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/css/objects/_layout.css). Votre feuille de style peut être ajoutée au modèle en utilisant [`{{ require_css() }}`](/docs/cms/reference/hubl/tags/standard-tags#require-css).
> [!WARNING]
>
> ### Remarque:
>
> Les zones de glisser-déposer ne peuvent pas être utilisées dans des [articles de blog](/docs/cms/start-building/building-blocks/templates/blog) et [modèles d'e-mails](https://developers.hubspot.fr/docs/guides/cms/content/templates/overview#email) pour le moment.
## dnd\_area
Une [zone de glisser-déposer](https://developers.hubspot.fr/docs/guides/cms/content/templates/drag-and-drop/overview) est un conteneur qui rend une partie de la page web modifiable en termes de structure, de conception et de contenu. Le corps d'une balise `{% dnd_area %}` fournit le contenu par défaut de la zone de glisser-déposer.
Les modules eux-mêmes ne peuvent pas contenir de zones de glisser-déposer. Pour fournir aux créateurs de contenu une interface permettant d'ajouter du contenu uniforme dans un module, utilisez plutôt des [champs et des groupes reproductibles](/docs/cms/reference/fields/module-theme-fields#repeaters).
Une balise `dnd_area` peut contenir les paramètres suivants :
| Paramètre | Type | Description |
| - | - | - |
| `class` | Chaîne | Une classe ajoutée avec la balise div d'une dnd\_area |
| `label` | Chaîne | Utilisé dans l'éditeur pour libeller la zone dans la barre latérale. |
```text entrée.txt theme={null}
{% dnd_area "unique_name", class="main" %}
{% end_dnd_area %}
```
```text résultat.txt theme={null}
```
Les balises `dnd_area` peuvent également contenir des balises `dnd_section`.
> [!WARNING]
>
> ### Remarque:
>
> Un créateur de contenu peut échanger le modèle d'une page contre un autre modèle du même type, selon qu'il possède ou non des balises [dnd\_area](/docs/cms/reference/hubl/tags/dnd-areas).
>
> * Les modèles construits avec l'éditeur visuel de mise en page par glisser-déposer peuvent être remplacés par d'autres modèles par glisser-déposer ou par des modèles codés avec ou sans les balises `dnd_area`.
> * Les modèles codés avec des balises *dnd\_area* ne peuvent être échangés que contre d'autres modèles codés avec des balises `dnd_area`.
> * Les modèles codés sans balises `dnd_area` ne peuvent être échangés que contre d'autres modèles codés sans balises `dnd_area`.
## dnd\_section
[`{% dnd_section %}`](/docs/cms/start-building/building-blocks/sections/sections) est une ligne de niveau supérieur qui doit être imbriquée dans une balise `{% dnd_area %}`. [Les sections peuvent également être définies comme un modèle](/docs/cms/start-building/building-blocks/sections/sections#section-templates), puis [incluses](/docs/cms/start-building/building-blocks/sections/sections#section-context) dans une `dnd_area`, ce qui les rend idéales pour élaborer rapidement un modèle.
Une balise `dnd_section` peut contenir les paramètres suivants :
| Paramètre | Type | Description |
| - | - | - |
| `background_color` | Dict | Un dictionnaire qui permet de spécifier une [couleur d'arrière-plan](#background-color). Peut également être fourni en tant que chaîne. |
| `background_image` | Dict | Un dictionnaire qui permet de spécifier une [image d'arrière-plan](#background-image). |
| `background_linear_gradient` | Dict | Un dictionnaire qui permet de spécifier un [arrière-plan à dégradé linéaire](#background-linear-gradient). |
| `full_width` | Booléen | Un booléen qui détermine si la section est destinée à être pleine page ou limitée par un conteneur interne. |
| `margin` | Dict | Un dictionnaire qui permet de spécifier les valeurs de marge dans `cm`, `mm`, `Q`, `in`, `pc`, `pt`, `px`, `em`, `ex`, `ch`, `rem`, `lh`, `vw`, `vh`, `vmin`, `vmax` et `%`. Si aucune unité de mesure n'est fournie, la valeur par défaut est `px`. |
| `max_width` | Entier | Une valeur en pixels qui définit la largeur maximale d'un contenu sur une balise dict. |
| `padding` | Dict | Un dictionnaire qui permet de spécifier les valeurs de rembourrage dans `cm`, `mm`, `Q`, `in`, `pc`, `pt`, `px`, `em`, `ex`, `ch`, `rem`, `lh`, `vw`, `vh`, `vmin`, `vmax` et `%`. Si aucune unité de mesure n'est fournie, la valeur par défaut est `px`. |
| `vertical_alignment` | Chaîne | Alignement vertical du contenu enfant. Les options disponibles incluent :
```
Les balises`dnd_section` peuvent également contenir les balises suivantes :
* `dnd_column`
* `dnd_module`
## dnd\_column
[`{% dnd_column %}`](https://developers.hubspot.fr/docs/guides/cms/content/templates/drag-and-drop/overview#column) est un bloc de construction structurel vertical qui occupe une ou plusieurs colonnes de mise en page définies par sa ligne parent.
Cette balise HubL doit être imbriquée dans une balise `{% dnd_area %}`.
Une balise `dnd_column` peut contenir les paramètres suivants :
| Paramètre | Type | Description |
| - | - | - |
| `background_color` | Dict | Un dictionnaire qui permet de spécifier une [couleur d'arrière-plan](#background-color). |
| `background_image` | Dict | Un dictionnaire qui permet de spécifier une [image d'arrière-plan](#background-image). |
| `background_linear_gradient` | Dict | Un dictionnaire qui permet de spécifier un [arrière-plan à dégradé linéaire](#background-linear-gradient). |
| `margin` | Dict | Un dictionnaire qui permet de spécifier les valeurs de marge dans `cm`, `mm`, `Q`, `in`, `pc`, `pt`, `px`, `em`, `ex`, `ch`, `rem`, `lh`, `vw`, `vh`, `vmin`, `vmax` et `%`. Si aucune unité de mesure n'est fournie, la valeur par défaut est `px`. |
| `max_width` | Entier | Une valeur en pixels qui définit la largeur maximale d'un contenu sur une balise dict. |
| `padding` | Dict | Un dictionnaire qui permet de spécifier les valeurs de remplissage dans `cm`, `mm`, `Q`, `in`, `pc`, `pt`, `px`, `em`, `ex`, `ch`, `rem`, `lh`, `vw`, `vh`, `vmin`, `vmax` et `%`. Si aucune unité de mesure n'est fournie, la valeur par défaut est `px`. |
| `vertical_alignment` | Chaîne | Alignement vertical du contenu enfant. Les options disponibles incluent :
`TOP`
`MIDDLE`
`BOTTOM`
|
> [!WARNING]
>
> ### Remarque:
>
> Vous ne pouvez utiliser qu'un seul paramètre d'arrière-plan par balise `dnd_column`.
```text entrée.txt theme={null}
{% dnd_column
offset=0,
width=12,
background_color={
r: 255,
g: 0,
b: 0,
a: 1
},
margin={
"top": "1em",
"bottom": "1em"
},
%}
{% end_dnd_column %}
```
```text résultat.txt theme={null}
```
Une balise `dnd_column` peut également contenir `dnd_row`.
## dnd\_row
[`{% dnd_row %}`](https://developers.hubspot.fr/docs/guides/cms/content/templates/drag-and-drop/overview#row) est un bloc de construction structurel horizontal qui crée une grille de mise en page imbriquée à 12 colonnes dans laquelle des colonnes et des modules peuvent être placés.
Cette balise HubL doit être imbriquée dans une balise `{% dnd_area %}`.
Une balise `dnd_row` peut inclure les paramètres suivants :
| Paramètre | Type | Description |
| - | - | - |
| `background_color` | Dict | Un dictionnaire qui permet de spécifier une [couleur d'arrière-plan](#background-color). |
| `background_image` | Dict | Un dictionnaire qui permet de spécifier une [image d'arrière-plan](#background-image). |
| `background_linear_gradient` | Dict | Un dictionnaire qui permet de spécifier un [arrière-plan à dégradé linéaire](#background-linear-gradient). |
| `margin` | Dict | Un dictionnaire qui permet de spécifier les valeurs de marge dans `cm`, `mm`, `Q`, `in`, `pc`, `pt`, `px`, `em`, `ex`, `ch`, `rem`, `lh`, `vw`, `vh`, `vmin`, `vmax` et `%`. Si aucune unité de mesure n'est fournie, la valeur par défaut est `px`. |
| `max_width` | Entier | Une valeur en pixels qui définit la largeur maximale d'un contenu sur une balise dict. |
| `padding` | Dict | Un dictionnaire qui permet de spécifier les valeurs de remplissage dans `cm`, `mm`, `Q`, `in`, `pc`, `pt`, `px`, `em`, `ex`, `ch`, `rem`, `lh`, `vw`, `vh`, `vmin`, `vmax` et `%`. Si aucune unité de mesure n'est fournie, la valeur par défaut est `px`. |
| `vertical_alignment` | Chaîne | Alignement vertical du contenu enfant. Les options disponibles incluent :
```
Une balise dnd\_row peut également contenir les balises suivantes :
* `dnd_column`
* `dnd_module`
## dnd\_module
[`{% dnd_module %}`](https://developers.hubspot.fr/docs/guides/cms/content/templates/drag-and-drop/overview#module) est un [module](https://developers.hubspot.fr/docs/guides/cms/content/modules/overview) enveloppé dans un div où la mise en page, les styles et le contenu peuvent être ajoutés. Le module est spécifié en faisant référence à son chemin d'accès, qui peut être soit un module par défaut de HubSpot (en utilisant l'espace de noms `@hubspot/`), soit des modules que vous avez construits, en spécifiant leur chemin d'accès dans l'arborescence des fichiers du gestionnaire de conception.
Cette balise HubL doit être imbriquée dans une balise `{% dnd_area %}`.
Une balise `dnd_module` peut contenir les paramètres suivants :
| Paramètre | Type | Description |
| - | - | - |
| `path` | Chaîne | Chemin d'accès à un module. |
| `horizontal_alignment` | Chaîne | Positionnement horizontal, prend en charge : `LEFT`, `CENTER` et `RIGHT` |
| `offset` | Entier | Décalage par rapport à 0 dans la grille à 12 colonnes. |
| `width` | Entier | Nombre de colonnes occupant la grille de 12 colonnes. |
| `flexbox_positioning` | Chaîne | **Obsolète, ne pas utiliser.** Utilisez plutôt `horizontal_alignment` en tandem avec l'élément `vertical_alignment` de la ligne ou de la section. Valeur de la position Flexbox pour le module. Chaîne compatible indiquant la position verticale suivie de la position horizontale :
`TOP_LEFT`
`TOP_CENTER`
`TOP_RIGHT`
`MIDDLE_LEFT`
`MIDDLE_CENTER`
`MIDDLE_RIGHT`
`BOTTOM_LEFT`
`BOTTOM_CENTER`
`BOTTOM_RIGHT`
|
> [!TIP]
>
> Vous avez un ancien module dont le nom de champ correspond à l'un des paramètres `dnd_module` ci-dessus ? Vous pouvez [transmettre des valeurs par défaut par le biais d'un paramètre de champ](/docs/cms/reference/modules/using-modules-in-templates#passing-fields-that-have-dnd-associated-parameters), tout comme vous le feriez pour un groupe de champs.
```text entrée.txt theme={null}
{% dnd_module
path="@hubspot/rich_text",
offset=0,
width=8,
%}
{% module_attribute "html" %}
```
## Milieu social
Il existe plusieurs façons de définir des arrière-plans pour les éléments de colonne, de section et de ligne du tableau de bord, [`background_image`](#background-image), [`background_linear_gradient`](#background-linear-gradient) et [`background_color`](#background-color).
### background\_color
Les balises dnd de colonne, de section et de ligne prennent en charge les couleurs d'arrière-plan. Vous pouvez définir la couleur d'arrière-plan par défaut pour un élément de glisser-déposer en utilisant `background_color`. Ce paramètre est un paramètre basé sur une chaîne de caractères et peut inclure les formats suivants décrits dans l'exemple ci-dessous.
```hubl theme={null}
{% dnd_section %}
// Hex Value (both 3 and 6 char length)
{% dnd_column background_color="#F7F7F7" %}
{% end_dnd_column %}
{% dnd_column background_color="#FFF" %}
{% end_dnd_column %}
// Both RGB and RGBA
{% dnd_column background_color="rgb(255,255,255)" %}
{% end_dnd_column %}
{% dnd_column background_color="rgba(0,0,0,.25)" %}
{% end_dnd_column %}
{% end_dnd_section %}
```
### background\_linear\_gradient
Les éléments dnd de colonne, de section et de ligne prennent en charge les dégradés linéaires d'arrière-plan. Vous pouvez définir un dégradé par défaut à l'aide du paramètre `background_linear_gradient`. Le paramètre attend un dictionnaire. Actuellement, il ne prend en charge que les arrêts de deux couleurs.
| Paramètre | Type | Description |
| - | - | - |
| `direction` | Chaîne | La direction du dégradé.
`to bottom`
`to top`
`to left`
`to right`
|
| `colors` | Tableau | Tableau de chaînes de couleurs. Actuellement, il prend en charge 2 valeurs, le début et la fin. Les valeurs sont fournies sous forme de chaînes de caractères, et les formats suivants sont pris en charge :
`RGB`
`RGBA`
`3 char hex`
`6 char hex`
`8 char hex`
|
```hubl theme={null}
{% dnd_section
background_linear_gradient={
"direction": "to bottom",
"colors": [
"#1EB6C3",
"#2A2859"
]
}
%}
{% dnd_module path="@hubspot/rich_text" width="6" %}
{% end_dnd_module %}
{% end_dnd_section %}
```
### background\_image
Les éléments dnd de colonne, de section et de ligne prennent en charge les images d'arrière-plan. Vous pouvez fournir une image d'arrière-plan par défaut en utilisant le paramètre `background_image` qui attend un dictionnaire.
| Clé | Type | Description |
| - | - | - |
| `backgroundPosition` | Chaîne | La position de l'image en arrière-plan. Prend en charge une chaîne indiquant la position verticale suivie de la position horizontale.
`TOP_LEFT`
`TOP_CENTER`
`TOP_RIGHT`
`MIDDLE_LEFT`
`MIDDLE_CENTER`
`MIDDLE_RIGHT`
`BOTTOM_LEFT`
`BOTTOM_CENTER`
`BOTTOM_RIGHT`
|
| `backgroundSize` | Chaîne | Propriété de taille d'arrière-plan de la CSS utilisée pour l'image. Valeurs prises en charge :
`cover`
`contain`
`auto`
|
| `imageUrl` | Chaîne | URL absolue de l'image. |
```hubl theme={null}
{% dnd_section
background_image = {
"backgroundPosition": "MIDDLE_CENTER",
"backgroundSize": "cover",
"imageUrl": "https://www.example.com/bg-image.jpg"
},
%}
{% dnd_module path="@hubspot/rich_text" width="6" %}
{% end_dnd_module %}
{% end_dnd_section %}
```
## Comment les paramètres de style dnd se traduisent sur la page
Lorsque vous utilisez des paramètres basés sur le style, tels que les [arrière-plans](#background), les marges ou le remplissage, les noms de classe sont automatiquement calculés pour vos sections, colonnes, lignes et modules. Les valeurs de propriété que vous avez assignées sont alors ajoutées à ces noms de classe créés automatiquement et le code CSS qui en résulte est ensuite placé devant la balise de fermeture `` de la page dans une balise `
" The Content Optimization System
matches content with context to create a highly personalized, relevant and
meaningful customer experience.
"
Dharmesh Shah,HubSpot
```
| Paramètre | Type | Description |
| - | - | - |
| `module_id` | Chaîne | L'ID du module à restituer. |
| `path` | Chaîne | Le chemin d'accès du module à restituer. Incluez le slash de début pour un chemin absolu. Autrement, le chemin sera relatif au modèle. Référencez les modules par défaut de HubSpot avec des chemins correspondant à leurs balises HubL, comme : @hubspot/rich\_text, @hubspot/linked\_image, etc. |
## Variables d'éditeur
Pour restituer un contenu de variable pour un module dans l'éditeur, vous pouvez ajouter un contenu par défaut aux champs de module ou utiliser la balise HubL `editor_placeholder`. Cette balise peut être utile lorsque le module n'a pas de contenu par défaut ou n'en a pas besoin, ou pour simplifier la création du module.

Pour ajouter une variable d'éditeur à un module personnalisé, ajoutez d'abord une [fonction if](/docs/cms/reference/hubl/if-statements) au code HTML du module afin d'afficher la variable lorsqu'aucun contenu n'est sélectionné dans l'éditeur. Par exemple, le code suivant peut être utilisé pour ajouter une variable d'éditeur à un module CTA :
```hubl theme={null}
{% if module.label %}
{% cta guid="{{ module.guid }}" label="my_cta" %}
{% elif is_in_editor %}
{% editor_placeholder %}
{% endif %}
```
> [!NOTE]
>
> La première instruction conditionnelle `if` indique si le module est présent. Ensuite, l'instruction conditionnelle `elif` indique si le module est rendu dans le contexte de l'éditeur à l'aide de la variable `is_in_editor`.
>
> Cette variable renvoie `true` si le contenu est en cours de rendu dans n'importe quel éditeur de contenu, mais vous pouvez être plus spécifique avec d'autres [variables d'éditeurs et de prévisualisation intégrées à l'application](/docs/cms/reference/hubl/variables#in-app-editor-and-preview-variables).
Ensuite, définissez le contenu de la variable dans le fichier du module `meta.json`.
```json theme={null}
{
"global": false,
"host_template_types": ["PAGE"],
"module_id": 62170380654,
"is_available_for_new_content": true,
"placeholder": {
"show_module_icon": true,
"title": "Call to action",
"description": "Select a CTA"
}
}
```
| Paramètre | Type | Description |
| - | - | - |
| `show_module_icon` | Booléen | Permet d'indiquer s'il faut afficher l'icône du module. |
| `title` | Chaîne | Le titre qui s'affiche dans la variable. |
| `description` | Chaîne | La description qui s'affiche dans l'espace réservé. |
## Colonne flexible
Les colonnes flexibles sont des colonnes verticales dans un modèle qui permettent aux créateurs de contenu d'insérer et de supprimer des modules sur la page à l'aide de l'[éditeur de contenu](https://knowledge.hubspot.com/fr/website-pages/edit-page-content-in-a-drag-and-drop-area). Lorsque vous codez une colonne flexible avec HubL, vous pouvez choisir d'encadrer d'autres modules HubL pour qu'ils apparaissent par défaut dans la colonne flexible. L'exemple de code ci-dessous illustre la syntaxe de base et un exemple de colonne flexible avec un module de texte enrichi et de formulaire contenu par défaut.
Notez que les colonnes flexibles ne peuvent être ajoutées qu'aux modèles de page, et pas aux modèles de blog ou d'e-mail. Les modules ne peuvent pas contenir de colonnes flexibles, mais peuvent contenir des [champs et des groupes reproductibles](/docs/cms/reference/fields/module-theme-fields#repeaters), qui offrent une fonctionnalité similaire.
```text entrée.txt theme={null}
{% widget_container "my_flexible_column" label="My flex column"%}
{% module "rich_text" path="@hubspot/rich_text" %}
{% module "linked_image" path="@hubspot/linked_image" %}
{% end_widget_container %}
```
```text résultat.txt theme={null}
Something Powerful
Tell The Reader More
The headline and subheader tells us what you're
offering, and the form header closes the deal. Over here
you can explain why your offer is so great it's worth filling out a form
for.
```
> [!WARNING]
>
> ### Remarque :
>
> Lors de l'utilisation de cette balise, l'élément `label` doit respecter la valeur `name` pour que la colonne flexible fonctionne dans l'éditeur de contenu. Par exemple, la syntaxe suivante n'est pas valide :
>
> `[% widget_container label="My label" "my_flexible_column" %}`
## Formulaire
Permet aux utilisateurs de sélectionner un formulaire HubSpot à ajouter à leur page. Le code ci-dessous inclut un exemple d'utilisation de la syntaxe de balise HubL standard et un exemple d'utilisation de la [syntaxe de bloc](/docs/cms/reference/modules/using-modules-in-templates#block-syntax).
```text entrée.txt theme={null}
{% form "my_form"
form_to_use="{formID}",
title="Free Trial"
%}
{% module_block form "my_form"
form_follow_ups_follow_up_type="",
form_to_use="9e633e9f-0634-498e-917c-f01e355e83c6",
title="Free Trial",
notifications_are_overridden=True,
response_message="Thanks for submitting the form.",
response_type="inline",
overrideable=True,
gotowebinar_webinar_key="",
webinar_id="",
webinar_source"",
label="Form"
%}
{% module_attribute "notifications_override_email_addresses" is_json=True %}
["email_address@website.com"]
{% end_module_attribute %}
{% end_module_block %}
```
```text résultat.txt theme={null}
Free Trial
```
| Paramètre | Type | Description |
| - | - | - |
| `form_key` | Chaîne | Permet d'indiquer un ID unique pour le formulaire au niveau de la page. |
| `form_to_use` | Chaîne | Permet d'indiquer le formulaire à charger par défaut, en fonction de l'ID du formulaire. Cet ID est disponible dans l'URL de l'éditeur de formulaire de chaque formulaire. |
| `title` | Chaîne | Permet d'ajouter une balise d'en-tête `h3` au-dessus du formulaire. |
| `no_title` | Booléen | Si la valeur est définie sur `True`, la balise h3 au-dessus du titre est supprimée. |
| `form_follow_ups_follow_up_type` | Énumération | Permet d'indiquer les actions de suivi telles que l'inscription d'un contact dans un workflow ou l'envoi d'un simple e-mail de suivi. Les valeurs possibles sont `no_action`, `simple` et `automation`. |
| `simple_email_for_live_id` | Nombre | Permet d'indiquer l'ID de l'e-mail de suivi simple pour la page en direct. |
| `simple_email_for_buffer_id` | Nombre | Permet d'indiquer l'ID de l'e-mail de suivi simple pour la version d'auto-enregistrement d'une page. |
| `follow_up_type_simple` | Booléen | Si la valeur est définie sur vrai, active un e-mail de suivi simple. Alternative à `form_follow_ups_follow_up_type`. |
| `follow_up_type_automation` | Booléen | Si la valeur est définie sur vrai, inscrit les soumissions dans un workflow. Alternative à `form_follow_ups_follow_up_type`. |
| `simple_email_campaign_id` | Nombre | Permet d'indiquer l'ID de l'e-mail de suivi simple. Alternative à `simple_email_for_live_id`. |
| `form_follow_ups_workflow_id` | Nombre | Permet d'indiquer l'ID du workflow dans lequel inscrire les soumissions. |
| `response_redirect_url` | Chaîne | En cas de redirection vers une page externe, ce paramètre indique l'URL vers laquelle la redirection doit être effectuée. |
| `response_redirect_id` | Nombre | Si vous redirigez vers une page hébergée par HubSpot, ce paramètre indique l'ID de la page en question. L'ID de la page est disponible dans l'URL de l'éditeur de page de chaque page. |
| `response_response_type` | Énumération | Permet de déterminer s'il faut rediriger vers une autre page ou afficher un message de remerciement intraligne lors de la soumission. La valeur de ce paramètre doit être `"redirect"` ou `"inline"` (par défaut). |
| `response_message` | Chaîne | Permet de définir un message de remerciement intraligne. Ce paramètre prend en charge le HTML. |
| `notifications_are_overridden` | Booléen | Si la valeur est définie sur `True`, le formulaire enverra des notifications de formulaire aux adresses e-mail indiquées sélectionnées dans le paramètre `notifications_override_email_addresses`, au lieu des paramètres par défaut du formulaire La valeur par défaut est `False`. |
| `notifications_override_guid_buffer` | Chaîne | L'ID des paramètres de remplacement dans la version d'auto-enregistrement de la page. |
| `notifications_override_guid` | Chaîne | L'ID des paramètres de remplacement dans la version en ligne de la page. |
| `notifications_override_email_addresses` | JSON | La syntaxe de bloc prend en charge une liste JSON de destinataires d'e-mails qui seront notifiés lors de la soumission du formulaire. Ces adresses e-mail remplacent les paramètres de notification par e-mail définis dans le formulaire. |
| `sfdc_campaign` | Chaîne | Permet d'indiquer la campagne Salesforce dans laquelle inscrire les contacts qui soumettent le formulaire. La valeur de ce paramètre doit être l'ID de la campagne SFDC et n'est disponible que pour les comptes qui sont [intégrés à Salesforce](https://knowledge.hubspot.com/fr/salesforce/install-the-hubspot-salesforce-integration). |
| `gotowebinar_webinar_key` | String | Spécifie le webinar GoToWebinar auquel inscrire les contacts après soumission du formulaire. Disponible uniquement pour les comptes utilisant l'[intégration GoToWebinar](https://knowledge.hubspot.com/fr/integrations/use-the-gotowebinar-integration-with-hubspot). |
| `webinar_id` | Chaîne | Champ plus générique qui spécifie l'ID du webinar Microsoft Teams ou GoToWebinar auquel inscrire les contacts après soumission du formulaire. Disponible uniquement pour les comptes utilisant les intégrations [GoToWebinar](https://knowledge.hubspot.com/fr/integrations/use-the-gotowebinar-integration-with-hubspot) ou [Microsoft Teams](https://knowledge.hubspot.com/fr/integrations/connect-hubspot-and-microsoft-teams). Lorsque `support_all_webinar_types` est défini sur `true` dans la [définition des champs de formulaire](/docs/cms/reference/fields/module-theme-fields#form). |
| `webinar_source` | String | L'ID de l'application d'intégration, soit GoToWebinar (`35161`) ou Microsoft Teams (`221635`). |
## Pied de page
Restitue les informations de droits d'auteur avec l'année et le nom de l'entreprise indiqués dans les [paramètres d'e-mail marketing du compte](https://knowledge.hubspot.com/fr/marketing-email/edit-office-location-information-in-email-footers#edit-your-default-email-footer-information-in-your-settings).
```text entrée.txt theme={null}
{% page_footer "page_footer" %}
```
```text résultat.txt theme={null}
```
## Galerie
Génère une balise de galerie HubSpot. Cette balise de galerie est basée sur [Slick](http://kenwheeler.github.io/slick/). Alors que vous pouvez créer un module de galerie avec la syntaxe de module HubL standard, si vous souhaitez prédéfinir des diapositives par défaut en utilisant HubL, vous devez utiliser la syntaxe de bloc. Les deux méthodes sont présentées ci-dessous. Les images de la galerie sont chargées de manière asynchrone à l'aide de JavaScript.
```text entrée.txt theme={null}
{% gallery "crm_gallery" %}
<-- Block syntax -->
{% widget_block gallery "Gallery" display_mode="standard" sizing="static", transition="slide", caption_position="below", auto_advance=True, overrideable=True, description_text="", show_pagination=True, label="Gallery", loop_slides=True, num_seconds=5 %}
{% widget_attribute "slides" is_json=True %}
[{
"caption": "CRM Contacts App",
"show_caption": true,
"link_url": "http://www.hubspot.com/crm",
"alt_text": "Screenshot of CRM Contacts",
"img_src": "http://go.hubspot.com/hubfs/Contacts-View-1.png?t=1430860504240",
"open_in_new_tab": true
},
{
"caption": "HubSpot CRM Contact Profile",
"show_caption": true,
"link_url": "http://www.hubspot.com/",
"alt_text": "HubSpot CRM Contact Profile",
"img_src": "http://cdn2.hubspot.net/hubfs/53/Contact-Profile.png?t=1430860504240",
"open_in_new_tab": true
}]
{% end_widget_attribute %}
{% end_widget_block %}
```
```text résultat.txt theme={null}
```
| Paramètre | Type | Description | Par défaut |
| - | - | - | - |
| `slides` | JSON | Une liste JSON de la légende par défaut, de l'URL du lien, du texte alternatif, de l'image source et de l'ouverture ou non dans un nouvel onglet. Consultez la syntaxe de bloc ci-dessus. | |
| `loop_slides` | Booléen | Si la valeur est définie sur vrai, les diapositives sont passées en boucle. | `True` |
| `num_seconds` | Nombre | Le temps de pause entre les diapositives, en secondes. | `5` |
| `show_pagination` | Booléen | Permet de proposer des boutons sous le curseur pour naviguer entre les diapositives. | `True` |
| `sizing` | Énumération | Permet de détermine si le curseur change de taille, en fonction de la hauteur des diapositives. Les valeurs possibles sont « statique » ou « redimensionner ». | `"static"` |
| `auto_advance` | Booléen | Permet d'avancer automatique des diapositives après le temps défini dans num\_seconds. | `False` |
| `transition` | Énumération | Permet de définir le type de transition de la diapositive. Les valeurs possibles sont « fondu » ou « diapositive ». | `"slide"` |
| `caption_position` | Énumération | Permet d'affecter le positionnement de la légende sur ou sous la diapositive. Les valeurs possibles sont « ci-dessous » ou « superposer ». | `"below"` |
| `display_mode` | Énumération | Permet de déterminer la façon dont la galerie d'images sera affichée. Les valeurs possibles sont « standard », « galerie » ou « vignette ». | `"standard"` |
| `lightboxRows` | Nombre | Si « display\_mode » est défini sur « galerie », ce paramètre contrôle le nombre de lignes affichées dans la galerie. | `3` |
## En-tête
Génère un module d'en-tête qui restituera le texte sous forme de balise h1-h6.
```text entrée.txt theme={null}
{% header "header" %}
{% header "my_header" header_tag="h1", overrideable=True, value="A clear and bold header", label="Header" %}
```
```text résultat.txt theme={null}
A clear and bold header
```
| Paramètre | Type | Description | Par défaut |
| - | - | - | - |
| `header_tag` | Chaîne | Permet de sélectionner la balise d'en-tête à restituer. Les valeurs possibles sont h1, h2, h3, h4, h5 ou h6. | `h1` |
| `value` | Chaîne | Permet de restituer le texte par défaut dans le module d'en-tête. | `"A clear bold header"` |
## Icône
Ajoute une balise d'icône qui permet aux utilisateurs de sélectionner une icône à utiliser. Les ensembles d'icônes pris en charge sont les suivants : FontAwesome [5.0.10](https://github.com/FortAwesome/Font-Awesome/releases/tag/5.0.10), [5.14.0](https://github.com/FortAwesome/Font-Awesome/releases/tag/5.14.0) et [6.4.2](https://github.com/FortAwesome/Font-Awesome/releases/tag/6.4.2).
Cette balise ne peut pas être utilisée dans les modules conçus pour les e-mails.
```text entrée.txt theme={null}
{% icon
name="Accessible Icon"
style="REGULAR"
unicode="f368"
icon_set="fontawesome-5.14.0"
purpose="decorative"
title="Accessible Icon"
%}
```
```text résultat.txt theme={null}
```
| Paramètre | Type | Description | Par défaut |
| - | - | - | - |
| `name` | Chaîne | Le nom de l'icône. | |
| `style` | Chaîne | Le style de l'icône. Valeurs possibles : `REGULAR` ou `SOLID` | `REGULAR` |
| `unicode` | Chaîne | La représentation en caractères Unicode de l'icône. | |
| `icon_set` | Chaîne | Le jeu d'icônes FontAwesome à utiliser. Les valeurs possibles sont :
`fontawesome-5.14.0`
`fontawesome-5.0.10`
`fontawesome-6.4.2`
| |
| `purpose` | Chaîne | L'objectif de l'icône, utilisé pour l'[accessibilité](https://docs.fontawesome.com/v5/web/other-topics/accessibility). Les valeurs possibles sont : `decorative` ou `semantic`. Si la valeur est définie sur `decorative`, un attribut supplémentaire `aria-hidden="true"` sera ajouté à l'icône. | `decorative` |
| `title` | Chaîne | L'élément de titre du fichier SVG de l'icône ainsi qu'un attribut `labelledby` qui pointe vers le titre. | |
## Image
Crée une balise d'image qui permet aux utilisateurs de sélectionner une image dans l'éditeur de contenu. Si vous souhaitez que l'image soit liée à une URL de destination, vous devez utiliser linked\_image ci-dessous.
```text entrée.txt theme={null}
{% image "image" %}
{% image "executive_image" label="Executive photo", alt="Photo of Brian Halligan", src="//cdn2.hubspot.net/hub/53/file-733888619-jpg/assets/hubspot.com/about/management/brian-home.jpg", width="300" %}
```
```text résultat.txt theme={null}
```
| Paramètre | Type | Description | Par défaut |
| - | - | - | - |
| `alt` | Chaîne | Permet de définir le texte alternatif par défaut pour l'image. | |
| `src` | Chaîne | Permet d'ajouter l'attribut de source de la balise img. | |
| `width` | Nombre | Permet de définir l'attribut de largeur de la balise img. | `The width of the image` |
| `height` | Nombre | Permet de définir une hauteur minimale dans un attribut de style de la balise img pour les **modèles d'e-mail uniquement**. | `The height of the image` |
| `hspace` | Nombre | Permet de définir l'attribut hspace de la balise img. | |
| `align` | Chaîne | Permet de définir l'attribut d'alignement de la balise img. Les valeurs possibles sont left, right ou center. | |
| `style` | Chaîne | Permet d'ajouter des déclarations CSS intraligne à la balise img. Par exemple : style="border:1px solid blue; margin:10px | |
| `loading` | Chaîne | Permet de contrôler l'attribut de chargement de l'élément img. [Utilisé pour le chargement en différé basé sur le navigateur.](/docs/cms/best-practices/testing-staging-performance/lazy-loading) | |
## Source d'image
Un module de source d'image crée un sélecteur d'image dans l'éditeur de contenu, mais plutôt que d'imprimer une balise img, il restitue l'URL de l'image. Cette balise est généralement utilisée avec le paramètre `no_wrapper=True`, de sorte que la source de l'image puisse être ajoutée à une CSS intraligne ou à d'autres balises. Une alternative à l'utilisation de cette balise est d'utiliser le paramètre [`export_to_template_context`](/docs/cms/reference/modules/export-to-template-context).
```text entrée.txt theme={null}
{% image_src "image_src" %}
{% image_src "executve_image_src" src="//cdn2.hubspot.net/hub/53/file-733888614-jpg/assets/hubspot.com/about/management/dharmesh-home.jpg", no_wrapper=True %}
```
```text résultat.txt theme={null}
//cdn2.hubspot.net/hub/53/file-733888614-jpg/assets/hubspot.com/about/management/dharmesh-home.jpg
```
| Paramètre | Type | Description |
| - | - | - |
| `src` | Chaîne | Permet d'indiquer l'URL par défaut de la source de l'image. |
## Sélecteur de langue
Ajoute une icône de globe avec des liens vers les versions traduites d'une page de CMS donnée. Découvrez-en davantage sur le [contenu multilingue ici](https://knowledge.hubspot.com/fr/website-and-landing-pages/create-pages-in-multiple-languages).
```text entrée.txt theme={null}
{% language_switcher "language_switcher" overrideable=false, display_mode="localized", label="Language Switcher" %}
```
```text résultat.txt theme={null}
```
| Paramètre | Type | Description | Par défaut |
| - | - | - | - |
| `display_mode` | Énumération | La langue du texte dans le sélecteur de langue. Les valeurs sont :
`Pagelang` signifie que le nom des langues s'affichera dans la langue de la page sur laquelle se trouve le sélecteur.
`Localized` signifie que le nom de chaque langue s'affichera dans cette langue.
`Hybrid` est un mélange des deux.
| `Localized` |
## Image liée
Crée une image sélectionnable par l'utilisateur qui est encadrée par un lien. Cette balise possède tous les paramètres d'un module image avec deux paramètres supplémentaires qui précisent l'URL de destination du lien et si le lien s'ouvre dans une nouvelle fenêtre.
```text entrée.txt theme={null}
{% linked_image "linked_image" %}
{% linked_image "executive_image"
label="Executive photo",
link="https://twitter.com/bhalligan", \
open_in_new_tab=True,
alt="Photo of Brian Halligan",
src="//cdn2.hubspot.net/hub/53/file-733888619-jpg/assets/hubspot.com/about/management/brian-home.jpg", width="300"
%}
```
```text résultat.txt theme={null}
```
| Paramètre | Type | Description | Par défaut |
| - | - | - | - |
| `alt` | Chaîne | Permet de définir le texte alternatif par défaut pour l'image. | |
| `src` | Chaîne | Permet d'ajouter l'attribut de source de la balise img. | |
| `width` | Nombre | Permet de définir l'attribut de largeur de la balise img. | `The width of the image` |
| `height` | Nombre | Permet de définir une hauteur minimale dans un attribut de style de la balise img pour les **modèles d'e-mail uniquement.** | `The height of the image` |
| `hspace` | Nombre | Permet de définir l'attribut hspace de la balise img. | |
| `align` | Chaîne | Permet de définir l'attribut d'alignement de la balise img. Les valeurs possibles sont left, right ou center. | |
| `style` | Chaîne | Permet d'ajouter des déclarations CSS intraligne à la balise img. Par exemple : style="border:1px solid blue; margin:10px | |
| `open_in_new_tab` | Booléen | Permet d'ouvrir ou non l'URL de destination dans un autre onglet. | `False` |
| `link` | Chaîne | Permet de définir l'URL de destination du lien qui encadre la balise img. | |
| `target` | Chaîne | Permet de définir l'attribut de cible de la balise de lien. | |
| `loading` | Chaîne | Permet de contrôler l'attribut de chargement de l'élément img. [Utilisé pour le chargement en différé basé sur le navigateur.](/docs/cms/best-practices/testing-staging-performance/lazy-loading) | |
## Logo
Une balise de logo restitue le logo de votre entreprise à partir des [paramètres du kit de marque du compte](https://knowledge.hubspot.com/fr/branding/edit-your-logo-favicon-and-brand-colors#edit-your-logo).
```text entrée.txt theme={null}
{% logo "logo" %}
{% logo "my_logo" width="200" %}
```
```text résultat.txt theme={null}
```
| Paramètre | Type | Description | Par défaut |
| - | - | - | - |
| `alt` | Chaîne | Permet de définir le texte alternatif par défaut pour l'image. | `Value in brand kit settings` |
| `src` | Chaîne | Permet d'ajouter l'attribut de source de la balise img. | `Value in brand kit settings` |
| `link` | Chaîne | Permet de définir l'URL de destination du lien qui encadre la balise img. | |
| `width` | Nombre | Permet de définir l'attribut de largeur de la balise img. | `The width of the image` |
| `height` | Nombre | Permet de définir une hauteur minimale dans un attribut de style de la balise img pour les **modèles d'e-mail uniquement.** | `The height of the image` |
| `hspace` | Nombre | Permet de définir l'attribut hspace de la balise `img`. | |
| `align` | Chaîne | Permet de définir l'attribut d'alignement de la balise `img`. Les valeurs possibles sont `left`, `right` et `center`. | |
| `style` | Chaîne | Permet d'ajouter des déclarations CSS intraligne à la balise img. Par exemple :`style="border:1px solid blue; margin:10px"` | |
| `suppress_company_name` | Booléen | Permet de masquer le nom de l'entreprise si un logo image n'est pas défini. | `False` |
| `use_account_default` | Booléen | Si la valeur est définie sur `true` pour utiliser le nom de l'entreprise figurant dans les paramètres par défaut du compte. | `False` |
| `open_in_new_tab` | Booléen | Permet d'ouvrir ou non l'URL de destination dans un autre onglet. | `False` |
| `override_inherited_src` | Booléen | Si la valeur est définie sur `true`, utilisez la source du widget de logo plutôt que la source héritée des paramètres ou du modèle. | `True` |
| `heading_level` | Chaîne | Lorsque vous utilisez des logos textuels non liés, le logo textuel est inséré dans l'une des options disponibles suivantes sous forme de balise HTML : `h1`, `h2`, `h3`, `h4`. | `h1` |
| `loading` | Chaîne | Permet de contrôler l'attribut de chargement de l'élément img pour le [chargement asynchrone basé sur le navigateur.](/docs/cms/best-practices/testing-staging-performance/lazy-loading) | |
## Menu
Génère un menu avancé basé sur une arborescence de menu dans **Paramètres du contenu > Menus avancés.** Consultez [Menus et navigation](/docs/cms/start-building/building-blocks/modules/menus-and-navigation) pour plus d'informations sur l'utilisation des menus dans les [modèles](https://developers.hubspot.fr/docs/cms/start-building/building-blocks/templates/overview) et les [modules](https://developers.hubspot.fr/docs/cms/start-building/building-blocks/modules/overview). Si la valeur `id` est définie sur `null`, la balise menu restituera le menu par défaut du compte HubSpot.
```text entrée.txt theme={null}
{% menu "menu" %}
{% menu "my_menu"
id=456,
site_map_name="Default",
overrideable=False,
root_type="site_root",
flyouts="true",
max_levels="2",
flow="horizontal",
label="Advanced Menu"
%}
```
```text résultat.txt theme={null}
```
| Paramètre | Type | Description | Par défaut |
| - | - | - | - |
| `id` | Nombre | L'ID de l'arborescence de menu à partir de Menus avancés dans Paramètres de contenu. | |
| `site_map_name` | Chaîne | Le nom de l'arborescence de menu à partir de Menus avancés dans Paramètres de contenu. | `"default"` |
| `root_type` | Énumération | Permet d'indiquer le type de menus avancés. Les options sont : « site\_root », « top\_parent », « parent », « page\_name », « page\_id », et « breadcrumb ». Ces valeurs correspondent à statique, dynamique par section, dynamique par page et fil d'Ariane. | `"site_root"` |
| `flyouts` | Chaîne | Si la valeur est définie sur vrai, une classe est ajoutée à l'arborescence de menu qui peut être stylisée pour permettre aux éléments de menu enfants de s'afficher lorsque vous survolez le parent. Si la valeur est définie sur faux, les éléments de menu enfants s'affichent toujours. | `"true"` |
| `max_levels` | Nombre | Permet de déterminer le nombre de niveaux de menus imbriqués à restituer dans le balisage. Ce paramètre définit le nombre d'enfants d'arborescence de menu qui peuvent être développés dans le menu. | `2` |
| `flow` | Énumération | Permet de définir l'orientation des éléments de menu. Cela ajoute des classes à l'arborescence de menu, afin de pouvoir les styliser en conséquence. Les valeurs possibles sont : « horizontal », « vertical » ou « vertical\_flyouts ». Les menus horizontaux affichent les éléments côte à côte, et les menus verticaux vont de haut en bas. | `"horizontal"` |
| `root_key` | Chaîne | Permet de trouver la racine du menu. Lorsque la valeur root\_type est définie sur page\_id ou page\_name, ce paramètre doit être l'ID de la page ou le libellé de la page, respectivement. | `"horizontal"` |
| `label` | Chaîne | Du contenu enrichi pour décrire cette entité | `False` |
| `label` | Chaîne | Du contenu enrichi pour décrire cette entité | `False` |
## Require\_css
Une balise HubL qui met en file d'attente un élément de style à restituer dans l'élément ``.
Cette balise est similaire à la [fonction require\_css](/docs/cms/reference/hubl/functions#require-css), sauf qu'elle insère un style intraligne plutôt qu'à partir d'une feuille de style. Cette balise ne se déduplique pas non plus par rapport à d'autres instances de la CSS sur la même page. Si vous créez un module et que vous souhaitez insérer une feuille de style, mais que vous pouvez utiliser ce module plusieurs fois sur une seule page, vous pouvez utiliser la fonction `require_css` à la place.
```text entrée.txt theme={null}
{{ standard_header_includes }}
{% require_css %}
{% end_require_css %}
{{ standard_footer_includes }}
```
```text résultat.txt theme={null}
```
## Require\_head
Une balise HubL qui met en file d'attente tout ce qui est placé à l'intérieur dans `standard_header_includes` qui se trouve dans le `` du modèle. Pour la plupart des Javascript et CSS, consultez `require_js` et `require_css`. Parmi les cas d'utilisation de `require_head` figure la fourniture de méta-balises et de balises de liens spéciaux (comme prefetch et preconnect) à partir de modules.
```hubl theme={null}
{% require_head %}
{% end_require_head %}
```
## Require\_js
Une balise HubL qui met en file d'attente un élément de script à restituer. Pour mettre en file d'attente un script à restituer dans `
` à partir d'un fichier différent via un élément `` (et non intraligne comme indiqué ici), utilisez plutôt la fonction HubL [`require_js(absolute_url)`](/docs/cms/reference/hubl/functions#require-js).
```text entrée.txt theme={null}
{{ standard_header_includes }}
{% require_js position="footer" %}
{% end_require_js %}
{{ standard_footer_includes }}
```
```text résultat.txt theme={null}
```
| Paramètre | Type | Description | Par défaut |
| - | - | - | - |
| `position` | Chaîne | Permet de définir la position où le script intraligne sera restitué. Les options sont : `"head"` et `"footer"`. | `"footer"` |
## Texte enrichi
Crée un éditeur de contenu WYSIWYG.
```text entrée.txt theme={null}
{% rich_text "rich_text" %}
{% rich_text "left_column" label="Enter HTML here" html="
The headline and subheader tells us what you're offering, and the form header closes the deal. Over here you can explain why your offer is so great it's worth filling out a form for.
The headline and subheader tells us what you're offering, and the form
header closes the deal. Over here you can explain why your offer is so great
it's worth filling out a form for.
Remember:
Bullets are great
For spelling out benefits and
Turning visitors into leads.
```
| Paramètre | Type | Description | Par défaut |
| - | - | - | - |
| `html` | Chaîne | Le contenu de texte enrichi par défaut pour le module. | `
Something Powerful
Tell The Reader More
The headline and subheader tells us what you're offering, and the form header closes the deal. Over here you can explain why your offer is so great it's worth filling out a form for.
Remember:
Bullets are great
For spelling out [benefits](#) and
Turning visitors into leads.
` |
## Listing RSS
Charge une liste de contenu à partir d'un flux RSS interne ou externe.
> [!WARNING]
>
> ### Remarque :
>
> Ce module se charge de manière asynchrone côté client. Par conséquent, si vous souhaitez manipuler le flux après son chargement, vous devrez définir une fonction JS globale pour gérer cette manipulation. Utilisez la fonction `hsRssFeedComplete(feeds)`, où `feeds` est le sélecteur jQuery sur tous les flux qui ont été finalisés. Vous pouvez directement manipuler l'objet DOM dans cette fonction.
```text entrée.txt theme={null}
{% rss_listing "rss_listing" %}
{% rss_listing "my_rss_listing" rss_url="", publish_date_text="posted at", feed_source={rss_url="", is_external=False, content_group_id="30808594297"}, click_through_text="Read more", show_date=True, include_featured_image=True, overrideable=False, publish_date_format="short", show_detail=True, show_author=True, number_of_items="3", is_external=False, title="", content_group_id="24732847", label="RSS Listing", limit_to_chars="200", attribution_text="by" %}
```
```text résultat.txt theme={null}
First things first: Cron jobs are scripts that get executed based on
time. Understanding where this shorthand name comes from may help
you remember this:
Read more
This article was authored by a member of the HubSpot developer
community, Joshua Beatty.
Read more
```
| Paramètre | Type | Description | Par défaut |
| - | - | - | - |
| `show_title` | Booléen | Permet d'afficher ou masquer le titre du flux RSS. | `True` |
| `show_date` | Booléen | Permet d'afficher la date de publication. | `True` |
| `show_author` | Booléen | Permet d'afficher le nom de l'auteur. | `True` |
| `show_detail` | Booléen | Permet d'afficher le résumé du message jusqu'au nombre de caractères défini par le paramètre `limit_to_chars`. | `True` |
| `title` | Chaîne | Permet d'ajouter un en-tête au-dessus du listing de flux RSS. | |
| `limit_to_chars` | Nombre | Le nombre maximum de caractères à afficher dans le résumé. | `200` |
| `publish_date_format` | Chaîne | Le format de la date de publication. Les valeurs possibles sont : `"short"`, `"medium"` et `"long"`. Accepte également les formats personnalisés tels que : `"MMMM d, yyyy 'at' h:mm a"`. | `"short"` |
| `attribution_text` | Chaîne | Le texte qui attribue un auteur à un article. | `"by"` |
| `click_through_text` | Chaîne | Le texte qui s'affiche pour le lien d'un clic publicitaire à la fin d'un résumé d'article. | `"Read more"` |
| `publish_date_text` | Chaîne | Le texte qui indique quand un article a été publié. | `"posted at"` |
| `include_featured_image` | Booléen | Permet d'afficher les images en vignette avec lien de l'article pour les flux RSS générés par HubSpot. | `False` |
| `item_title_tag` | Chaîne | Permet d'indiquer la balise HTML de chaque titre d'article. | `span` |
| `is_external` | Booléen | Le flux RSS provient d'un blog externe. | `False` |
| `number_of_items` | Nombre | Le nombre maximal d'articles à afficher. | `5` |
| `publish_date_language` | Chaîne | Permet d'indiquer la langue de la date de publication. | `en_US` |
| `rss_url` | Chaîne | L'URL où se trouve le flux RSS. | |
| `content_group_id` | Chaîne | L'ID du blog lorsque la source du flux est un blog interne. | |
| `select_blog` | Chaîne | : peut être utilisée pour sélectionner un fil d'actualité de blog HubSpot interne. | `default` |
| `feed_source` | Chaîne | Permet de définir la source du flux RSS. Lorsqu'elle est interne, le format général est `{rss_url="", is_external=False, content_group_id="2502431580"}`. Lorsqu'elle est externe, le format général est `{rss_url="http://blog.hubspot.com/marketing/rss.xml", is_external=True}`. | |
| `tag_id` | Nombre | L'ID pour la balise lorsque la source du flux est un blog interne. | |
## En-tête de section
Génère un en-tête HTML et un sous-titre `
```
| Paramètre | Type | Description | Par défaut |
| - | - | - | - |
| `header` | Chaîne | Le texte à afficher dans l'en-tête. | `"A clear and bold header"` |
| `subheader` | Chaîne | Le texte à afficher dans le sous-titre. | `"A more subdued subheader"` |
| `heading_level` | Chaîne | Le niveau d'en-tête HTM sémantique (h1 à h6 pris en charge). | `"h1"` |
## Menu simple
Les menus simples vous permettent de créer des [menus de navigation](/docs/cms/start-building/building-blocks/modules/menus-and-navigation) de base qui peuvent être modifiés au niveau de la page. Contrairement aux modules de menu ordinaires, les menus simples ne sont pas gérés à partir de l'écran de navigation dans les paramètres du site web, mais à partir des éditeurs de modèle et de page. Vous pouvez utiliser la [syntaxe de bloc](/docs/cms/reference/modules/using-modules-in-templates#block-syntax) pour configurer une arborescence de menu par défaut.
```text entrée.txt theme={null}
{% simple_menu "simple_menu" %}
{% simple_menu "my_simple_menu" orientation="horizontal", label="Simple Menu" %}
Block Syntax Example:
{% widget_block simple_menu "block_simple_menu" overrideable=True, orientation="horizontal", label="Simple Menu" %}
{% widget_attribute "menu_tree" is_json=True %}[{"contentType": null, "subCategory": null, "pageLinkName": null, "pageLinkId": null, "isPublished": false, "categoryId": null, "linkParams": null, "linkLabel": "Home", "linkTarget": null, "linkUrl": "http://www.hubspot.com", "children": [], "isDeleted": false}, {"contentType": null, "subCategory": null, "pageLinkName": null, "pageLinkId": null, "isPublished": false, "categoryId": null, "linkParams": null, "linkLabel": "About", "linkTarget": null, "linkUrl": "http://www.hubspot.com/internet-marketing-company", "children": [{"contentType": null, "subCategory": null, "pageLinkName": null, "linkUrl": "http://www.hubspot.com/company/management", "isPublished": false, "children": [], "linkParams": null, "linkLabel": "Our Team", "linkTarget": null, "pageLinkId": null, "categoryId": null, "isDeleted": false}], "isDeleted": false}, {"contentType": null, "subCategory": null, "pageLinkName": null, "pageLinkId": null, "isPublished": false, "categoryId": null, "linkParams": null, "linkLabel": "Pricing", "linkTarget": null, "linkUrl": "http://www.hubspot.com/pricing", "children": [], "isDeleted": false}]{% end_widget_attribute %}
{% end_widget_block %}
```
```text résultat.txt theme={null}
```
| Paramètre | Type | Description | Par défaut |
| - | - | - | - |
| `orientation` | Énumération | Permet de définir les classes de balise de menu pour permettre de styliser l'orientation des éléments de menu sur la page. Les valeurs possibles sont : `"horizontal"` et `"vertical"`. | `"horizontal"` |
| `menu_tree` | JSON | La structure du menu comprenant les noms des liens des pages et les URL cibles. | `[]` |
## Partage sur les réseaux sociaux
Les balises de partage sur les réseaux sociaux génèrent des icônes de réseaux sociaux qui peuvent être utilisées pour partager une page particulière. Ce module peut être utilisé avec la [syntaxe de bloc](/docs/cms/reference/modules/using-modules-in-templates#block-syntax) pour personnaliser les images des icônes et plus encore.
```text entrée.txt theme={null}
{% social_sharing "social_sharing" %}
{% social_sharing "my_social_sharing" use_page_url=True %}
Block Syntax Example:
{% widget_block social_sharing "my_social_sharing" label="Social Sharing", use_page_url=True, overrideable=True %}
{% widget_attribute "pinterest" is_json=True %}{"custom_link_format": "", "pinterest_media": "http://cdn1.hubspot.com/hub/158015/305390_10100548508246879_837195_59275782_6882128_n.jpg", "enabled": true, "network": "pinterest", "img_src": "https://static.hubspot.com/final/img/common/icons/social/pinterest-24x24.png"}{% end_widget_attribute %}
{% widget_attribute "twitter" is_json=True %}{"custom_link_format": "", "enabled": true, "network": "twitter", "img_src": "https://static.hubspot.com/final/img/common/icons/social/twitter-24x24.png"}{% end_widget_attribute %}
{% widget_attribute "linkedin" is_json=True %}{"custom_link_format": "", "enabled": true, "network": "linkedin", "img_src": "https://static.hubspot.com/final/img/common/icons/social/linkedin-24x24.png"}{% end_widget_attribute %}
{% widget_attribute "facebook" is_json=True %}{"custom_link_format": "", "enabled": true, "network": "facebook", "img_src": "https://static.hubspot.com/final/img/common/icons/social/facebook-24x24.png"}{% end_widget_attribute %}
{% widget_attribute "email" is_json=True %}{"custom_link_format": "", "enabled": true, "network": "email", "img_src": "https://static.hubspot.com/final/img/common/icons/social/email-24x24.png"}{% end_widget_attribute %}
{% end_widget_block %}
```
```text résultat.txt theme={null}
```
| Paramètre | Type | Description | Par défaut |
| - | - | - | - |
| `use_page_url` | Booléen | Si la valeur est définie sur vrai, le module partage l'URL de la page par défaut. | `True` |
| `link` | Chaîne | Permet d'indiquer une URL différente à partager, si la valeur `use_page_url` définie sur faux. | |
| `pinterest` | JSON | Les paramètres pour le format du lien Pinterest et la source de l'image de l'icône. | `See block syntax example, above` |
| `twitter` | JSON | Les paramètres pour le format du lien Twitter et la source de l'image de l'icône. | `See block syntax example, above` |
| `linked_in` | JSON | Les paramètres pour le format du lien LinkedIn et la source de l'image de l'icône. | `See block syntax example, above` |
| `facebook` | JSON | Les paramètres pour le format du lien Facebook et la source de l'image de l'icône. | `See block syntax example, above` |
| `email` | JSON | Les paramètres pour le format du lien de partage par e-mail et la source de l'image de l'icône. | `See block syntax example, above` |
## Espacement
Une balise spacer génère une balise span vide. Cette balise peut être stylisée pour servir d'espacement. Dans les mises en page par glisser-déposer, le module d'espacement est encadré dans un conteneur dont la classe est span1-span12 afin de déterminer l'espace que le module doit occuper dans la grille adaptative à douze colonnes.
```text entrée.txt theme={null}
{% space "space" %}
{% space "spacer" label="Horizontal Spacer" %}
```
```text résultat.txt theme={null}
```
## Balises de page système
Les balises suivantes peuvent être utilisées sur les [pages système](https://developers.hubspot.fr/docs/cms/start-building/building-blocks/templates/overview#system-pages), telles que les pages de réinitialisation du mot de passe ou d'abonnement aux e-mails.
### Désabonnement à la sauvegarde des e-mails
La page de désabonnement alternative s'affiche lorsque HubSpot ne parvient pas à identifier l'adresse e-mail du destinataire d'un e-mail qui cherche à se désabonner. Cette balise restitue un formulaire permettant au contact de saisir son adresse e-mail pour se désabonner des communications par e-mail. Elle doit être utilisée sur un [modèle système de désabonnement alternatif](https://knowledge.hubspot.com/fr/design-manager/use-system-templates-to-customize-error-subscription-and-password-prompt-pages).
```text entrée.txt theme={null}
{% email_simple_subscription "email_simple_subscription" %}
{% email_simple_subscription "email_simple_subscription"
header="Email Unsubscribe",
input_help_text="Your email address:",
input_placeholder="email@example.com",
button_text="Unsubscribe",
label="Backup Unsubscribe"
%}
```
```text résultat.txt theme={null}
Email Unsubscribe
```
| Paramètre | Type | Description | Par défaut |
| - | - | - | - |
| `header` | Chaîne | Permet de restituer le texte dans une balise h1 au-dessus du formulaire de désabonnement. | `"Email Unsubscribe"` |
| `input_help_text` | Chaîne | Permet de restituer le texte d'aide dans une balise h3 au-dessus du champ de votre formulaire de désabonnement aux e-mails. | `"Your email address:"` |
| `input_placeholder` | Chaîne | Permet d'ajouter un texte d'espace réservé dans le champ de formulaire d'adresse e-mail. | `"email@example.com"` |
| `button_text` | Chaîne | Permet de modifier le texte du bouton d'envoi du formulaire de désabonnement. | `"Unsubscribe"` |
### Abonnements aux e-mails
Ce module s'affiche lorsqu'un destinataire d'un e-mail cherche à modifier ses préférences d'abonnement. Il doit être utilisé sur un [modèle système de préférences d'abonnement.](https://knowledge.hubspot.com/fr/design-manager/use-system-templates-to-customize-error-subscription-and-password-prompt-pages)
```text entrée.txt theme={null}
{% email_subscriptions "email_subscriptions" %}
{% email_subscriptions "email_subscriptions"
resubscribe_button_text="Yes, resubscribe me!",
unsubscribe_single_text="Uncheck the types of emails you do not want to receive:",
subheader_text="\n If this is not your email address, please ignore this page since the email associated with this page was most likely forwarded to you.\n",
unsubscribe_all_unsubbed_text="You are presently unsubscribed from all of our emails. Would you like to receive our emails again?",
button_text="Update email preferences", label="Subscription Preferences", header="Communication Preferences",
unsubscribe_all_option="Unsubscribe me from all mailing lists.",
unsubscribe_all_text="Or check here to never receive any emails:"
%}
```
```text résultat.txt theme={null}
```
| Paramètre | Type | Description | Par défaut |
| - | - | - | - |
| `header` | Chaîne | Permet de restituer le texte dans une balise h1 au-dessus du formulaire de préférences d'abonnement. | `"Communication Preferences"` |
| `subheader_text` | Chaîne | Permet d'ajouter du texte sous l'en-tête au-dessus des préférences de désabonnement. | `"
If this is not your email address, please ignore this page since the email associated with this page was most likely forwarded to you.
"` |
| `unsubscribe_single_text` | Chaîne | Permet de restituer le texte dans un élément `
` au-dessus des options d'abonnement. | `"Uncheck the types of emails you do not want to receive:"` |
| `unsubscribe_all_text` | Chaîne | Permet de restituer le texte dans un élément `
` au-dessus de la case à cocher de désabonnement de tous les e-mails. | `"Or check here to never receive any emails:"` |
| `unsubscribe_all_unsubbed_text` | Chaîne | Permet d'ajouter du texte dans un élément `
` restitué si un contact est actuellement désabonné de tous les e-mails. | `"You are presently unsubscribed from all of our emails. Would you like to receive our emails again?"` |
| `unsubscribe_all_option` | Chaîne | Permet de définir le texte situé à côté de la case à cocher Se désabonner de tous les e-mails. | `"Unsubscribe me from all mailing lists."` |
| `button_text` | Chaîne | Permet de définir le texte du bouton d'envoi qui met à jour les préférences d'abonnement. | `"Update email preferences"` |
| `resubscribe_button_text` | Chaîne | Permet de définir le texte du bouton d'envoi pour les contacts qui se réabonnent. | `"Yes, resubscribe me!"` |
### Confirmation des abonnements aux e-mails
La confirmation des abonnements aux e-mails est un module qui peut être ajouté au modèle de remerciement lorsqu'un destinataire met à jour ses préférences d'abonnement ou se désabonne. Il doit être utilisé sur un [modèle système de préférences d'abonnement.](https://knowledge.hubspot.com/fr/design-manager/use-system-templates-to-customize-error-subscription-and-password-prompt-pages)
```text entrée.txt theme={null}
{% email_subscriptions_confirmation "email_subscriptions_confirmation" %}
{% email_subscriptions_confirmation "email_subscriptions_confirmation"
label="Subscriptions Update Confirmation",
unsubscribe_all_success="You have successfully unsubscribed from all email communications.",
subscription_update_success="You have successfully updated your email preferences.",
subheader_text="\n If this is not your email address, please ignore this page since the email associated with this page was most likely forwarded to you.\n"
%}
```
```text résultat.txt theme={null}
example@email.com
If this is not your email address, please ignore this page since the
email associated with this page was most likely forwarded to you.
You have successfully updated your email preferences.
```
| Paramètre | Type | Description | Par défaut |
| - | - | - | - |
| `header` | Chaîne | Permet de restituer le texte dans une balise h1 au-dessus du formulaire de désabonnement. | `"Communication Preferences"` |
| `subheader_text` | Chaîne | Permet d'ajouter du texte au-dessus du message de confirmation. | `"
If this is not your email address, please ignore this page since the email associated with this page was most likely forwarded to you.
"` |
| `unsubscribe_all_success` | Chaîne | Permet de définir le texte qui s'affiche lorsqu'une personne se désinscrit de toutes les communications par e-mail. | `"You have successfully unsubscribed from all email communications."` |
| `subscription_update_success` | Chaîne | Permet de définir le texte lorsqu'un destinataire met à jour ses préférences d'abonnement. | `"You have successfully updated your email preferences."` |
### Connexion des membres
Crée un formulaire de connexion pour donner accès à un [contenu privé](https://knowledge.hubspot.com/fr/website-pages/require-member-registration-to-access-private-content).
```text entrée.txt theme={null}
{% member_login "my_login" %}
{% member_login "my_login"
email_label="Email",
password_label="Password",
remember_me_label="Remember Me",
reset_password_text="Forgot your password?",
submit_button_text="Login",
show_password="Show password"
%}
```
```text résultat.txt theme={null}
You've made too many attempts at this request. Please try this action again
in a few minutes.
```
| Paramètre | Type | Description | Par défaut |
| - | - | - | - |
| `email_label` | Chaîne | Le libellé du champ de saisie de l'e-mail. | `"Email"` |
| `password_label` | Chaîne | Le libellé du champ de saisie du mot de passe. | `"Password"` |
| `remember_me_label` | Chaîne | Le libellé de la case à cocher « Se souvenir de moi ». | `"Remember Me"` |
| `reset_password_text` | Chaîne | Le texte de l'hyperlien de réinitialisation du mot de passe. | `"Forgot your password?"` |
| `submit_button_text` | Chaîne | Le texte du bouton de soumission. | `"Login"` |
| `show_password` | Chaîne | Le texte du lien de révélation du mot de passe. | `"Show password"` |
### Inscription des membres
Crée un formulaire permettant de s'inscrire pour accéder à un [contenu privé](https://knowledge.hubspot.com/fr/website-pages/require-member-registration-to-access-private-content).
```text entrée.txt theme={null}
{% member_register "my_register" %}
{% member_register "my_register"
email_label="Email",
password_label="Password",
password_confirm_label="Confirm Password",
submit_button_text="Save Password",
show_password="Show password"
%}
```
```text résultat.txt theme={null}
```
| Paramètre | Type | Description | Par défaut |
| - | - | - | - |
| `email_label` | Chaîne | Le libellé du champ de saisie de l'e-mail. | `"Email"` |
| `password_label` | Chaîne | Le libellé du champ de saisie du mot de passe. | `"Password"` |
| `password_confirm_label` | Chaîne | Le libellé du champ de confirmation du mot de passe. | `"Confirm Password"` |
| `submit_button_text` | Chaîne | Le texte du bouton de soumission. | `"Save Password"` |
| `show_password` | Chaîne | Le texte du lien de révélation du mot de passe. | `"Show password"` |
### Demande de réinitialisation du mot de passe
Crée un formulaire pour envoyer un e-mail de réinitialisation de mot de passe pour l'accès aux pages protégées par un mot de passe.
```text entrée.txt theme={null}
{% password_reset_request "my_password_reset_request" %}
{% password_reset_request "my_password_reset_request"
email_label="Email",
submit_button_text="Send Reset Email"
%}
```
```text résultat.txt theme={null}
```
| Paramètre | Type | Description | Par défaut |
| - | - | - | - |
| `email_label` | Chaîne | Le libellé du champ de saisie de l'e-mail. | `"Email"` |
| `submit_button_text` | Chaîne | Le texte du bouton de soumission. | `"Send Reset Email"` |
| `password_reset_message` | Chaîne | Le message qui s'affiche après avoir demandé l'e-mail de réinitialisation du mot de passe. | `False` |
### Réinitialisation de mot de passe
Affiche un formulaire de réinitialisation de mot de passe pour accéder aux pages protégées par mot de passe.
```text entrée.txt theme={null}
{% password_reset "my_password_reset" password_label="Password", password_confirm_label="Confirm Password", submit_button_text="Save password", show_password="Show password" %}
```
```text résultat.txt theme={null}
```
| Paramètre | Type | Description | Par défaut |
| - | - | - | - |
| `password_label` | Chaîne | Le libellé de texte pour le champ de saisie du mot de passe. | `"Email"` |
| `password_confirm_label` | Chaîne | Le libellé de texte pour le champ de saisie de confirmation du mot de passe. | `"Send Reset Email"` |
| `submit_button_text` | Chaîne | Le libellé de texte pour le bouton de soumission de formulaire. | `False` |
| `show_password` | Chaîne | Le libellé de texte pour le bouton d'affichage de la valeur du mot de passe saisie. | `False` |
| `password_requirements` | Chaîne | Le libellé de texte qui décrit les exigences en matière de mot de passe. | `False` |
### Invite de mot de passe
Ajoute une invite de mot de passe pour les pages protégées par un mot de passe.
```text entrée.txt theme={null}
{% password_prompt "password_prompt" %}
{% password_prompt "my_password_prompt"
submit_button_text="Submit",
bad_password_message="Sorry, please try again.\n",
label="Password Prompt"
%}
```
```text résultat.txt theme={null}
```
| Paramètre | Type | Description | Par défaut |
| - | - | - | - |
| `submit_button_text` | Chaîne | Le libellé du bouton situé sous le champ de saisie du mot de passe. | `"Submit"` |
| `bad_password_message` | Chaîne | Le message affiché si un mot de passe incorrect a été saisi. | `"
```
```css theme={null}
/* module.css */
/* CSS that makes the image show adjacent to the text,
and positioned based on the positioning field.*/
/* The media query ensures that on mobile the image
will always appear above the text for
visual consistency. */
@media (min-width: 768px) {
.img-text__wrapper {
display: flex;
align-items: row;
}
.img-text__img,
.img-text__text {
flex: 1;
padding: 10px;
}
.img-text--img-right {
flex-direction: row-reverse;
}
}
```
### bloc require\_css
Lorsque vous devez donner aux créateurs de contenu un contrôle direct sur des propriétés spécifiques et que les classes ne sont pas idéales, les balises de style avec blocs `require_css` sont la meilleure option.
Pour donner aux créateurs de contenu un contrôle direct sur des propriétés spécifiques sans utiliser de classes, vous pouvez ajouter du style au fichier `module.html` dans les balises `require_css`. Par exemple :
```hubl theme={null}
{% require_css %}
{% end_require_css %}
```
Comme `module.html` peut rendre HubL, vous pouvez utiliser les valeurs des champs du module comme variables CSS. Lorsqu'un créateur de contenu met à jour le champ dans l'éditeur de page, la CSS est mise à jour en conséquence. Ces blocs déplacent les balises `
{% end_require_css %}
```
### Ajouter un style intraligne
Lorsque vous devez donner aux créateurs de contenu un contrôle poussé sur quelques propriétés seulement et que les classes ne sont pas idéales, vous pouvez ajouter directement les valeurs à un attribut de style dans le HTML.
```hubl theme={null}
{# Module.html #}
```
Si vous avez de nombreuses propriétés et que le code devient difficile à lire, envisagez de passer à la méthode du bloc `require_css`.
### Importer des fichiers CSS spécifiques
`require_css` est une fonction HubL que vous pouvez ajouter à module.html et qui indique à HubSpot qu'un module ou un modèle particulier nécessite un fichier CSS particulier pour s'afficher. Une balise de lien pointant vers le fichier css est ajoutée à `` de la page, à l'intérieur de `standard_header_includes`.
La fonction `require_css` ne chargera ce fichier CSS qu'une seule fois, quel que soit le nombre de fois où ce même fichier est requis par les modules et les modèles sur une page particulière. Il est donc idéal pour les situations où les styles peuvent être partagés entre plusieurs modules, mais où l'ajout de CSS directement dans les feuilles de style principales utilisées sur chaque page de votre site n'a pas de sens.
`require_css` et les fichiers CSS associés remplissent le même objectif, mais `require_css` peut être utilisé de manière conditionnelle en fonction des valeurs des champs. Cela évite de charger du code inutile.
```hubl theme={null}
{{ require_css(get_asset_url("/modules/shared_layout_styles.css")) }}
```
## JavaScript (module.js)
Utilisez le fichier `module.js` pour ajouter du JavaScript à un module.
Comme le fichier `module.css`, le fichier `module.js` ne prend pas en charge HubL.
### Script basé sur les valeurs des champs
Il existe plusieurs façons de concevoir des modules, où JavaScript agit différemment en fonction des valeurs des champs. Comprendre quelle méthode utiliser et à quel moment peut se traduire par des gains de performance sur chaque page où le module est utilisé.
Par exemple, vous avez un module d'image personnalisé et vous voulez donner aux créateurs de contenu la possibilité d'ouvrir l'image dans une galerie. Les créateurs de contenu veulent l'utiliser que pour des images spécifiques, et non pour toutes les instances du module.
### Attributs des données
Les attributs de données sont des attributs personnalisés de la norme HTML 5 que les développeurs ajoutent aux éléments. De même que tous les éléments prennent en charge `class="yourClassName"`, tous les éléments prennent en charge `data-your-attribute="yourValue"`.
```hubl theme={null}
```
Vous pouvez utiliser les attributs de données pour transmettre les valeurs des champs de vos instances de module qui seront traitées par votre fichier module.js.
Pour utiliser les valeurs de votre fichier module.js, vous devrez parcourir en boucle toutes les instances de votre module. L'ajout d'un nom de classe spécifique au module à l'élément encadreur le plus externe de votre module vous donnera une cible à utiliser, afin que vous puissiez parcourir en boucle chacune de vos instances de module.
```js theme={null}
// module.js
let imgModules = document.getElementsByClassName("img-module");
Array.from(imgModules).forEach(function (element) {
// loop through each of the instances of the module
// set data attributes to variables to make it easy to work with
let isLightboxEnabled = element.dataset.lightbox;
let captionStyle = element.dataset.caption;
if (isLightboxEnabled) {
element.addEventListener("click", function () {
showLightbox(captionStyle); // Execute your code for the action you want to take, you can pass your data attributes into functions from libraries.
});
}
});
```
Les attributs de données vous permettront de récupérer les valeurs des champs pour chaque instance de module dans votre module.js.
### bloc require\_js
Dans des situations avancées, par exemple lors de l'utilisation d'une bibliothèque de modèles JavaScript ou d'un cadre réactif comme Vue.js ou React.js, vous préférerez peut-être n'afficher que les données, et voir le cadre se charger du rendu.
Dans ce cas, utilisez une balise script entourée d'un bloc [`require_js`](/docs/cms/reference/hubl/functions#require-js) pour fournir des variables auxquelles vous pouvez accéder à partir de votre script de modélisation.
```hubl theme={null}
{% require_js %}
{% end_require_js %}
```
Cette technique peut être utile pour fournir aux applications avancées un ensemble initial de données à partir desquelles effectuer le rendu. Cela élimine un appel JavaScript initial pour récupérer les données.
### require\_js
[`require_js`](/docs/cms/reference/hubl/functions#require-js) est une fonction HubL qui indique à HubSpot qu'un module ou un modèle particulier nécessite un fichier JavaScript particulier pour être chargé correctement. La fonction prend deux paramètres : le chemin d'accès au fichier et l'emplacement où le fichier doit être ajouté ("head" ou "footer").
Dans un module, `require_js` ne peut être ajouté que dans le module.html. Le fichier JavaScript mentionné dans l'annonce `require_js` ne sera chargé qu'une fois par page, quel que soit le nombre de fois où il est requis par les modules et les modèles de la page. Cela réduit le nombre de requêtes HTTP et évite la duplication du code.
Certaines situations où cela devient pratique :
* Si vous avez plusieurs modules ou modèles qui nécessitent le même JavaScript, vous pouvez utiliser `require_js` pour partager ce script entre les modules.
* Si vous travaillez avec un pack JavaScript comme webpack, il peut être plus facile d'envoyer vos fichiers js à un emplacement spécifique. En utilisant `require_js`, vous pouvez associer JavaScript à votre module.
`require_js` et les fichiers JavaScript associés servent le même objectif, mais `require_js` peut être fait de manière conditionnelle en fonction des valeurs des champs. Cela évite de charger du code inutile. Vous avez également la possibilité de charger JavaScript dans l'en-tête, si vous en avez besoin.
> [!TIP]
>
> Puisque JavaScript bloque le rendu, l'emplacement par défaut [`require_js`](/docs/cms/reference/hubl/functions#require-js) pour JavaScript est le "footer". [En savoir plus sur l'optimisation des performances.](/docs/cms/best-practices/testing-staging-performance/speed)
## Informations associées
* [Optimiser la vitesse de votre site CMS Hub](/docs/cms/best-practices/testing-staging-performance/speed)
* [Modules](https://developers.hubspot.fr/docs/guides/cms/content/modules/overview)
* [Champs de module](https://developers.hubspot.fr/docs/guides/cms/content/fields/overview)
# Using modules in templates
Source: https://developers.hubspot.fr/docs/cms/reference/modules/using-modules-in-templates
# Créer les bilans de santé
Source: https://developers.hubspot.fr/docs/cms/reference/react/build-health-checks
# Bibliothèque @hubspot/cms-components
Source: https://developers.hubspot.fr/docs/cms/reference/react/cms-components-library
# Îles
Source: https://developers.hubspot.fr/docs/cms/reference/react/islands
# JS Partials
Source: https://developers.hubspot.fr/docs/cms/reference/react/js-partials
# Développement local
Source: https://developers.hubspot.fr/docs/cms/reference/react/local-development
# Stylisation CMS React
Source: https://developers.hubspot.fr/docs/cms/reference/react/styling
# Test pour CMS React
Source: https://developers.hubspot.fr/docs/cms/reference/react/testing
# Référence des fonctions sans serveur (gestionnaire de conception)
Source: https://developers.hubspot.fr/docs/cms/reference/serverless-functions/serverless-functions
Profitez d'informations de référence pour fonctions sans serveur créées avec la gestionnaire de conception, notamment les serverless.json, les fichiers de fonction, les points de terminaison, les commandes d'ILC et la gestion des packages.
> **Produits pris en charge**
> [!WARNING]
>
> ### Remarque :
>
> Cette page contient des informations de référence pour les fonctions sans serveur créées à l'aide du gestionnaire de conception. Historiquement, il s'agit de la façon originale de créer des fonctions sans serveur pour vos pages CMS et elle est toujours prise en charge. Cependant, à l'avenir, il est recommandé de [créer et de déployer des fonctions sans serveur avec des projets développeur HubSpot](/docs/cms/start-building/features/serverless-functions/getting-started-with-serverless-functions). Les fonctions sans serveur basées sur des projets peuvent inclure des dépendances tierces et avoir un accès plus direct à l'authentification via des jetons d'accès d'application privée.
Dans cet article, découvrez les fichiers contenus dans un [dossier `.functions` sans serveur](/docs/cms/start-building/features/serverless-functions/overview#serverless-function-folders) ainsi que les commandes d'ILC que vous pouvez utiliser avec les fonctions sans serveur.
Pour un aperçu de haut niveau des fonctions sans serveur, consultez la [présentation des fonctions sans serveur](/docs/cms/start-building/features/serverless-functions/overview).
Pour plus d'informations sur la création de fonctions sans serveur avec des projets pour les [modules et partials rendus JavaScript](https://github.hubspot.com/cms-js-building-block-examples/), consultez la [documentation relative aux projets de développement](https://developers.hubspot.fr/docs/cms/reference/serverless-functions/serverless-functions-in-projects).
## Serverless.json
Dans le dossier `.functions`, le fichier `serverless.json` stocke la configuration de la fonction sans serveur. Ce fichier est obligatoire et mappe vos fonctions à leurs [points de terminaison](#endpoints).
```json theme={null}
{
"runtime": "nodejs20.x",
"version": "1.0",
"environment": {
"globalConfigKey": "some-value"
},
"secrets": ["secretName"],
"endpoints": {
"events": {
"file": "function1.js",
"method": "GET"
},
"events/update": {
"method": "POST",
"file": "action2.js",
"environment": {
"CONFIG_KEY": "some-other-value"
},
"secrets": ["googleKeyName", "otherkeyname"]
}
}
}
```
| clé | Type | Description |
| - | - | - |
| `runtime` | Chaîne | L'environnement d'exécution. Prend en charge [Node.js](https://nodejs.org/en/about/) v20 (`nodejs20.x`). |
| `version` | Chaîne | La version du schéma de la fonction sans serveur HubSpot. (Version actuelle 1.0) |
| `environment` | Objet | Les variables de configuration transmises à la fonction d'exécution en tant que [variables d'environnement](https://nodejs.org/docs/latest-v10.x/api/process.html#process_process_env) au moment de l'exécution. Vous pouvez utiliser cela pour ajouter une logique permettant d'utiliser une version de test d'une API au lieu de la véritable API, en fonction d'une variable d'environnement. |
| `secrets` | Tableau | Un tableau contenant les noms des [secrets](#secrets) que votre fonction sans serveur utilisera à des fins d'authentification. Ne stockez pas les secrets directement dans ce fichier. Indiquez seulement leurs noms. |
| `endpoints` | Objet | Les points de terminaison définissent les chemins qui sont exposés et leur correspondance avec des fichiers JavaScript spécifiques dans votre dossier de fonctions. Découvrez-en davantage sur les [points de terminaison ci-dessous](#endpoints). |
> [!NOTE]
>
> HubSpot [ne prendra plus en charge le nœud 18 au-delà du](https://developers.hubspot.com/changelog/deprecation-of-node-v18-in-all-serverless-functions-and-cli) 1er octobre 2025. Au-delà de cette date, les fonctions sans serveur dont le runtime est inférieur à v20 ne pourront plus être déployées.\\
> [!WARNING]
>
> ### Remarque :
>
> N'attribuez pas le même nom à vos secrets et à vos variables d'environnement. Cela entraînera des conflits lors du renvoi de leurs valeurs dans la fonction.
### Points de terminaison
Chaque point de terminaison peut avoir ses propres [variables d'environnement](https://nodejs.org/docs/latest-v10.x/api/process.html#process_process_env) et secrets. Les variables spécifiées en dehors des points de terminaison doivent être utilisées pour les paramètres de configuration qui s'appliquent à toutes les fonctions et à tous les points de terminaison.
```json theme={null}
"events/update": {
"method": "POST",
"file": "action2.js",
"environment": {
"configKey": "some-other-value"
},
"secrets": ["googleAPIKeyName","otherKeyName"]
}
```
| clé | Type | Description |
| - | - | - |
| `method` | Chaîne ou tableau de chaînes | [La ou les méthodes HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Methods) que le point de terminaison prend en charge. La valeur par défaut est [GET](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Methods/GET). |
| `file` | Chaîne | Le chemin d'accès au fichier de fonction JavaScript avec l'implémentation pour le point de terminaison. |
Le point de terminaison peut être appelé en appelant une URL de l'un des domaines connectés au compte HubSpot, y compris les sous-domaines par défaut `.hs-sites.com`, avec la structure d'URL suivante :
`https://{domainName}/_hcms/api/{endpoint-name/path}?portalid={hubId}`.
| Paramètre | Description |
| - | - |
| `domainName` | Un domaine connecté au compte HubSpot. |
| `/_hcms/api/` | Le chemin d'accès réservé aux fonctions sans serveur. Tous les points de terminaison se trouvent à l'intérieur de ce chemin. |
| `endpoint-name/path` | Le nom ou le chemin d'accès du point de terminaison que vous avez spécifié dans le fichier `serverless.json`. |
| `portalid` | Un paramètre de requête facultatif contenant votre ID de compte HubSpot. En fournissant ces informations dans la requête, vous pourrez tester vos fonctions dans les aperçus de modules et de modèles. |
Par exemple, si `website.com` et `subdomain.brand.com` sont connectés au compte, vous pouvez appeler la fonction à l'aide de `https://website.com/_hcms/api/{endpoint-name/path}` ou `https://subdomain.brand.com/_hcms/api/{endpoint-name/path}`.
## Fichier de fonction
Outre le fichier de configuration `serverless.json`, le dossier `.functions` contiendra également un fichier JavaScript [Node.js](https://nodejs.org/en/) qui définit la fonction. Vous pouvez également utiliser la bibliothèque de [requêtes](https://github.com/request/request#readme) pour effectuer une requête HTTP vers les [API de HubSpot](https://developers.hubspot.fr/docs/api-reference/overview) et d'autres API.
Par exemple :
```js theme={null}
// Require axios library, to make API requests.
const axios = require("axios");
// Environment variables from your serverless.json
// process.env.globalConfigKey
exports.main = (context, sendResponse) => {
// your code called when the function is executed
// context.params
// context.body
// context.accountId
// context.limits
// secrets created using the CLI are available in the environment variables.
// process.env.secretName
//sendResponse is what you will send back to services hitting your serverless function.
sendResponse({ body: { message: "my response" }, statusCode: 200 });
};
```
### Objet contextuel
L'objet contextuel contient des informations contextuelles sur l'exécution de la fonction, stockées dans les paramètres suivants.
| Paramètre | Description |
| - | - |
| `accountId` | L'ID du compte HubSpot contenant la fonction. |
| `body` | Renseigné si la requête est envoyée en tant que `POST` avec un type de contenu `application/json`. |
| `contact` | Si la requête provient d'un contact intégré dans des cookies, l'objet de contact sera renseigné avec un ensemble de propriétés de contact de base ainsi que les informations suivantes :
`vid` : l'ID visiteur du contact.
`isLoggedIn` : lorsque vous utilisez le contrôle d'accès au CMS, la valeur sera définie sur `true` si le contact est connecté au domaine.
`listMemberships` : un tableau d'ID de listes de contacts dont ce contact est membre.
|
| `headers` | Contient les [en-têtes](#headers) envoyés par le client qui atteint votre point de terminaison. |
| `params` | Renseigné avec les valeurs de la chaîne de requête ainsi que les valeurs HTML Form-POST. Celles-ci sont structurées comme une carte avec des chaînes de caractères comme clés et un tableau de chaînes de caractères pour chaque valeur.`context.params.yourvalue` |
| `limits` | Renvoie le degré de rapprochement quant aux [limites associées aux fonctions sans serveur](/docs/cms/start-building/features/serverless-functions/overview#know-your-limits).
`executionsRemaining` : le nombre d'exécutions par minute restantes.
`timeRemaining` : le temps d'exécution autorisé restant.
|
### En-têtes
Si vous avez besoin de connaître les en-têtes du client qui atteint votre point de terminaison, vous pouvez y accéder via `context.headers`, de la même manière que vous accéderiez aux informations via `context.body`.
Vous trouverez ci-dessous certains des en-têtes courants fournis par HubSpot. Pour obtenir la liste complète, consultez la [documentation des en-têtes HTTP de MDN](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers).
| en-tête | Description |
| - | - |
| `accept` | Indique quels types de contenu, exprimés en [types MIME](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/MIME_types), le client comprend. [Voir MDN](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Accept). |
| `accept-encoding` | Communique le codage du contenu que le client comprend. [Voir MDN](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Accept-Encoding). |
| `accept-language` | Indique la langue et les paramètres régionaux préférés. [Voir MDN](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Accept-Language). |
| `cache-control` | Contient des directives pour la mise en cache. [Voir MDN](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Cache-Control). |
| `connection` | Indique si la connexion réseau reste ouverte. [Voir MDN](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Connection). |
| `cookie` | Contient les cookies envoyés par le client. [Voir MDN](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Cookie). |
| `host` | Communique le nom de domaine et le numéro de port TCP d'un serveur en écoute. [Voir MDN](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Host). |
| `true-client-ip` | Adresse IP de l'utilisateur final. [Consultez Cloudflare true-client-ip](https://developers.cloudflare.com/network/true-client-ip-header/). |
| `upgrade-insecure-requests` | Communique la préférence du client pour une réponse chiffrée et authentifiée. [Voir MDN](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Upgrade-Insecure-Requests). |
| `user-agent` | Chaîne définie par le fournisseur identifiant l'application, le système d'exploitation, le fournisseur de l'application et la version. [Voir MDN](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/User-Agent). |
| `x-forwarded-for` | Identifie l'adresse IP d'origine d'un client via un proxy ou un équilibreur de charge. [Voir MDN](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/X-Forwarded-For). |
#### Rediriger en envoyant un en-tête
Vous pouvez effectuer une redirection depuis votre fonction sans serveur en envoyant une réponse avec un en-tête de *localisation* et un statusCode `301`.
```js theme={null}
sendResponse({
statusCode: 301,
headers: {
Location: "https://www.example.com",
},
});
```
### Définir des cookies à partir de votre point de terminaison
Depuis votre fonction sans serveur, vous pouvez indiquer au client (navigateur web) de définir un cookie.
```js theme={null}
exports.main = (context, sendResponse) => {
sendResponse({
body: { ... },
'Set-Cookie': 'myCookie1=12345; expires=...; Max-Age=...',
statusCode: 200
});
}
```
### Définir plusieurs valeurs pour un seul en-tête
Pour les en-têtes qui prennent en charge plusieurs valeurs, vous pouvez utiliser `multiValueHeaders` pour transmettre les valeurs. Par exemple, vous pouvez demander au navigateur d'installer plusieurs cookies.
```js theme={null}
exports.main = (context, sendResponse) => {
sendResponse({
body: { ... },
multiValueHeaders: {
'Set-Cookie': [
'myCookie1=12345; expires=...; Max-Age=...',
'myCookie2=56789; expires=...; Max-Age=...'
]
},
statusCode: 200
});
}
```
## Secrets
Lorsque vous devez authentifier une requête de fonction sans serveur, vous utiliserez des secrets pour stocker des valeurs telles que des clés d'API ou des jetons d'accès à des applications privées. À l'aide de l'ILC, vous pouvez ajouter des secrets à votre compte HubSpot pour stocker ces valeurs, auxquelles vous pourrez accéder ultérieurement via des variables d'environnement (`process.env.secretName`). Les secrets sont gérés via l'ILC de HubSpot à l'aide des commandes suivantes :
* [`hs secrets list`](/docs/developer-tooling/local-development/hubspot-cli/reference#list-secrets)
* [`hs secrets add`](/docs/developer-tooling/local-development/hubspot-cli/reference#add-a-secret)
* [`hs secrets delete`](/docs/developer-tooling/local-development/hubspot-cli/reference#remove-a-secret)
Une fois ajoutés par le biais de l'ILC, les secrets peuvent être disponibles pour des fonctions en incluant un tableau de `secrets` contenant le nom du secret. Cela vous permet de stocker votre code de fonction dans le système de [contrôle de version](/docs/cms/start-building/introduction/developer-environment/github-integration) et d'utiliser des secrets sans les diffuser. Cependant, vous ne devez jamais renvoyer la valeur de votre secret par le biais du journal de la console ou comme réponse, sous peine de diffuser le secret dans les journaux ou dans les interfaces qui exécutent votre fonction sans serveur.
> [!WARNING]
>
> ### Remarque :
>
> En raison de la mise en cache, il peut s'écouler environ une minute pour que les valeurs secrètes se mettent à jour. Si vous venez de mettre à jour un secret mais que vous voyez toujours l'ancienne valeur, vérifiez à nouveau au bout d'une minute environ.
## Utilisation de fonctions sans serveur avec l'élément de formulaire
Lors de la soumission des fonctions sans serveur, utilisez JavaScript pour gérer la soumission du formulaire et utilisez l'en-tête `"contentType" : "application/json"` dans votre requête. N'utilisez pas l'attribut `action` des éléments `