Última modificação: 28 de agosto 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.
design-manager-default-modules

Observação:

Os módulos da Web padrão são separados de módulos de e-mail padrão, que são para modelos de e-mail. Se seus modelos de e-mail incluírem um dos módulos da Web padrão a seguir, você deverá substituí-los pelo módulo específico de e-mail correspondente:
  • cta
  • header
  • linked_image
  • logo
  • post_filter
  • post_listing
  • section_header
  • social_sharing
  • text

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âmetroTipoDescriçãoPadrão
select_blogBlogO blog a ser usado para o módulo.
titleStringTítulo para o módulo (envolto em uma tag h3)"Subscribe Here!"
response_messageRich textA 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âmetroTipoDescriçãoPadrão
layoutEscolhaO 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
columnsNúmeroAo usar o layout grid, o número de posts por linha. Pode ser 2, 3 ou 4.3
alternateImageBooleanoAo usar o layout sideBySide, defina como true para alinhar as imagens em destaque à direita e à esquerda da visualização da publicação.false
fullImageBooleanoAo 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
displayForEachListItemMatrizO 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' ]
buttonTextStringO 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âmetroTipoDescriçãoPadrão
select_blogBlogSelecione 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_typeEscolhaTipo de links de filtragem a serem exibidos. As opções incluem:
  • tag
  • month
  • author
tag
order_byEscolhaClassificação dos valores dos links de filtro. As opções incluem:
  • post_count
  • name
post_count
list_titleTextoUm título H3."Posts by Tag"
max_linksNúmeroNúmero de links de filtro para mostrar. Deixe em branco para mostrar todos.5
expand_link_textTextoO 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.

Observação:

Uma nova versão deste módulo foi lançada no final de março de 2024. Saiba mais sobre o novo módulo de listagem de posts padrão.
{% module "post_listing" path="@hubspot/post_listing" %}
ParâmetroTipoDescriçãoPadrão
select_blogBlogSelecione 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_typeEscolhaO 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_titleTextoUm título H3."Recent Posts"
max_linksNúmeroNú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âmetroTipoDescriçãoPadrão
linkLinkO 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_textTextoO texto que será exibido no botão."Add a button link here"
styleObjeto
  • 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âmetroTipoDescrição
guidStringO 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âmetroTipoDescriçãoPadrão
heightNúmeroAltura em pixels (px) da linha divisória.1
widthNúmeroLargura percentual (%) da linha divisória.50
colorCorCor (hexadecimal) e opacidade (número) da linha divisória.{ "color": "#000000", "opacity": 100 }
line_typeEscolhaTipo de linha. As opções incluem:
  • solid
  • dotted
  • dashed
solid
alignmentEscolhaAlinhamento horizontal da linha divisória. As opções incluem:
  • left
  • center
  • right
center
show_paddingBooleanoMostre/oculte as margens superior e inferior no divisor.false
paddingNúmeroValor 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.

Formulário

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âmetroTipoDescriçãoPadrão
titleTextCabeçalho H3
formObjetoObjeto de formulário incluindo:
  • form_id: ID do formulário a ser usado
  • response_type: o que o visitante verá depois de enviar o formulário:
    • inline
    • redirect
  • 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_overriddenBooleanoE-mail para o qual enviar a notificação de formulário em vez das configurações padrão.false
notifications_override_email_addressesE-mailLista separada por vírgulas de e-mails a serem enviados quando notifications_are_overridden for igual a true.
follow_up_type_simpleBooleanoEnvio de um e-mail de acompanhamento ativado.false
simple_email_for_live_idFollowupemailID do e-mail de acompanhamento. Disponível quando follow_up_type_simple é igual a true.
sfdc_campaignSalesforcecampaignQuando 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âmetroTipoDescriçãoPadrão
valueTextoTexto do cabeçalho."A clear and bold header"
header_tagEscolhaEscolha 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âmetroTipoDescriçãoPadrão
nameStringO nome do ativo."hubspot"
purposeEscolhaUma 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"
titleStringUma opção de acessibilidade que atribui um título ao ícone.
styleStringo tipo de ícone. Pode ser um dos seguintes: solid, regular, light, thin ou duotone."solid"
unicodeStringO 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âmetroTipoDescriçãoPadrão
imgImagemObjeto de imagem contendo:
  • src: url da imagem
  • alt: texto alternativo da imagem
  • loading: as opções de carregamento lento incluem:
    • disabled
    • lazy
  • width: valor px
  • height: 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 }
linkTextoLink opcional para a imagem.
targetBooleanoAbre 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âmetroTipoDescriçãoPadrão
slidesObjetoObjeto 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_modeEscolhaModo de exibição da Galeria de imagens. As opções incluem:
  • standard: controle deslizante padrão.
  • thumbnail: navegador de miniaturas.
  • lightbox: galeria lightbox.
standard
lightboxRowsNúmeroNúmero de linhas na galeria Lightbox quando display_mode é igual a lightbox.3
loop_slidesBooleanoHabilita o loop pelos slides com próximo/anterior quando display_mode é igual a standard ou thumbnail.true
auto_advanceBooleanoAvança automaticamente para o próximo slide quando display_mode é igual a standard ou thumbnail.true
num_secondsNúmeroTempo (segundos) entre o avanço para o próximo slide quando display_mode é igual a standard ou thumbnail.5
show_paginationBooleanoMostre os botões de navegação quando display_mode for igual a standard ou thumbnail.true
sizingEscolhaDefine a altura dos slides quando display_mode é igual a standard ou thumbnail. As opções incluem:
  • static: altura fixa.
  • resize: altura variável.
static
transitionEscolhaEstilos 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_positionEscolhaPosiçã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âmetroTipoDescriçãoPadrão
slidesObjetoObjeto 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_modeEscolhaModo de exibição da Galeria de imagens. As opções incluem:
  • standard: controle deslizante padrão.
  • thumbnail: navegador de miniaturas.
  • lightbox: galeria lightbox.
standard
lightboxRowsNúmeroNúmero de linhas na galeria Lightbox quando display_mode é igual a lightbox.3
loop_slidesBooleanoHabilita o loop pelos slides com próximo/anterior quando display_mode é igual a standard ou thumbnail.true
auto_advanceBooleanoAvança automaticamente para o próximo slide quando display_mode é igual a standard ou thumbnail.true
num_secondsNúmeroTempo (segundos) entre o avanço para o próximo slide quando display_mode é igual a standard ou thumbnail.5
show_paginationBooleanoMostre os botões de navegação quando display_mode for igual a standard ou thumbnail.true
sizingEscolhaDefine a altura dos slides quando display_mode é igual a standard ou thumbnail. As opções incluem:
  • static: altura fixa.
  • resize: altura variável.
static
transitionEscolhaEstilos 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_positionEscolhaPosiçã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 com controle deslizante de imagens

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âmetroTipoDescrição
slidesGrupo de camposUm 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_settingsGrupo de camposO 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_textGrupo de camposOs 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âmetroTipoDescriçãoPadrão
display_modeEscolhaO 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âmetroTipoDescriçãoPadrão
imgImagemObjeto de imagem contendo:
  • override_inherited_src: substitua o logotipo padrão nas configurações
  • src: url da imagem
  • alt: texto alternativo para o logotipo
{ "override_inherited_src": false, "src": null, "alt": null }
linkTextoLink 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_tabBooleanoAbre o link em uma nova guia.false
suppress_company_nameBooleanoOculte o nome da empresa quando uma imagem não estiver selecionada.true
heading_levelEscolhaEscolha 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âmetroTipoDescrição
group_logosMatrizUma matriz que contém um objeto para cada logotipo na grade.
logoObjetoEm 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.
stylesMatrizUma 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âmetroTipoDescrição
meetingReuniãoSelecione 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
        %}
O Facebook requer uma Conta de desenvolvedor do Facebook e um aplicativo Facebook criado com configurações básicas. Depois de ter feito isso, o id do aplicativo é o que você transmite para o módulo.O Google requer uma conta do Google e a criação de credenciais de autorização ; com isso, você transmitirá o ID do cliente do seu aplicativo para o módulo.
ParâmetroTipoDescriçãoPadrão
facebook_appidStringO ID do aplicativo do Facebook.
facebook_enabledbooleanoAtive o botão para login do Facebook. facebook_appid é obrigatório.False
google_clientidStringO ID de cliente do Google.
google_enabledBooleanoAtive 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âmetroTipoDescriçãoPadrão
idMenuID do menu.
root_typeEscolhaTipo 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_levelsEscolhaDetermina o número de filhos da árvore do menu que podem ser expandidos no menu. As opções incluem 1 até 102
flowEscolhaA orientação do menu. As opções incluem:
  • horizontal
  • vertical
horizontal
flyoutsBooleanoFuncionalidade 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âmetroTipoDescriçãoPadrão
submit_button_textTextoTexto que aparece no botão Enviar."Submit"
password_placeholderTextoTexto temporário para o campo de senha."Password"
bad_password_messageRich TextMensagem 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âmetroTipoDescriçãoPadrão
paymentStringPara 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_locationStringDefina 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_textStringDefine o texto do botão de finalização da compra."Checkout"
button_targetEscolhaSe o botão usa um link de pagamento da HubSpot ou um link externo. As opções incluem:
  • payment_link
  • custom_link
"payment_link"
button_linkLinkQuando button_target está definido como custom_link, especifica o destino do link externo. Os tipos compatíveis incluem:
  • EXTERNAL
  • CONTENT
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âmetroTipoDescrição
productProdutoO produto a ser exibido, especificado pelo ID do produto.
group_buttonGrupo de camposPor 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_overrideObjetoNo 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_nameGrupo de camposPor 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_descriptionGrupo de camposPor 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_imageGrupo de camposPor 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:
    • alt
    • height
    • loading
    • src
    • width

Download de orçamento

Suportado em modelos de orçamento.
{% module "download" path="@hubspot/quote_download" %}
ParâmetroTipoDescriçãoPadrão
button_textStringO texto exibido no botão de download.Download
download_errorStringMensagem 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âmetroTipoDescriçãoPadrão
heading_textStringO cabeçalho exibido acima da seção de pagamento de um modelo de orçamento.Payment
heading_tagEscolhaO tipo de cabeçalho usado para exibição de heading_text. Os valores incluem h1, h2, h3, h4, h5, h6.h3
checkoutStringTexto do botão de pagamento.Pay now
needs_signatureStringO texto do botão quando uma assinatura é necessária.Payment can't be made because the quote isn't fully signed.
checkout_errorRich textMensagem 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_errorRich textMensagem 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.
paidStringUm indicador de status de pagamento bem-sucedido.Paid
payment_processingStringUm 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âmetroTipoDescriçãoPadrão
pretextRich textTexto 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_buttonStringO texto exibido no botão de verificação.Verify to sign
failureStringO 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_sentStringUm indicador de status que aparece quando a solicitação de verificação foi enviada com sucesso ao signatário do orçamento.Verification sent
signedStringO 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âmetroTipoDescriçãoPadrão
headerRich textTexto exibido na parte superior da seção de assinatura.Signature
signatureStringO texto exibido ao lado do campo de assinatura.Signature
dateStringO texto exibido ao lado do campo de data.Date
printed_nameStringO texto exibido ao lado do campo de nome por extenso.Printed name
countersignatureObjetoUm 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âmetroTipoDescriçãoPadrão
titleTextoO título da coluna de item de linha.Column description
use_additional_product_propertyBooleanoExibir caixa de seleção para permitir que os usuários selecionem colunas de item de linha adicionais nas propriedades do produto.False
additional_product_propertiesEscolhaUma 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_propertyPropriedade do objeto do CRMSelecione 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âmetroTipoDescriçãoPadrão
htmlRich TextBloco 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>

Lista de RSS

Suportado em páginas, listagens de blog e posts de blog.
{% module "rss_listing" path="@hubspot/rss_listing" %}
ParâmetroTipoDescriçãoPadrão
titleTextoUm título H3."Test"
rss_feed_typeEscolhaTipos de feeds RSS. As opções incluem:
  • blog - blog hospedado na HubSpot.
  • external - Um feed RSS externo.
blog
rss_urlTextoURL RSS a ser usado quando rss_feed_type for igual a external.
content_group_idBlogID do blog a ser usado quando rss_feed_type for igual a blog.
topic_idTag(opcional) Id da tag a ser filtrada quando rss_feed_type for igual a blog.
number_of_itemsNúmeroNúmero máximo de publicações para exibir.5
include_featured_imageBooleanoInclua a imagem em destaquefalse
show_authorBooleanoMostre o nome do autor.true
attribution_textTextoO texto que atribui um autor a uma publicação Disponível quando show_author é igual a true."by"
show_detailBooleanoMostre o Texto de resumo do post.true
limit_to_charsNúmeroLimita o comprimento do texto de resumo quando show_detail é igual a true.200
click_through_textTextoO 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_dateBooleanoMostre a data de publicação.true
publish_date_formatEscolhaFormato 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_textTextoO 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âmetroTipoDescriçãoPadrão
field_labelTextoTexto do rótulo de entrada da pesquisa
placeholderTextoTexto temporário para o campo de entrada."Search"
include_search_buttonBooleanoInclui um botão de pesquisa.false
content_typesObjetoQuais 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 }
resultsObjetoUm 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âmetroTipoDescriçãoPadrão
display_featured_imagesBooleanoExiba 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âmetroTipoDescriçãoPadrão
headerTextoConteúdo do cabeçalho da seção."A clear and bold header"
heading_levelEscolhaNível de título para header. As opções incluem h1 até h6.h1
subheaderTextoTexto 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âmetroTipoDescriçãoPadrão
menu_treeMenu simplesObjeto de menu simples.[]
orientationEscolhaA orientação do menu. As opções incluem:
  • horizontal
  • vertical
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âmetroTipoDescriçãoPadrão
linkTextoO link de destino para a página social adicionada no editor.
open_in_new_windowBooleanoQuando definido como false, o link será aberto na mesma guia do navegador.true
is_podcastBooleanoDefina como true para exibir um ícone de podcast em vez de um ícone padrão ou personalizado.false
customize_alt_textBooleanoPor 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-labelStringQuando 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_iconBooleanoPor 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ÍconeQuando 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âmetroTipoDescriçãoPadrão
linkTextoEsse é o link de destino que será encurtado para facilitar o compartilhamento nas redes sociais
facebookObjetoObjeto contendo:
  • enabled: booleano para ativar o item social
  • custom_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 }}" }
twitterObjetoObjeto que contém:
  • enabled: booleano para habilitar item social
  • custom_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 }}” }
linkedinObjetoObjeto contendo:
  • enabled: booleano para ativar o item social
  • custom_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 }}" }
pinterestObjetoObjeto 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 } }
emailObjetoObjeto contendo:
  • enabled: booleano para ativar o item social
  • custom_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 }}" }

Cartão com guias

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âmetroTipoDescriçãoPadrão
tabsGrupo de camposUm 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_heightBooleanoPor 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âmetroTipoDescriçãoPadrão
valueTextoAdicione 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âmetroTipoDescriçãoPadrão
video_typeEscolhaO 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_videoReprodutor de vídeoVídeo hospedado pela HubSpot. Quando video_type for igual a hubspot_video.
embed_fieldIncorporarSuporta tipos de incorporação:
  • oembed
    • video: URL de vídeo.
  • html: código de incorporação de vídeo.
oembed_thumbnailImagemSubstitua a imagem de miniatura oembed quando video_type for igual a embed e embed_field for igual a oembed.
style_optionsObjetoObjeto que contém oembed_thumbnail_play_button_color - Campo de cor.{"oembed_thumbnail_play_button_color":"#ffffff"}
placeholder_fieldsObjetoObjeto 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âmetroTipoDescriçãoPadrão
urlTextoO URL do vídeo. URLs do Vimeo e do YouTube são suportados."https://www.youtube.com/watch?v=X1Rr5BFO5rg"
is_full_widthBooleanoDefine o vídeo para largura total (true), ou defina manualmente a largura e a altura (false).true
max_widthNúmeroLargura máxima (px)800
max_heightNúmeroAltura máxima (px)450
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âmetroTipoDescriçãoPadrão
whatsapp_numberURLSelecione nos Canais do WhatsApp conectados à conta.
optin_textEscolhaO texto de opt-in e opt-out.
whatsapp_displayMostrar:selecione se o botão apresenta texto, um ícone do WhatsApp ou ambos. As opções incluem:
  • text_and_icon
  • text
  • icon
text_and_icon
icon_positionEscolhaA posição do ícone no botão. As opções incluem left e right.left
button_textStringO texto do botão.Chat on WhatsApp
whatsapp_icon_titleStringO texto do ícone para leitores de tela.WhatsApp Icon