> ## Documentation Index
> Fetch the complete documentation index at: https://developers.hubspot.fr/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Balises HubL standard

> Profitez d'un guide de référence complet sur la syntaxe et les paramètres disponibles pour toutes les balises HubL.

Cette page est un guide de référence complet de la syntaxe et des paramètres disponibles pour toutes les balises HubL standard, y compris les [balises pour les pages système](#system-page-tags), telles que la page d'abonnement aux e-mails. Chaque balise ci-dessous contient un exemple de la syntaxe de base ainsi qu'un exemple avec des paramètres et une sortie de code.

Si vous créez des zones de glisser-déposer, découvrez en davantage sur les [balises des zones de glisser-déposer](/docs/cms/reference/hubl/tags/dnd-areas). Si vous gérez un site web plus ancien, vous pouvez également consulter la [liste des balises HubL obsolètes](/docs/cms/versions-deprecations/deprecated/hubl/filters-functions).

<Tip>
  La plupart des balises de cette page ont des [équivalents dans les modules par défaut.](/docs/cms/reference/modules/default-modules) Les modules peuvent être utilisés dans [dnd\_areas](https://developers.hubspot.fr/docs/cms/start-building/building-blocks/drag-and-drop/overview) et des [colonnes flexibles](#flexible-column), ce qui les rend plus puissants et plus conviviaux que les balises que vous voyez ici.
</Tip>

## Commentaires de blog

Restitue le code d'intégration des commentaires sur un modèle de blog, y compris les commentaires eux-mêmes et le formulaire de commentaire. Découvrez-en davantage sur la personnalisation des paramètres de commentaires de blog et des formulaires dans la [base de connaissances](https://knowledge.hubspot.com/fr/blog/set-up-and-moderate-your-blog-comments).

<CodeGroup>
  ```text entrée.txt theme={null}
  {% blog_comments "blog_comments" label="Blog comments" select_blog="359485112" %}
  ```

  ```text résultat.txt theme={null}
  <span
  id="hs_cos_wrapper_blog_comments"
  class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_blog_comments"
  style=""
  data-hs-cos-general-type="widget"
  data-hs-cos-type="blog_comments"
  >
  <div class="section post-footer">
  <div id="comments-listing" class="new-comments"></div>
  <div id="hs_form_target_{formID}" data-hs-forms-root="true">
  <div class="hs-comment-message hs-common-confirm-message">
  Your comment has been received.
  </div>
  <form
  id="hsForm_id"
  method="POST"
  accept-charset="UTF-8"
  enctype="multipart/form-data"
  novalidate=""
  action="https://forms.hsforms.com/submissions/v3/public/submit/formsnext/multipart/{hubID}/{formID}"
  class="hs-form-private hs-form stacked"
  target="target_iframe_07e1eb93-87f2-48039"
  data-instance-id="{formID}"
  data-formid="{formID}"
  data-portal-id="123456"
  data-test-id="hsForm_{formID}"
  data-hs-cf-bound="true"
  >
  <div
  class="hs_firstname hs-firstname hs-fieldtype-text field hs-form-field"
  >
  <label
  id="label-firstname-07e1eb93"
  class=""
  placeholder="Enter your First Name"
  for="firstname-07e1eb9339"
  ><span>First Name</span
  ><span class="hs-form-required">*</span></label
  >
  <legend class="hs-field-desc" style="display: none;"></legend>
  <div class="input">
  <input
  id="firstname-{formID}"
  name="firstname"
  required=""
  placeholder=""
  type="text"
  class="hs-input"
  inputmode="text"
  autocomplete="given-name"
  value=""
  />
  </div>
  </div>
  <div
  class="hs_lastname hs-lastname hs-fieldtype-text field hs-form-field"
  >
  <label
  id="label-lastname-{formID}"
  class=""
  placeholder="Enter your Last Name"
  for="lastname-{formID}"
  ><span>Last Name</span></label
  >
  <legend class="hs-field-desc" style="display: none;"></legend>
  <div class="input">
  <input
  id="lastname-{formID}"
  name="lastname"
  placeholder=""
  type="text"
  class="hs-input"
  inputmode="text"
  autocomplete="family-name"
  value=""
  />
  </div>
  </div>
  <div class="hs_email hs-email hs-fieldtype-text field hs-form-field">
  <label
  id="label-email-{formID}"
  class=""
  placeholder="Enter your Email"
  for="email-{formID}"
  ><span>Email</span><span class="hs-form-required">*</span></label
  >
  <legend class="hs-field-desc" style="display: none;"></legend>
  <div class="input">
  <input
  id="email-{formID}"
  name="email"
  required=""
  placeholder=""
  type="email"
  class="hs-input"
  inputmode="email"
  autocomplete="email"
  value=""
  />
  </div>
  </div>
  <div
  class="hs_website hs-website hs-fieldtype-text field hs-form-field"
  >
  <label
  id="label-website-{formID}"
  class=""
  placeholder="Enter your Website"
  for="website-{formID}"
  ><span>Website</span></label
  >
  <legend class="hs-field-desc" style="display: none;"></legend>
  <div class="input">
  <input
  id="website-{formID}"
  name="website"
  placeholder=""
  type="text"
  class="hs-input"
  inputmode="url"
  value=""
  />
  </div>
  </div>
  <div
  class="hs_comment hs-comment hs-fieldtype-textarea field hs-form-field"
  >
  <label
  id="label-comment-{formID}"
  class=""
  placeholder="Enter your Comment"
  for="comment-{formID}"
  ><span>Comment</span><span class="hs-form-required">*</span></label
  >
  <legend class="hs-field-desc" style="display: none;"></legend>
  <div class="input">
  <textarea
  id="comment-{formID}"
  class="hs-input hs-fieldtype-textarea"
  name="comment"
  required=""
  placeholder=""
  ></textarea>
  </div>
  </div>
  <div class="hs_recaptcha hs-recaptcha field hs-form-field">
  <div class="input">
  <div
  class="grecaptcha-badge"
  data-style="inline"
  style="width: 256px; height: 60px; box-shadow: gray 0px 0px 5px;"
  >
  <div class="grecaptcha-logo">
  <iframe
  title="reCAPTCHA"
  width="256"
  height="60"
  role="presentation"
  name="a-pp7yub2hvkn1"
  frameborder="0"
  scrolling="no"
  sandbox="allow-forms allow-popups allow-same-origin allow-scripts allow-top-navigation allow-modals allow-popups-to-escape-sandbox allow-storage-access-by-user-activation"
  src="https://www.google.com/recaptcha/enterprise/anchor?{queryParams}"
  ></iframe>
  </div>
  <div class="grecaptcha-error"></div>
  <textarea
  id="g-recaptcha-response"
  name="g-recaptcha-response"
  class="g-recaptcha-response"
  style="width: 250px; height: 40px; border: 1px solid rgb(193, 193, 193); margin: 10px 25px; padding: 0px; resize: none; display: none;"
  ></textarea>
  </div>
  <iframe style="display: none;"></iframe>
  </div>
  <input
  type="hidden"
  name="g-recaptcha-response"
  id="hs-recaptcha-response"
  value=""
  />
  </div>
  <div class="hs_submit hs-submit">
  <div class="hs-field-desc" style="display: none;"></div>
  <div class="actions">
  <input
  type="submit"
  class="hs-button primary"
  value="Submit Comment"
  />
  </div>
  </div>
  <input name="hs_context" type="hidden" value="{submissionContext}" />
  <iframe name="target_iframe_{formID}" style="display: none;"></iframe>
  </form>
  </div>
  </div>
  </span>
  ```
</CodeGroup>

| Paramètre     | Type                    | Description                                                                                                                                                                                                                                                                           | Par défaut |
| ------------- | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- |
| `limit`       | Nombre                  | Permet de définir le nombre maximum de commentaires.                                                                                                                                                                                                                                  | `5000`     |
| `select_blog` | "default" ou ID de blog | Permet d'indiquer quel blog est connecté à l'intégration des commentaires. Ce paramètre accepte les arguments suivants : `"default"` ou un ID de blog (disponible dans l'URL du tableau de bord du blog). Si vous souhaitez utiliser votre blog par défaut, ce paramètre est inutile. | `default`  |
| `skip_css`    | Booléen                 | Si vous attribuez la valeur vrai à cette option, la CSS des commentaires du blog ne sera pas chargée.                                                                                                                                                                                 | `false`    |
| `message`     | Chaîne                  | Le message à afficher lorsqu'il n'y a pas de commentaires. Par défaut, il s'affiche vide (aucun texte affiché).                                                                                                                                                                       | `""`       |

## Contenu du blog

Si les [mises en page en glisser-déposer](/docs/cms/start-building/building-blocks/drag-and-drop/drag-and-drop-templates) comprennent un module de contenu de blog, ces modules ne sont pas créés avec une seule balise. Ils utilisent plutôt une logique conditionnelle pour définir le rendu d'un article de blog et d'une liste de blogs. [Découvrez-en davantage sur le codage des modèles de blog ici.](/docs/cms/start-building/building-blocks/templates/blog)

## Filtre d'article de blog

Crée une liste associée d'articles par thème, par mois ou par auteur.

<Warning>
  ### Remarque :

  Ce module ne peut être utilisé que dans les modèles d'articles de blog.
</Warning>

<CodeGroup>
  ```text entrée.txt theme={null}
  {% post_filter "post_filter" %}
  {% post_filter "posts_by_topic"
  select_blog="default",
  expand_link_text="see all",
  overrideable=False,
  list_title="Posts by Topic",
  max_links=5,
  filter_type="topic",
  label="Posts by Topic"
  %}
  ```

  ```text résultat.txt theme={null}
  <span
  id="hs_cos_wrapper_posts_by_topic"
  class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_post_filter"
  style=""
  data-hs-cos-general-type="widget"
  data-hs-cos-type="post_filter"
  >
  <div class="block">
  <h3>Posts by Topic</h3>
  <div class="widget-module">
  <ul>
  <li><a href="http://www.hubspot.com/blog/topic/sales">Sales</a></li>
  <li>
  <a href="http://www.hubspot.com/blog/topic/marketing">Marketing</a>
  </li>
  <li><a href="http://www.hubspot.com/blog/topic/service">Service</a></li>
  <li>
  <a href="http://www.hubspot.com/blog/topic/operations">Operations</a>
  </li>
  <li><a href="http://www.hubspot.com/blog/topic/cms">CMS</a></li>
  <li>
  <a href="http://www.hubspot.com/blog/topic/industry">Industry</a>
  </li>
  </ul>
  </div>
  </div>
  </span>
  ```
</CodeGroup>

| Paramètre          | Type                    | Description                                                                                                                              | Par défaut  |
| ------------------ | ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
| `select_blog`      | "default" ou ID de blog | Permet de sélectionner le blog HubSpot à utiliser. Ce paramètre utilise soit un ID de blog, soit une valeur "default".                   | `"default"` |
| `expand_link_text` | Chaîne                  | Le lien du texte à afficher si plus de publications que le nombre max\_links sont disponibles Excluez le paramètre pour omettre le lien. | `"see all"` |
| `list_title`       | Chaîne                  | Le titre de liste à afficher.                                                                                                            | `""`        |
| `list_tag`         | Chaîne                  | Permet de définir la balise utilisée pour la liste. La valeur doit généralement être `"ul"` ou `"ol"`.                                   | `"ul"`      |
| `title_tag`        | Chaîne                  | Permet de définir la balise utilisée pour le titre de la liste.                                                                          | `"h3"`      |
| `max_links`        | Nombre                  | Le nombre maximal de valeurs de filtre à afficher. Excluez le paramètre pour tout afficher.                                              | `5`         |
| `filter_type`      | Énumération             | Permet de sélectionner le type de filtre. Les valeurs possibles sont `"topic"`, `"month"` et `"author"`.                                 | `"topic"`   |

## Listing d'article de blog

Ajoute une liste des articles les plus populaires ou les plus importants.

<Warning>
  ### Remarque :

  Cette balise ne peut être utilisée que dans les modèles d'articles de blog. Le contenu de la balise est chargé 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 `hsPostListingComplete(feeds)`, où `feeds` est le sélecteur jQuery sur tous les flux qui ont été finalisés. Vous souhaiterez manipuler directement l'objet DOM dans cette fonction.
</Warning>

<CodeGroup>
  ```text entrée.txt theme={null}
  {% post_listing "post_listing" %}
  {% post_listing "top_posts" select_blog="default", label="Recent Posts", overrideable=False, list_title="Recent Posts", listing_type="recent", max_links=5 %}
  ```

  ```text résultat.txt theme={null}
  <span
  id="hs_cos_wrapper_module_42751498763_top_posts"
  class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_post_listing"
  style=""
  data-hs-cos-general-type="widget"
  data-hs-cos-type="post_listing"
  >
  <div class="block">
  <h3>Recent Posts</h3>
  <div class="widget-module">
  <ul class="hs-hash-1630637453-1678475653429">
  <li class="hs-postlisting-item">
  <a
  href="https://blog.hubspot.com/marketing/product-category-marketing"
  >9 Product Category Marketing Examples to Inspire Your Own</a
  >
  </li>
  <li class="hs-postlisting-item">
  <a
  href="https://blog.hubspot.com/marketing/increasing-mobile-conversion-rate"
  >Mobile Conversion Rate: What It Is and How To Increase It</a
  >
  </li>
  <li class="hs-postlisting-item">
  <a
  href="https://blog.hubspot.com/blog/tabid/6307/bid/33401/14-real-life-examples-of-cta-copy-you-should-copy.aspx"
  >14 Real-Life Examples of CTA Copy YOU Should Copy</a
  >
  </li>
  </ul>
  </div>
  </div>
  </span>
  ```
</CodeGroup>

| Paramètre                | Type                    | Description                                                                                                                                                                                                                              | Par défaut  |
| ------------------------ | ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
| `select_blog`            | "default" ou ID de blog | Permet de sélectionner le blog HubSpot à utiliser pour le listing. Ce paramètre utilise soit un ID de blog, soit une valeur `"default"`.                                                                                                 | `"default"` |
| `list_title`             | Chaîne                  | Le titre de liste à afficher.                                                                                                                                                                                                            | `""`        |
| `list_tag`               | Chaîne                  | Permet de définir la balise utilisée pour la liste. La valeur doit généralement être `"ul"` ou `"ol"`.                                                                                                                                   | `"ul"`      |
| `title_tag`              | Chaîne                  | Permet de définir la balise utilisée pour le titre de la liste.                                                                                                                                                                          | `"h3"`      |
| `listing_type`           | Chaîne                  | Permet de lister les articles de blog selon le plus récent ou le plus populaire dans une période donnée. Les valeurs possibles sont recent, popular\_all\_time, popular\_past\_year, popular\_past\_six\_months ou popular\_past\_month. | `"recent"`  |
| `max_links`              | Nombre                  | Le nombre maximal d'articles de blog à lister.                                                                                                                                                                                           | `5`         |
| `include_featured_image` | Booléen                 | Permet d'afficher l'image en vignette avec le lien de l'article.                                                                                                                                                                         | `False`     |

## Articles de blog connexes

Ajoute une liste d'articles de blog basée sur un ensemble de paramètres partagés par les articles entre les blogs. Les articles sont sélectionnés en fonction de leur pertinence par rapport aux paramètres définis.

Cette balise ne génère pas de module modifiable au niveau de la page/de l'article. Elle est entièrement configurée avec HubL.

<CodeGroup>
  ```text entrée.txt theme={null}
  {% related_blog_posts
  limit=2,
  blog_ids="1,2",
  tags="Sales enablement,Marketing",
  blog_authors="John Smith,Frank Smith",
  path_prefixes="/business-blog",
  start_date="2018-04-10",
  end_date="2018-04-10",
  blog_post_override="2783035366"
  %}
  ```

  ```text résultat.txt theme={null}
  <span
  class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_related_blog_posts"
  data-hs-cos-general-type="widget"
  data-hs-cos-type="related_blog_posts"
  id="hs_cos_wrapper_"
  style=""
  ><!--related-blog-entries--></span
  >
  <div class="hs-related-blog-module feedreader_box">
  <span
  class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_related_blog_posts"
  data-hs-cos-general-type="widget"
  data-hs-cos-type="related_blog_posts"
  id="hs_cos_wrapper_"
  style=""
  ></span>
  <div class="hs-related-blog-item">
  <span
  class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_related_blog_posts"
  data-hs-cos-general-type="widget"
  data-hs-cos-type="related_blog_posts"
  id="hs_cos_wrapper_"
  style=""
  ></span>
  <div class="hs-related-blog-item-text">
  <span
  class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_related_blog_posts"
  data-hs-cos-general-type="widget"
  data-hs-cos-type="related_blog_posts"
  id="hs_cos_wrapper_"
  style=""
  ><a
  class="hs-related-blog-title"
  href="//www.hubspot.com/business-blog/marketing-is-fun"
  ><span>Marketing is fun</span></a
  ></span
  >
  <div class="hs-related-blog-byline">
  by <span class="hs-related-blog-author">John Smith</span>
  <span class="hs-related-blog-posted-at">posted on</span>
  <span class="hs-related-blog-date">June 3, 2018</span>
  </div>
  <div class="hs-related-blog-byline">
  <p class="hs-related-blog-description">
  Learn how to make marketing fun!<a
  href="//www.hubspot.com/business-blog/marketing-is-fun"
  >Read more</a
  >
  </p>
  </div>
  <div class="hs-related-blog-byline">
  <span class="hs-related-blog-tags">Tags: Marketing</span>
  </div>
  </div>
  </div>
  <div class="hs-related-blog-item hs-with-featured-image">
  <div class="hs-related-blog-item-text">
  <a
  class="hs-related-blog-title"
  href="//www.hubspot.com/business-blog/sales-is-fun"
  ><span>Sales is fun</span></a
  >
  <div class="hs-related-blog-byline">
  by <span class="hs-related-blog-author">Frank Smith</span>
  <span class="hs-related-blog-posted-at">posted on</span>
  <span class="hs-related-blog-date">June 7, 2018</span>
  </div>
  <div class="hs-related-blog-byline">
  <p class="hs-related-blog-description">
  Learn how to make sales fun!<a
  href="//www.hubspot.com/business-blog/sales-is-fun"
  >Read more</a
  >
  </p>
  </div>
  <div class="hs-related-blog-byline">
  <span class="hs-related-blog-tags">Tags: Sales enablement</span>
  </div>
  </div>
  <div class="hs-related-blog-item-image-wrapper">
  <img
  alt=""
  class="hs-related-blog-featured-image"
  src="//www.hubspot.com/hubfs/business-blog/sales-is-fun.jpg"
  />
  </div>
  </div>
  </div>
  ```
</CodeGroup>

| Paramètre            | Type          | Description                                                                                                                                                                                                                                                                                                                                                                                   | Par défaut |
| -------------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- |
| `blog_ids`           | Nombre        | Les ID des blogs dont vous souhaitez inclure les articles. Si ce n'est pas spécifié, il inclura les articles du blog par défaut.                                                                                                                                                                                                                                                              |            |
| `blog_post_ids`      | Chaîne        | Les ID des articles de blog à utiliser pour trouver les articles de blog pertinents à lister, séparés par des virgules. Utilisez ce paramètre uniquement lorsque le widget s'affiche sur des pages. Lorsqu'il est utilisé sur les articles de blog, il recherchera les articles pertinents en fonction de l'article de blog actuellement affiché.                                             |            |
| `blog_post_override` | Chaîne        | Les ID des articles de blog qui doivent toujours s'afficher dans la liste renvoyée, malgré toutes les autres valeurs des paramètres et des filtres (séparés par des virgules).                                                                                                                                                                                                                |            |
| `limit`              | Nombre        | Le nombre maximum d'articles de blog à lister.                                                                                                                                                                                                                                                                                                                                                | `3`        |
| `tags`               | Chaîne        | Les balises de blog qui doivent être utilisées pour déterminer si un article est pertinent (séparées par des virgules). Les articles de blog avec les balises spécifiées se classeront plus haut pour la pertinence.                                                                                                                                                                          |            |
| `tag_boost`          | Nombre        | Permet d'augmenter l'importance accordée aux balises indiquées dans le paramètre `tags` pour générer des articles connexes. Incluez ce paramètre pour extraire des articles plus étroitement associés à ceux actuellement affichés ou spécifiés. Accepte les nombres positifs.                                                                                                                |            |
| `start_date`         | Date et heure | Date de publication la plus ancienne. Voir un [exemple ci-dessous](#examples).                                                                                                                                                                                                                                                                                                                |            |
| `end_date`           | Date et heure | Date de publication la plus récente. Voir un [exemple ci-dessous](#examples).                                                                                                                                                                                                                                                                                                                 |            |
| `blog_authors`       | Chaîne        | Les noms des auteurs dont vous souhaitez inclure les articles (séparés par des virgules). Voir un [exemple ci-dessous](#examples).                                                                                                                                                                                                                                                            |            |
| `path_prefixes`      | Chaîne        | Les chemins d'URL ou sous-répertoires dont vous souhaitez inclure les articles (séparés par des virgules). Si un article de blog a un préfixe similaire dans son chemin, la pertinence de l'article est accrue, ce qui améliore son classement dans la liste.                                                                                                                                 |            |
| `callback`           | Chaîne        | Le nom d'une fonction JavaScript pour restituer les articles de blog renvoyés. La fonction reçoit un tableau d'objets d'articles de blog à formater. Si ni le paramètre `callback`, ni le paramètre `post_formatter` ne sont indiqués, la balise générera du HTML dans un format par défaut. Voir un [exemple ci-dessous](#examples).                                                         | `none`     |
| `post_formatter`     | Chaîne        | Le nom d'une macro personnalisée pour restituer les articles de blog renvoyés. La macro reçoit trois paramètres qui sont l'objet d'article de blog à formater, le compte dans l'itération des articles de blog et le compte total des articles de blog dans les résultats. Si ce n'est pas précis ou si défini sur `default`, le formateur intégré sera utilisé pour formater chaque article. | `default`  |
| `allow_any_language` | Booléen       | Si la valeur est définie sur `false`, seuls les articles dans la même langue que la page sur laquelle la balise est utilisée s'afficheront. Si la valeur est définie sur `true`, la restriction de langue est ignorée et tous les articles connexes sont affichés, quelle que soit la langue de la page.                                                                                      | `False`    |

<Warning>
  Il est vivement recommandé d'utiliser le paramètre `callback` au lieu de `post_formatter` pour améliorer la vitesse de chargement des pages.
</Warning>

### Exemples

L'exemple qui suit génère un listing d'articles rédigés par l'un des trois `blog_authors` indiqué sur deux blogs différents :

```hubl theme={null}
{% related_blog_posts blog_ids="3241539189,3261083894", limit=6, blog_authors="John Smith,Joe Smith,Frank Smith" %}
```

L'exemple qui suit génère un listing de 10 articles associés à un article de blog spécifique, avec la balise « développement des ventes » dans une période de publication spécifique. Cet exemple indique le paramètre `blog_post_ids`. Il sera donc utilisé sur une page :

```hubl theme={null}
{% related_blog_posts blog_post_ids="3267910554", limit=10, tags="sales enablement", start_date="2018-02-05", end_date="2018-06-10" %}
```

L'exemple qui suit génère un listing de cinq articles à l'aide du paramètre `callback` pour contrôler la sortie HTML du listing d'articles :

```hubl theme={null}
{% related_blog_posts limit=5, callback="blog_post_formatter" %}

<script>
  var blog_post_formatter = function(blogposts) {

    var formatted = "<div>";
    for (var i = 0; i < blogposts.length; i++) {
      var blogpost = blogposts[i];
      formatted += '<div class="related-blog-item">';
      formatted += `<span>Related Post ${i + 1}/${blogposts.length}</span><br>`;
      formatted += `<a class="related-blog-title" href="https://developers.hubspot.fr/docs${blogpost.url}"><span>${blogpost.name}</span></a>`;
      formatted += `<div class="hs-related-blog-byline">by <span class="related-blog-author">${blogpost.blogAuthor.fullName}</span><span class="related-blog-posted-at"> posted on </span><span class="related-blog-date">${new Date(blogpost.publishDate).toLocaleDateString()}</span></div>`;
      formatted += `<p class="related-blog-post-summary">${blogpost.postSummary}<a href="https://developers.hubspot.fr/docs${blogpost.url}">Read more</a></p>`;
      formatted += '<div class="related-blog-tags">';
      if (blogpost.tagList.length > 0) {
        formatted += `Tags: ${blogpost.tagList.map(tag => tag.label).join(", ")}`;
      }
      formatted += '</div>';

      if (blogpost.featuredImage) {
        formatted += `<img src="${blogpost.featuredImage}" alt="${blogpost.featuredImageAltText}">`;
      }
      formatted += '</div>';
    }
    formatted += '</div>';
    return formatted;
  }
</script>
```

## Partage du blog sur les réseaux sociaux

Le partage de blogs sur les réseaux sociaux restitue les compteurs de partages sur vos articles de blog (si cette option est activée dans les paramètres de contenu).

<CodeGroup>
  ```text entrée.txt theme={null}
  {% blog_social_sharing "blog_social_sharing" %}
  {% blog_social_sharing "blog_social_sharing" select_blog="359485112" %}
  ```

  ```text résultat.txt theme={null}
  <span
  id="hs_cos_wrapper_blog_social_sharing"
  class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_blog_social_sharing"
  style=""
  data-hs-cos-general-type="widget"
  data-hs-cos-type="blog_social_sharing"
  >
  <div class="hs-blog-social-share">
  <ul class="hs-blog-social-share-list">
  <li class="hs-blog-social-share-item hs-blog-social-share-item-twitter">
  <a
  href="https://twitter.com/share"
  class="twitter-share-button"
  data-lang="en"
  data-url="http://designers.hubspot.com/blog"
  data-size="medium"
  data-text=""
  >Tweet</a
  >
  </li>
  <li class="hs-blog-social-share-item hs-blog-social-share-item-linkedin">
  <script
  type="IN/Share"
  data-url="http://designers.hubspot.com/blog"
  data-showzero="true"
  data-counter="right"
  ></script>
  </li>
  <li class="hs-blog-social-share-item hs-blog-social-share-item-facebook">
  <div
  class="fb-like"
  data-href="http://designers.hubspot.com/blog"
  data-layout="button_count"
  data-action="like"
  data-show-faces="false"
  data-share="true"
  data-width="120"
  ></div>
  </li>
  <li
  class="hs-blog-social-share-item hs-blog-social-share-item-google-plus"
  >
  <div
  class="g-plusone"
  data-size="medium"
  data-href="http://designers.hubspot.com/blog"
  ></div>
  </li>
  </ul>
  </div>
  </span>
  ```
</CodeGroup>

| Paramètre              | Type                    | Description                                                                                                                                                                                                                                                                    | Par défaut |
| ---------------------- | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------- |
| `select_blog`          | "default" ou ID de blog | Permet d'indiquer quel blog est connecté aux compteurs de partages. Ce paramètre accepte les arguments suivants : `"default"` ou un ID de blog (disponible dans l'URL du tableau de bord du blog). Si vous souhaitez utiliser votre blog par défaut, ce paramètre est inutile. | `default`  |
| `downgrade_shared_url` | Booléen                 | Permet d'utiliser HTTP dans l'URL envoyée aux réseaux sociaux. Utilisé pour préserver les comptes lors de la mise à niveau des domaines vers HTTPS uniquement.                                                                                                                 | `false`    |

## Abonnement au blog

Une balise d'abonnement au blog restitue le formulaire d'abonnement au blog pour un blog particulier. Ce formulaire est automatiquement créé chaque fois qu'un blog est créé dans les paramètres de contenu. Un formulaire d'abonnement est associé par blog. Notez que les champs du formulaire d'abonnement sont configurés dans l'interface utilisateur de l'éditeur de formulaire.

<CodeGroup>
  ```text entrée.txt theme={null}
  {% blog_subscribe "blog_subscribe" %}
  {% blog_subscribe "subscribe_designers_blog" select_blog="default", title="Subscribe to the Designers Blog", response_message="Thanks for Subscribing!", label="Blog Email Subscription", overrideable=False %}
  ```

  ```text résultat.txt theme={null}
  <span
  id="hs_cos_wrapper_blog_subscription"
  class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_blog_subscribe"
  style=""
  data-hs-cos-general-type="widget"
  data-hs-cos-type="blog_subscribe"
  >
  <h3
  id="hs_cos_wrapper_blog_subscription_title"
  class="hs_cos_wrapper form-title"
  data-hs-cos-general-type="widget_field"
  data-hs-cos-type="text"
  >
  Subscribe to Designers Blog
  </h3>
  <div id="hs_form_target_blog_subscription"></div>
  <script charset="utf-8" src="//js.hsforms.net/forms/current.js"></script>
  <script>
  hbspt.forms.create({
  portalId: '327485',
  formId: 'a8d73dc6-0d3a-486d-8938-b19f28b69c3c',
  formInstanceId: '60',
  id: 2749976739,
  pageName:
  'Apple, Google & Starbucks: Inside the Web Design Style Guides of 10 Famous Companies',
  redirectUrl:
  'http://designers.hubspot.com/blog/web-design-style-guides-examples?hsFormKey=a56a754bc4c3465015935953363b8ff3#blog_subscription',
  css: '',
  target: '#hs_form_target_blog_subscription',
  formData: { cssClass: 'hs-form stacked' },
  });
  </script>
  </span>
  ```
</CodeGroup>

| Paramètre          | Type                    | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | Par défaut                  |
| ------------------ | ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- |
| `select_blog`      | "default" ou ID de blog | Permet de sélectionner le formulaire d'abonnement au blog à restituer. Ce paramètre accepte les arguments suivants : `"default"` ou un ID de blog (disponible dans l'URL du tableau de bord du blog). Si vous souhaitez utiliser votre blog par défaut, ce paramètre est inutile.                                                                                                                                                                                                                                                                                                                                                                                                                         | `default`                   |
| `title`            | Chaîne                  | Permet de définir le texte d'un titre de balise h3 au-dessus du formulaire d'inscription.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | `"Subscribe Here!"`         |
| `no_title`         | Booléen                 | Si la valeur est définie sur vrai, la balise h3 au-dessus du titre est supprimée.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | `false`                     |
| `response_message` | Chaîne                  | Permet de définir le message de remerciement intraligne qui est restitué lorsqu'un utilisateur soumet un formulaire. Prend en charge le HTML.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `"Thanks for Subscribing!"` |
| `edit_form_link`   | Chaîne                  | Ce paramètre génère un lien qui permet aux utilisateurs de cliquer sur l'écran de l'éditeur de formulaire correspondant. Cette option ne s'affichera dans l'interface utilisateur de l'éditeur que si le module possède le paramètre `overrideable=True`.<br />Par exemple, pour remplacer le HubID et l'ID du formulaire par les informations de l'URL du formulaire d'abonnement à votre blog par défaut : `edit_form_link=" <ul>\n <li><a href="https://developers.hubspot.fr/docs/forms/HubID/FormID/edit/" target="_blank">Default Blog</a></li> \n</ul> "`. <br />Notez que les caractères de saut de ligne `\n` ci-dessus ajoutent une ligne de remplissage supplémentaire avant et après le lien. |                             |

## Booléen

Une balise booléenne crée une case à cocher dans l'interface utilisateur qui affiche « vrai » ou « faux ». Outre l'impression de la valeur, ce module est utile pour définir une logique de modèle conditionnel, lorsqu'il est combiné avec le paramètre [`export_to_template_context`](/docs/cms/reference/modules/export-to-template-context).

<CodeGroup>
  ```text entrée.txt theme={null}
  {% boolean "boolean" %}
  {% boolean "nav_toggle" label="Hide navigation", value=False, no_wrapper=True %}
  ```

  ```text résultat.txt theme={null}
  false
  ```
</CodeGroup>

| Paramètre | Type    | Description                                                       | Par défaut |
| --------- | ------- | ----------------------------------------------------------------- | ---------- |
| `value`   | Booléen | Permet de déterminer si la case à cocher est sélectionnée ou non. | `False`    |

## Choix

Une balise de choix crée une liste déroulante dans l'interface utilisateur de l'éditeur de contenu qui imprime la valeur sélectionnée par l'utilisateur. Les balises de choix sont idéales pour donner à vos utilisateurs un ensemble d'options prédéfinies, comme l'impression du type de page dans un en-tête de page.

Outre l'impression de la valeur du choix, cette balise est utile pour définir une logique de modèle conditionnel, lorsqu'elle est combinée avec le paramètre [`export_to_template_context`](/docs/cms/reference/modules/export-to-template-context).

<CodeGroup>
  ```text entrée.txt theme={null}
  {% choice "choice" %}
  {% choice "type_of_page" label="Choose the type of page", value="About", choices="About, Careers, Contact, Store" %}
  ```

  ```text résultat.txt theme={null}
  <span
  id="hs_cos_wrapper_type_of_page"
  class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_choice"
  style=""
  data-hs-cos-general-type="widget"
  data-hs-cos-type="choice"
  >
  About
  </span>
  ```
</CodeGroup>

| Paramètre | Type     | Description                                                                                                                                                                                                                                                                                          |
| --------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `value`   | Booléen  | La valeur par défaut du champ pour la liste déroulante                                                                                                                                                                                                                                               |
| `choices` | Séquence | Une liste de valeurs séparées par des virgules ou une liste de paires (valeur, libellé). La syntaxe des paires (valeur, libellé) est la suivante : `choices="[[\"value1\", \"Label 1\"], [\"value2\", \"Label 2\"]]"`. L'éditeur affichera le libellé, tandis qu'il imprimera la valeur sur la page. |

## Couleurs

La balise de couleur génère un sélecteur de couleur dans l'interface utilisateur de l'éditeur de page qui imprime une valeur de couleur hex dans un modèle. Notez que ce module ne peut être utilisé que dans les modèles, et pas dans les fichiers CSS. Si vous utilisez cette balise dans un élément `<style>` ou dans une CSS intraligne, vous souhaiterez utiliser le paramètre `no_wrapper=True` pour supprimer l'encadrement `<span>`.

<CodeGroup>
  ```text entrée.txt theme={null}
  {% color "color" %}
  {% color "my_color_picker" label="Choose a color", color="#000000", no_wrapper=True %}
  ```

  ```text résultat.txt theme={null}
  #000000
  ```
</CodeGroup>

| Paramètre | Type   | Description                                                       |
| --------- | ------ | ----------------------------------------------------------------- |
| `color`   | Chaîne | Une valeur de couleur hex par défaut pour le sélecteur de couleur |

## CTA

Une balise call-to-action ou CTA permet aux utilisateurs d'ajouter un bouton call-to-action HubSpot à une zone prédéfinie d'une page.

<CodeGroup>
  ```text entrée.txt theme={null}
  {% cta "cta" %}
  {% cta "my_cta" label="Select a CTA", guid="ccd39b7c-ae18-4c4e-98ee-547069bfbc5b", image_src="https://no-cache.hubspot.com/cta/default/53/c7335b66-a0d4-4d19-82eb-75e1626d02d0.png" %}
  ```

  ```text résultat.txt theme={null}
  <span
  id="hs_cos_wrapper_"
  class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_cta"
  style=""
  data-hs-cos-general-type="widget"
  data-hs-cos-type="cta"
  >
  <!--HubSpot Call-to-Action Code -->
  <span
  class="hs-cta-wrapper"
  id="hs-cta-wrapper-ccd39b7c-ae18-4c4e-98ee-547069bfbc5b"
  >
  <span
  class="hs-cta-node hs-cta-ccd39b7c-ae18-4c4e-98ee-547069bfbc5b"
  id="hs-cta-ccd39b7c-ae18-4c4e-98ee-547069bfbc5b"
  style="visibility: visible;"
  >
  <a
  id="cta_button_158015_19a9097a-8dff-4181-b8f7-955a47f29826"
  class="cta_button "
  href="//cta-service-cms2.hubspot.com/ctas/v2/public/cs/c/?cta_guid=19a9097a-8dff-4181-b8f7-955a47f29826&placement_guid=ccd39b7c-ae18-4c4e-98ee-547069bfbc5b&portal_id=158015&redirect_url=APefjpFSOqhysLBE-Yye5WFoP82Swxb2PVWpfI3VxlUjuOCHfiVMcxKic3yM28vuwu9UB8_Jyhk6DGRCEN63hKqQOMtMTGmQZ1UNMK3LtNx0sRrAfQQYna2BfZ9RmgQOs8sKO_PcKOP6G26L5wQ5vdcXXOiMCxFPJxzPzUCcl474iiHKbEo5H8LVtZf6e140VOSGJ37NTpxCcPHLDvH9iFaT6mR0BnKzFReaX0FXBj7Lx2rFLVCZcIC0bdaFEGI1uKOJBMNT9RDtEzeJzUHzFYN0b34uv-ZR4w&hsutk=683eeb5b499fdfdf469646f0014603b4&utm_referrer=http%3A%2F%2Fwww.davidjosephhunt.com%2Fvariables%3Fhs_preview%3D159bC1Cj-2863569740&canon=http%3A%2F%2Fwww.davidjosephhunt.com%2Fvariables"
  style=""
  cta_dest_link="http://www.hubspot.com/free-trial"
  title="Start a HubSpot trial"
  >
  Start a HubSpot trial
  </a>
  </span>
  <script charset="utf-8" src="//js.hscta.net/cta/current.js"></script>
  <script type="text/javascript">
  hbspt.cta.load(158015, 'ccd39b7c-ae18-4c4e-98ee-547069bfbc5b');
  </script>
  </span>
  <!-- end HubSpot Call-to-Action Code -->
  </span>
  ```
</CodeGroup>

| Paramètre      | Type   | Description                                                                                                                                                                                          |
| -------------- | ------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `embed_code`   | Chaîne | Le code d'intégration pour le call-to-action. \n différencie les sauts de ligne.                                                                                                                     |
| `full_html`    | Chaîne | Le code d'intégration pour le call-to-action (Identique à embed\_code). \n différencie les sauts de ligne.                                                                                           |
| `image_src`    | Chaîne | L'URL de la source de l'image qui définit l'image d'aperçu dans l'éditeur de contenu.                                                                                                                |
| `image_editor` | Chaîne | Le balisage de l'aperçu de l'éditeur d'image                                                                                                                                                         |
| `guid`         | Chaîne | Le numéro de l'ID unique du call-to-action. Cet ID est disponible dans l'URL de l'écran Détails d'un CTA particulier. Ce paramètre est utilisé pour choisir le call-to-action à afficher par défaut. |
| `image_html`   | Chaîne | Le HTML de l'image du call-to-action sans le script.\*                                                                                                                                               |
| `image_email`  | Chaîne | La version du code call-to-action adaptée aux e-mails.\*                                                                                                                                             |

<Info>
  \*Si ces paramètres sont inclus ici par souci d'exhaustivité, le code généré par HubSpot pour les renseigner est très spécifique. Si vous avez besoin d'un CTA sélectionné par défaut, plutôt que d'essayer de développer les paramètres du CTA à partir de zéro, il est recommandé de configurer le CTA sur un modèle de mise en page, puis de le [cloner dans le fichier](https://knowledge.hubspot.com/fr/website-and-landing-pages/clone-hubspot-content). Vous pouvez ensuite copier le module HubL du CTA avec tous les paramètres correctement définis pour vous.

  Il existe également une [fonction CTA](/docs/cms/reference/hubl/functions#cta) qui génère un CTA à partir de l'ID.
</Info>

## HTML personnalisé

Un module HTML personnalisé permet aux utilisateurs de saisir du HTML brut dans l'éditeur de contenu. Si vous devez ajouter du HTML par défaut à la balise, vous pouvez utiliser la [syntaxe de bloc](/docs/cms/reference/modules/using-modules-in-templates#block-syntax).

<CodeGroup>
  ```text entrée.txt theme={null}
  {% raw_html "raw_html" %}
  {% raw_html "my_custom_html_module" label="Enter HTML here" value="<div>My HTML Block</div>" %}

  Block Syntax Example:

  {% widget_block raw_html "my_custom_html_module" overrideable=True, label="My custom HTML module"  %}
  {% widget_attribute "value" %}
  <div>Default HTML block</div>
  {% end_widget_attribute %}
  {% end_widget_block %}
  ```

  ```text résultat.txt theme={null}
  <span
  id="hs_cos_wrapper_my_custom_html_module"
  class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_raw_html"
  style=""
  data-hs-cos-general-type="widget"
  data-hs-cos-type="raw_html"
  >
  <div>My HTML block</div>
  </span>
  ```
</CodeGroup>

| Paramètre | Type   | Description                                             |
| --------- | ------ | ------------------------------------------------------- |
| `value`   | Chaîne | Permet de définir le contenu HTML par défaut du module. |

## Modules personnalisés

Les modules personnalisés permettent aux concepteurs de HubSpot de créer un groupe personnalisé d'objets de contenu modifiables à utiliser dans les modèles et les pages du CMS de HubSpot, tout en permettant aux responsables marketing de contrôler le contenu spécifique apparaissant dans ces modules, page par page. Découvrez-en davantage sur les [modules personnalisés et leur syntaxe HubL simplifiée ici](https://developers.hubspot.fr/docs/cms/start-building/building-blocks/modules/overview).

Les modules personnalisés doivent être créés dans l'éditeur de modules personnalisés, mais ils peuvent être inclus dans les modèles codés et les modules HubL. Bloc d'utilisation s'affichera dans la barre latérale droite de l'éditeur de module personnalisé, sous Utilisation du modèle.

Les modules personnalisés nécessitent l'ID du module sous forme de chaîne de caractères ainsi qu'un paramètre de chemin d'accès afin de préciser le module à charger. Le bloc d'utilisation comprendra également un paramètre de libellé. Consultez la syntaxe ci-dessous :

<CodeGroup>
  ```text entrée.txt theme={null}
  {% module "module_15677217712485" path="/Custom/Test custom module"  %}
  {% module "module_25642219712432" path="/Assets/Custom calendar module" label="Custom calendar module" %}
  ```

  ```text résultat.txt theme={null}
  <div
  id="hs_cos_wrapper_module_15677217712485"
  class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_module"
  style=""
  data-hs-cos-general-type="widget"
  data-hs-cos-type="module"
  >
  content!
  </div>
  <style>
  @import '//cdn2.hubspotqa.net/qa/hub/126/file-613025667-css/custom_widget_example.css';
  </style>
  <div>
  <img
  class="persons-photo"
  src="//cdn2.hubspotqa.net/qa/hub/124/file-1360297556-jpeg/dharmesh.jpeg"
  alt="dharmesh.jpeg"
  />
  <div>
  <img
  class="company-logo with-background"
  src="//cdn2.hubspotqa.net/qa/hub/124/file-221882251-png/HubSpot_Logo_2x.png"
  width="60px"
  height="inherit"
  alt="HubSpot_Logo_2x.png"
  />
  </div>
  </div>
  <div>
  <p class="quote">
  <span class="quotation-mark"><b>" </b></span>The Content Optimization System
  matches content with context to create a highly personalized, relevant and
  meaningful customer experience.
  <span class="quotation-mark"><b>" </b></span>
  </p>
  </div>
  <div class="name-and-company">
  <span><b>Dharmesh Shah,</b></span>
  <span>HubSpot</span>
  </div>
  ```
</CodeGroup>

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

<Frame>
  <img src="https://www.hubspot.fr/hubfs/Knowledge_Base_2023_2024/editor-placeholder-appearance-example-2.png" alt="module-placeholder-content" />
</Frame>

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 %}
```

<Info>
  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).
</Info>

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.

<CodeGroup>
  ```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}
  <span
  id="hs_cos_wrapper_my_flexible_column"
  class="hs_cos_wrapper hs_cos_wrapper_widget_container hs_cos_wrapper_type_widget_container"
  style=""
  data-hs-cos-general-type="widget_container"
  data-hs-cos-type="widget_container"
  ><div
  id="hs_cos_wrapper_rich_text"
  class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_module"
  style=""
  data-hs-cos-general-type="widget"
  data-hs-cos-type="module"
  >
  <span
  id="hs_cos_wrapper_rich_text_"
  class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_rich_text"
  style=""
  data-hs-cos-general-type="widget"
  data-hs-cos-type="rich_text"
  ><h2>Something Powerful</h2>
  <h3>Tell The Reader More</h3>
  <p>
  The headline and subheader tells us what you're
  <a href="#">offering</a>, 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.
  </p>
  <p>Remember:</p>
  <ul>
  <li>Bullets are great</li>
  <li>For spelling out <a href="#">benefits</a> and</li>
  <li>Turning visitors into leads.</li>
  </ul></span
  >
  </div>
  <div
  id="hs_cos_wrapper_linked_image"
  class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_module"
  style=""
  data-hs-cos-general-type="widget"
  data-hs-cos-type="module"
  >
  <span
  id="hs_cos_wrapper_linked_image_"
  class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_linked_image"
  style=""
  data-hs-cos-general-type="widget"
  data-hs-cos-type="linked_image"
  ><img
  src="https://static.hubspot.com/final/img/content/email-template-images/placeholder_200x200.png"
  class="hs-image-widget "
  style="width:200px;border-width:0px;border:0px;"
  width="200"
  alt="placeholder_200x200"
  title="placeholder_200x200"
  /></span></div
  ></span>
  ```
</CodeGroup>

<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" %}`
</Warning>

## 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).

<CodeGroup>
  ```text entrée.txt theme={null}
  {% form "my_form"
  form_to_use="{formID}",
  title="Free Trial"
  %}

  <!-- Block syntax example -->
  {% 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}
  <div
  id="hs_cos_wrapper_my_form"
  class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_form"
  style=""
  data-hs-cos-general-type="widget"
  data-hs-cos-type="form"
  >
  <h3
  id="hs_cos_wrapper_module_13885064832664947_title"
  class="hs_cos_wrapper form-title"
  data-hs-cos-general-type="widget_field"
  data-hs-cos-type="text"
  >
  Free Trial
  </h3>
  <div id="hs_form_target_module_13885064832664947">
  <form
  accept-charset="UTF-8"
  enctype="multipart/form-data"
  id="hsForm_08bd9f0d-3be9-41c2-93b6-231a3a71b143_6756"
  class="hs-form stacked hs-custom-form"
  action="https://forms.hubspot.com/uploads/form/v2/158015/08bd9f0d-3be9-41c2-93b6-231a3a71b143"
  method="POST"
  novalidate="novalidate"
  >
  <div class="hs_lastname field hs-form-field">
  <label
  placeholder="Enter your Last Name"
  for="lastname-08bd9f0d-3be9-41c2-93b6-231a3a71b143_6756"
  >Last Name</label
  >
  <div class="hs-field-desc" style="display: none;"></div>
  <div class="input">
  <input
  class="hs-input"
  type="text"
  id="lastname-08bd9f0d-3be9-41c2-93b6-231a3a71b143_6756"
  name="lastname"
  value=""
  placeholder=""
  />
  </div>
  </div>
  <div class="hs_firstname field hs-form-field">
  <label
  placeholder="Enter your First Name"
  for="firstname-08bd9f0d-3be9-41c2-93b6-231a3a71b143_6756"
  >First Name</label
  >
  <div class="hs-field-desc" style="display: none;"></div>
  <div class="input">
  <input
  class="hs-input"
  type="text"
  id="firstname-08bd9f0d-3be9-41c2-93b6-231a3a71b143_6756"
  name="firstname"
  value=""
  placeholder=""
  />
  </div>
  </div>
  <div class="hs_email field hs-form-field">
  <label
  placeholder="Enter your Email"
  for="email-08bd9f0d-3be9-41c2-93b6-231a3a71b143_6756"
  >Email<span class="hs-form-required"> * </span></label
  >
  <div class="hs-field-desc" style="display: none;"></div>
  <div class="input">
  <input
  class="hs-input"
  type="email"
  required="required"
  id="email-08bd9f0d-3be9-41c2-93b6-231a3a71b143_6756"
  name="email"
  value=""
  placeholder=""
  />
  </div>
  </div>
  <div class="hs_submit">
  <div class="hs-field-desc" style="display: none;"></div>
  <div class="actions">
  <input class="hs-button primary large" type="submit" value="Submit" />
  </div>
  </div>
  </form>
  </div>
  <script charset="utf-8" src="//js.hsforms.net/forms/current.js"></script>
  <script>
  hbspt.forms.create({
  portalId: '123456',
  formId: '{formID}',
  formInstanceId: '6756',
  id: 1,
  redirectUrl: 'http:\/\/www.hubspot.com\/',
  deactivateSmartForm: true,
  css: '',
  target: '#hs_form_target_module_13885064832664947',
  contentType: 'landing-page',
  formData: {
  cssClass: 'hs-form stacked hs-custom-form',
  },
  });
  </script>
  </div>
  ```
</CodeGroup>

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

<CodeGroup>
  ```text entrée.txt theme={null}
  {% page_footer "page_footer" %}
  ```

  ```text résultat.txt theme={null}
  <span
  id="hs_cos_wrapper_page_footer"
  class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_page_footer"
  style=""
  data-hs-cos-general-type="widget"
  data-hs-cos-type="page_footer"
  >
  <footer>
  <span class="hs-footer-company-copyright">© 2020 HubSpot</span>
  </footer>
  </span>
  ```
</CodeGroup>

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

<CodeGroup>
  ```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}
  <span
  id="hs_cos_wrapper_crm_gallery"
  class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_gallery"
  style=""
  data-hs-cos-general-type="widget"
  data-hs-cos-type="gallery"
  >
  <div
  id="hs_cos_flex_gallery_crm_gallery"
  class="hs_cos_flex-gallery flex-gallery-main gallery-mode-gallery"
  >
  <div
  class="hs_cos_flex-viewport"
  style="overflow: hidden; position: relative;"
  >
  <ul
  class="hs_cos_flex-slides hs_cos_flex-slides-main "
  style="width: 800%; -webkit-transition-duration: 0s; transition-duration: 0s; -webkit-transform: translate3d(-1090px, 0px, 0px);"
  >
  <li
  class="hs_cos_flex-slide-main clone"
  aria-hidden="true"
  style="width: 1090px; float: left; display: block;"
  >
  <a href="//www.hubspot.com/" target="_blank"
  ><img
  src="//cdn2.hubspot.net/hubfs/53/Contact-Profile.png?t=1430860504240&t=1430335520686"
  alt="HubSpot CRM Contact Profile"
  draggable="false"
  /></a>
  <div class="caption">HubSpot CRM Contact Profile</div>
  </li>
  <li
  class="hs_cos_flex-slide-main hs_cos_flex-active-slide"
  style="width: 1090px; float: left; display: block;"
  >
  <a href="//www.hubspot.com/crm" target="_blank"
  ><img
  src="http://go.hubspot.com/hubfs/Contacts-View-1.png?t=1430860504240&t=1430335520686"
  alt="Screenshot of CRM Contacts"
  draggable="false"
  /></a>
  <div class="caption">CRM Contacts App</div>
  </li>
  <li
  class="hs_cos_flex-slide-main"
  style="width: 1090px; float: left; display: block;"
  >
  <a href="//www.hubspot.com/" target="_blank"
  ><img
  src="//cdn2.hubspot.net/hubfs/53/Contact-Profile.png?t=1430860504240&t=1430335520686"
  alt="HubSpot CRM Contact Profile"
  draggable="false"
  /></a>
  <div class="caption">HubSpot CRM Contact Profile</div>
  </li>
  <li
  class="hs_cos_flex-slide-main clone"
  aria-hidden="true"
  style="width: 1090px; float: left; display: block;"
  >
  <a href="//www.hubspot.com/crm" target="_blank"
  ><img
  src="http://go.hubspot.com/hubfs/Contacts-View-1.png?t=1430860504240&t=1430335520686"
  alt="Screenshot of CRM Contacts"
  draggable="false"
  /></a>
  <div class="caption">CRM Contacts App</div>
  </li>
  </ul>
  </div>
  <ol class="hs_cos_flex-control-nav hs_cos_flex-control-paging">
  <li><a class="hs_cos_flex-active">1</a></li>
  <li><a class="">2</a></li>
  </ol>
  <ul class="hs_cos_flex-direction-nav">
  <li><a class="hs_cos_flex-prev" href="#">Previous</a></li>
  <li><a class="hs_cos_flex-next" href="#">Next</a></li>
  </ul>
  </div>
  <script>
  window.hsSliderConfig = window.hsSliderConfig || {};
  window.hsSliderConfig['crm_gallery'] = {
  mode: 'gallery',
  mainConfig: {
  animationLoop: true,
  direction: 'horizontal',
  slideshowSpeed: 5000.0,
  controlNav: true,
  smoothHeight: false,
  namespace: 'hs_cos_flex-',
  slideshow: true,
  selector: '.hs_cos_flex-slides > li',
  animation: 'slide',
  },
  };
  </script></span
  >
  ```
</CodeGroup>

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

<CodeGroup>
  ```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}
  <span
  id="hs_cos_wrapper_my_header"
  class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_header"
  style=""
  data-hs-cos-general-type="widget"
  data-hs-cos-type="header"
  >
  <h1>A clear and bold header</h1>
  </span>
  ```
</CodeGroup>

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

<CodeGroup>
  ```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}
  <span
  id="hs_cos_wrapper_module_42549274798_"
  class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_icon"
  style=""
  data-hs-cos-general-type="widget"
  data-hs-cos-type="icon"
  >
  <svg
  version="1.0"
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 448 512"
  aria-hidden="true"
  >
  <g id="layer1">
  <path
  d="M423.9 255.8L411 413.1c-3.3 40.7-63.9 35.1-60.6-4.9l10-122.5-41.1 2.3c10.1 20.7 15.8 43.9 15.8 68.5 0 41.2-16.1 78.7-42.3 106.5l-39.3-39.3c57.9-63.7 13.1-167.2-74-167.2-25.9 0-49.5 9.9-67.2 26L73 243.2c22-20.7 50.1-35.1 81.4-40.2l75.3-85.7-42.6-24.8-51.6 46c-30 26.8-70.6-18.5-40.5-45.4l68-60.7c9.8-8.8 24.1-10.2 35.5-3.6 0 0 139.3 80.9 139.5 81.1 16.2 10.1 20.7 36 6.1 52.6L285.7 229l106.1-5.9c18.5-1.1 33.6 14.4 32.1 32.7zm-64.9-154c28.1 0 50.9-22.8 50.9-50.9C409.9 22.8 387.1 0 359 0c-28.1 0-50.9 22.8-50.9 50.9 0 28.1 22.8 50.9 50.9 50.9zM179.6 456.5c-80.6 0-127.4-90.6-82.7-156.1l-39.7-39.7C36.4 287 24 320.3 24 356.4c0 130.7 150.7 201.4 251.4 122.5l-39.7-39.7c-16 10.9-35.3 17.3-56.1 17.3z"
  ></path>
  </g>
  </svg>
  </span>
  ```
</CodeGroup>

| 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 :<ul><li>`fontawesome-5.14.0` </li><li>`fontawesome-5.0.10`</li><li>`fontawesome-6.4.2`</li></ul>                                                                                                                              |              |
| `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.

<CodeGroup>
  ```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}
  <span
  id="hs_cos_wrapper_executive_image"
  class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_image"
  style=""
  data-hs-cos-general-type="widget"
  data-hs-cos-type="image"
  >
  <img
  src="//cdn2.hubspot.net/hub/53/file-733888619-jpg/assets/hubspot.com/about/management/brian-home.jpg?width=300"
  class="hs-image-widget "
  width="300"
  alt="Photo of Brian Halligan"
  title="Photo of Brian Halligan"
  />
  </span>
  ```
</CodeGroup>

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

<CodeGroup>
  ```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
  ```
</CodeGroup>

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

<CodeGroup>
  ```text entrée.txt theme={null}
  {% language_switcher "language_switcher" overrideable=false, display_mode="localized", label="Language Switcher" %}
  ```

  ```text résultat.txt theme={null}
  <span
  id="hs_cos_wrapper_module_1487954976079503"
  class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_language_switcher"
  style=""
  data-hs-cos-general-type="widget"
  data-hs-cos-type="language_switcher"
  >
  <div class="lang_switcher_class">
  <div class="globe_class">
  <ul class="lang_list_class">
  <li>
  <a class="lang_switcher_link" href="http://www.hubspot.com"
  >English</a
  >
  </li>
  <li>
  <a class="lang_switcher_link" href="http://www.hubspot.com/es"
  >Spanish</a
  >
  </li>
  </ul>
  </div>
  </div>
  </span>
  ```
</CodeGroup>

| Paramètre      | Type        | Description                                                                                                                                                                                                                                                                                                                                  | Par défaut  |
| -------------- | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
| `display_mode` | Énumération | La langue du texte dans le sélecteur de langue. Les valeurs sont : <ul><li>`Pagelang` signifie que le nom des langues s'affichera dans la langue de la page sur laquelle se trouve le sélecteur.</li><li>`Localized` signifie que le nom de chaque langue s'affichera dans cette langue.</li><li>`Hybrid` est un mélange des deux.</li></ul> | `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.

<CodeGroup>
  ```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}
  <span
  id="hs_cos_wrapper_executive_image"
  class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_linked_image"
  style=""
  data-hs-cos-general-type="widget"
  data-hs-cos-type="linked_image"
  >
  <a
  href="https://twitter.com/bhalligan"
  target="_blank"
  id="hs-link-executive_image"
  style="border-width:0px;border:0px;"
  >
  <img
  src="//cdn2.hubspot.net/hub/53/file-733888619-jpg/assets/hubspot.com/about/management/brian-home.jpg?width=300"
  class="hs-image-widget "
  style="width:300px;border-width:0px;border:0px;"
  width="300"
  alt="Photo of Brian Halligan"
  title="Photo of Brian Halligan"
  />
  </a>
  </span>
  ```
</CodeGroup>

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

<CodeGroup>
  ```text entrée.txt theme={null}
  {% logo "logo" %}
  {% logo "my_logo" width="200" %}
  ```

  ```text résultat.txt theme={null}
  <span
  id="hs_cos_wrapper_my_logo"
  class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_logo"
  style=""
  data-hs-cos-general-type="widget"
  data-hs-cos-type="logo"
  >
  <a href="//www.hubspot.com" id="hs-link-my_logo">
  <img
  src="//cdn2.hubspot.net/hub/53/file-1237149549-png/assets/hubspot.com/V2-Global/hubspot-logo-dark.png?t=1430948896766&width=200"
  class="hs-image-widget "
  width="200"
  alt="HubSpot logo"
  title="HubSpo logot"
  />
  </a>
  </span>
  ```
</CodeGroup>

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

<CodeGroup>
  ```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}
  <div id="hs_menu_wrapper_my_menu" class="hs-menu-wrapper active-branch flyouts hs-menu-flow-horizontal" data-sitemap-name="Default">
  <ul>
  <li class="hs-menu-item hs-menu-depth-1"><a href="http://www.husbpot.com/Software">Software</a></li>
  <li class="hs-menu-item hs-menu-depth-1"><a href="http://www.hubspot.com/pricing">Pricing</a></li>
  <li class="hs-menu-item hs-menu-depth-1"><a href="http://www.hubspot.com/resources">Resources</a></li>
  <li class="hs-menu-item hs-menu-depth-1"><a href="http://www.hubspot.com/contact">Contact</a></li>
  </ul>
  </div>
  </span>
  ```
</CodeGroup>

| 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 `<head>`.

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.

<CodeGroup>
  ```text entrée.txt theme={null}
  {{ standard_header_includes }}
  <!-- more html -->

  {% require_css %}
  <style>
  body {
  color: red;
  }
  </style>
  {% end_require_css %}

  {{ standard_footer_includes }}
  ```

  ```text résultat.txt theme={null}
  <!-- other standard header html -->
  <style>
  body {
  color: red;
  }
  </style>
  <!-- more html -->
  <!-- other standard footer html -->
  ```
</CodeGroup>

## 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 `<head>` 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 %}
  <meta name="third-party-app-verification-id" content="123456">
  <link rel="prefetch" href="http://example.com/large-script.js">
  <!-- these are purely examples, you could add anything that requires being in the head. require_css and require_js should be used instead of this when embedding a style tag or script tag.-->
{% 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 `<head />` à partir d'un fichier différent via un élément `<script />` (et non intraligne comme indiqué ici), utilisez plutôt la fonction HubL [`require_js(absolute_url)`](/docs/cms/reference/hubl/functions#require-js).

<CodeGroup>
  ```text entrée.txt theme={null}
  {{ standard_header_includes }}
  <!-- more html -->

  {% require_js position="footer" %}
  <script>
  console.log("The CMS is awesome!");
  </script>
  {% end_require_js %}

  {{ standard_footer_includes }}
  ```

  ```text résultat.txt theme={null}
  <!-- other standard header html -->
  <!-- more html -->
  <script>
  console.log('The CMS is awesome!');
  </script>
  <!-- other standard footer html -->
  ```
</CodeGroup>

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

<CodeGroup>
  ```text entrée.txt theme={null}
  {% rich_text "rich_text" %}
  {% rich_text "left_column" label="Enter HTML here" html="<div>My rich text default content</div>" %}

  Block Syntax Example:

  {% widget_block rich_text "right_column" overrideable=True, label="Right Column"  %}
  {% widget_attribute "html" %}
  <h2>Something Powerful</h2>
  <h3>Tell The Reader More</h3>
  <p>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.</p>
  <p>Remember:</p>
  <ul>
  <li>Bullets are great</li>
  <li>For spelling out <a href="#">benefits</a> and</li>
  <li>Turning visitors into leads.</li>
  </ul>
  {% end_widget_attribute %}
  {% end_widget_block %}
  ```

  ```text résultat.txt theme={null}
  <span
  id="hs_cos_wrapper_right_column"
  class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_rich_text"
  style=""
  data-hs-cos-general-type="widget"
  data-hs-cos-type="rich_text"
  >
  <h2>Something Powerful</h2>
  <h3>Tell The Reader More</h3>
  <p>
  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.
  </p>
  <p>Remember:</p>
  <ul>
  <li>Bullets are great</li>
  <li>For spelling out benefits and</li>
  <li>Turning visitors into leads.</li>
  </ul>
  </span>
  ```
</CodeGroup>

| Paramètre | Type   | Description                                            | Par défaut                                                                                                                                                                                                                                                                                                                                                                                         |
| --------- | ------ | ------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `html`    | Chaîne | Le contenu de texte enrichi par défaut pour le module. | `<h2>Something Powerful</h2>  <h3>Tell The Reader More</h3>  <p>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.</p>  <p>Remember:</p>  <ul><li>Bullets are great</li><li>For spelling out [benefits](#) and</li><li>Turning visitors into leads.</li></ul>` |

## 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.
</Warning>

<CodeGroup>
  ```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}
  <span
  id="hs_cos_wrapper_module_70642123068_my_rss_listing"
  class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_rss_listing"
  style=""
  data-hs-cos-general-type="widget"
  data-hs-cos-type="rss_listing"
  >
  <h3></h3>
  <div class="hs-rss-module feedreader_box hs-hash-758735283">
  <div class="hs-rss-item ">
  <div class="hs-rss-item-text">
  <a
  class="hs-rss-title"
  href="https://developers.hubspot.com/blog/how-to-write-cron-jobs-in-hubspot-to-take-time-based-action-on-crm-data"
  >
  <span
  >How to Write Cron Jobs in HubSpot to take Time Based Action on CRM
  Data</span
  >
  </a>
  <div class="hs-rss-byline">
  by <span class="hs-rss-author">Jon McLaren</span>
  <span class="hs-rss-posted-at"> posted at</span>
  <span class="hs-rss-date">3/8/23 10:42 AM</span>
  </div>
  <div class="hs-rss-description">
  <p>
  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:
  <a
  href="https://developers.hubspot.com/blog/how-to-write-cron-jobs-in-hubspot-to-take-time-based-action-on-crm-data"
  >Read more</a
  >
  </p>
  </div>
  </div>
  </div>
  <div class="hs-rss-item ">
  <div class="hs-rss-item-text">
  <a
  class="hs-rss-title"
  href="https://developers.hubspot.com/blog/implementing-semantic-search-into-a-hubspot-workflow"
  >
  <span
  >Using OpenAI Embeddings API to implement Semantic Search into a
  HubSpot Workflow</span
  >
  </a>
  <div class="hs-rss-byline">
  by <span class="hs-rss-author">Roman Kozak</span>
  <span class="hs-rss-posted-at"> posted at</span>
  <span class="hs-rss-date">3/7/23 2:09 PM</span>
  </div>
  <div class="hs-rss-description">
  <p>
  This article was authored by a member of the HubSpot developer
  community, Roman Kozak.
  <a
  href="https://developers.hubspot.com/blog/implementing-semantic-search-into-a-hubspot-workflow"
  >Read more</a
  >
  </p>
  </div>
  </div>
  </div>
  <div class="hs-rss-item ">
  <div class="hs-rss-item-text">
  <a
  class="hs-rss-title"
  href="https://developers.hubspot.com/blog/how-to-use-npm-packages-in-custom-code-workflow-actions"
  >
  <span>How to Use NPM Packages in Custom Code Workflow Actions</span>
  </a>
  <div class="hs-rss-byline">
  by <span class="hs-rss-author">Joshua Beatty</span>
  <span class="hs-rss-posted-at"> posted at</span>
  <span class="hs-rss-date">2/28/23 10:30 AM</span>
  </div>
  <div class="hs-rss-description">
  <p>
  This article was authored by a member of the HubSpot developer
  community, Joshua Beatty.
  <a
  href="https://developers.hubspot.com/blog/how-to-use-npm-packages-in-custom-code-workflow-actions"
  >Read more</a
  >
  </p>
  </div>
  </div>
  </div>
  </div>
  </span>
  ```
</CodeGroup>

| 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 `<p>`.

<CodeGroup>
  ```text entrée.txt theme={null}
  {% section_header "section_header" %}
  {% section_header "my_section_header" subheader="A more subdued subheader", header="A clear and bold header", label="Section Header"  %}
  ```

  ```text résultat.txt theme={null}
  <span
  id="hs_cos_wrapper_my_section_header"
  class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_section_header"
  style=""
  data-hs-cos-general-type="widget"
  data-hs-cos-type="section_header"
  >
  <div class="page-header section-header">
  <h1>A clear and bold header</h1>
  <p class="secondary-header">
  <span id="hs_cos_wrapper_subheader" class="section-subheader"
  >A more subdued subheader</span
  >
  </p>
  </div>
  </span>
  ```
</CodeGroup>

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

<CodeGroup>
  ```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}
  <span
  id="hs_cos_wrapper_my_simple_menu"
  class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_simple_menu"
  style=""
  data-hs-cos-general-type="widget"
  data-hs-cos-type="simple_menu"
  >
  <ul></ul>
  </span>

  <span
  id="hs_cos_wrapper_block_simple_menu"
  class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_simple_menu"
  style=""
  data-hs-cos-general-type="widget"
  data-hs-cos-type="simple_menu"
  >
  <div
  id="hs_menu_wrapper_module_143093417497114626"
  class="hs-menu-wrapper active-branch flyouts hs-menu-flow-horizontal"
  data-sitemap-name=""
  >
  <ul>
  <li class="hs-menu-item hs-menu-depth-1">
  <a href="//www.hubspot.com" target="_self">Home</a>
  </li>
  <li class="hs-menu-item hs-menu-depth-1 hs-item-has-children">
  <a href="//www.hubspot.com/internet-marketing-company" target="_self"
  >About</a
  >
  <ul class="hs-menu-children-wrapper">
  <li class="hs-menu-item hs-menu-depth-2">
  <a href="//www.hubspot.com/company/management" target="_self"
  >Our Team</a
  >
  </li>
  </ul>
  </li>
  <li class="hs-menu-item hs-menu-depth-1">
  <a href="//www.hubspot.com/pricing" target="_self">Pricing</a>
  </li>
  </ul>
  </div>
  </span>
  ```
</CodeGroup>

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

<CodeGroup>
  ```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}
  <span
  id="hs_cos_wrapper_social_sharing"
  class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_social_sharing"
  style=""
  data-hs-cos-general-type="widget"
  data-hs-cos-type="social_sharing"
  >
  <a
  href="http://www.facebook.com/share.php?u=http%3A%2F%2Fexample.com%2Fmy-page%3Futm_medium%3Dsocial%26utm_source%3Dfacebook"
  target="_blank"
  style="width:24px;border-width:0px;border:0px;"
  >
  <img
  src="//static.hubspot.com/final/img/common/icons/social/facebook-24x24.png?width=24"
  class="hs-image-widget hs-image-social-sharing-24"
  style="max-height:24px;max-width:24px;border-width:0px;border:0px;"
  width="24"
  hspace="0"
  alt="Share on Facebook"
  />
  </a>
  <a
  href="http://www.linkedin.com/shareArticle?mini=true&url=http%3A%2F%2Fexample.com%2Fmy-page%3Futm_medium%3Dsocial%26utm_source%3Dlinkedin"
  target="_blank"
  style="width:24px;border-width:0px;border:0px;"
  >
  <img
  src="//static.hubspot.com/final/img/common/icons/social/linkedin-24x24.png?width=24"
  class="hs-image-widget hs-image-social-sharing-24"
  style="max-height:24px;max-width:24px;border-width:0px;border:0px;"
  width="24"
  hspace="0"
  alt="Share on LinkedIn"
  />
  </a>
  <a
  href="https://twitter.com/intent/tweet?original_referer=http%3A%2F%2Fexample.com%2Fmy-page%3Futm_medium%3Dsocial%26utm_source%3Dtwitter&url=http%3A%2F%2Fexample.com%2Fmy-page%3Futm_medium%3Dsocial%26utm_source%3Dtwitter&source=tweetbutton&text="
  target="_blank"
  style="width:24px;border-width:0px;border:0px;"
  >
  <img
  src="//static.hubspot.com/final/img/common/icons/social/twitter-24x24.png?width=24"
  class="hs-image-widget hs-image-social-sharing-24"
  style="max-height:24px;max-width:24px;border-width:0px;border:0px;"
  width="24"
  hspace="0"
  alt="Share on Twitter"
  />
  </a>
  <a
  href="http://pinterest.com/pin/create/button/?url=http%3A%2F%2Fexample.com%2Fmy-page%3Futm_medium%3Dsocial%26utm_source%3Dpinterest&media=http%3A%2F%2Fcdn1.hubspot.com%2Fhub%2F158015%2F305390_10100548508246879_837195_59275782_6882128_n.jpg"
  target="_blank"
  style="width:24px;border-width:0px;border:0px;"
  >
  <img
  src="//static.hubspot.com/final/img/common/icons/social/pinterest-24x24.png?width=24"
  class="hs-image-widget hs-image-social-sharing-24"
  style="max-height:24px;max-width:24px;border-width:0px;border:0px;"
  width="24"
  hspace="0"
  alt="Share on Pinterest"
  /></a>
  <a
  href="mailto:?subject=Check out http%3A%2F%2Fexample.com%2Fmy-page%3Futm_medium%3Dsocial%26utm_source%3Demail &body=Check out http%3A%2F%2Fexample.com%2Fmy-page%3Futm_medium%3Dsocial%26utm_source%3Demail"
  target="_blank"
  style="width:24px;border-width:0px;border:0px;"
  >
  <img
  src="//static.hubspot.com/final/img/common/icons/social/email-24x24.png?width=24"
  class="hs-image-widget hs-image-social-sharing-24"
  style="max-height:24px;max-width:24px;border-width:0px;border:0px;"
  width="24"
  hspace="0"
  alt="Share on Email"
  />
  </a>
  </span>
  ```
</CodeGroup>

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

<CodeGroup>
  ```text entrée.txt theme={null}
  {% space "space" %}
  {% space "spacer" label="Horizontal Spacer" %}
  ```

  ```text résultat.txt theme={null}
  <span
  id="hs_cos_wrapper_module_spacer"
  class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_space"
  style=""
  data-hs-cos-general-type="widget"
  data-hs-cos-type="space"
  ></span>
  ```
</CodeGroup>

## 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).

<CodeGroup>
  ```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}
  <span
  class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_simple_subscription"
  data-hs-cos-general-type="widget"
  data-hs-cos-type="email_simple_subscription"
  id="hs_cos_wrapper_email_simple_subscription"
  style=""
  ></span>
  <div class="page-header">
  <span
  class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_simple_subscription"
  data-hs-cos-general-type="widget"
  data-hs-cos-type="email_simple_subscription"
  id="hs_cos_wrapper_email_simple_subscription"
  style=""
  ></span>
  <h1>
  <span
  class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_simple_subscription"
  data-hs-cos-general-type="widget"
  data-hs-cos-type="email_simple_subscription"
  id="hs_cos_wrapper_email_simple_subscription"
  style=""
  >Email Unsubscribe</span
  >
  </h1>
  <span
  class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_simple_subscription"
  data-hs-cos-general-type="widget"
  data-hs-cos-type="email_simple_subscription"
  id="hs_cos_wrapper_email_simple_subscription"
  style=""
  ></span>
  </div>
  <form
  id="email-prefs-form"
  method="post"
  name="email-prefs-form"
  style="position: relative"
  >
  <span
  class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_simple_subscription"
  data-hs-cos-general-type="widget"
  data-hs-cos-type="email_simple_subscription"
  id="hs_cos_wrapper_email_simple_subscription"
  style=""
  ></span>
  <div id="content">
  <span
  class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_simple_subscription"
  data-hs-cos-general-type="widget"
  data-hs-cos-type="email_simple_subscription"
  id="hs_cos_wrapper_email_simple_subscription"
  style=""
  ></span>
  <h3 style="font-weight: normal">
  <span
  class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_simple_subscription"
  data-hs-cos-general-type="widget"
  data-hs-cos-type="email_simple_subscription"
  id="hs_cos_wrapper_email_simple_subscription"
  style=""
  >Your email address:</span
  >
  </h3>
  <div style="padding-bottom: 10px">
  <span
  class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_simple_subscription"
  data-hs-cos-general-type="widget"
  data-hs-cos-type="email_simple_subscription"
  id="hs_cos_wrapper_email_simple_subscription"
  style=""
  ><input
  class="email-edit hs-input"
  name="email"
  placeholder="email@example.com"
  style="padding: 6px; font-size: 15px; width: 507px; margin-left: 0px"
  type="email"
  value=""
  /></span>
  </div>
  <span
  class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_simple_subscription"
  data-hs-cos-general-type="widget"
  data-hs-cos-type="email_simple_subscription"
  id="hs_cos_wrapper_email_simple_subscription"
  style=""
  ><input
  class="hs-button primary"
  id="submitbutton"
  type="submit"
  value="Unsubscribe"
  /></span>
  </div>
  <span
  class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_simple_subscription"
  data-hs-cos-general-type="widget"
  data-hs-cos-type="email_simple_subscription"
  id="hs_cos_wrapper_email_simple_subscription"
  style=""
  ></span>
  </form>
  ```
</CodeGroup>

| 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)

<CodeGroup>
  ```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}
  <span
  class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_subscriptions"
  data-hs-cos-general-type="widget"
  data-hs-cos-type="email_subscriptions"
  id="hs_cos_wrapper_email_subscriptions"
  style=""
  ></span>
  <form id="email-prefs-form" method="post" name="email-prefs-form">
  <span
  class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_subscriptions"
  data-hs-cos-general-type="widget"
  data-hs-cos-type="email_subscriptions"
  id="hs_cos_wrapper_email_subscriptions"
  style=""
  ></span>
  <div class="page-header">
  <span
  class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_subscriptions"
  data-hs-cos-general-type="widget"
  data-hs-cos-type="email_subscriptions"
  id="hs_cos_wrapper_email_subscriptions"
  style=""
  ></span>
  <h1>
  <span
  class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_subscriptions"
  data-hs-cos-general-type="widget"
  data-hs-cos-type="email_subscriptions"
  id="hs_cos_wrapper_email_subscriptions"
  style=""
  >Communication Preferences</span
  >
  </h1>
  <h2>
  <span
  class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_subscriptions"
  data-hs-cos-general-type="widget"
  data-hs-cos-type="email_subscriptions"
  id="hs_cos_wrapper_email_subscriptions"
  style=""
  >example@email.com</span
  >
  </h2>
  <span
  class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_subscriptions"
  data-hs-cos-general-type="widget"
  data-hs-cos-type="email_subscriptions"
  id="hs_cos_wrapper_email_subscriptions"
  style=""
  ><br
  /></span>
  <p>
  <span
  class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_subscriptions"
  data-hs-cos-general-type="widget"
  data-hs-cos-type="email_subscriptions"
  id="hs_cos_wrapper_email_subscriptions"
  style=""
  >If this is not your email address, please ignore this page since the
  email associated with this page was most likely forwarded to you.</span
  >
  </p>
  </div>
  <div class="email-prefs" id="content">
  <span
  class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_subscriptions"
  data-hs-cos-general-type="widget"
  data-hs-cos-type="email_subscriptions"
  id="hs_cos_wrapper_email_subscriptions"
  style=""
  ></span>
  <p class="header">
  <span
  class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_subscriptions"
  data-hs-cos-general-type="widget"
  data-hs-cos-type="email_subscriptions"
  id="hs_cos_wrapper_email_subscriptions"
  style=""
  >Uncheck the types of emails you do not want to receive:</span
  >
  </p>
  <span
  class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_subscriptions"
  data-hs-cos-general-type="widget"
  data-hs-cos-type="email_subscriptions"
  id="hs_cos_wrapper_email_subscriptions"
  style=""
  ><input name="email" type="hidden" value="example@email.com" />
  <input name="unsub_url" type="hidden" value="" />
  <input name="unsubed_all" type="hidden" value="false" />
  <input name="subscription_ids" type="hidden" value=""
  /></span>
  <div class="item">
  <span
  class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_subscriptions"
  data-hs-cos-general-type="widget"
  data-hs-cos-type="email_subscriptions"
  id="hs_cos_wrapper_email_subscriptions"
  style=""
  ></span>
  <div class="item-inner">
  <span
  class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_subscriptions"
  data-hs-cos-general-type="widget"
  data-hs-cos-type="email_subscriptions"
  id="hs_cos_wrapper_email_subscriptions"
  style=""
  ></span>
  <div class="checkbox-row">
  <span
  class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_subscriptions"
  data-hs-cos-general-type="widget"
  data-hs-cos-type="email_subscriptions"
  id="hs_cos_wrapper_email_subscriptions"
  style=""
  ><span class="fakelabel"
  ><input id="id_0" name="id_0" type="checkbox" />
  <span>Example Subscription #1</span></span
  ></span
  >
  </div>
  <p>Your email type description</p>
  </div>
  </div>
  <div class="item">
  <div class="item-inner">
  <div class="checkbox-row">
  <span class="fakelabel"
  ><input id="id_0" name="id_0" type="checkbox" />
  <span>Example Subscription #2</span></span
  >
  </div>
  <p>Your email type description</p>
  </div>
  </div>
  <div class="subscribe-options" style="margin-right: 0">
  <p class="header">Or check here to never receive any emails:</p>
  <p>
  <label for="globalunsub"
  ><input id="globalunsub" name="globalunsub" type="checkbox" />
  <span>Unsubscribe me from all mailing lists.</span></label
  >
  </p>
  </div>
  <input
  class="hs-button primary"
  id="submitbutton"
  type="submit"
  value="Update email preferences"
  />
  <div class="clearer"></div>
  </div>
  </form>
  ```
</CodeGroup>

| 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.                                                  | `"<p>If this is not your email address, please ignore this page since the email associated with this page was most likely forwarded to you.</p>"` |
| `unsubscribe_single_text`       | Chaîne | Permet de restituer le texte dans un élément `<p class="header">` 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 `<p class="header">` 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 `<p>` 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)

<CodeGroup>
  ```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}
  <span
  class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_subscriptions_confirmation"
  data-hs-cos-general-type="widget"
  data-hs-cos-type="email_subscriptions_confirmation"
  id="hs_cos_wrapper_email_subscriptions_confirmation"
  style=""
  ></span>
  <div class="page-header">
  <span
  class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_subscriptions_confirmation"
  data-hs-cos-general-type="widget"
  data-hs-cos-type="email_subscriptions_confirmation"
  id="hs_cos_wrapper_email_subscriptions_confirmation"
  style=""
  ></span>
  <h2>
  <span
  class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_subscriptions_confirmation"
  data-hs-cos-general-type="widget"
  data-hs-cos-type="email_subscriptions_confirmation"
  id="hs_cos_wrapper_email_subscriptions_confirmation"
  style=""
  >example@email.com</span
  >
  </h2>
  <span
  class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_subscriptions_confirmation"
  data-hs-cos-general-type="widget"
  data-hs-cos-type="email_subscriptions_confirmation"
  id="hs_cos_wrapper_email_subscriptions_confirmation"
  style=""
  ><br
  /></span>
  <p>
  <span
  class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_subscriptions_confirmation"
  data-hs-cos-general-type="widget"
  data-hs-cos-type="email_subscriptions_confirmation"
  id="hs_cos_wrapper_email_subscriptions_confirmation"
  style=""
  >If this is not your email address, please ignore this page since the
  email associated with this page was most likely forwarded to you.</span
  >
  </p>
  </div>
  <div class="success" id="content">
  <span
  class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_subscriptions_confirmation"
  data-hs-cos-general-type="widget"
  data-hs-cos-type="email_subscriptions_confirmation"
  id="hs_cos_wrapper_email_subscriptions_confirmation"
  style=""
  >You have successfully updated your email preferences.</span
  >
  </div>
  ```
</CodeGroup>

| 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.                                                     | `"<p>If this is not your email address, please ignore this page since the email associated with this page was most likely forwarded to you.</p>"` |
| `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).

<CodeGroup>
  ```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}
  <span
  id="hs_cos_wrapper_my_login"
  class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_member_login"
  style=""
  data-hs-cos-general-type="widget"
  data-hs-cos-type="member_login"
  ><div class="hs-form-field">
  <ul class="no-list hs-error-msgs" style="text-align:center">
  <li>
  <label class="hs-membership-global-error hs-error-msg"></label>
  </li>
  </ul>
  </div>
  <form
  method="post"
  action="/_hcms/mem/login?domain=default&hs_preview_key=c4H4EEQCL-JSCFBlDzG4wg&portalId=2272014&tc_deviceCategory=desktop&template_file_path=my-test-theme%2Ftemplates%2Fsystem%2Fmembership-login.html&updated=1644243124141&redirect_url=/"
  id="hs-membership-form"
  onsubmit="onFormSubmit()"
  data-hs-do-not-collect=""
  >
  <input name="csrf_token" type="hidden" value="" />
  <input name="redirect_url" type="hidden" value="/" />
  <input
  id="hs-membership-form-hubspotutk"
  name="hubspotutk"
  type="hidden"
  value=""
  />

  <div class="hs-form-field">
  <label class="hs-login-widget-email-label" for="hs-login-widget-email"
  >Email*</label
  >
  <input
  class="hs-input"
  name="email"
  type="text"
  placeholder="Email"
  id="hs-login-widget-email"
  value=""
  />
  </div>

  <div class="hs-form-field">
  <label
  class="hs-login-widget-password-label"
  for="hs-login-widget-password"
  >Password*</label
  >
  <a
  class="hs-login-widget-show-password"
  href="https://developers.hubspot.fr/docsjavascript:show_password("hs-login-widget-password');"
  >Show password</a
  >
  <input
  class="hs-input"
  name="password"
  type="password"
  placeholder="Password"
  id="hs-login-widget-password"
  />
  </div>

  <div class="hs-form-field">
  <input
  class="hs-input"
  name="remember_me"
  type="checkbox"
  id="hs-login-widget-remember"
  value="true"
  checked=""
  />
  <label for="hs-login-widget-remember">Remember Me</label>
  </div>
  <div>
  <a id="hs_login_reset" href="https://developers.hubspot.fr/docs/_hcms/mem/reset/request"
  >Forgot your password?</a
  >
  </div>

  <div class="hs-membership-loader hs_submit hs-submit">
  <div class="actions">
  <input type="submit" class="hs-button primary large" value="Login" />
  </div>
  </div>
  </form>

  <script type="text/javascript">
  function onFormSubmit() {
  //    document.querySelector('.hs-membership-loader').classList.add('active');
  }

  document.onkeydown = function (e) {
  if (['ArrowUp', 'ArrowDown'].includes(e.code)) {
  var children = [].slice.call(
  document.querySelectorAll(
  '#hs-membership-form input:not([type="hidden"]):not([type="checkbox"]):not([disabled])'
  )
  );
  for (i = 0; i < children.length; i++) {
  var input = children[i];
  if (input === document.activeElement) {
  if (e.code == 'ArrowDown' && children[i + 1] !== undefined) {
  children[i + 1].focus();
  break;
  } else if (e.code == 'ArrowUp' && children[i - 1] !== undefined) {
  children[i - 1].focus();
  break;
  }
  } else if (i + 1 === children.length) {
  children[0].focus();
  }
  }
  } else if ('Enter' === e.code) {
  e.preventDefault();
  var children = [].slice.call(
  document.querySelectorAll(
  '#hs-membership-form input:not([type="hidden"]):not([type="checkbox"]):not([disabled])'
  )
  );
  for (i = 0; i < children.length; i++) {
  var input = children[i];
  if (
  input === document.activeElement &&
  children[i + 1] !== undefined
  ) {
  children[i + 1].focus();
  break;
  } else if (
  input === document.activeElement &&
  i + 1 === children.length
  ) {
  //          document.querySelector('.hs-membership-loader').classList.add('active');
  document.getElementById('hs-membership-form').submit();
  } else if (i + 1 === children.length) {
  children[0].focus();
  }
  }
  }
  };
  </script>

  <div id="hs-membership-rate-limit-error-text" style="display:none">
  You've made too many attempts at this request. Please try this action again
  in a few minutes.
  </div>
  <script type="text/javascript">
  function show_password(id) {
  var input = document.getElementById(id);
  input.type = input.type === 'password' ? 'text' : 'password';
  }
  </script>
  <script>
  function getCookie(name) {
  var nameEQ = name + '=';
  var ca = document.cookie.split(';');
  for (var i = 0; i < ca.length; i++) {
  var c = ca[i];
  while (c.charAt(0) == ' ') c = c.substring(1, c.length);
  if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
  }
  return null;
  }
  document.getElementById('hs-membership-form-hubspotutk').value =
  getCookie('hubspotutk');
  </script>
  </span>
  ```
</CodeGroup>

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

<CodeGroup>
  ```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}
  <span
  id="hs_cos_wrapper_my_register"
  class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_member_register"
  style=""
  data-hs-cos-general-type="widget"
  data-hs-cos-type="member_register"
  ><div class="hs-form-field">
  <ul class="no-list hs-error-msgs" style="text-align:center">
  <li>
  <label class="hs-membership-global-error hs-error-msg"></label>
  </li>
  </ul>
  </div>
  <form
  method="post"
  action="/_hcms/mem/register?domain=default&hs_preview_key=_zUv_TyY1BCRQ2RviUepiQ&portalId=2272014&tc_deviceCategory=desktop&template_file_path=my-test-theme%2Ftemplates%2Fsystem%2Fmembership-register.html&updated=1644243124290&redirect_url=/_hcms/mem/login?success%3Dtrue"
  id="hs-membership-form"
  onsubmit="onFormSubmit()"
  data-hs-do-not-collect=""
  >
  <input name="csrf_token" type="hidden" value="" />
  <input
  name="redirect_url"
  type="hidden"
  value="/_hcms/mem/login?success=true"
  />
  <input
  id="hs-membership-form-hubspotutk"
  name="hubspotutk"
  type="hidden"
  value=""
  />

  <div class="hs-form-field">
  <label for="hs-register-widget-email">Email*</label>
  <input
  class="hs-input"
  name="email_read_only"
  type="email"
  value=""
  id="hs-register-widget-email"
  disabled=""
  />
  <input name="email" type="hidden" value="" />
  <input name="token" type="hidden" value="" />
  </div>

  <div class="hs-form-field">
  <label for="hs-register-widget-password">Password*</label>
  <a
  class="hs-register-widget-show-password"
  href="https://developers.hubspot.fr/docsjavascript:show_password("hs-register-widget-password');"
  >Show password</a
  >
  <input
  class="hs-input"
  name="password"
  type="password"
  placeholder="Password"
  id="hs-register-widget-password"
  />
  </div>

  <div
  class="form-input-validation-message"
  id="hs-membership-password-requirements"
  >
  <ul class="no-list hs-error-msgs">
  <li>
  <label
  >Password must be at least 8 characters long and include lower and
  uppercase letters, a number, and a symbol</label
  >
  </li>
  </ul>
  </div>
  <div class="hs-form-field">
  <label for="hs-register-widget-password-confirm">Confirm Password*</label>
  <a
  class="hs-register-widget-show-password"
  href="https://developers.hubspot.fr/docsjavascript:show_password("hs-register-widget-password-confirm');"
  >Show password</a
  >
  <input
  class="hs-input"
  name="password_confirm"
  type="password"
  placeholder="Confirm Password"
  id="hs-register-widget-password-confirm"
  />
  </div>

  <div class="hs-membership-loader hs_submit hs-submit">
  <div class="actions">
  <input
  type="submit"
  class="hs-button primary large"
  value="Save Password"
  />
  </div>
  </div>
  </form>
  <script type="text/javascript">
  function onFormSubmit() {
  //    document.querySelector('.hs-membership-loader').classList.add('active');
  }

  document.onkeydown = function (e) {
  if (['ArrowUp', 'ArrowDown'].includes(e.code)) {
  var children = [].slice.call(
  document.querySelectorAll(
  '#hs-membership-form input:not([type="hidden"]):not([type="checkbox"]):not([disabled])'
  )
  );
  for (i = 0; i < children.length; i++) {
  var input = children[i];
  if (input === document.activeElement) {
  if (e.code == 'ArrowDown' && children[i + 1] !== undefined) {
  children[i + 1].focus();
  break;
  } else if (e.code == 'ArrowUp' && children[i - 1] !== undefined) {
  children[i - 1].focus();
  break;
  }
  } else if (i + 1 === children.length) {
  children[0].focus();
  }
  }
  } else if ('Enter' === e.code) {
  e.preventDefault();
  var children = [].slice.call(
  document.querySelectorAll(
  '#hs-membership-form input:not([type="hidden"]):not([type="checkbox"]):not([disabled])'
  )
  );
  for (i = 0; i < children.length; i++) {
  var input = children[i];
  if (
  input === document.activeElement &&
  children[i + 1] !== undefined
  ) {
  children[i + 1].focus();
  break;
  } else if (
  input === document.activeElement &&
  i + 1 === children.length
  ) {
  //          document.querySelector('.hs-membership-loader').classList.add('active');
  document.getElementById('hs-membership-form').submit();
  } else if (i + 1 === children.length) {
  children[0].focus();
  }
  }
  }
  };
  </script>

  <script type="text/javascript">
  function show_password(id) {
  var input = document.getElementById(id);
  input.type = input.type === 'password' ? 'text' : 'password';
  }
  </script>
  <script>
  function getCookie(name) {
  var nameEQ = name + '=';
  var ca = document.cookie.split(';');
  for (var i = 0; i < ca.length; i++) {
  var c = ca[i];
  while (c.charAt(0) == ' ') c = c.substring(1, c.length);
  if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
  }
  return null;
  }
  document.getElementById('hs-membership-form-hubspotutk').value =
  getCookie('hubspotutk');
  </script>
  </span>
  ```
</CodeGroup>

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

<CodeGroup>
  ```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}
  <span
  id="hs_cos_wrapper_my_password_reset_request"
  class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_password_reset_request"
  style=""
  data-hs-cos-general-type="widget"
  data-hs-cos-type="password_reset_request"
  ><div class="hs-form-field">
  <ul class="no-list hs-error-msgs" style="text-align:center">
  <li>
  <label class="hs-membership-global-error hs-error-msg"></label>
  </li>
  </ul>
  </div>
  <div class="hs-form-field">
  <ul class="no-list" style="text-align:center">
  <li>
  <label class="hs-membership-global-message"></label>
  </li>
  </ul>
  </div>
  <form
  method="post"
  action="/_hcms/mem/reset/request?domain=default&hs_preview_key=x7aXsEAvlLtUOa1P5t89wQ&portalId=2272014&tc_deviceCategory=desktop&template_file_path=my-test-theme%2Ftemplates%2Fsystem%2Fmembership-reset-password-request.html&updated=1644243124282&redirect_url=/"
  id="hs-membership-form"
  onsubmit="onFormSubmit()"
  data-hs-do-not-collect=""
  >
  <input name="csrf_token" type="hidden" value="" />
  <input name="redirect_url" type="hidden" value="/" />

  <div class="hs-form-field">
  <label for="hs-reset-request-widget-email">Email*</label>
  <input
  class="hs-input"
  name="email"
  type="text"
  placeholder="Email"
  id="hs-reset-request-widget-email"
  />
  </div>

  <div class="hs-membership-loader hs_submit hs-submit">
  <div class="actions">
  <input
  type="submit"
  class="hs-button primary large"
  value="Send Reset Email"
  />
  </div>
  </div>
  </form>
  <script type="text/javascript">
  function onFormSubmit() {
  //    document.querySelector('.hs-membership-loader').classList.add('active');
  }

  document.onkeydown = function (e) {
  if (['ArrowUp', 'ArrowDown'].includes(e.code)) {
  var children = [].slice.call(
  document.querySelectorAll(
  '#hs-membership-form input:not([type="hidden"]):not([type="checkbox"]):not([disabled])'
  )
  );
  for (i = 0; i < children.length; i++) {
  var input = children[i];
  if (input === document.activeElement) {
  if (e.code == 'ArrowDown' && children[i + 1] !== undefined) {
  children[i + 1].focus();
  break;
  } else if (e.code == 'ArrowUp' && children[i - 1] !== undefined) {
  children[i - 1].focus();
  break;
  }
  } else if (i + 1 === children.length) {
  children[0].focus();
  }
  }
  } else if ('Enter' === e.code) {
  e.preventDefault();
  var children = [].slice.call(
  document.querySelectorAll(
  '#hs-membership-form input:not([type="hidden"]):not([type="checkbox"]):not([disabled])'
  )
  );
  for (i = 0; i < children.length; i++) {
  var input = children[i];
  if (
  input === document.activeElement &&
  children[i + 1] !== undefined
  ) {
  children[i + 1].focus();
  break;
  } else if (
  input === document.activeElement &&
  i + 1 === children.length
  ) {
  //          document.querySelector('.hs-membership-loader').classList.add('active');
  document.getElementById('hs-membership-form').submit();
  } else if (i + 1 === children.length) {
  children[0].focus();
  }
  }
  }
  };
  </script>
  </span>
  ```
</CodeGroup>

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

<CodeGroup>
  ```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}
  <span
  id="hs_cos_wrapper_my_password_reset_request"
  class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_password_reset_request"
  style=""
  data-hs-cos-general-type="widget"
  data-hs-cos-type="password_reset_request"
  ><div class="hs-form-field">
  <ul class="no-list hs-error-msgs" style="text-align:center">
  <li>
  <label class="hs-membership-global-error hs-error-msg"></label>
  </li>
  </ul>
  </div>
  <div class="hs-form-field">
  <ul class="no-list" style="text-align:center">
  <li>
  <label class="hs-membership-global-message"></label>
  </li>
  </ul>
  </div>
  <form
  method="post"
  action="/_hcms/mem/reset/request?domain=default&hs_preview_key=x7aXsEAvlLtUOa1P5t89wQ&portalId=2272014&tc_deviceCategory=desktop&template_file_path=my-test-theme%2Ftemplates%2Fsystem%2Fmembership-reset-password-request.html&updated=1644243124282&redirect_url=/"
  id="hs-membership-form"
  onsubmit="onFormSubmit()"
  data-hs-do-not-collect=""
  >
  <input name="csrf_token" type="hidden" value="" />
  <input name="redirect_url" type="hidden" value="/" />

  <div class="hs-form-field">
  <label for="hs-reset-request-widget-email">Email*</label>
  <input
  class="hs-input"
  name="email"
  type="text"
  placeholder="Email"
  id="hs-reset-request-widget-email"
  />
  </div>

  <div class="hs-membership-loader hs_submit hs-submit">
  <div class="actions">
  <input
  type="submit"
  class="hs-button primary large"
  value="Send Reset Email"
  />
  </div>
  </div>
  </form>
  <script type="text/javascript">
  function onFormSubmit() {
  //    document.querySelector('.hs-membership-loader').classList.add('active');
  }

  document.onkeydown = function (e) {
  if (['ArrowUp', 'ArrowDown'].includes(e.code)) {
  var children = [].slice.call(
  document.querySelectorAll(
  '#hs-membership-form input:not([type="hidden"]):not([type="checkbox"]):not([disabled])'
  )
  );
  for (i = 0; i < children.length; i++) {
  var input = children[i];
  if (input === document.activeElement) {
  if (e.code == 'ArrowDown' && children[i + 1] !== undefined) {
  children[i + 1].focus();
  break;
  } else if (e.code == 'ArrowUp' && children[i - 1] !== undefined) {
  children[i - 1].focus();
  break;
  }
  } else if (i + 1 === children.length) {
  children[0].focus();
  }
  }
  } else if ('Enter' === e.code) {
  e.preventDefault();
  var children = [].slice.call(
  document.querySelectorAll(
  '#hs-membership-form input:not([type="hidden"]):not([type="checkbox"]):not([disabled])'
  )
  );
  for (i = 0; i < children.length; i++) {
  var input = children[i];
  if (
  input === document.activeElement &&
  children[i + 1] !== undefined
  ) {
  children[i + 1].focus();
  break;
  } else if (
  input === document.activeElement &&
  i + 1 === children.length
  ) {
  //          document.querySelector('.hs-membership-loader').classList.add('active');
  document.getElementById('hs-membership-form').submit();
  } else if (i + 1 === children.length) {
  children[0].focus();
  }
  }
  }
  };
  </script>
  </span>
  ```
</CodeGroup>

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

<CodeGroup>
  ```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}
  <span
  id="hs_cos_wrapper_password_prompt"
  class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_password_prompt"
  style=""
  data-hs-cos-general-type="widget"
  data-hs-cos-type="password_prompt"
  >
  <form method="post" action="/_hcms/protected/auth">
  <input name="content_id" type="hidden" value="1" />
  <input
  name="redirect_url"
  type="hidden"
  value="https://preview.hs-sites.com/content-rendering/v1/public/_hcms/preview/template/multi"
  />
  <input
  name="password"
  type="password"
  id="hs-pwd-widget-password"
  style="height: 22px; margin-top: -5px"
  />
  <input type="submit" class="hs-button primary large" value="Submit" />
  </form>
  <script type="text/javascript">
  document.getElementById('hs-pwd-widget-password').focus();
  </script>
  </span>
  ```
</CodeGroup>

| 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.               | `"<p>Sorry, please try again.</p>"` |
| `password_placeholder` | Chaîne | Permet de définir le texte d'espace réservé dans le champ du mot de passe. | `"Password"`                        |

## Texte

Crée une seule ligne de texte. Cette balise peut être utile pour être intégrée à votre balisage, lorsqu'elle est utilisée conjointement avec le paramètre `no_wrapper=True`. Par exemple, si vous souhaitez que vos utilisateurs finaux puissent définir la destination d'une ancre prédéfinie, vous pouvez renseigner l'élément `href` avec un module de texte ayant la forme `no_wrapper=True`.

<CodeGroup>
  ```text entrée.txt theme={null}
  {% text "text" %}
  {% text "simple_text_field" label="Enter text here", value="This is the default value for this text field" %}
  ```

  ```text résultat.txt theme={null}
  <span
  id="hs_cos_wrapper_simple_text_field"
  class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_text"
  style=""
  data-hs-cos-general-type="widget"
  data-hs-cos-type="text"
  >This is the default value for this text field</span
  >
  ```
</CodeGroup>

| Paramètre | Type   | Description                                                             |
| --------- | ------ | ----------------------------------------------------------------------- |
| `value`   | Chaîne | Permet de définir le texte par défaut du champ de texte à ligne unique. |

## Zone de texte

Une zone de texte est similaire à un module de texte dans la mesure où elle permet aux utilisateurs de saisir du texte brut, mais elle leur offre une plus grande zone dans l'éditeur de contenu. Ce module ne prend pas en charge le HTML. Si vous souhaitez l'utiliser directement à l'intérieur d'une balise d'encadrement prédéfinie, ajoutez le paramètre `no_wrapper=true`.

<CodeGroup>
  ```text entrée.txt theme={null}
  {% textarea "my_textarea" %}
  {% textarea "my_textarea" label="Enter plain text block", value="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a urna quis lacus vehicula rutrum.", no_wrapper=True %}
  ```

  ```text résultat.txt theme={null}
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a urna quis
  lacus vehicula rutrum.
  ```
</CodeGroup>

| Paramètre | Type   | Description                                                |
| --------- | ------ | ---------------------------------------------------------- |
| `value`   | Chaîne | Permet de définir le texte par défaut de la zone de texte. |

## Lecteur vidéo

Restituez un lecteur vidéo pour un fichier vidéo à partir du gestionnaire de fichiers dont le paramètre *Autoriser l'intégration, le partage et le suivi* est activé.

<Tabs>
  <Tab title="Entrée">
    ```hubl theme={null}
    {% video_player "embed_player" %}
    {% video_player "embed_player" overrideable=False, type="scriptV4", hide_playlist=True, viral_sharing=False, embed_button=False, width="600", height="375", player_id="6178121750", style="", conversion_asset="{"type":"FORM","id":"9a77c63f-bee6-4ff8-9202-b0af020ea4b2","position":"POST"}" %}
    ```
  </Tab>
</Tabs>

| Paramètre              | Type    | Description                                                                                                                                                                                                                                                     | Par défaut          |
| ---------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- |
| `hide_playlist`        | Booléen | Permet de masquer la playlist vidéo.                                                                                                                                                                                                                            | `True`              |
| `playlist_color`       | Chaîne  | Une valeur de couleur hex pour la playlist.                                                                                                                                                                                                                     |                     |
| `play_button_color`    | Chaîne  | Une valeur de couleur hex pour les boutons de lecture et de pause.                                                                                                                                                                                              | `#2A2A2A`           |
| `embed_button`         | Booléen | Permet d'afficher le bouton d'intégration sur le lecteur.                                                                                                                                                                                                       | `False`             |
| `viral_sharing`        | Booléen | Permet d'afficher le bouton de partage sur les réseaux sociaux sur le lecteur.                                                                                                                                                                                  | `False`             |
| `width`                | Nombre  | La largeur du lecteur vidéo intégré.                                                                                                                                                                                                                            | `Auto`              |
| `height`               | Nombre  | La hauteur du lecteur vidéo intégré.                                                                                                                                                                                                                            | `Auto`              |
| `player_id`            | Nombre  | L'élément `player_id` de la vidéo à intégrer.                                                                                                                                                                                                                   |                     |
| `style`                | Chaîne  | Un style supplémentaire pour le lecteur.                                                                                                                                                                                                                        |                     |
| `conversion_asset`     | JSON    | La définition d'un événement pour le lecteur. Peut restituer le CTA ou le formulaire avant ou après la lecture de la vidéo. Ce paramètre prend un objet JSON avec trois paramètres : type (FORM ou CTA), ID (le guide de l'objet type), position (POST ou PRE). | `See above example` |
| `placeholder_alt_text` | Chaîne  | Le texte alternatif de la vidéo.                                                                                                                                                                                                                                |                     |
