Tags padrão do HubL

Last updated:

Esta página é um guia de referência abrangente da sintaxe e dos parâmetros disponíveis para todas as tags HubL padrão, incluindo tags para páginas do sistema, como a página de assinatura de e-mail. Cada tag abaixo contém uma amostra da sintaxe básica, além de um exemplo com parâmetros e saída de código.

Se você estiver criando áreas de arrastar e soltar, saiba mais sobre as tags de área de arrastar e soltar. Caso mantenha um site mais antigo, você também pode verificar a lista de tags HubL descontinuadas.

A maioria das tags nesta página tem equivalentes de módulo padrão. Os módulos podem ser usados em dnd_areas e colunas flexíveis, tornando-os mais poderosos e fáceis de usar do que as tags que você vê aqui.

Comentários do blog

Uma tag de comentários do blog renderiza o código de incorporação de comentários em um modelo de blog. Este código de incorporação Javascript carrega o formulário de comentários e os comentários, com base na sua configuração nas configurações do site.

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
Inteiro

Define o número máximo de comentários.

 5000
select_blog
"default" ou ID do blog

Especifica qual blog está conectado à incorporação de comentários. Este parâmetro aceita argumentos "default" ou um ID de blog (disponível na URL do painel do blog). Se quiser usar seu blog padrão, esse parâmetro é desnecessário.

 default
skip_css
Booleano

Definir essa opção como True impedirá que o CSS de comentários do blog seja carregado. 

 false
message
String

A mensagem para exibir quando não há comentários. Por padrão, aparece vazio (nenhum texto é exibido).

 ""

Conteúdo do blog

Embora os layouts de arrastar e soltar incluam um módulo de conteúdo do blog, esses módulos não são criados com uma única tag. Eles usam lógica condicional para definir como um post de blog e uma lista de blogs devem renderizar. Você pode aprender mais sobre codificação de modelos de blog aqui.

Filtro de post de blog

Cria uma listagem vinculada de postagens por tópico, posts por mês ou posts por autor.

Observação: este módulo só pode ser usado em modelos de posts 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 do blog

Seleciona o blog da HubSpot a ser usado. Este parâmetro usa um ID de blog ou um valor "padrão".

 "default"
expand_link_text
String

 Link de texto a exibir se houver mais publicações que o número Max_links disponível. Exclua o parâmetro para omitir o link.

 "see all"
list_title
String

Título da lista a exibir

 ""
list_tag
String

Define a tag usada para a lista. O valor deve ser geralmente "ul" ou "ol".

 "ul"
title_tag
String

Define a tag usada para o título da lista.

 "h3"
max_links
Número

O número máximo de valores de filtro para exibir. Exclua o parâmetro para mostrar tudo.

 5
filter_type
Enumeração

Seleciona o tipo de filtro. Os valores possíveis incluem "topic", "month" e "author".

 "topic"

Listagem de posts de blog

Adiciona uma lista de posts mais populares ou de topo.

Observação: esta tag só pode ser usada em modelos de posts de blog. O conteúdo da tag é carregado de forma assíncrona no lado do cliente. Como resultado, se você quiser manipular o feed depois que ele for carregado, precisará definir uma função JS global para lidar com essa manipulação. Use a função hsPostListingComplete(feeds), onde feeds é o seletor jQuery em todos os feeds que foram concluídos. Você vai querer manipular diretamente o objeto DOM nessa função.

{% 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 do blog

 Seleciona o blog da HubSpot para usar para a listagem. Este parâmetro usa um ID de blog ou um valor "default".

 "default"
list_title
String

Título da lista a exibir

 ""
list_tag
String

Define a tag usada para a lista. O valor deve ser geralmente "ul" ou "ol".

 "ul"
title_tag
String

Define a tag usada para o título da lista.

 "h3"
listing_type
String

Liste as publicações de blog mais recentes ou mais populares em um intervalo de tempo. Os valores possiveis incluem recent, popular_all_time, popular_past_year, popular_past_six_months e popular_past_month.

 "recent"
max_links
Número

 O número máximo de publicações de blog a listar

 5
include_featured_image
Booleano

 Exibir a imagem em destaque com o link do post.

 False

Posts de blog relacionados

Adiciona uma lista de posts de blog com base em um conjunto de parâmetros compartilhados por posts em blogs. Os posts são selecionados com base na relevância para os parâmetros definidos. Para um exemplo de uso do parâmetro callback opacional, consulte Criar uma listagem de posts de blog relacionados com a tag de posts de blog relacionados do HubL.

Observe que esta tag não gera um módulo editável no nível de página/post, ela é totalmente configurada com o 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
Inteiro

Os IDs dos blogs para incluir posts. Omita esse parâmetro para usar o blog padrão.
blog_post_ids
String

O ID de post de blog para usar ao encontrar posts de blog relevantes para listar (separadas por vírgula). Este parâmetro somente deve ser usado quando o widget for exibido nas páginas, pois nos posts de blog, o padrão será o post no qual o widget é exibido.
blog_post_override
String

Os IDs de um post de blog que sempre devem ser exibidos na listagem retornada, apesar de todos os outros valores de parâmetros e filtros (separados por vírgula).
limit
Inteiro

 O número máximo de posts de blog para listar.

 3
tags
String

As tags que devem ser usadas para determinar se um post é relevante (separadas por vírgula). Se um post de blog tiver uma dessas tags ou uma tag semelhante, a relevância dele será aumentada, melhorando sua classificação na listagem.
tag_boost
Número

Aumenta o peso dado às tags especificadas no parâmetro tags para gerar posts relacionados. Inclua esse parâmetro para extrair posts mais relacionados aos posts exibidos ou especificados no momento. Aceita números positivos.
start_date
datetime

Data de publicação mais antiga.
end_date
datetime

Última data de publicação.
blog_authors
String

 Os nomes dos autores dos quais incluir os posts (separados por vírgula)
path_prefixes
String

Caminhos de URL ou subdiretórios dos quais incluir os posts (separados por vírgula). Se um post de blog tiver um prefixo semelhante em seu caminho, a relevância dele será aumentada, melhorando sua classificação na listagem.
callback
String

O nome de uma função javascript para renderizar os posts de blog retornados. A função recebe um array de objetos de post de blog para formatar. Se os parâmetros callback ou post_formatter forem especificados, a tag gerará HTML em um formato padrão.

 none
post_formatter
String

O nome de uma macro personalizada para renderizar os posts de blog retornados. A macro recebe três parâmetros que são o objeto de post de blogs para formatar, a contagem na iteração de posts de blog e a contagem total de posts de blog nos resultados. Se não for especificado ou definido como "padrão", o formatador interno será usado para formatar cada post.

 default
allow_any_language
String

Quando definido como falso, serão exibidos apenas os posts no mesmo idioma da página em que a tag é usada. Quando o parâmetro é definido como verdadeiro, a restrição de idioma é ignorada e todos os posts relacionados são extraídos independentemente do idioma da página. 

 False

É altamente recomendável usar o parâmetro callback em vez de post_formatter para melhorar a velocidade de carregamento da página.

Compartilhamento social de blog

O compartilhamento social de blog renderiza contadores de compartilhamento em seus posts de blog (se ativado em Configurações de Conteúdo).

{% 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 do blog

Especifica qual blog está conectado aos contadores de compartilhamento. Este parâmetro aceita argumentos "default" ou um ID de blog (disponível na URL do painel do blog). Se quiser usar seu blog padrão, esse parâmetro é desnecessário.

 default
downgrade_shared_url
Booleano

Use HTTP na URL enviada para as redes de mídia social. Usado para preservar contagens ao atualizar domínios apenas para HTTPS.

 false

De assinatura do blog

Uma tag de assinatura de blog renderiza o formulário de assinante de blog para um blog específico. Este formulário é criado automaticamente sempre que um blog é criado em Configurações de conteúdo, e há sempre um formulário de assinatura por blog. Observe que os campos do formulário de inscrição são configurados na IU do editor de formulários.

{% 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 do blog

Seleciona o formulário de assinatura do blog a ser renderizado. Este parâmetro aceita argumentos "default" ou um ID de blog (disponível na URL do painel do blog). Se quiser usar seu blog padrão, esse parâmetro é desnecessário.

 default
title
String

Define o texto em um título de tag h3 acima do formulário de inscrição.

 "Subscribe Here!"
no_title
Booleano

Se Verdadeiro, a tag h3 acima do título é removida.

 false
response_message
String

Define a mensagem de agradecimento integrada que é renderizada quando um usuário envia um formulário. Compatível com HTML.

 "Thanks for Subscribing!"
edit_form_link
String

Esse parâmetro gera um link que permite que os usuários cliquem na tela do editor de formulários correspondente. Essa opção será exibida apenas na interface do usuário do editor se os módulos tiverem o parâmetro overrideable=True.

Por exemplo, para substituir HubID e ID de formulário com as informações da URL de seu formulário de assinante de blog padrão: edit_form_link=" <ul>\n <li><a href="/forms/HubID/FormID/edit/" target="_blank">Default Blog</a></li> \n</ul> ".

\n solta o código em uma nova linha.

Booleano

Uma tag booleana cria uma caixa de seleção na interface do usuário que imprime "verdadeiro" ou "falso". Além de imprimir o valor, esse módulo é útil para definir a lógica de modelo condicional, quando combinado com o parâmetro export_to_template_context. 

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

Determina se a caixa de seleção está marcada ou desmarcada.

 False

Escolha

Uma tag de escolha cria um menu suspenso na interface do usuário do editor de conteúdo que imprime o valor selecionado pelo usuário. As tags de escolha são ótimas para oferecer um conjunto predefinido de opções aos usuários, como imprimir o tipo de página como um cabeçalho de página.

Além de imprimir o valor de escolha, essa tag é útil para definir a lógica de modelo condicional, quando combinada com o parâmetro 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
Booleano

O valor de campo padrão para o menu suspenso

choices
Sequência

Uma lista de valores separada por vírgula ou lista de pares de rótulos de valor. A sintaxe dos pares de rótulos de valor é: choices="[[\"value1\", \"Label 1\"], [\"value2\", \"Label 2\"]]". O editor exibirá o rótulo, enquanto imprime o valor na página.

Cor

A tag de cor gera um seletor de cores na interface do usuário do editor de página que imprime um valor de cor HEXADECIMAL em um modelo. Observe que este módulo só pode ser usado em modelos, não em arquivos CSS. Se estiver usando essa tag em um CSS <style> ou em linha, você deverá usar o parâmetro no_wrapper=True para remover o wrapper <span>.

{% color "color" %} {% color "my_color_picker" label="Choose a color", color="#000000", no_wrapper=True %}#000000
ParameterTypeDescription
color
String

Um valor de cor HEX padrão para o seletor de cores

CTA

Uma tag Call to Action ou CTA permite que os usuários adicionem um botão Call to Action do HubSpot a uma área predefinida de uma página.

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

O código incorporado para a CTA. \n diferencia quebras de linha.

full_html
String

O código incorporado para a CTA (o mesmo que embed_code). \n diferencia quebras de linha.

image_src
String

O URL src de imagem que define a imagem de visualização no editor de conteúdo.

image_editor
String

Marcação para a pré-visualização do editor de imagem

guid
String

O número de ID exclusivo do CTA. Esse número de ID está disponível na URL da tela Detalhes de uma CTA específica. Este parâmetro é usado para escolher qual CTA exibir por padrão.

image_html
String

HTML de imagem de CTA sem o script de CTA.*

image_email
String

Versão para usoe em e-mail do código CTA.*

*Embora esses parâmetros estejam incluídos aqui por serem abrangentes, o código gerado pelo HubSpot para preenchê-los é muito específico. Se você precisar de um CTA padrão selecionado, em vez de tentar desenvolver os parâmetros de CTA do zero, recomendamos configurar o CTA em um layout de modelo e, em seguida, clonar para o arquivo. Você pode copiar o módulo HubL CTA com todos os parâmetros definidos corretamente para você.

Há também uma função CTA que gera um CTA a partir do ID.

HTML personalizado

Um módulo HTML personalizado permite que os usuários insiram o HTML bruto no editor de conteúdo. Se você precisar adicionar HTML padrão extensivo à tag, talvez queira usar a sintaxe de bloco.

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

Define o HTML de conteúdo padrão do módulo.

Módulos personalizados

Os Módulos Personalizados permitem que os designers da HubSpot criem um grupo personalizado de objetos de conteúdo editáveis para serem usados em modelos e páginas no CMS da HubSpot, além de permitirque os profissionais de marketing controlem o conteúdo específico que aparece nesses módulos página por página. Você pode saber mais sobre módulos personalizados e sua sintaxe HubL simplificada aqui.

Os módulos personalizados precisam ser criados no editor de Módulo Personalizado, mas podem ser incluídos em modelos codificados e módulos HubL. Você verá um 'Snippet de utilização' na barra lateral direita do editor do Módulo Personalizado em 'Uso do Modelo'.

Os módulos personalizados exigem que o ID do módulo seja uma cadeia de caracteres, bem como um parâmetro de caminho, a fim de especificar qual módulo carregar. O snippet de utilização também incluirá um parâmetro de rótulo. Veja a sintaxe abaixo:

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

O id do módulo a ser renderizado.

path
String

O caminho do módulo a ser renderizado. Inclua a barra principal para o caminho absoluto, caso contrário, o caminho é relativo ao modelo. Faça referência aos módulos padrão do HubSpot com caminhos correspondentes às suas tags HubL, como @hubspot/rich_text, @hubspot/linked_image, etc.

Espaços reservados do editor

Ao criar um módulo, você pode adicionar conteúdo padrão aos seus campos ou uma tag HubL editor_placeholder ao arquivo HTML + HubL para renderizar o conteúdo do espaço reservado. Esta tag renderiza o ícone e o nome do módulo como espaços reservados vazios no editor.

module-placeholder-content0

Essa tag pode ser útil quando o módulo não tem ou não precisa de conteúdo padrão ou para simplificar a construção do módulo.

Para adicionar um espaço reservado a um módulo personalizado, você pode adicionar uma instrução if ao arquivo HTML + HubL para renderizar o espaço reservado quando não houver conteúdo selecionado. Por exemplo:

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

Embora você não possa editar o estilo do espaço reservado, você pode adicionar as seguintes propriedades ao arquivo meta.json do módulo para personalizar seu conteúdo:

ParameterTypeDescription
show_module_icon
Booleano

Se o ícone do módulo será exibido.

title
String

O título que aparece no espaço reservado.

description
String

A descrição que aparece no espaço reservado.

Por exemplo, seu arquivo meta.json pode parecer o seguinte:

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

Coluna flexível

Colunas flexíveis são colunas verticais em um modelo que permitem que os criadores de conteúdo insiram e removam módulos da página usando o editor de conteúdo. Ao codificar uma coluna flexível com HubL, você pode optar por envolver outros módulos HubL para fazê-los aparecer na coluna flexível por padrão. O código de exemplo abaixo mostra a sintaxe básica e uma coluna flexível de exemplo com um rich text e módulo de formulário contidos como conteúdo padrão.

Observe que colunas flexíveis só podem ser adicionadas aos modelos de página, não aos modelos de blog ou e-mail. Os módulos não podem conter colunas flexíveis, mas podem conter campos e grupos repetíveis, que oferecem uma funcionalidade semelhante. 

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

Observação: ao usar esta tag, o label precisa seguir o valor do name para que a coluna flexível funcione no editor de conteúdo. Por exemplo, a seguinte sintaxe é inválida:

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

Formulário

Permite que os usuários selecionem um formulário da HubSpot para adicionar à página.

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

Especifica um ID exclusivo para o formulário no nível de página.
form_to_use
String

Especifica qual formulário carregar por padrão, com base no ID do formulário. Essa ID está disponível na URL do editor de formulários de cada formulário.
title
String

Preenche uma tag de cabeçalho h3 acima do formulário.
no_title
Booleano

 Se True, a tag h3 acima do título é removida.

 False
form_follow_ups_follow_up_type
Enumeração

Especifica ações de acompanhamento, como inscrever um contato em um fluxo de trabalho ou enviar um e-mail de acompanhamento simples. Os valores possíveis incluem: no_action, simple e automation.
simple_email_for_live_id
Número

Especifica o ID do e-mail de acompanhamento simples para a página ativa.
simple_email_for_buffer_id
Número

Especifica o ID do e-mail de acompanhamento simples para a versão de salvamento automático de uma página.
follow_up_type_simple
Booleano

Se for "true", habilite um e-mail de acompanhamento simples. Alternativa para form_follow_ups_follow_up_type.
follow_up_type_automation
Booleano

Se "true", inscreve os envios em um fluxo de trabalho. Alternativa para form_follow_ups_follow_up_type.
simple_email_campaign_id
Número

Especifica o ID do e-mail de acompanhamento simples. Alternativa ao simple_email_for_live_id.
form_follow_ups_workflow_id
Número

Especifica o ID do fluxo de trabalho no qual os envios devem ser registrados.
response_redirect_url
String

Se redirecionar para uma página externa, este parâmetro especifica a URL para a qual redirecionar.
response_redirect_id
Número

Se redirecionar para a página hospedada do HubSpot, esse parâmetro especificará o ID da página dessa página. O ID da página está disponível no URL do editor de página de cada página.
response_response_type
Enumeração

Determina se deve redirecionar para outra página ou exibir uma mensagem de agradecimento integrada no envio. O valor desse parâmetro deve ser "redirect" ou "inline".

 inline
response_message
String

Define uma mensagem integrada de agradecimento. Este parâmetro suporta HTML.
notifications_are_overridden
Booleano

Se for True, o formulário enviará notificações de formulário para os endereços de e-mail especificados selecionados no parâmetro notifications_override_email_addresses,
em vez dos padrões de formulário

 False
notifications_override_guid_buffer
String

ID das configurações de substituição na versão de salvamento automático da página.
notifications_override_guid
String

ID das configurações de substituição na versão ativa da página.
notifications_override_email_addresses
JSON

A sintaxe de bloco permite uma lista JSON de destinatários de e-mail que serão notificados após o envio do formulário. Esses endereços de e-mail substituirão as configurações de notificação de e-mail definidas no formulário.
gotowebinar_webinar_key
String

Especifica o webinar do GoToWebinar no qual inscrever os contatos que enviarem o formulário. Disponível apenas para portais usando a integração do GoToWebinar.
sfdc_campaign
String

Especifica a campanha do Salesforce na qual inscrever os contatos que enviarem o formulário. O valor desse parâmetro deve ser o ID da campanha SFDC e está disponível apenas para portais integrados ao Salesforce.

Rodapé

Renderiza informações de direitos autorais com o ano e o nome da empresa especificados em Configurações de Conteúdo (Email > Informações do Rodapé).

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

Galeria

Gera uma tag de galeria do HubSpot. Esta tag de galeria é baseada no Slick. Embora você possa criar um módulo de controle de galeria com a sintaxe de módulo padrão do HubL, se quiser predefinir slides padrão usando o HubL, use a sintaxe de bloco. Ambos os métodos são mostrados abaixo. As imagens da galeria são carregadas lentamente usando o 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

Uma lista JSON da legenda padrão, a URL do link, o texto alternativo, o src da imagem e se ela será aberta em uma nova guia. Veja a sintaxe de bloco acima.
loop_slides
Booleano

Quando Verdadeiro, passa pelos slides de forma contínua

 True
num_seconds
Número

Tempo em segundos para pausar entre os slides

 5
show_pagination
Booleano

Forneça botões abaixo do controle deslizante para navegar pelos slides

 True
sizing
Enumeração

Determina se o controle deslizante muda de tamanho com base na altura dos slides. Os valores possíveis incluem: "static" ou "resize"

 "static"
auto_advance
Booleano

Avance automaticamente pelos slides após o tempo definido em num_seconds

 False
transition
Enumeração

Define o tipo de transição de slides. Os valores possíveis incluem: "fade" ou "slide"

 "slide"
caption_position
Enumeração

Afeta o posicionamento da legenda: no slide ou abaixo dele. Os valores possíveis incluem "below" ou "superimpose"

 "below"
display_mode
Enumeração

Determina como a galeria de imagens será exibida. Os valores possíveis incluem: "standard", "lightbox", "thumbnail".

 "standard"
lightboxRows
Número

Se "display_mode" estiver definido como "lightbox", este parâmetro controlará o número de linhas exibidas dentro do lightbox.

 3

Cabeçalho

Gera um módulo de cabeçalho que renderizará o texto como uma tag 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
String

Selecione qual tag de cabeçalho renderizar. Os valores possíveis incluem: h1, h2, h3, h4, h5, h6.

 h1
value
String

Renderiza o texto padrão dentro do módulo de título.

 "A clear bold header"

Ícone

Adiciona uma tag de ícone que permite que os usuários selecionem um ícone para uso. Os conjuntos de ícones suportados são FontAwesome 5.0.10, 5.14.0 e 6.4.2.

Essa tag não pode ser usada nos módulos habilitados para e-mail.

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

Nome do ícone.
style
String

Estilo do ícone. Valores possíveis: REGULAR ou SOLID

 REGULAR
unicode
String

A representação de caracteres Unicode do ícone.
icon_set
String

O ícone do FontAwesome que deve ser usado. Estes são os valores possíveis:

  • fontawesome-5.14.0 
  • fontawesome-5.0.10
  • fontawesome-6.4.2
purpose
String

A finalidade do ícone, usado para acessibilidade. Os valores possíveis são decorative ou semantic. Se definido como decorative, será adicionado um atributo extra aria-hidden="true" ao ícone.

 decorative
title
String

O elemento de título do SVG do ícone, com um atributo labelledby que aponta para o título.

Imagem

Cria uma tag de imagem que permite que os usuários selecionem uma imagem do editor de conteúdo. Se quiser que a imagem seja vinculada a um URL de destino, use o linked_image abaixo.

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

Define o texto alternativo padrão para a imagem.
src
String

Preenche o atributo src da tag img.
width
Número

Define o atributo width da tag img.

 The width of the image
height
Número

Define uma altura mínima em um atributo de estilo da tag img apenas para modelos de e-mail.

 The height of the image
hspace
Número

Define o atributo hspace da tag img.
align
String

Define o atributo align da tag img. Os valores possíveis incluem: esquerda, direita e centro.
style
String

Adiciona declarações CSS em linha à tag img. Por exemplo, style="border:1px solid blue; margin:10px"
loading
String

Controla o atributo de carregamento do elemento img. Usado para carregamento lento baseado em navegador.

Src da imagem

Um módulo src de imagem cria um seletor de imagem no editor de conteúdo, mas em vez de imprimir uma tag img, ele renderiza a URL da imagem. Esta tag é geralmente usada com parâmetro no_wrapper=True, para que o src da imagem possa ser adicionado ao CSS integrado ou a outra marcação. Uma alternativa para usar essa tag é usar o parâmetro 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
String

 Especifica o src da imagem de URL padrão.

Botão de idiomas

Adiciona um Ícone do Globo com links para as versões traduzidas de uma determinada página do CMS. Saiba mais sobre conteúdo em vários idiomas aqui.

{% 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
Enumeração

O idioma do texto no botão de idiomas. Os valores são:

  • Pagelang significa que os nomes dos idiomas serão exibidos no idioma da página em que o botão está.
  • Localized significa que o nome de cada idioma aparecerá nesse idioma.
  • Hybrid é uma combinação das duas.
 Localized

Imagem vinculada

Cria uma imagem selecionável pelo usuário que está ligada a um link. Este módulo tem todos os parâmetros de um módulo de imagem com dois parâmetros adicionais que especificam o URL de destino do link e se o link abre em uma nova janela.

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

Define o texto alternativo padrão para a imagem.
src
String

Preenche o atributo src da tag img.
width
Número

Define o atributo width da tag img.

 The width of the image
height
Número

Define uma altura mínima em um atributo de estilo da tag img apenas para modelos de e-mail.

 The height of the image
hspace
Número

Define o atributo hspace da tag img.
align
String

Define o atributo align da tag img. Os valores possíveis incluem: esquerda, direita e centro.
style
String

Adiciona declarações CSS em linha à tag img. Por exemplo, style="border:1px solid blue; margin:10px"
open_in_new_tab
Booleano

Seleciona se quer ou não abrir a URL de destino em outra guia.

 False
link
String

Define a URL de destino do link que envolve a tag img.
target
String

Define o atributo de destino da tag de link.
loading
String

Controla o atributo de carregamento do elemento img. Usado para carregamento lento baseado em navegador.

Logotipo

Um módulo de logotipo renderiza a imagem do logotipo da empresa nas Configurações de conteúdo.

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

Oculta o nome da empresa se um logotipo de imagem não estiver definido.

 False
alt
String

Define o texto alternativo padrão para a imagem.

 Value in Content Settings
src
String

Preenche o atributo src da tag img.

 Value in Content Settings
width
Número

Define o atributo width da tag img.

 The width of the image
height
Número

Define uma altura mínima em um atributo de estilo da tag img apenas para modelos de e-mail.

 The height of the image
hspace
Número

Define o atributo hspace da tag img.
align
String

Define o atributo align da tag img. Os valores possíveis incluem: esquerda, direita e centro.
style
String

Adiciona declarações CSS em linha à tag img. Por exemplo, style="border:1px solid blue; margin:10px"
open_in_new_tab
Booleano

Seleciona se quer ou não abrir a URL de destino em outra guia.

 False
link
String

Define a URL de destino do link que envolve a tag img.
override_inherited_src
Booleano

Se for verdadeiro, usa o src do widget de logotipo em vez do src herdado de configurações ou modelo.

 True
heading_level
String

Ao usar logotipos baseados em texto não vinculados, isso envolve o logotipo baseado em texto em uma das seguintes opções disponíveis como uma tag HTML: h1, h2, h3, h4. 

 h1
loading
String

Controla o atributo de carregamento do elemento img. Usado para carregamento lento baseado em navegador.

Menu

Gera um menu avançado com base em uma árvore de menus em Configurações de Conteúdo > Menus Avançados.  Consulte menus e navegação para obter mais informações sobre como usar menus em modelos e módulos. Se a id estiver definida como nula, a tag de menu renderizará o menu padrão da conta da 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
Inteiro

O ID da árvore de menus dos menus avançados nas configurações de conteúdo.
site_map_name
String

Nome da árvore dos menus avançados nas configurações de conteúdo.

 "default"
root_type
Enumeração

Especifica o tipo de menus avançados. As opções incluem: "site_root", "top_parent", "parent", "page_name", "page_id» e "breadcrumb". Esses valores correspondem a estático, dinâmico por seção, dinâmico por página e breadcrumb.

 "site_root"
flyouts
String

Quando verdadeiro, uma classe é adicionada à árvore de menus que pode ser estilizada para permitir que os itens de menu filho apareçam quando você passar o mouse sobre o pai. Quando falso, os itens do menu secundário sempre aparecerão.

 "true"
max_levels
Inteiro

Determina quantos níveis de menus aninhados são renderizados na marcação. Esse parâmetro determina o número de filhos da árvore do menu que podem ser expandidos no menu.

 2
flow
Enumeração

Define a orientação dos itens de menu. Adiciona classes à árvore de menus, para que elas possam ser estilizadas de acordo. Os valores possíveis incluem "horizontal", "vertical" ou "vertical_flyouts". Menus horizontais exibem itens lado a lado e menus verticais são de cima para baixo.

 "horizontal"
root_key
String

Usado para encontrar a raiz do menu. Quando root_type é definido como page_id ou page_name, esse parâmetro deve ser o ID da página ou o rótulo da página, respectivamente.

 "horizontal"

require_css

Uma tag HubL que coloca na fila um elemento de estilo a ser renderizado no <head>. Para enfileirar uma folha de estilo de um arquivo diferente para renderizar <head /> através de uma <link /> tag (em oposição a inline, como mostrado aqui), use a função require_css(absolute_url).

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

Uma tag HubL que enfileira qualquer coisa colocada dentro dela no standard_header_includes que está no <head> do modelo. Para a maioria dos Javascript e CSS, veja require_js e require_css.  Alguns casos de uso para require_head incluem o fornecimento de meta tags e tags de link especiais (como prefetch e preconnect) a partir de módulos.

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

Uma marca HubL que enfileira um elemento de script a ser renderizado. Para enfileirar um script para renderizar o <head /> de um arquivo diferente por meio de um elemento <script /> (em oposição ao inline, como mostrado aqui), use a função 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
String

Defina a posição onde o script integrado será renderizado. As opções incluem: "head" e "footer".

 "footer"

Rich text

Cria um editor de conteúdo 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
String

Conteúdo de rich text padrão para o módulo.

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

Lista de RSS

Carrega uma lista de conteúdo de um feed de RSS interno ou externo.

Observação: esse módulo é carregado de forma assíncrona no lado do cliente. Como resultado, se você quiser manipular o feed depois que ele for carregado, precisará definir uma função JS global para lidar com essa manipulação. Use a função hsRssFeedComplete(feeds), onde feeds é o seletor jQuery em todos os feeds que foram concluídos. Você pode manipular diretamente o objeto DOM nessa função.
{% 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
Booleano

 Mostra ou oculta o título do feed de RSS.

 True
show_date
Booleano

Mostra a data do post.

 True
show_author
Booleano

Mostra o nome do autor.

 True
show_detail
Booleano

Mostra o resumo do post até o número de caracteres definidos pelo parâmetro limit_to_chars.

 True
title
String

Preenche um título acima da lista de feeds de RSS.
limit_to_chars
Número

Número máximo de caracteres para exibir em resumo.

 200
publish_date_format
String

Formato da data de publicação. Os valores possíveis incluem "short", "medium" e "long". Também aceita formatos personalizados, incluindo "MMMM d, yyyy 'at' h:mm a".

 "short"
attribution_text
String

O texto que atribui um autor a uma publicação.

 "by"
click_through_text
String

O texto que será exibido para o link de click through no final de um resumo de publicação.

 "Read more"
publish_date_text
String

 O texto que indica quando uma publicação foi publicada.

 "posted at"
include_featured_image
Booleano

Exibe imagem em destaque com link de post para feeds RSS gerados pelo HubSpot.

 False
item_title_tag
String

Especifica a tag HTML de cada título da publicação.

 span
is_external
Booleano

O feed RSS é de um blog externo.

 False
number_of_items
Número

Número máximo de publicações para exibir.

 5
publish_date_language
String

Especifica o idioma da data de publicação.

 en_US
rss_url
String

 A URL onde o feed de RSS está localizado.
content_group_id
String

ID para o blog quando a fonte do feed é um blog interno.
select_blog
String

Pode ser usado para selecionar um feed interno do blog HubSpot.

 default
feed_source
String

Defina a fonte para o feed de RSS. Quando interno, o formato geral é {rss_url="", is_external=False, content_group_id="2502431580"}. Quando externo, o formato geral é {rss_url="http://blog.hubspot.com/marketing/rss.xml", is_external=True}.
tag_id
Número

ID da tag quando a fonte do feed é um blog interno.

Cabeçalho da sessão

Gera um cabeçalho html e subcabeçalho <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
String

Texto a ser exibido no cabeçalho.

 "A clear and bold header"
subheader
String

Texto a ser exibido no subcabeçalho.

 "A more subdued subheader"
heading_level
String

O nível de cabeçalho HTML semântico. De h1 a h6 são permitidos.

 "h1"

Menu simples

Os menus simples permitem criar menus de navegação básicos que podem ser modificados no nível da página. Ao contrário dos módulos de menu regulares, os menus simples não são gerenciados a partir da tela de Navegação nas Configurações do Site, mas sim do modelo e dos editores de página. Você pode usar a sintaxe do bloco para configurar uma árvore de menus padrão.

{% 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
Enumeração

Define classes de marcação de menu para permitir estilizar a orientação dos itens de menu na página. Os valores possíveis incluem "horizontal" e "vertical".

 "horizontal"
menu_tree
JSON

Estrutura do menu incluindo nomes de links de página e URLs de destino.

 []

Compartilhamento social

As tags de compartilhamento social geram ícones de mídia social que podem ser usados para compartilhar uma página específica. Este módulo pode ser usado com sintaxe de bloco para personalizar as imagens de ícone e muito mais.

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

Se verdadeiro, o módulo compartilha a URL da página por padrão.

 True
link
String

Especifica um URL diferente para compartilhar, se use_page_url for false.
pinterest
JSON

Parâmetros para o formato do link do Pinterest e a fonte da imagem do ícone.

 See block syntax example, above
twitter
JSON

Parâmetros para o formato do link do Twitter e a fonte da imagem do ícone.

 See block syntax example, above
linked_in
JSON

Parâmetros para o formato do link do LinkedIn e a fonte da imagem do ícone.

 See block syntax example, above
facebook
JSON

Parâmetros para o formato do link do Facebook e a fonte da imagem do ícone.

 See block syntax example, above
email
JSON

Parâmetros para formato de link de compartilhamento de e-mail e a fonte de imagem de ícone.

 See block syntax example, above

Espaçador

Uma tag espaçadora gera uma tag span vazia. Essa tag pode ser estilizada para agir como um espaçador. Nos layouts de arrastar e soltar, o módulo espaçador é envolvido em um recipiente com uma classe de span1-span12 para determinar quanto espaço o módulo deve ocupar na grade responsiva de doze colunas.

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

Tags de página do sistema

As tags a seguir podem ser usadas nas páginas do sistema, como as páginas de redefinição de senha ou assinatura de e-mail.

Cancelar assinatura de backup de e-mail

A tag de cancelamento de assinatura de backup é renderizada para os destinatários de e-mail se o HubSpot não puder determinar o endereço de e-mail quando o destinatário tentar cancelar a assinatura. Essa tag renderiza um formulário para o contato inserir um endereço de e-mail para cancelar a assinatura de comunicações de e-mail. Ela deve ser usada em um modelo de sistema de Cancelamento de Assinatura.

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

Renderiza o texto em uma tag h1 acima do formulário de cancelamento de assinatura.

 "Email Unsubscribe"
input_help_text
String

Renderiza texto de ajuda em uma tag h3 acima do campo de formulário de cancelamento de inscrição de e-mail.

 "Your email address:"
input_placeholder
String

Adiciona texto de espaço reservado no campo de formulário de endereço de e-mail.

 "email@example.com"
button_text
String

Altera o texto do botão de envio de formulário de cancelamento de assinatura.

 "Unsubscribe"

Assinaturas de e-mail

Esse módulo é renderizado quando um destinatário de e-mail vai editar suas preferências de assinatura. Ele deve ser usado em um modelo de sistema de preferência de assinatura.

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

Renderiza o texto em uma tag h1 acima do formulário de preferências de assinatura.

 "Communication Preferences"
subheader_text
String

Preenche o texto abaixo do título acima das preferências de cancelamento de assinatura.

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

Renderiza o texto <p class="header"> acima das opções de assinatura.

 "Uncheck the types of emails you do not want to receive:"
unsubscribe_all_text
String

Renderiza o texto <p class="header"> acima da entrada da caixa de seleção Cancelar assinatura de todos os e-mails.

 "Or check here to never receive any emails:"
unsubscribe_all_unsubbed_text
String

Preenche o texto dentro de um <p> que é renderizado, se um contato for cancelado de todos os e-mails.

 "You are presently unsubscribed from all of our emails. Would you like to receive our emails again?"
unsubscribe_all_option
String

Define o texto ao lado da entrada da caixa de seleção Cancelar assinatura de todos os e-mails.

 "Unsubscribe me from all mailing lists."
button_text
String

Define o texto do botão de envio que atualiza as preferências de assinatura.

 "Update email preferences"
resubscribe_button_text
String

Define o texto do botão de envio para quando os contatos estão se inscrevendo novamente.

 "Yes, resubscribe me!"

Confirmação de assinaturas de email

A confirmação de atualização de assinaturas de e-mail é um módulo que pode ser adicionado ao modelo de agradecimento para quando um destinatário atualizar suas preferências de assinatura ou cancelar a assinatura. Ele deve ser usado em um modelo de sistema de preferência de assinatura.

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

Renderiza o texto em uma tag h1 acima do formulário de cancelamento de assinatura.

 "Communication Preferences"
subheader_text
String

Preenche o texto acima da mensagem de confirmação.

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

Define o texto que será exibido quando alguém cancelar a assinatura de todas as comunicações por e-mail.

 "You have successfully unsubscribed from all email communications."
subscription_update_success
String

Define o texto quando um destinatário atualiza suas preferências de assinatura.

 "You have successfully updated your email preferences."

Login de membro

Cria um formulário de login para fornecer acesso ao conteúdo privado. 

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

O rótulo do campo de entrada de e-mail.

 "Email"
password_label
String

O rótulo do campo de entrada de senha.

 "Password"
remember_me_label
String

O rótulo da caixa de seleção "Lembrar-me".

 "Remember Me"
reset_password_text
String

O texto do hiperlink de redefinição de senha.

 "Forgot your password?"
submit_button_text
String

O texto do botão de envio.

 "Login"
show_password
String

O texto do link para revelar a senha.

 "Show password"

Registro de assinatura

Cria um formulário para se registrar para ter acesso ao conteúdo privado. 

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

O rótulo do campo de entrada de e-mail.

 "Email"
password_label
String

O rótulo do campo de entrada de senha.

 "Password"
password_confirm_label
String

O rótulo do campo de confirmação de senha.

 "Confirm Password"
submit_button_text
String

O texto do botão de envio.

 "Save Password"
show_password
String

O texto do link para revelar a senha.

 "Show password"

Solicitação de redefinição de senha

Cria um formulário para enviar um e-mail de redefinição de senha para acessar páginas protegidas com senha. 

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

O rótulo do campo de entrada de e-mail.

 "Email"
submit_button_text
String

O texto do botão de envio.

 "Send Reset Email"
password_reset_message
String

A mensagem que é exibida após solicitar o e-mail de redefinição de senha.

 False

Redefinição de senha

Renderiza um formulário de redefinição de senha para acessar páginas protegidas por senha. 

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

O rótulo de texto para o campo de entrada de senha.

 "Email"
password_confirm_label
String

O rótulo de texto para o campo de entrada de confirmação de senha.

 "Send Reset Email"
submit_button_text
String

O rótulo de texto para o botão de envio de formulário.

 False
show_password
String

O rótulo de texto do botão para exibir novamente o valor da senha inserida.

 False
password_requirements
String

O rótulo de texto que descreve os requisitos de senha.

 False

Solicitação de senha

Adiciona um prompt de senha às páginas protegidas por senha.

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

 Etiqueta para botão abaixo do campo de entrada de senha.

 "Submit"
bad_password_message
String

 Mensagem exibida se a senha incorreta for inserida.

 "<p>Sorry, please try again.</p>"
password_placeholder
String

 Define o texto do espaço reservado dentro do campo de senha.

 "Password"

Texto

Cria uma única linha de texto. Essa tag pode ser útil para ser misturada à sua marcação, quando usada em conjunto com o parâmetro no_wrapper=True. Por exemplo, se você quiser que seus usuários finais possam definir um destino de uma âncora predefinida, poderá preencher o href com um módulo de texto com 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
String

Define o texto padrão do campo de texto de linha única.

Textarea

Uma área de texto é semelhante a um módulo de texto, pois permite que os usuários insiram texto simples, mas oferece uma área maior para trabalhar no editor de conteúdo. Esse módulo não é compatível com HTML. Se quiser usar diretamente dentro de uma tag de empacotamento predefinida, adicione o parâmetro 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
String

Define o texto padrão da área de texto.

Reprodutor de vídeo

Renderize um player de vídeo para um arquivo de vídeo do gerenciador de arquivos que tenha a configuração Permitir integração, compartilhamento e rastreamento ativada.

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

Oculte a lista de reprodução do vídeo.

 True
playlist_color
String

Um valor de cor HEX para a lista de reprodução.
play_button_color
String

Um valor de cor HEX para os botões de reprodução e pausa.

 #2A2A2A
embed_button
Booleano

Exibir botão de incorporação no player

 False
viral_sharing
Booleano

Exibir o botão de compartilhamento de redes sociais no player.

 False
width
Número

Largura do player de vídeo incorporado.

 Auto
height
Número

Altura do player de vídeo incorporado.

 Auto
player_id
Número

O player_id do vídeo a incorporar.
style
String

Estilo adicional para o player.
conversion_asset
JSON

Configuração de evento para o player. Pode renderizar o CTA ou o formulário antes ou depois da reprodução do vídeo. Esse parâmetro leva um objeto JSON com três parâmetros: tipo (FORMULÁRIO ou CTA), id (O guia do objeto de tipo), posição (POST ou PRE).

 See above example
placeholder_alt_text
String

O texto alternativo do vídeo.
Este artigo foi útil?
Este formulário deve ser usado apenas para fazer comentários sobre esses artigos. Saiba como obter ajuda para usar a HubSpot..