Última modificação: 8 de outubro de 2025
Abaixo, saiba mais sobre os módulos padrão que a HubSpot fornece para criar modelos para páginas de site, posts de blog e páginas de listagem de blog. Você também encontrará módulos padrão que podem ser usados para criar modelos de orçamento.
Ao desenvolver localmente, você pode buscar um módulo padrão específico usando o caminho do módulo (por exemplo, hs fetch @hubspot/linked_image.module
).
Para exibir o código de um módulo padrão, você pode exibir e clonar o módulo na pasta @hubspot
do gerenciador de design. No código, alguns módulos padrão usam o ID de conta padrão 7052064, em vez do que pertence à conta atual.
Comentários do blog
Suportado em posts de blog e listagens de blog.
{% module "blog_comments" path="@hubspot/blog_comments" %}
Assinatura de e-mail do blog
Suportado em páginas, posts de blog e listagens de blog.
{% module "blog_subscribe" path="@hubspot/blog_subscribe" %}
Parâmetro | Tipo | Descrição | Padrão |
---|
select_blog | Blog | O blog a ser usado para o módulo. | |
title | String | Título para o módulo (envolto em uma tag h3) | "Subscribe Here!" |
response_message | Rich text | A mensagem mostrada ao enviar o formulário. | Thanks for subscribing! |
Posts do blog
Adicione este módulo às páginas de listagem de blog para exibir visualizações de posts de blog contendo o título, a imagem em destaque, o autor, a data de publicação de cada post e muito mais com um botão clicável que navega para o post.
Este módulo padrão foi criado usando React, e você pode exibir seu código fonte no GitHub.
Observação:
- Este módulo não pode ser acessado a partir do gerenciador de design. O módulo pode ser referenciado com HubL em modelos codificados e adicionado ao editor de páginas de listagem do blog.
- Este módulo substitui o módulo
blog_listing
anterior, que foi descontinuado.
{% module "blog_posts"
path="@hubspot/blog_posts"
layout="grid",
columns=4,
displayForEachListItem=[
"image",
"title",
"authorName",
"tags",
"publishDate",
"description",
"button"
]
%}
Parâmetro | Tipo | Descrição | Padrão |
---|
layout | Escolha | O layout do conteúdo de cada visualização de post de blog.grid (padrão): alinha os posts em uma grade básica.singleColumn : alinha os posts em uma única coluna, com imagens em destaque em sua própria linha acima do restante do conteúdo do post.sideBySide : alinha posts em uma coluna com imagens em destaque alinhadas horizontalmente com o conteúdo do post.
| grid |
columns | Número | Ao usar o layout grid , o número de posts por linha. Pode ser 2 , 3 ou 4 . | 3 |
alternateImage | Booleano | Ao usar o layout sideBySide , defina como true para alinhar as imagens em destaque à direita e à esquerda da visualização da publicação. | false |
fullImage | Booleano | Ao usar os layouts grid ou singleColumn , defina este campo como true para tornar a imagem em destaque o plano de fundo da visualização do post. | false |
displayForEachListItem | Matriz | O conteúdo a ser incluído em cada visualização de post de blog. As opções incluem:image : a imagem em destaque do post.title : o título do post.authorImage : a imagem do autor do post.authorName : o nome do autor do post.tags : as tags de blog do post.publishDate : a data de publicação do post.description : a metadescrição do post.button : o botão ler mais associado ao post de blog.
| [ 'image', 'title', 'authorImage', 'authorName', 'tags', 'publishDate', 'description', 'button' ] |
buttonText | String | O texto exibido no botão Leia mais, se incluído. | Read more |
Filtro de post de blog
Suportado em páginas, listagens de blog e posts de blog.
{% module "post_filter" path="@hubspot/post_filter" %}
Parâmetro | Tipo | Descrição | Padrão |
---|
select_blog | Blog | Selecione um blog para exibir. O padrão usará o blog atual quando usado em um modelo de blog, ou o blog principal quando usado em outro lugar. | |
filter_type | Escolha | Tipo de links de filtragem a serem exibidos. As opções incluem: | tag |
order_by | Escolha | Classificação dos valores dos links de filtro. As opções incluem: | post_count |
list_title | Texto | Um título H3. | "Posts by Tag" |
max_links | Número | Número de links de filtro para mostrar. Deixe em branco para mostrar todos. | 5 |
expand_link_text | Texto | O texto a ser exibido se mais do que o valor max_links estiver disponível. | "See all" |
Listagem de posts de blog
Suportado em páginas, listagens de blog e posts de blog.
{% module "post_listing" path="@hubspot/post_listing" %}
Parâmetro | Tipo | Descrição | Padrão |
---|
select_blog | Blog | Selecione um blog para exibir. O padrão usará o blog atual quando usado em um modelo de blog, ou o blog principal quando usado em outro lugar. | |
listing_type | Escolha | O tipo de listagem para seus posts. As opções incluem:recent : mais recente.popular_all_time : mais popular de todos os tempos.popular_past_year : mais popular no ano passado.popular_past_six_months : mais popular nos últimos seis meses.popular_past_month : mais popular no mês passado.
| recent |
list_title | Texto | Um título H3. | "Recent Posts" |
max_links | Número | Número máximo de publicações para exibir. | 5 |
Botão
Suportado em páginas, posts de blog e listagens de blog.
{% module "button" path="@hubspot/button" %}
Parâmetro | Tipo | Descrição | Padrão |
---|
link | Link | O URL para o qual o botão redireciona. | { "url": { "type": "EXTERNAL", "href": "www.hubspot.com", "content_id": null }, "open_in_new_tab": false, "no_follow": false } |
button_text | Texto | O texto que será exibido no botão. | "Add a button link here" |
style | Objeto | override_default_style (Booleano)
button_font (Fonte)
button_color (Cor)
text_hover_color (Cor)
button_hover_color (Cor)
| { "override_default_style": false, "button_font": { "color": "#FFFFFF", "size_unit": "px" }, "button_color": { "color": "#000000", "opacity": 100 }, "text_hover_color": { "color": "#000000", "opacity": 100 }, "button_hover_color": { "color": "#CCCCCC", "opacity": 100 } } |
Call to action
Suportado em páginas, listagens de blog e posts de blog.
{% module "cta" path="@hubspot/cta" %}
Parâmetro | Tipo | Descrição |
---|
guid | String | O identificador globalmente exclusivo da CTA. |
Excluir dados
Desde 26 de maio de 2025, este módulo foi reprovado em favor do recurso da página de solicitação de privacidade de dados.
As informações de referência para este módulo foram movidas para a documentação de módulos preteridos.
Divisor
Suportado em páginas. Há uma nova versão deste módulo disponível para contas criadas após 25 de agosto de 2022. Saiba mais sobre essa alteração.
{% module "divider" path="@hubspot/divider" %}
Parâmetro | Tipo | Descrição | Padrão |
---|
height | Número | Altura em pixels (px) da linha divisória. | 1 |
width | Número | Largura percentual (%) da linha divisória. | 50 |
color | Cor | Cor (hexadecimal) e opacidade (número) da linha divisória. | { "color": "#000000", "opacity": 100 } |
line_type | Escolha | Tipo de linha. As opções incluem: | solid |
alignment | Escolha | Alinhamento horizontal da linha divisória. As opções incluem: | center |
show_padding | Booleano | Mostre/oculte as margens superior e inferior no divisor. | false |
padding | Número | Valor de pixel (px) para a margem na parte superior e inferior da linha divisória. Opção disponível quando show_padding é igual a true . | 5 |
Fazer download de dados
Desde 26 de maio de 2025, este módulo foi reprovado em favor do recurso da página de solicitação de privacidade de dados.
As informações de referência para este módulo foram movidas para a documentação de módulos preteridos.
Suportado em páginas, posts de blog e listagens de blog.
{% module "form"
path="@hubspot/form"
form={
"form_id": "9e633e9f-0634-498e-917c-f01e355e83c6",
"response_type": "redirect",
"message": "Thanks for submitting the form.",
"redirect_id": null,
"redirect_url": "http://www.google.com"
}
%}
Parâmetro | Tipo | Descrição | Padrão |
---|
title | Text | Cabeçalho H3 | |
form | Objeto | Objeto de formulário incluindo:form_id : ID do formulário a ser usadoresponse_type : o que o visitante verá depois de enviar o formulário:message : mensagem integrada se response_type estiver definido como inline redirect_id : ID da página para redirecionar se response_type estiver definido como redirect .redirect_url : URL para redirecionar se response_type estiver definido como redirect
| |
{ "form_id": "", "response_type": "redirect", "message": "Thanks for submitting the form.", "redirect_id": null, "redirect_url": "http://www.google.com" } | | | |
notifications_are_overridden | Booleano | E-mail para o qual enviar a notificação de formulário em vez das configurações padrão. | false |
notifications_override_email_addresses | E-mail | Lista separada por vírgulas de e-mails a serem enviados quando notifications_are_overridden for igual a true . | |
follow_up_type_simple | Booleano | Envio de um e-mail de acompanhamento ativado. | false |
simple_email_for_live_id | Followupemail | ID do e-mail de acompanhamento. Disponível quando follow_up_type_simple é igual a true . | |
sfdc_campaign | Salesforcecampaign | Quando a integração com o Salesforce está ativa, o ID da campanha. | |
Cabeçalho
Suportado em páginas, listagens de blog e posts de blog.
{% module "header" path="@hubspot/header" %}
Parâmetro | Tipo | Descrição | Padrão |
---|
value | Texto | Texto do cabeçalho. | "A clear and bold header" |
header_tag | Escolha | Escolha um nível de título. Opções incluem de h1 a h6 . | h1 |
Espaçador horizontal
Suportado em páginas, posts de blog, listagens de blog e e-mails.
{% module "horizontal_spacer" path="@hubspot/horizontal_spacer" %}
Ícone
Suportado em páginas, listagens de blog e posts de blog. Os ícones podem ser extraídos dos conjuntos de ícones Font Awesome 5.0.10 e 5.14.0.
{% module "icon" path="@hubspot/icon" %}
Parâmetro | Tipo | Descrição | Padrão |
---|
name | String | O nome do ativo. | "hubspot" |
purpose | Escolha | Uma opção de acessibilidade que categoriza a finalidade do ícone para os leitores de tela. Os valores disponíveis são:decorative: ignorado pelo leitor de tela.semantic: lido pelo leitor de tela.
| "decorative" |
title | String | Uma opção de acessibilidade que atribui um título ao ícone. | |
style | String | o tipo de ícone. Pode ser um dos seguintes: solid , regular , light , thin ou duotone . | "solid" |
unicode | String | O valor unicode do ícone. | f3b2 |
Imagem
Suportado em páginas, listagens de blog e posts de blog.
{% module "linked_image" path="@hubspot/linked_image" %}
Parâmetro | Tipo | Descrição | Padrão |
---|
img | Imagem | Objeto de imagem contendo:src : url da imagemalt : texto alternativo da imagemloading : as opções de carregamento lento incluem:width : valor pxheight : valor px
| { "src": "https://static.hubspot.com/final/img/content/email-template-images/placeholder_200x200.png", "alt": "placeholder_200x200", "loading": "disabled", "width": 200, "height": 200 } |
link | Texto | Link opcional para a imagem. | |
target | Booleano | Abre o link em uma nova guia. | false |
Grade de imagem
Suportado em páginas, listagens de blog e posts de blog.
{% module "image_grid" path="@hubspot/image_grid", label="image_grid.module" %}
Parâmetro | Tipo | Descrição | Padrão |
---|
slides | Objeto | Objeto que contém informações para cada slide. O objeto contém:img : URL da imagem.link_url : URL para onde o slide deve ser direcionado.hover_messages : texto que se sobrepõe à imagem ao passar o mouse.
| [ { "show_caption": false, "open_in_new_tab": false } ] |
display_mode | Escolha | Modo de exibição da Galeria de imagens. As opções incluem:standard : controle deslizante padrão.thumbnail : navegador de miniaturas.lightbox : galeria lightbox.
| standard |
lightboxRows | Número | Número de linhas na galeria Lightbox quando display_mode é igual a lightbox . | 3 |
loop_slides | Booleano | Habilita o loop pelos slides com próximo/anterior quando display_mode é igual a standard ou thumbnail . | true |
auto_advance | Booleano | Avança automaticamente para o próximo slide quando display_mode é igual a standard ou thumbnail . | true |
num_seconds | Número | Tempo (segundos) entre o avanço para o próximo slide quando display_mode é igual a standard ou thumbnail . | 5 |
show_pagination | Booleano | Mostre os botões de navegação quando display_mode for igual a standard ou thumbnail . | true |
sizing | Escolha | Define a altura dos slides quando display_mode é igual a standard ou thumbnail . As opções incluem:static : altura fixa.resize : altura variável.
| static |
transition | Escolha | Estilos de transição de slides quando display_mode é igual a standard ou thumbnail . As opções incluem:slide : transição de slides.fade : transição de desvanecimento.
| slide |
caption_position | Escolha | Posição das legendas do slide quando display_mode for igual a standard ou thumbnail . As opções incluem:below : sempre manter legendas abaixo da imagem.superimpose : sobrepor legendas em cima das imagens.
| below |
Galeria de imagens
Suportado em páginas, posts de blog e listagens de blog.
{% module "gallery" path="@hubspot/gallery" %}
Parâmetro | Tipo | Descrição | Padrão |
---|
slides | Objeto | Objeto que contém informações para cada slide. O objeto contém:img : URL da imagem.show_caption : booleano para mostrar a legenda do slide.caption : rich text da legenda.link_url : URL para onde o slide deve ser direcionado.open_in_new_tab : booleano para direcionar se o link precisar ser aberto em uma nova guia.
| [ { "show_caption": false, "open_in_new_tab": false } ] |
display_mode | Escolha | Modo de exibição da Galeria de imagens. As opções incluem:standard : controle deslizante padrão.thumbnail : navegador de miniaturas.lightbox : galeria lightbox.
| standard |
lightboxRows | Número | Número de linhas na galeria Lightbox quando display_mode é igual a lightbox . | 3 |
loop_slides | Booleano | Habilita o loop pelos slides com próximo/anterior quando display_mode é igual a standard ou thumbnail . | true |
auto_advance | Booleano | Avança automaticamente para o próximo slide quando display_mode é igual a standard ou thumbnail . | true |
num_seconds | Número | Tempo (segundos) entre o avanço para o próximo slide quando display_mode é igual a standard ou thumbnail . | 5 |
show_pagination | Booleano | Mostre os botões de navegação quando display_mode for igual a standard ou thumbnail . | true |
sizing | Escolha | Define a altura dos slides quando display_mode é igual a standard ou thumbnail . As opções incluem:static : altura fixa.resize : altura variável.
| static |
transition | Escolha | Estilos de transição de slides quando display_mode é igual a standard ou thumbnail . As opções incluem:slide : transição de slides.fade : transição de desvanecimento.
| slide |
caption_position | Escolha | Posição das legendas do slide quando display_mode for igual a standard ou thumbnail . As opções incluem:below : sempre manter legendas abaixo da imagem.superimpose : sobrepor legendas em cima das imagens.
| below |
Suportado em páginas, posts de blog e listagens de blog.
{% module "unique_name"
path="@hubspot/image_slider_gallery",
slides=[
{
"img": {
"src": "",
"alt": "Default image alt text"
},
"caption": "<strong>1</strong> An optional caption for the image that will be added to the gallery. Enter any descriptive text for this image that you would like visitors to be able to read.",
"link_url": ""
},
{
"img": {
"src": "",
"alt": "Default image alt text"
},
"caption": "<strong>2</strong> An optional caption for the image that will be added to the gallery. Enter any descriptive text for this image that you would like visitors to be able to read.",
"link_url": ""
}
]
slideshow_settings={
"slides": {
"per_page": 1,
"sizing": "natural",
"aspect_ratio": "16/9",
"show_captions": true,
"caption_position": "below"
},
"movement": {
"transition": "slide",
"loop_slides": false,
"auto_advance": false,
"auto_advance_speed_seconds": 5
},
"navigation": {
"show_main_arrows": true,
"show_thumbnails": false,
"show_dots": false
}
}
%}
Parâmetro | Tipo | Descrição |
---|
slides | Grupo de campos | Um grupo de campos que contém os seguintes campos:img : URL da imagem.caption : rich text para a legenda da imagem.link_url : URL ao qual o slide está vinculado.
|
slideshow_settings | Grupo de campos | O grupo de campos de configurações do controle deslizante de imagens. Inclui os seguintes grupos de campos:slides : configurações do slide, incluindo:per_page : número de slides por página.sizing : dimensionamento de imagem.aspect_ratio : proporção da imagem.show_captions : um booleano
movement : configurações de comportamento de deslizamento da imagem.navigation : configurações de navegação pelas imagens.
|
default_text | Grupo de campos | Os elementos de texto padrão do módulo, incluindo:default_caption : legenda da imagem.default_image_alt_text : texto da imagem.slider_aria_label : o rótulo aria padrão do módulo.arial_label_thumbnails : a miniatura ária padrão do módulo.slider_nav_aria_label : o rótulo aria padrão da navegação do módulo.prev : texto do slide anterior.next : texto do próximo slide.first : ir para o texto do primeiro slide.slideX : ir para o texto do slide X.pageX : ir para o texto da página X.play : iniciar texto com reprodução automática.pause : pausar texto com reprodução automática.carousel : texto do carrossel.select : texto para selecionar um slide a ser mostrado.slide : texto do slide.slidelabel : rótulo do slide.
|
Troca de idiomas
Suportado em páginas.
{% module "language_switcher" path="@hubspot/language_switcher" %}
Parâmetro | Tipo | Descrição | Padrão |
---|
display_mode | Escolha | O idioma do texto no seletor de idiomas. Os valores são:pagelang : os nomes dos idiomas serão exibidos no idioma da página em que o interruptor está ligado.localized : o nome de cada idioma será exibido nesse idioma.hybrid : uma combinação dos dois.
| localized |
Logotipo
Suportado em páginas, listagens de blog e posts de blog.
{% module "logo" path="@hubspot/logo" %}
Parâmetro | Tipo | Descrição | Padrão |
---|
img | Imagem | Objeto de imagem contendo:override_inherited_src : substitua o logotipo padrão nas configuraçõessrc : url da imagemalt : texto alternativo para o logotipo
| { "override_inherited_src": false, "src": null, "alt": null } |
link | Texto | Link opcional para o logotipo. Se nenhum URL for especificado, seu logotipo será vinculado ao URL do Logotipo definir em seu configurações de marca. | |
open_in_new_tab | Booleano | Abre o link em uma nova guia. | false |
suppress_company_name | Booleano | Oculte o nome da empresa quando uma imagem não estiver selecionada. | true |
heading_level | Escolha | Escolha um nível de título quando nenhuma imagem estiver selecionada e suppress_company_name for igual false . As opções incluem h1 até h6 . | h1 |
Grid de logotipo
Uma grade personalizável de contêineres para exibir logotipos de forma uniforme. Suportado em páginas, listagens de blog e posts de blog.
{% module "logo grid"
path="@hubspot/logo_grid"
group_logos=[
{
"logo": {
"loading": "lazy",
"alt": "company_logo",
"src": "https://www.example.com/Logos/color/logo.png"
}
},
{
"logo": {
"loading": "lazy",
"alt": "company2_logo",
"src": "https://www.example.com/Logos/color/logo2.png"
}
},
{
"logo": {
"alt": "lorem-logo",
"height": 40,
"loading": "lazy",
"max_height": 40,
"max_width": 175,
"src": "https://www.example.com/Logos/color/logo3.png",
"width": 175
}
}
],
styles={
"group_logo": {
"group_background": {
"aspect_ratio": "1/1",
"background_color": {
"color": "#8E7CC3",
"opacity": 100
}
},
"group_spacing": {
"padding": {
"padding": {
"bottom": {
"units": "px",
"value": 75
},
"left": {
"units": "px",
"value": 75
},
"right": {
"units": "px",
"value": 75
},
"top": {
"units": "px",
"value": 75
}
}
}
},
"max_logo_height": 85
},
"group_logo_grid": {
"column_count": 3,
"grid_gap": 54
}
}
%}
Parâmetro | Tipo | Descrição |
---|
group_logos | Matriz | Uma matriz que contém um objeto para cada logotipo na grade. |
logo | Objeto | Em group_logos , um objeto para cada logotipo na grade. Cada logotipo pode incluir os seguintes parâmetros:src : o caminho de arquivo do logotipo.loading : o comportamento de carregamento lento do logotipo.alt : o texto alternativo do logotipo.height : a altura do logotipo.width : a largura do logotipo.max_height : a altura máxima do logotipo.max_width : a largura máxima do logotipo.
|
styles | Matriz | Uma matriz que contém os campos de estilo que afetam o layout de grade, os contêineres de logotipo e as imagens de logotipo. Essa matriz contém os seguintes grupos de estilos:group_logo : estilos que afetam os contêineres e as imagens de logotipo. Contém o seguinte:group_background : estilos que definem a taxa de proporção e a cor do plano de fundo dos contêineres de grade. As proporções incluem: 1/1 , 4/3 , 16/9 .group_spacing : estilos que definem o deslocamento interno do contêiner de logotipo. Para logotipos maiores, um valor de deslocamento maior pode reduzir a largura do logotipo.max_logo_height : a altura máxima de cada logotipo.
group_logo_grid : estilos que definem o layout da grade, incluindo:column_count : o número de colunas na grade.grid_gap : o espaçamento entre os itens da grade.
|
Reuniões
Suportado em páginas, posts de blog e listagens de blog.
{% module "meetings" path="@hubspot/meetings" %}
Parâmetro | Tipo | Descrição |
---|
meeting | Reunião | Selecione um link de reunião. |
Logins sociais de associações
Oferece opções de login do Google e do Facebook para páginas de membros. O usuário deve fazer login com uma conta vinculada ao endereço de e-mail do seu registro de contato no CRM. Você pode escolher quais logins de redes sociais devem ser habilitados.
Compatível nas páginas de login de membros.
{% module "social" path="@hubspot/membership_social_logins",
clientid=""
appid=""
facebook_enabled=true
google_enabled=true
%}
Parâmetro | Tipo | Descrição | Padrão |
---|
facebook_appid | String | O ID do aplicativo do Facebook. | |
facebook_enabled | booleano | Ative o botão para login do Facebook. facebook_appid é obrigatório. | False |
google_clientid | String | O ID de cliente do Google. | |
google_enabled | Booleano | Ative o botão para login do Google. google_clientid é necessário. | False |
Suportado em páginas, posts de blog e listagens de blog.
Deseja criar seu próprio menu personalizado? Experimente nossa função menu().
{% module "menu" path="@hubspot/menu" %}
Parâmetro | Tipo | Descrição | Padrão |
---|
id | Menu | ID do menu. | |
root_type | Escolha | Tipo de menu avançado. As opções incluem:site_root : sempre mostrar páginas de nível superior no menu.top_parent : mostrar páginas no menu que estão relacionadas com a seção que está sendo visualizada.parent : mostrar páginas no menu que estão relacionadas com a página que está sendo visualizada.breadcrumb : menu de caminho com estilo de navegação horizontal (breadcrumb).
| site_root |
max_levels | Escolha | Determina o número de filhos da árvore do menu que podem ser expandidos no menu. As opções incluem 1 até 10 | 2 |
flow | Escolha | A orientação do menu. As opções incluem: | horizontal |
flyouts | Booleano | Funcionalidade de passar o mouse habilitada para itens do menu secundário. | true |
Rodapé da página
Suportado em páginas, listagens de blog e posts de blog.
{% module "page_footer" path="@hubspot/page_footer" %}
Solicitação de senha
Suportado em páginas, posts de blog e listagens de blog.
{% module "password_prompt" path="@hubspot/password_prompt" %}
Parâmetro | Tipo | Descrição | Padrão |
---|
submit_button_text | Texto | Texto que aparece no botão Enviar. | "Submit" |
password_placeholder | Texto | Texto temporário para o campo de senha. | "Password" |
bad_password_message | Rich Text | Mensagem a ser exibida quando uma senha é inserida incorretamente. | "Sorry, please try again. " |
Pagamentos
Suportado em páginas, posts de blog e listagens de blog.
{% module "payments" path="@hubspot/payments" %}
Parâmetro | Tipo | Descrição | Padrão |
---|
payment | String | Para configurar o módulo para usar um link de pagamento específico, inclua o ID do link de pagamento. Você pode localizar a ID no URL ao editar o link de pagamento. | |
checkout_location | String | Defina se o formulário de pagamento abre em uma nova guia ou em uma sobreposição. Os valores disponíveis são:new_tab : abre o formulário de pagamento em uma nova guia.overlay : abre o formulário de pagamento em uma sobreposição deslizante.
| "new_tab" |
button_text | String | Define o texto do botão de finalização da compra. | "Checkout" |
button_target | Escolha | Se o botão usa um link de pagamento da HubSpot ou um link externo. As opções incluem: | "payment_link" |
button_link | Link | Quando button_target está definido como custom_link , especifica o destino do link externo. Os tipos compatíveis incluem: | EXTERNAL |
Produto
Exibe um produto da conta biblioteca de produtos. Suportado em páginas, posts de blog e listagens de blog.
{% module
path="@hubspot/product",
product={
"id" : 2124070179
},
group_button={
"button_text" : "Buy",
"override_product_button" : true,
"button_override" : {
"no_follow" : false,
"open_in_new_tab" : false,
"sponsored" : false,
"url" : {
"href" : "https://www.test.com",
"type" : "EXTERNAL"
}
},
group_description={
"description_override" : "Monthly gym membership with access to shared locker facilities.",
"override_product_description" : true
},
group_name={
"heading_level" : "h3",
"name_override" : "Gym membership",
"override_product_name" : true
},
group_image={
"image_override" : {
"alt" : "360_F_317724775_qHtWjnT8YbRdFNIuq5PWsSYypRhOmalS",
"height" : 360,
"loading" : "lazy",
"src" : "https://2272014.fs1.hubspotusercontent-na1.net/hubfs/2272014/360_F_317724775_qHtWjnT8YbRdFNIuq5PWsSYypRhOmalS.jpg",
"width" : 640
},
"override_product_image" : true
}
%}
Parâmetro | Tipo | Descrição |
---|
product | Produto | O produto a ser exibido, especificado pelo ID do produto. |
group_button | Grupo de campos | Por padrão, o módulo inclui um botão que direciona os usuários para o URL definido do produto. Para personalizar o destino do botão, inclua este grupo de campos opcionais junto com os seguintes campos:button_text : uma string que define o texto do botão.override_product_button : definido como true para substituir as configurações padrão do link do botão. Em seguida, inclua umbutton_override objeto. Saiba mais sobre button_override abaixo.
|
button_override | Objeto | No grupo de campos group_button , isso define o comportamento do URL do botão quando override_product_button está definido como true . Inclui os seguintes campos:no_follow : campo booleano para o comportamento de no_follow do link.open_link_in_new_tab : campo booleano para o comportamento de abertura do link.url : um objeto que especifica o destino do botão. No campourl , você pode definir o tipo de destino por meio do campo type , que suporta os seguintes tipos de conteúdo:EXTERNAL : um URL padrão. Inclua o URL em um campo href .CONTENT : uma página da HubSpot. Inclua o ID da página em um campo content_id .PAYMENT : um link de pagamento. Inclua o link de pagamento em um campo href .EMAIL_ADDRESS : um endereço de e-mail. Inclua o endereço em um campo href .
|
group_name | Grupo de campos | Por padrão, o módulo exibirá o nome do produto na parte superior do módulo como um h3. Para personalizar o nome, inclua este grupo de campos opcionais junto com os seguintes campos:heading_level : o tamanho do título. Pode ser h1 - h6 .override_product_name : defina como true para especificar o texto em vez do nome do produto.name_override : a string que você deseja exibir na parte superior do módulo.
|
group_description | Grupo de campos | Por padrão, o módulo exibirá a descrição do conjunto do produto. Para personalizar a descrição, inclua este grupo de campos opcionais junto com os seguintes campos:override_product_description : definido como true para personalizar a descrição do produto.description_override : uma string contendo sua nova descrição.
|
group_image | Grupo de campos | Por padrão, o módulo exibirá a imagem definida do produto. Para personalizar esta imagem, inclua este grupo de campos opcionais com os seguintes campos:override_product_image : definido como true para especificar uma nova imagem.image_override : um objeto que especifica a nova imagem, incluindo as seguintes propriedades:
|
Download de orçamento
Suportado em modelos de orçamento.
{% module "download" path="@hubspot/quote_download" %}
Parâmetro | Tipo | Descrição | Padrão |
---|
button_text | String | O texto exibido no botão de download. | Download |
download_error | String | Mensagem de erro exibida se o download falhar. | There was a problem downloading the quote. Please try again. |
Pagamento de orçamento
Suportado em modelos de orçamento.
{% module "payment" path="@hubspot/quote_payment" %}
Parâmetro | Tipo | Descrição | Padrão |
---|
heading_text | String | O cabeçalho exibido acima da seção de pagamento de um modelo de orçamento. | Payment |
heading_tag | Escolha | O tipo de cabeçalho usado para exibição de heading_text . Os valores incluem h1 , h2 , h3 , h4 , h5 , h6 . | h3 |
checkout | String | Texto do botão de pagamento. | Pay now |
needs_signature | String | O texto do botão quando uma assinatura é necessária. | Payment can't be made because the quote isn't fully signed. |
checkout_error | Rich text | Mensagem que é exibida quando ocorre um erro durante a finalização da compra. | There was a problem setting up checkout. Please contact the person who sent you this quote. |
payment_status_error | Rich text | Mensagem que é exibida quando ocorre um erro ao tentar fazer um pagamento. | There was a problem loading the payment status for this quote. Please try refreshing the page. |
paid | String | Um indicador de status de pagamento bem-sucedido. | Paid |
payment_processing | String | Um indicador de status de processamento de pagamento. | Payment processing |
Assinatura do orçamento
Suportado em modelos de orçamento.
{% module "signature" path="@hubspot/quote_signature" %}
Quando um orçamento requer uma assinatura eletrônica, os seguintes campos estão disponíveis em um objeto esignature
:
Parâmetro | Tipo | Descrição | Padrão |
---|
pretext | Rich text | Texto de explicação da assinatura eletrônica. | Before you sign this quote, an email must be sent to you to verify your identity. Find your profile below to request a verification email. |
verify_button | String | O texto exibido no botão de verificação. | Verify to sign |
failure | String | O texto de alerta que é exibido quando as informações de assinatura não podem ser recuperadas. | There was a problem retrieving the signature information. Please reload the page. |
verification_sent | String | Um indicador de status que aparece quando a solicitação de verificação foi enviada com sucesso ao signatário do orçamento. | Verification sent |
signed | String | O texto que é exibido quando o orçamento foi assinado com êxito. | Signed |
Quando um orçamento requer uma assinatura por escrito, os seguintes campos estão disponíveis em um objeto print_signature
:
Parâmetro | Tipo | Descrição | Padrão |
---|
header | Rich text | Texto exibido na parte superior da seção de assinatura. | Signature |
signature | String | O texto exibido ao lado do campo de assinatura. | Signature |
date | String | O texto exibido ao lado do campo de data. | Date |
printed_name | String | O texto exibido ao lado do campo de nome por extenso. | Printed name |
countersignature | Objeto | Um objeto que contém conteúdo para a seção de assinatura. Este objeto pode conter os seguintes campos:header : texto que é exibido na parte superior da seção de assinatura.countersignature : texto que é exibido ao lado do campo de assinatura.date : texto que é exibido ao lado do campo de data.printed_name : texto que é exibido ao lado do campo de nome por extenso.
| Signed |
Itens de linha
Suportado em modelos de orçamento. Este módulo também inclui o texto padrão usado em orçamentos personalizados.
{% module "module_165350106057652" path="@hubspot/line_items", label="line_items.module" %}
Parâmetro | Tipo | Descrição | Padrão |
---|
title | Texto | O título da coluna de item de linha. | Column description |
use_additional_product_property | Booleano | Exibir caixa de seleção para permitir que os usuários selecionem colunas de item de linha adicionais nas propriedades do produto. | False |
additional_product_properties | Escolha | Uma propriedade de produto. As opções incluem: price : preço do item de linha. item_description : descrição do item de linha. quantity : número de itens de linha. amount : custo total dos itens de linha. hs_recurring_billing_start_date : data de início de cobrança para itens de linha recorrentes. discount : o valor do desconto se aplica ao item de linha.
| |
crm_product_property | Propriedade do objeto do CRM | Selecione qualquer propriedade de produto a ser exibida como um cabeçalho de coluna de item de linha. | |
Rich text
Suportado em todos os tipos de modelo.
{% module "rich_text" path="@hubspot/rich_text" %}
Parâmetro | Tipo | Descrição | Padrão |
---|
html | Rich Text | Bloco HTML. | ## Something Powerful \n ### Tell The Reader More \n The headline and subheader tells us what you're [offering](https://br.developers.hubspot.com/docs\"#\"), 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. \n Remember: \n<ul>\n<li>Bullets are great</li>\n<li>For spelling out [benefits](https://br.developers.hubspot.com/docs\"#\") and</li>\n<li>Turning visitors into leads.</li>\n</ul> |
Suportado em páginas, listagens de blog e posts de blog.
{% module "rss_listing" path="@hubspot/rss_listing" %}
Parâmetro | Tipo | Descrição | Padrão |
---|
title | Texto | Um título H3. | "Test" |
rss_feed_type | Escolha | Tipos de feeds RSS. As opções incluem:blog - blog hospedado na HubSpot.external - Um feed RSS externo.
| blog |
rss_url | Texto | URL RSS a ser usado quando rss_feed_type for igual a external . | |
content_group_id | Blog | ID do blog a ser usado quando rss_feed_type for igual a blog . | |
topic_id | Tag | (opcional) Id da tag a ser filtrada quando rss_feed_type for igual a blog . | |
number_of_items | Número | Número máximo de publicações para exibir. | 5 |
include_featured_image | Booleano | Inclua a imagem em destaque | false |
show_author | Booleano | Mostre o nome do autor. | true |
attribution_text | Texto | O texto que atribui um autor a uma publicação Disponível quando show_author é igual a true . | "by" |
show_detail | Booleano | Mostre o Texto de resumo do post. | true |
limit_to_chars | Número | Limita o comprimento do texto de resumo quando show_detail é igual a true . | 200 |
click_through_text | Texto | O texto que será exibido para o link de clickthrough no final de um resumo de post quando show_detail for igual a true . | "Read more" |
show_date | Booleano | Mostre a data de publicação. | true |
publish_date_format | Escolha | Formato da data de publicação quando show_date for igual a true . As opções incluem:short (ex: 06/11/06 12:00PM)medium (ex: 6 de jun 2006 12:00:00 pm)long (ex: 6 de junho de 2017 12:00:00 pm EDT)MMMM d, yyyy 'at' h:mm a (ex: 6 de junho de 2006 às 12:00 pm)h:mm a 'on' MMMM d, yyyy (ex: 12:00 pm em 6 de junho de 2006)
| short |
publish_date_text | Texto | O texto que indica quando um post foi publicado quando show_date for igual a true . | "posted at" |
Entrada de pesquisa do site
Suportado em páginas, posts de blog e listagens de blog.
{% module "search_input" path="./local-search_input"
placeholder="Search"
include_search_button=true
results={
"use_custom_search_results_template": "true",
"path_id": "77977569400"
}
%}
Parâmetro | Tipo | Descrição | Padrão |
---|
field_label | Texto | Texto do rótulo de entrada da pesquisa | |
placeholder | Texto | Texto temporário para o campo de entrada. | "Search" |
include_search_button | Booleano | Inclui um botão de pesquisa. | false |
content_types | Objeto | Quais tipos de conteúdo devem ser incluídos nos resultados da pesquisa. O objeto contém as seguintes chaves com valores booleanos:website_pages landing_pages blog_posts knowledge_articles
| { "website_pages": true, "landing_pages": false, "blog_posts": true, "knowledge_articles": false } |
results | Objeto | Um objeto que permite controles para usar uma página de resultados de pesquisa personalizada. Inclui as seguintes propriedades:
use_custom_search_results_template (booleano): quando definido como true , os usuários podem selecionar uma página de resultados de pesquisa personalizada. O padrão é false .path_id (string): o ID da página que será usado nos resultados da pesquisa. A página referenciada deve conter o módulo de resultados da pesquisa.
| |
Resultados de pesquisa
Suportado em páginas, posts de blog e listagens de blog.
{% module "search_results" path="@hubspot/search_results" %}
Parâmetro | Tipo | Descrição | Padrão |
---|
display_featured_images | Booleano | Exiba imagens em destaque para itens. | false |
Cabeçalho da sessão
Suportado em páginas, listagens de blog e posts de blog.
{% module "section_header" path="@hubspot/section_header" %}
Parâmetro | Tipo | Descrição | Padrão |
---|
header | Texto | Conteúdo do cabeçalho da seção. | "A clear and bold header" |
heading_level | Escolha | Nível de título para header . As opções incluem h1 até h6 . | h1 |
subheader | Texto | Texto do parágrafo de subtítulo da seção. | "A more subdued subheader" |
Suportado em páginas, listagens de blog e posts de blog.
{% module "simple_menu" path="@hubspot/simple_menu" %}
Parâmetro | Tipo | Descrição | Padrão |
---|
menu_tree | Menu simples | Objeto de menu simples. | [] |
orientation | Escolha | A orientação do menu. As opções incluem: | horizontal |
Seguir na rede social
Adicione links aos seus perfis de mídias sociais, com a reordenação de arrastar e soltar no editor de conteúdo. Insere ícones automaticamente com base no URL social, mas os ícones podem ser substituídos.
Suportado em páginas, listagens de blog e posts de blog.
{% module "social_follow" path="@hubspot/social_follow" %}
Parâmetro | Tipo | Descrição | Padrão |
---|
link | Texto | O link de destino para a página social adicionada no editor. | |
open_in_new_window | Booleano | Quando definido como false , o link será aberto na mesma guia do navegador. | true |
is_podcast | Booleano | Defina como true para exibir um ícone de podcast em vez de um ícone padrão ou personalizado. | false |
customize_alt_text | Booleano | Por padrão, o texto alternativo é gerado automaticamente. Quando definido como true , você pode substituir o texto alternativo padrão por um valor personalizado usando o campo aria_label . | false |
aria-label | String | Quando customize_alt_text é true , este campo define o ícone de texto alternativo (por exemplo, Follow us on Facebook ). É usado por leitores de tela para descrever o ícone para usuários com deficiência visual. | False |
customize_icon | Booleano | Por padrão, os ícones são preenchidos automaticamente com base na URL do link. Quando definido como true , você pode usar o custom_icon para selecionar um dos outros ícones fornecidos (Font Awesome 6.4.2). | false |
custom_icon | Ícone | Quando customize_icon é true e is_podcast é false , use este campo para especificar um ícone personalizado do conjunto fornecido. Os ícones disponíveis são do Font Awesome 6.4.2. | |
Compartilhamento social
Suportado em páginas, listagens de blog e posts de blog.
{% module "social_sharing" path="@hubspot/social_sharing" %}
Observação: a variável social_link_url
na coluna padrão abaixo é o mesmo valor que o parâmetro link
.
Parâmetro | Tipo | Descrição | Padrão |
---|
link | Texto | Esse é o link de destino que será encurtado para facilitar o compartilhamento nas redes sociais | |
facebook | Objeto | Objeto contendo:enabled : booleano para ativar o item socialcustom_link_format : URL personalizado para compartilhamento de URL nas redes sociais
| { "enabled": false, "custom_link_format": "http://www.facebook.com/share.php?u={{ social_link_url }}" } |
twitter | Objeto | Objeto que contém:enabled : booleano para habilitar item socialcustom_link_format : URL personalizado para URL de compartilhamento de redes sociais
| { “enabled”: false, “custom_link_format”: “https://twitter.com/intent/tweet?original_referer=\{\{ social_link_url }}&url={{ social_link_url }}&source=tweetbutton&text={{ social_page_title|urlencode }}” } |
linkedin | Objeto | Objeto contendo:enabled : booleano para ativar o item socialcustom_link_format : URL personalizado para compartilhamento de URL nas redes sociais
| { "enabled": false, "custom_link_format": "http://www.linkedin.com/shareArticle?mini=true&url={{ social_link_url }}" } |
pinterest | Objeto | Objeto que contém:enabled : booleano para habilitar item social.custom_link_format : URL personalizado para URL de compartilhamento social.pinterest_media : objeto de imagem incluindo:src : URL da imagem.alt : texto alternativo para a imagem.
| { "enabled": false, "custom_link_format": "http://pinterest.com/pin/create/button/?url={{ social_link_url }}&media={{ pinterest_media }}", "pinterest_media": { "src": "", "alt": null } } |
email | Objeto | Objeto contendo:enabled : booleano para ativar o item socialcustom_link_format : URL personalizado para compartilhamento de URL nas redes sociais
| { "enabled": false, "custom_link_format": "mailto:?subject=Check out {{ social_link_url }} &body=Check out {{ social_link_url }}" } |
Suportado em páginas, listagens de blog e posts de blog.
{% module
path="@hubspot/tabbed_card",
tabs=[
{
"content" : "<p>This is the descriptive text contained in tab 1.</p>",
"tab_label" : "Tab 1 label"
},
{
"content" : "<p>This is the descriptive text contained in tab 2.</p>",
"tab_label" : "Tab 2 label"
}
],
fixed_height=false
%}
Parâmetro | Tipo | Descrição | Padrão |
---|
tabs | Grupo de campos | Um grupo de campos que contém o rótulo da guia e o conteúdo do texto de cada guia. Contém os seguintes campos:tab_label : o rótulo da guia.content : o conteúdo rich text da guia.
| "Some additional information in one line" |
fixed_height | Booleano | Por padrão, as guias serão definidas em uma altura fixa para que a altura do contêiner permaneça a mesma ao alternar entre guias. Você pode definir isso como false se quiser que a altura do contêiner do cartão com guias se baseie no conteúdo da guia ativa. | False |
Uma linha de texto
Suportado em páginas, listagens de blog e posts de blog.
{% module "text" path="@hubspot/text" %}
Parâmetro | Tipo | Descrição | Padrão |
---|
value | Texto | Adicione seu texto a este parâmetro. | "Some additional information in one line" |
Vídeo
Suportado em páginas, listagens de blog e posts de blog.
{% module "video" path="@hubspot/video" %}
Parâmetro | Tipo | Descrição | Padrão |
---|
video_type | Escolha | O tipo de vídeo. As opções incluem:embed : código de incorporação de uma fonte externa.hubspot_video : vídeo hospedado pela HubSpot.
| embed |
hubspot_video | Reprodutor de vídeo | Vídeo hospedado pela HubSpot. Quando video_type for igual a hubspot_video . | |
embed_field | Incorporar | Suporta tipos de incorporação:oembed html : código de incorporação de vídeo.
| |
oembed_thumbnail | Imagem | Substitua a imagem de miniatura oembed quando video_type for igual a embed e embed_field for igual a oembed . | |
style_options | Objeto | Objeto que contém oembed_thumbnail_play_button_color - Campo de cor. | {"oembed_thumbnail_play_button_color":"#ffffff"} |
placeholder_fields | Objeto | Objeto que contém:placeholder_title : campo de texto.placeholder_description : campo de texto.
| {"placeholder_title":"No video selected", "placeholder_description":"Select a video type in the sidebar."} |
Incorporação de vídeo (landing page)
Suportado em páginas.
{% module "video_embed_lp" path="@hubspot/video_embed_lp" %}
Parâmetro | Tipo | Descrição | Padrão |
---|
url | Texto | O URL do vídeo. URLs do Vimeo e do YouTube são suportados. | "https://www.youtube.com/watch?v=X1Rr5BFO5rg" |
is_full_width | Booleano | Define o vídeo para largura total (true ), ou defina manualmente a largura e a altura (false ). | true |
max_width | Número | Largura máxima (px) | 800 |
max_height | Número | Altura máxima (px) | 450 |
Link do WhatsApp
Suportado em páginas, posts de blog e listagens de blog. Requer um canal do WhatsApp conectado.
{% module "whatsapp_link" path="@hubspot/whatsapp_link", label="whatsapp_link" %}
Parâmetro | Tipo | Descrição | Padrão |
---|
whatsapp_number | URL | Selecione nos Canais do WhatsApp conectados à conta. | |
optin_text | Escolha | O texto de opt-in e opt-out. | |
whatsapp_display | Mostrar: | selecione se o botão apresenta texto, um ícone do WhatsApp ou ambos. As opções incluem: | text_and_icon |
icon_position | Escolha | A posição do ícone no botão. As opções incluem left e right . | left |
button_text | String | O texto do botão. | Chat on WhatsApp |
whatsapp_icon_title | String | O texto do ícone para leitores de tela. | WhatsApp Icon |