Balises HubL standard

Last updated:

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, 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. Si vous gérez un site web plus ancien, vous pouvez également consulter la liste des balises HubL obsolètes.

La plupart des balises de cette page ont des équivalents dans les modules par défaut. Les modules peuvent être utilisés dans dnd_areas et des colonnes flexibles, ce qui les rend plus puissants et plus conviviaux que les balises que vous voyez ici.

Commentaires de blog

Une balise de commentaire de blog restitue le code d'intégration des commentaires sur un modèle de blog. Ce code d'intégration Javascript charge le formulaire de commentaire et les commentaires en fonction de votre configuration dans les paramètres de votre site web.

Blog Comment Form module: {% blog_comments "blog_comments" overrideable=False, label="Blog Comments" %} Blog Comment Count module: {% blog_comments "blog_comments" %} Blog Comment listing for specific blog: {% blog_comments "default_blog_comments" select_blog="359485112" %}Blog Commment Form Output: <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 no-comments"></div> <div id="hs-comment-embed" style="display:none;"></div> <div id="comment-form" class="new-comments"> <form novalidate="" accept-charset="UTF-8" action="https://api.hubapi.com/comments/v3/comment?portalId=311600" enctype="multipart/form-data" id="hsForm_d30edada-82e4-4a69-aaf4-a9d0376f37e6" method="POST" class="hs-form stacked" data-form-id="d30edada-82e4-4a69-aaf4-a9d0376f37e6" data-portal-id="311600" data-reactid=".hbspt-forms-0"> <div data-reactid=".hbspt-forms-0.0:$0"> <div class="hs_email field hs-form-field" data-reactid=".hbspt-forms-0.0:$0.$email"> <label class="" placeholder="Enter your Email" for="email-d30edada-82e4-4a69-aaf4-a9d0376f37e6" data-reactid=".hbspt-forms-0.0:$0.$email.0"> <span data-reactid=".hbspt-forms-0.0:$0.$email.0.0">Email</span><span class="hs-form-required" data-reactid=".hbspt-forms-0.0:$0.$email.0.1">*</span> </label> <legend class="hs-field-desc" style="display:none;" data-reactid=".hbspt-forms-0.0:$0.$email.1"> </legend> <div class="input" data-reactid=".hbspt-forms-0.0:$0.$email.$email"> <input id="email-d30edada-82e4-4a69-aaf4-a9d0376f37e6" class="hs-input" type="email" name="email" required="" placeholder="" value="" data-reactid=".hbspt-forms-0.0:$0.$email.$email.0"> </div> </div> </div> <div data-reactid=".hbspt-forms-0.0:$1"> <div class="hs_website field hs-form-field" data-reactid=".hbspt-forms-0.0:$1.$website"> <label class="" placeholder="Enter your Website" for="website-d30edada-82e4-4a69-aaf4-a9d0376f37e6" data-reactid=".hbspt-forms-0.0:$1.$website.0"> <span data-reactid=".hbspt-forms-0.0:$1.$website.0.0">Website</span> </label> <legend class="hs-field-desc" style="display:none;" data-reactid=".hbspt-forms-0.0:$1.$website.1"></legend> <div class="input" data-reactid=".hbspt-forms-0.0:$1.$website.$website"> <input id="website-d30edada-82e4-4a69-aaf4-a9d0376f37e6" class="hs-input" type="text" name="website" value="" placeholder="" data-reactid=".hbspt-forms-0.0:$1.$website.$website.0"> </div> </div> </div> <div data-reactid=".hbspt-forms-0.0:$2"> <div class="hs_comment field hs-form-field" data-reactid=".hbspt-forms-0.0:$2.$comment"> <label class="" placeholder="Enter your Comment" for="comment-d30edada-82e4-4a69-aaf4-a9d0376f37e6" data-reactid=".hbspt-forms-0.0:$2.$comment.0"> <span data-reactid=".hbspt-forms-0.0:$2.$comment.0.0">Comment</span> <span class="hs-form-required" data-reactid=".hbspt-forms-0.0:$2.$comment.0.1">*</span> </label> <legend class="hs-field-desc" style="display:none;" data-reactid=".hbspt-forms-0.0:$2.$comment.1"></legend> <div class="input" data-reactid=".hbspt-forms-0.0:$2.$comment.$comment"> <textarea id="comment-d30edada-82e4-4a69-aaf4-a9d0376f37e6" class="hs-input" name="comment" required="" placeholder="" data-reactid=".hbspt-forms-0.0:$2.$comment.$comment.0"></textarea> </div> </div> </div> <div data-reactid=".hbspt-forms-0.0:$3"> <div class="hs_subscribe field hs-form-field" data-reactid=".hbspt-forms-0.0:$3.$subscribe"> <label class="" placeholder="Enter your Subscribe to follow-up comments for this post" for="subscribe-d30edada-82e4-4a69-aaf4-a9d0376f37e6" data-reactid=".hbspt-forms-0.0:$3.$subscribe.0"> <span data-reactid=".hbspt-forms-0.0:$3.$subscribe.0.0"></span> </label> <legend class="hs-field-desc" style="display:none;" data-reactid=".hbspt-forms-0.0:$3.$subscribe.1"></legend> <div class="input" data-reactid=".hbspt-forms-0.0:$3.$subscribe.$subscribe"> <ul class="inputs-list" data-reactid=".hbspt-forms-0.0:$3.$subscribe.$subscribe.0"> <li class="hs-form-booleancheckbox" data-reactid=".hbspt-forms-0.0:$3.$subscribe.$subscribe.0.0"> <label for="subscribe-d30edada-82e4-4a69-aaf4-a9d0376f37e6" class="hs-form-booleancheckbox-display" data-reactid=".hbspt-forms-0.0:$3.$subscribe.$subscribe.0.0.0"> <input id="subscribe-d30edada-82e4-4a69-aaf4-a9d0376f37e6" class="hs-input" type="checkbox" name="subscribe" value="true" data-reactid=".hbspt-forms-0.0:$3.$subscribe.$subscribe.0.0.0.0"> <span data-reactid=".hbspt-forms-0.0:$3.$subscribe.$subscribe.0.0.0.1">Subscribe to follow-up comments for this post</span> </label> </li> </ul> </div> </div> </div> <div data-reactid=".hbspt-forms-0.0:$4"> <div class="hs_lifecyclestage field hs-form-field" style="display:none;" data-reactid=".hbspt-forms-0.0:$4.$lifecyclestage"> <label class="" placeholder="Enter your Lifecycle Stage" for="lifecyclestage-d30edada-82e4-4a69-aaf4-a9d0376f37e6" data-reactid=".hbspt-forms-0.0:$4.$lifecyclestage.0"> <span data-reactid=".hbspt-forms-0.0:$4.$lifecyclestage.0.0">Lifecycle Stage</span> </label> <legend class="hs-field-desc" style="display:none;" data-reactid=".hbspt-forms-0.0:$4.$lifecyclestage.1"></legend> <div class="input" data-reactid=".hbspt-forms-0.0:$4.$lifecyclestage.$lifecyclestage"> <input name="lifecyclestage" class="hs-input" type="hidden" value="subscriber" data-reactid=".hbspt-forms-0.0:$4.$lifecyclestage.$lifecyclestage.0"> </div> </div> </div> <div class="hs_submit" data-reactid=".hbspt-forms-0.2"> <div class="hs-field-desc" style="display:none;" data-reactid=".hbspt-forms-0.2.0"></div> <div class="actions" data-reactid=".hbspt-forms-0.2.1"> <input type="submit" value="Submit Comment" class="hs-button primary" data-reactid=".hbspt-forms-0.2.1.0"> </div> </div> <input name="hs_context" type="hidden" value="{&quot;rumScriptExecuteTime&quot;:1396.815,&quot;rumServiceResponseTime&quot;:7737.500000000001,&quot;rumFormRenderTime&quot;:187.17999999999938,&quot;rumTotalRenderTime&quot;:7738.14,&quot;rumTotalRequestTime&quot;:183.2549999999992,&quot;pageUrl&quot;:&quot;http://311600.hs-sites.com/-temporary-slug-5eccb1d9-1f1b-4bbd-8e19-00e198331b15?hs_preview=ALicr-ma-4312320350&quot;,&quot;pageTitle&quot;:&quot;HubSpot Sales Professional User Guide: HubSpot Sales Professional Overview&quot;,&quot;source&quot;:&quot;FormsNext-static-1.390&quot;,&quot;isHostedOnHubspot&quot;:true,&quot;timestamp&quot;:1479135449193,&quot;userAgent&quot;:&quot;Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.71 Safari/537.36&quot;,&quot;referrer&quot;:&quot;&quot;,&quot;hutk&quot;:&quot;a525e671c25f6b108d25e08c892e359e&quot;,&quot;originalEmbedContext&quot;:{&quot;portalId&quot;:&quot;311600&quot;,&quot;formId&quot;:&quot;d30edada-82e4-4a69-aaf4-a9d0376f37e6&quot;,&quot;target&quot;:&quot;#comment-form&quot;,&quot;redirectUrl&quot;:&quot;http://www.hubspot.com/contact-sales/thanks/&quot;,&quot;pageId&quot;:&quot;23423&quot;,&quot;pageName&quot;:&quot;My great landing page&quot;,&quot;css&quot;:&quot;.your-custom-css {background-color: #fe7722}&quot;,&quot;requiredCss&quot;:&quot;.my-custom-error-msgs {border-radius: 3px;}&quot;,&quot;submitButtonClass&quot;:&quot;hs-button primary&quot;},&quot;recentFieldsCookie&quot;:{},&quot;pageId&quot;:&quot;23423&quot;,&quot;pageName&quot;:&quot;My great landing page&quot;,&quot;boolCheckBoxFields&quot;:&quot;subscribe&quot;,&quot;dateFields&quot;:&quot;&quot;,&quot;redirectUrl&quot;:&quot;http://www.hubspot.com/contact-sales/thanks/&quot;,&quot;smartFields&quot;:{},&quot;urlParams&quot;:{&quot;hs_preview&quot;:&quot;ALicr-ma-4312320350&quot;},&quot;formValidity&quot;:{},&quot;correlationId&quot;:&quot;55d71532-ab6b-4415-98f5-f3a16d7741c9&quot;,&quot;disableCookieSubmission&quot;:false}" data-reactid=".hbspt-forms-0.3"> <input type="hidden" id="id_portalId" name="portalId" value="311600"><input type="hidden" id="id_contentId" name="contentId" value="4312320350"> <input type="hidden" id="id_collectionId" name="collectionId" value="2224463151"> <input type="hidden" id="id_contentAuthorEmail" name="contentAuthorEmail" value="cstone@hubspot.com"><input type="hidden" id="id_contentAuthorName" name="contentAuthorName" value="Christopher Stone"> <input type="hidden" id="id_comment_verification_text" name="comment_verification_text" value="Your comment has been received."> <input type="hidden" id="id_contentTitle" name="contentTitle" value="HubSpot Sales Professional User Guide: HubSpot Sales Professional Overview"> <input type="hidden" id="id_contentPermalink" name="contentPermalink" value="http://311600.hs-sites.com/-temporary-slug-5eccb1d9-1f1b-4bbd-8e19-00e198331b15"> <input type="hidden" id="id_contentCreatedAt" name="contentCreatedAt" value="1479135208000"> <input type="hidden" id="id_formGuid" name="formGuid" value="d30edada-82e4-4a69-aaf4-a9d0376f37e6"> </form> </div> </div> </span> Blog Comment Listing Module Output: (function ($) { var commentsEmbedContext = { portalId: 327485, collectionId: 359485112, contentId: 2684120609, target: '#comments-listing.new-comments', showComments: true, showForm: true, commentVerificationText: "Your comment has been received.", embedScriptEnv: "prod", apiEnv: "prod", contentTitle: "Post title", contentCreatedAt: "1427849160000", contentPermalink: "http:\/\/designers.hubspot.com\/blog\/post-name, contentAuthorEmail: "dhunt@hubspot.com", contentAuthorName: "David Hunt", captchaRequired: true, captchaKey: "6Lc3uMsSAAAAAMjk4NIvPQK9_-ZLk2wBokFCo5Qt", maxThreadDepth: 3, formId: "8d42bb92-241b-4894-b853-1d5f6553daa0" }; function loadComments() { if (window.hubspot && typeof window.hubspot.loadCommentsEmbed === 'function') { hubspot.loadCommentsEmbed(commentsEmbedContext.embedScriptEnv, function () { if (typeof window.hsEmbedComments === 'function') { window.hsEmbedComments(commentsEmbedContext); } }); } else { setTimeout(loadComments, 50); } } loadComments(); })(window.hsjQuery || jQuery);
ParameterTypeDescription Default
limit
Entier

Définit le nombre maximum de commentaires.

5000
select_blog
"default" ou ID de blog

Spécifie 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 true à 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 apparaît vide (aucun texte affiché).

""

Contenu du blog

Si les mises en page en glisser-déposer 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.

Filtre d'article de blog

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

Remarque : Ce module ne peut être utilisé que dans les modèles d'articles de blog.

{% 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" %}<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>
ParameterTypeDescription Default
select_blog
"default" ou ID de blog

Sélectionne le blog HubSpot à utiliser. Ce paramètre utilise soit un ID de blog, soit une valeur "default".

"default"
expand_link_text
Chaîne

 Lien textuel à afficher si le nombre d'articles disponibles est supérieur au nombre maximal de liens. Excluez le paramètre pour omettre le lien.

"see all"
list_title
Chaîne

Titre de liste à afficher.

""
list_tag
Chaîne

Définit la balise utilisée pour la liste. La valeur doit généralement être "ul" ou "ol".

"ul"
title_tag
Chaîne

Définit la balise utilisée pour le titre de la liste.

"h3"
max_links
Nombre

Nombre maximal de valeurs de filtre à afficher. Excluez le paramètre pour tout afficher.

5
filter_type
Énumération

Sélectionne le type de filtre. Les valeurs possibles sont "topic", "month" ou "author".

"topic"

Listing d'article de blog

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

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.

{% 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 %}<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>
ParameterTypeDescription Default
select_blog
"default" ou ID de blog

 Sélectionne 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

Titre de liste à afficher.

""
list_tag
Chaîne

Définit la balise utilisée pour la liste. La valeur doit généralement être "ul" ou "ol".

"ul"
title_tag
Chaîne

Définit la balise utilisée pour le titre de la liste.

"h3"
listing_type
Chaîne

Listez 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

 Nombre maximal d'articles de blog à lister.

5
include_featured_image
Booléen

 Affichez 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. Pour un exemple d'utilisation du paramètre callback facultatif, consultez la création d'une liste d'articles de blog connexes avec la balise HubL pour les articles de blog connexes.

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

{% related_blog_posts %} {% 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" %}<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>
ParameterTypeDescription Default
blog_ids
Entier

Le ou les ID des blogs dont vous souhaitez inclure les articles. Omettez ce paramètre pour utiliser le blog par défaut.

blog_post_ids
Chaîne

Le ou les ID des articles de blog à utiliser pour trouver les articles de blog pertinents à lister (séparés par des virgules). Ce paramètre ne doit être utilisé que lorsque le widget apparaît sur des pages, car sur les articles de blog, il sera attribué par défaut à l'article sur lequel le widget apparaît.

blog_post_override
Chaîne

Le ou les ID des articles de blog qui doivent toujours apparaître dans la liste renvoyée, malgré toutes les autres valeurs des paramètres et des filtres (séparés par des virgules).

limit
Entier

 Nombre maximal d'articles de blog à lister.

3
tags
Chaîne

La ou les balises qui doivent être utilisées pour déterminer si un article est pertinent (séparées par des virgules). Si un article de blog comporte l'une de ces balises ou une balise similaire, la pertinence de l'article est accrue, ce qui améliore son classement dans la liste.

tag_boost
Nombre

Augmente le poids donné aux balises spécifiées dans le paramètre tags pour générer des articles associés. 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
dateTime

Date de publication la plus ancienne.

end_date
dateTime

Date de publication la plus récente.

blog_authors
Chaîne

 Le ou les noms des auteurs dont les articles doivent être inclus (séparés par des virgules).

path_prefixes
Chaîne

Les chemins d'URL ou sous-répertoires dont les articles doivent être inclus (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 spécifiés, la balise générera du HTML dans un format par défaut.

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. S'ils ne sont pas spécifiés ou s'ils sont définis sur Par défaut, le formateur intégré sera utilisé pour formater chaque article.

default
allow_any_language
Chaîne

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

Nous recommandons vivement d'utiliser le paramètre callback au lieu de post_formatter pour améliorer la vitesse de chargement des pages.

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

{% blog_social_sharing "blog_social_sharing" %} {% blog_social_sharing "blog_social_sharing" select_blog="359485112" %}<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>
ParameterTypeDescription Default
select_blog
"default" ou ID de blog

Indique le blog 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

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

{% 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 %}<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', pageId: 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>
ParameterTypeDescription Default
select_blog
"default" ou ID de blog

Sélectionne 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

Définit le texte d'un titre de balise h3 au-dessus du formulaire d'inscription.

"Subscribe Here!"
no_title
Booléen

Si la valeur est true, la balise h3 au-dessus du titre est supprimée.

false
response_message
Chaîne

Définit le message de remerciement en ligne 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.

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="/forms/HubID/FormID/edit/" target="_blank">Default Blog</a></li> \n</ul> ".

\n place le code sur une nouvelle ligne.

Booléen

Une balise booléenne crée une case à cocher dans l'interface utilisateur qui affiche true ou false. 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

{% boolean "boolean" %} {% boolean "nav_toggle" label="Hide navigation", value=False, no_wrapper=True %}false
ParameterTypeDescription Default
value
Booléen

Détermine 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

{% choice "choice" %} {% choice "type_of_page" label="Choose the type of page", value="About", choices="About, Careers, Contact, Store" %}<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>
ParameterTypeDescription
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.

Couleur

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 en ligne, vous souhaiterez utiliser le paramètre no_wrapper=True pour supprimer le wrapper <span>.

{% color "color" %} {% color "my_color_picker" label="Choose a color", color="#000000", no_wrapper=True %}#000000
ParameterTypeDescription
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.

{% 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" %}<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>
ParameterTypeDescription
embed_code
Chaîne

Le code d'intégration pour le CTA. \n différencie les sauts de ligne.

full_html
Chaîne

Le code d'intégration pour le CTA (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

Balisage de l'aperçu de l'éditeur d'image

guid
Chaîne

L'ID unique du CTA. Cet ID est disponible dans l'URL de l'écran Détails d'un CTA particulier. Ce paramètre est utilisé pour choisir le CTA à afficher par défaut.

image_html
Chaîne

HTML de l'image du CTA sans le script CTA.*

image_email
Chaîne

Version du code CTA adaptée aux e-mails.*

* 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. 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 qui génère un CTA à partir de l'ID.

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.

{% 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 %}<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>
ParameterTypeDescription
value
Chaîne

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

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 spécifier le module à charger. Le bloc d'utilisation comprendra également un paramètre de libellé. Consultez la syntaxe ci-dessous :

{% module "module_15677217712485" path="/Custom/Test custom module" %} {% module "module_25642219712432" path="/Assets/Custom calendar module" label="Custom calendar module" %}<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>
ParameterTypeDescription
module_id
Chaîne

L'ID du module à restituer.

path
Chaîne

Le chemin 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

Lors de la création d'un module, vous pouvez ajouter un contenu par défaut à vos champs ou une balise HubL editor_placeholder au fichier HTML + HubL pour restituer un contenu de type variable. Cette balise restitue l'icône et le nom du module comme des variables vides dans l'éditeur.

module-placeholder-content0

Cette balise peut être utile lorsque le module n'a pas de contenu par défaut ou n'en a pas besoin, ou pour simplifier la création du module.

Pour ajouter une variable à un module personnalisé, vous pouvez ajouter une fonction if au fichier HTML + HubL afin d'afficher la variable lorsqu'aucun contenu n'est sélectionné. Par exemple :

{% if module.cta_field.name %} {% cta guid="{{ module.cta_field }}" %} {% elif is_in_editor %} {% editor_placeholder %} {% endif %}

Si vous ne pouvez pas modifier le style de la variable, vous pouvez ajouter les propriétés suivantes au fichier meta.json du module pour personnaliser son contenu :

ParameterTypeDescription
show_module_icon
Booléen

Affichage ou non de l'icône du module.

title
Chaîne

Le titre qui apparaît dans la variable.

description
Chaîne

La description qui apparaît dans la variable.

Par exemple, votre fichier meta.json pourrait ressembler à ce qui suit :

// Module meta.json { "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" } }

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. 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, qui offrent une fonctionnalité similaire. 

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

Remarque : Lors de l'utilisation de cette balise, label doit respecter la valeur name pour que la colonne flexible fonctionne dans l'éditeur de contenu. Par exemple, la syntaxe suivante n'est pas valide :

[% widget_container label="My label" "my_flexible_column" %}

Formulaire

Permet aux utilisateurs de sélectionner un formulaire HubSpot à ajouter à leur page.

{% form "form" %} {% form "my_form" form_to_use="08bd9f0d-3be9-41c2-93b6-231a3a71b143", title="Free Trial" %} Block Syntax Example: {% widget_block form "my_form" form_follow_ups_follow_up_type="", response_redirect_id=306590405, form_to_use="08bd9f0d-3be9-41c2-93b6-231a3a71b143", title="Free Trial", notifications_are_overridden=True, sfdc_campaign="", response_message="Thanks for submitting the form.", response_response_type="redirect", response_redirect_url="", overrideable=True, gotowebinar_webinar_key="", response_redirect_name="Homepage (http://www.hubspot.com/)", label="Form", response={message="Thank you for submitting the form.", redirect_url=""} %} {% widget_attribute "notifications_override_email_addresses" is_json=True %}["noreply@hubspot.com"]{% end_widget_attribute %} {% end_widget_block %}<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: '158015', formId: '08bd9f0d-3be9-41c2-93b6-231a3a71b143', formInstanceId: '6756', pageId: 1, redirectUrl: "http:\/\/www.davidjosephhunt.com\/404", deactivateSmartForm: true, css: '', target: '#hs_form_target_module_13885064832664947', contentType: "landing-page", formData: { cssClass: 'hs-form stacked hs-custom-form' } }); </script> </div>
ParameterTypeDescription Default
form_key
Chaîne

Spécifie un ID unique pour le formulaire au niveau de la page.

form_to_use
Chaîne

Spécifie 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

Ajoute une balise d'en-tête h3 au-dessus du formulaire.

no_title
Booléen

 Si la valeur est true, la balise h3 au-dessus du titre est supprimée.

False
form_follow_ups_follow_up_type
Énumération

Spécifie 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

Spécifie l'ID de l'e-mail de suivi simple pour la page en direct.

simple_email_for_buffer_id
Nombre

Spécifie 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 c'est le cas, cela permet d'envoyer un e-mail de suivi simple. Alternative à form_follow_ups_follow_up_type.

follow_up_type_automation
Booléen

Si la valeur est true, cela inscrit les soumissions dans un workflow. Alternative à form_follow_ups_follow_up_type.

simple_email_campaign_id
Nombre

Spécifie l'ID de l'e-mail de suivi simple. Alternative à simple_email_for_live_id.

form_follow_ups_workflow_id
Nombre

Spécifie l'ID du workflow dans lequel il faut 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 spécifie 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

Détermine s'il faut rediriger vers une autre page ou afficher un message de remerciement en ligne lors de la soumission. La valeur de ce paramètre doit être "redirect" ou "inline".

inline
response_message
Chaîne

Affiche un message de remerciement en ligne. Ce paramètre prend en charge le HTML.

notifications_are_overridden
Booléen

Si la valeur est true, le formulaire enverra les notifications de formulaire aux adresses e-mail spécifiées, sélectionnées dans le paramètre notifications_override_email_addresses
au lieu des valeurs par défaut du formulaire.

False
notifications_override_guid_buffer
Chaîne

ID des paramètres de remplacement dans la version d'auto-enregistrement de la page.

notifications_override_guid
Chaîne

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.

gotowebinar_webinar_key
Chaîne

Spécifie le webinaire GoToWebinar auquel inscrire les contacts qui soumettent le formulaire. Disponible uniquement pour les portails utilisant l'intégration GoToWebinar.

sfdc_campaign
Chaîne

Spécifie 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 portails qui sont intégrés à Salesforce.

Pied de page

Restitue les informations de copyright avec l'année et le nom de l'entreprise spécifiés dans les paramètres de contenu (E-mail > Informations du pied de page).

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

Galerie

Génère une balise de galerie HubSpot. Cette balise de galerie est basée sur 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 en différé à l'aide de JavaScript.

{% 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 %}<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>
ParameterTypeDescription Default
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 true, les diapositives sont passées en boucle.

True
num_seconds
Nombre

Temps de pause entre les diapositives, en secondes.

5
show_pagination
Booléen

Proposez des boutons sous le curseur pour naviguer entre les diapositives.

True
sizing
Énumération

Détermine si le curseur change de taille, en fonction de la hauteur des diapositives. Les valeurs possibles sont "static" ou "resize".

"static"
auto_advance
Booléen

Avance automatiquement les diapositives après le temps défini dans num_secondes.

False
transition
Énumération

Définit le type de transition de la diapositive. Les valeurs possibles sont "fade" ou "slide".

"slide"
caption_position
Énumération

Affecte le positionnement de la légende sur ou sous la diapositive. Les valeurs possibles sont "below" ou "superimpose".

"below"
display_mode
Énumération

Détermine la façon dont la galerie d'images sera affichée. Les valeurs possibles sont "standard", "lightbox" ou "thumbnail".

"standard"
lightboxRows
Nombre

Si "display_mode" est défini sur "lightbox", 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.

{% header "header" %} {% header "my_header" header_tag="h1", overrideable=True, value="A clear and bold header", label="Header" %}<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>
ParameterTypeDescription Default
header_tag
Chaîne

Sélectionnez la balise d'en-tête à restituer. Les valeurs possibles sont h1, h2, h3, h4, h5 ou h6.

h1
value
Chaîne

Restitue 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 FontAwesome 5.0.10, 5.14.0 et 6.4.2.

Cette balise ne peut pas être utilisée dans les modules conçus pour les e-mails.

{% icon name="Accessible Icon" style="REGULAR" unicode="f368" icon_set="fontawesome-5.14.0" purpose="decorative" title="Accessible Icon" %}<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>
Use this table to describe parameters / fields
ParameterTypeDescription Default
name
Chaîne

Nom de l'icône.

style
Chaîne

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

L'ensemble d'icônes FontAwesome à utiliser. Les valeurs possibles sont :

  • fontawesome-5.14.0 
  • fontawesome-5.0.10
  • fontawesome-6.4.2
purpose
Chaîne

L'objectif de l'icône, utilisé pour l'accessibilité. Les valeurs possibles sont decorative ou semantic. Si la valeur est 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.

{% 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" %}<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>
ParameterTypeDescription Default
alt
Chaîne

Définit le texte alternatif par défaut pour l'image.

src
Chaîne

Renseigne l'attribut src de la balise img.

width
Nombre

Définit l'attribut width de la balise img.

The width of the image
height
Nombre

Définit 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

Définit l'attribut hspace de la balise img.

align
Chaîne

Définit l'attribut align de la balise img. Les valeurs possibles sont left, right ou center.

style
Chaîne

Ajoute des déclarations CSS en ligne à la balise img. Par exemple : style="border:1px solid blue; margin:10px".

loading
Chaîne

Contrôle l'attribut de chargement de l'élément img. Utilisé pour le chargement en différé basé sur le navigateur.

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 en ligne ou à d'autres balises. Une alternative à l'utilisation de cette balise est d'utiliser le paramètre export_to_template_context.

{% 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 %}//cdn2.hubspot.net/hub/53/file-733888614-jpg/assets/hubspot.com/about/management/dharmesh-home.jpg
ParameterTypeDescription Default
src
Chaîne

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

{% language_switcher "language_switcher" overrideable=false, display_mode="localized", label="Language Switcher" %}<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>
ParameterTypeDescription Default
display_mode
Énumération

La langue du texte dans le sélecteur de langue. Les valeurs sont :

  • Pagelang signifie que les noms des langues s'afficheront dans la langue de la page sur laquelle se trouve le sélecteur.
  • Localized signifie que le nom de chaque langue s'affichera dans cette langue.
  • Hybrid est un mélange des deux options précédentes.
Localized

Image liée

Crée une image sélectionnable par l'utilisateur qui est encadrée par un lien. Ce module possède tous les paramètres d'un module image avec deux paramètres supplémentaires qui spécifient l'URL de destination du lien et si le lien s'ouvre dans une nouvelle fenêtre.

{% 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" %}<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>
ParameterTypeDescription Default
alt
Chaîne

Définit le texte alternatif par défaut pour l'image.

src
Chaîne

Renseigne l'attribut src de la balise img.

width
Nombre

Définit l'attribut width de la balise img.

The width of the image
height
Nombre

Définit 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

Définit l'attribut hspace de la balise img.

align
Chaîne

Définit l'attribut align de la balise img. Les valeurs possibles sont left, right ou center.

style
Chaîne

Ajoute des déclarations CSS en ligne à 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

Définit l'URL de destination du lien qui encadre la balise img.

target
Chaîne

Définit l'attribut target de la balise link.

loading
Chaîne

Contrôle l'attribut de chargement de l'élément img. Utilisé pour le chargement en différé basé sur le navigateur.

Un module de logo restitue l'image du logo de votre entreprise à partir des paramètres de contenu.

{% logo "logo" %} {% logo "my_logo" width="200" %}<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&amp;width=200" class="hs-image-widget " width="200" alt="HubSpot logo" title="HubSpo logot"> </a> </span>
ParameterTypeDescription Default
suppress_company_name
Booléen

Masque le nom de l'entreprise si un logo image n'est pas défini.

False
alt
Chaîne

Définit le texte alternatif par défaut pour l'image.

Value in Content Settings
src
Chaîne

Renseigne l'attribut src de la balise img.

Value in Content Settings
width
Nombre

Définit l'attribut width de la balise img.

The width of the image
height
Nombre

Définit 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

Définit l'attribut hspace de la balise img.

align
Chaîne

Définit l'attribut align de la balise img. Les valeurs possibles sont left, right ou center.

style
Chaîne

Ajoute des déclarations CSS en ligne à 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

Définit l'URL de destination du lien qui encadre la balise img.

override_inherited_src
Booléen

Si la valeur est 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

Contrôle l'attribut de chargement de l'élément img. Utilisé pour le chargement en différé basé sur le navigateur.

Génère un menu avancé basé sur une arborescence de menu dans Paramètres du contenu > Menus avancés.  Consultez Menus et navigation pour plus d'informations sur l'utilisation des menus dans les modèles et les modules. Si la valeur de id est null, la balise menu restituera le menu par défaut du compte HubSpot.

{% 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" %}<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>
ParameterTypeDescription Default
id
Entier

ID de l'arborescence de menu à partir de Menus avancés dans Paramètres de contenu.

site_map_name
Chaîne

Nom de l'arborescence de menu à partir de Menus avancés dans Paramètres de contenu.

"default"
root_type
Énumération

Spécifie le type de menus avancés. Les options sont "site_root", "top_parent", "parent", "page_name", "page_id" ou "breadcrumb". Ces valeurs correspondent à statique, dynamique par section, dynamique par page et fil d'Ariane.

"site_root"
flyouts
Chaîne

Si la valeur est true, une classe est ajoutée à l'arborescence de menu qui peut être stylisée pour permettre aux éléments de menu enfants d'apparaître lorsque vous survolez le parent. Si la valeur est false, les éléments de menu enfants apparaîtront toujours.

"true"
max_levels
Entier

Détermine 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

Définit 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

Utilisé pour trouver la racine du menu. Lorsque root_type est défini comme page_id ou page_name, ce paramètre doit être l'ID de la page ou le libellé de la page, respectivement.

"horizontal"

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, sauf qu'elle insère un style en ligne 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. 

{{ standard_header_includes }} <!-- more html --> {% require_css %} <style> body { color: red; } </style> {% end_require_css %} {{ standard_footer_includes }}<!-- other standard header html --> <style> body { color: red; } </style> <!-- more html --> <!-- other standard footer html -->

require_head

Une balise HubL qui met en file d'attente tout ce qui est placé à l'intérieur dans le fichier standard_header_includes qui se trouve dans le modèle <head>. 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.

{% 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 en ligne comme ici), utilisez plutôt la fonction HubL require_js(absolute_url).

{{ standard_header_includes }} <!-- more html --> {% require_js position="footer" %} <script> console.log("The CMS is awesome!"); </script> {% end_require_js %} {{ standard_footer_includes }}<!-- other standard header html --> <!-- more html --> <script> console.log("The CMS is awesome!"); </script> <!-- other standard footer html -->
ParameterTypeDescription Default
position
Chaîne

Définit la position où le script en ligne sera restitué. Les options sont "head" et "footer".

"footer"

Texte enrichi

Crée un éditeur de contenu WYSIWYG.

{% 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 %}<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>
ParameterTypeDescription Default
html
Chaîne

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 <a href="#">benefits</a> and</li> <li>Turning visitors into leads.</li> </ul>

Listing RSS

Charge une liste de contenu à partir d'un flux RSS interne ou externe.

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.
{% 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" %}<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>
ParameterTypeDescription Default
show_title
Booléen

 Affiche ou masque le titre du flux RSS.

True
show_date
Booléen

Affiche la date de publication.

True
show_author
Booléen

Affiche le nom de l'auteur.

True
show_detail
Booléen

Affiche le résumé du message jusqu'au nombre de caractères défini par le paramètre limit_to_chars.

True
title
Chaîne

Ajoute un titre au-dessus de la liste de flux RSS.

limit_to_chars
Nombre

Nombre maximum de caractères à afficher dans le résumé.

200
publish_date_format
Chaîne

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

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

Affiche l'image en vignette avec le lien de l'article pour les flux RSS générés par HubSpot.

False
item_title_tag
Chaîne

Spécifie 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

Nombre maximal d'articles à afficher.

5
publish_date_language
Chaîne

Spécifie 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

ID du blog lorsque la source du flux est un blog interne.

select_blog
Chaîne

Peut être utilisé pour sélectionner un flux de blog interne à HubSpot.

default
feed_source
Chaîne

Définissez 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

ID pour la balise lorsque la source du flux est un blog interne.

En-tête de section

Génère un titre HTML et un sous-titre <p>.

{% section_header "section_header" %} {% section_header "my_section_header" subheader="A more subdued subheader", header="A clear and bold header", label="Section Header" %}<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>
ParameterTypeDescription Default
header
Chaîne

Texte à afficher dans l'en-tête.

"A clear and bold header"
subheader
Chaîne

Texte à afficher dans le sous-titre.

"A more subdued subheader"
heading_level
Chaîne

Le niveau de titre sémantique HTML (h1 à h6 pris en charge).

"h1"

Les menus simples vous permettent de créer des menus de 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 pour configurer une arborescence de menu par défaut.

{% 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 %}<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>
ParameterTypeDescription Default
orientation
Énumération

Définit 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

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 pour personnaliser les images des icônes et plus encore.

{% 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 %}<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>
ParameterTypeDescription Default
use_page_url
Booléen

Si la valeur est définie sur true, le module partage l'URL de la page par défaut.

True
link
Chaîne

Spécifie une URL différente à partager, si use_page_url a la valeur false.

pinterest
JSON

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

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

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

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

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.

{% space "space" %} {% space "spacer" label="Horizontal Spacer" %}<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>

Balises de page système

Les balises suivantes peuvent être utilisées sur les pages système, telles que les pages de réinitialisation du mot de passe ou d'abonnement aux e-mails.

Désabonnement alternatif 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.

{% 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" %}<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>
ParameterTypeDescription Default
header
String

Restitue le texte dans une balise h1 au-dessus du formulaire de désabonnement.

"Email Unsubscribe"
input_help_text
String

Restitue 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
String

Ajoute un texte d'espace réservé dans le champ de formulaire d'adresse e-mail.

"email@example.com"
button_text
String

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

{% 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:" %}<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>
ParameterTypeDescription Default
header
String

Restitue le texte dans une balise h1 au-dessus du formulaire de préférences d'abonnement.

"Communication Preferences"
subheader_text
String

Ajoute du texte sous l'en-tête au-dessus des préférences de désabonnement.

"<p>\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</p>"
unsubscribe_single_text
String

Restitue 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
String

Restitue 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
String

Ajoute 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
String

Définit 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
String

Définit le texte du bouton d'envoi qui met à jour les préférences d'abonnement.

"Update email preferences"
resubscribe_button_text
String

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

{% 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" %}<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>
ParameterTypeDescription Default
header
String

Restitue le texte dans une balise h1 au-dessus du formulaire de désabonnement.

"Communication Preferences"
subheader_text
String

Ajoute du texte au-dessus du message de confirmation.

"<p>\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</p>"
unsubscribe_all_success
String

Définit 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
String

Définit 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é

{% 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" %}<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&amp;hs_preview_key=c4H4EEQCL-JSCFBlDzG4wg&amp;portalId=2272014&amp;tc_deviceCategory=desktop&amp;template_file_path=my-test-theme%2Ftemplates%2Fsystem%2Fmembership-login.html&amp;updated=1644243124141&amp;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="javascript: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="/_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>
Use this table to describe parameters / fields
ParameterTypeDescription Default
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 d'envoi.

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

{% 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" %}<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&amp;hs_preview_key=_zUv_TyY1BCRQ2RviUepiQ&amp;portalId=2272014&amp;tc_deviceCategory=desktop&amp;template_file_path=my-test-theme%2Ftemplates%2Fsystem%2Fmembership-register.html&amp;updated=1644243124290&amp;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="javascript: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="javascript: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>
Use this table to describe parameters / fields
ParameterTypeDescription Default
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 d'envoi.

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

{% password_reset_request "my_password_reset_request" %} {% password_reset_request "my_password_reset_request" email_label="Email", submit_button_text="Send Reset Email" %}<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&amp;hs_preview_key=x7aXsEAvlLtUOa1P5t89wQ&amp;portalId=2272014&amp;tc_deviceCategory=desktop&amp;template_file_path=my-test-theme%2Ftemplates%2Fsystem%2Fmembership-reset-password-request.html&amp;updated=1644243124282&amp;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>
Use this table to describe parameters / fields
ParameterTypeDescription Default
email_label
Chaîne

Le libellé du champ de saisie de l'e-mail.

"Email"
submit_button_text
Chaîne

Le texte du bouton d'envoi.

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

{% password_reset "my_password_reset" password_label="Password", password_confirm_label="Confirm Password", submit_button_text="Save password", show_password="Show password" %}<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&amp;hs_preview_key=x7aXsEAvlLtUOa1P5t89wQ&amp;portalId=2272014&amp;tc_deviceCategory=desktop&amp;template_file_path=my-test-theme%2Ftemplates%2Fsystem%2Fmembership-reset-password-request.html&amp;updated=1644243124282&amp;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>
Use this table to describe parameters / fields
ParameterTypeDescription Default
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.

{% password_prompt "password_prompt" %} {% password_prompt "my_password_prompt" submit_button_text="Submit", bad_password_message="Sorry, please try again.\n", label="Password Prompt" %}<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>
ParameterTypeDescription Default
submit_button_text
Chaîne

 Libellé du bouton situé sous le champ de saisie du mot de passe.

"Submit"
bad_password_message
Chaîne

 Message affiché si un mot de passe incorrect a été saisi.

"<p>Sorry, please try again.</p>"
password_placeholder
Chaîne

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

{% text "text" %} {% text "simple_text_field" label="Enter text here", value="This is the default value for this text field" %}<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>
ParameterTypeDescription Default
value
Chaîne

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

{% 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 %}Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a urna quis lacus vehicula rutrum.
ParameterTypeDescription Default
value
Chaîne

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

{% 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"}" %}
ParameterTypeDescription Default
hide_playlist
Booléen

Masquez la liste de lecture vidéo.

True
playlist_color
Chaîne

Une valeur de couleur hex pour la liste de lecture.

play_button_color
Chaîne

Une valeur de couleur hex pour les boutons de lecture et de pause.

#2A2A2A
embed_button
Booléen

Affichez le bouton d'intégration sur le lecteur.

False
viral_sharing
Booléen

Affichez le bouton de partage sur les réseaux sociaux sur le lecteur.

False
width
Nombre

Largeur du lecteur vidéo intégré.

Auto
height
Nombre

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

Style supplémentaire pour le lecteur.

conversion_asset
JSON

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 GUID de l'objet type), position (POST ou PRE).

See above example
placeholder_alt_text
Chaîne

Le texte alternatif de la vidéo.


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