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

# Tags padrão do HubL

> Guia de referência abrangente da sintaxe e os parâmetros disponíveis para todas as tags HubL.

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](#system-page-tags), 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](/cms/reference/hubl/tags/dnd-areas). Caso mantenha um site mais antigo, você também pode verificar a [lista de tags HubL descontinuadas](/cms/versions-deprecations/deprecated/hubl/filters-functions).

<Tip>
  A maioria das tags nesta página tem [equivalentes de módulo padrão.](/cms/reference/modules/default-modules) Os módulos podem ser usados em [dnd\_areas](https://br.developers.hubspot.com/docs/cms/start-building/building-blocks/drag-and-drop/overview) e [colunas flexíveis](#flexible-column), tornando-os mais poderosos e fáceis de usar do que as tags que você vê aqui.
</Tip>

## Comentários do blog

Renderiza o código de incorporação de comentários em um modelo de blog, incluindo os próprios comentários e o formulário de comentários. Saiba mais sobre como personalizar as configurações e formulários de comentários do blog em [Base de conhecimento](https://knowledge.hubspot.com/pt/blog/set-up-and-moderate-your-blog-comments).

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

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

| Parâmetro     | Tipo                    | Descrição                                                                                                                                                                                                                            | Padrão    |
| ------------- | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------- |
| `limit`       | Número                  | 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 no URL do painel 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](/cms/start-building/building-blocks/drag-and-drop/drag-and-drop-templates) 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.](/cms/start-building/building-blocks/templates/blog)

## Filtro de post de blog

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

<Warning>
  ### Observação:

  Este módulo só pode ser usado em modelos de posts de blog.
</Warning>

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

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

| Parâmetro          | Tipo                    | Descrição                                                                                                      | Padrão      |
| ------------------ | ----------------------- | -------------------------------------------------------------------------------------------------------------- | ----------- |
| `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 "default".               | `"default"` |
| `expand_link_text` | String                  | Link de texto a exibir se houver mais posts do que o número max\_links. 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 `"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 possíveis valores incluem: `"topic"`, `"month"` e `"author"`.                   | `"topic"`   |

## Listagem de posts de blog

Adiciona uma lista de posts mais populares ou de topo.

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

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

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

| Parâmetro                | Tipo                    | Descrição                                                                                                                                                                                                         | Padrão      |
| ------------------------ | ----------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
| `select_blog`            | "default" ou ID do blog | Seleciona o blog da HubSpot para usar na 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 `"ul"` ou `"ol"`.                                                                                                                                               | `"ul"`      |
| `title_tag`              | String                  | Define a tag usada para o título da lista.                                                                                                                                                                        | `"h3"`      |
| `listing_type`           | String                  | Liste os posts 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                | Exiba 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.

Essa tag não gera um módulo editável em nível de página/pós; ela é totalmente configurada com HubL.

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

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

| Parâmetro            | Tipo     | Descrição                                                                                                                                                                                                                                                                                                                                                               | Padrão    |
| -------------------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- |
| `blog_ids`           | Número   | Os IDs dos blogs dos quais incluir os posts. Se não for especificado, isso incluirá posts do blog padrão.                                                                                                                                                                                                                                                               |           |
| `blog_post_ids`      | String   | Os IDs de posts do blog para serem usados ao encontrar posts relevantes do blog para listar, separadas por vírgulas.Use esse parâmetro apenas quando o widget for exibido nas páginas. Quando usado em posts de blog, ele procurará posts relevantes com base no post do blog exibido.                                                                                  |           |
| `blog_post_override` | String   | Os IDs dos posts 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`              | Número   | O número máximo de posts de blog a serem listados.                                                                                                                                                                                                                                                                                                                      | `3`       |
| `tags`               | String   | As tags do blog que devem ser usadas para determinar se um post é relevante (separadas por vírgula). Os posts do blog com as tags especificadas terão uma classificação mais elevada em termos de relevância.                                                                                                                                                           |           |
| `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 | Primeira data de publicação.Veja o [exemplo abaixo](#examples).                                                                                                                                                                                                                                                                                                         |           |
| `end_date`           | datetime | Última data de publicação.Veja o [exemplo abaixo](#examples).                                                                                                                                                                                                                                                                                                           |           |
| `blog_authors`       | String   | Os nomes dos autores dos quais incluir os posts (separados por vírgula). Veja o [exemplo abaixo](#examples).                                                                                                                                                                                                                                                            |           |
| `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 do blog retornados. A função recebe uma matriz de objetos de post de blog para formatar. Se nenhum dos parâmetros `callback` ou `post_formatter` for especificado, a tag gerará um HTML em um formato padrão.Veja o [exemplo abaixo](#examples).                                                               | `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 `default`, o formatador interno será usado para formatar cada post. | `default` |
| `allow_any_language` | Booleano | Quando definido como `false`, serão exibidos apenas os posts no mesmo idioma da página em que a tag é usada. Quando definido como `true`, a restrição de idioma é ignorada e todos os posts relacionados são extraídos independentemente do idioma da página.                                                                                                           | `False`   |

<Warning>
  É altamente recomendado usar o parâmetro `callback` em vez de `post_formatter` para melhorar a velocidade de carregamento da página.
</Warning>

### Exemplos

O exemplo a seguir gera uma lista de posts escritos por um dos três `blog_authors` especificados em dois blogs diferentes:

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

O exemplo a seguir gera uma lista de 10 posts relacionados a um post de blog específico, com a tag de blog "sales enablement", e restritos a um intervalo de datas de publicação específico. Este exemplo especifica o parâmetro `blog_post_ids`, para que seja usado em uma página:

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

O exemplo a seguir gera uma listagem de cinco posts usando o parâmetro `callback` para controlar a saída de HTML da listagem de posts:

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

<script>
  var blog_post_formatter = function(blogposts) {

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

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

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

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

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

| Parâmetro              | Tipo                    | Descrição                                                                                                                                                                                                                                 | Padrão    |
| ---------------------- | ----------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- |
| `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 no URL do painel 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.

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

  ```text saída.txt theme={null}
  <span
  id="hs_cos_wrapper_blog_subscription"
  class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_blog_subscribe"
  style=""
  data-hs-cos-general-type="widget"
  data-hs-cos-type="blog_subscribe"
  >
  <h3
  id="hs_cos_wrapper_blog_subscription_title"
  class="hs_cos_wrapper form-title"
  data-hs-cos-general-type="widget_field"
  data-hs-cos-type="text"
  >
  Subscribe to Designers Blog
  </h3>
  <div id="hs_form_target_blog_subscription"></div>
  <script charset="utf-8" src="//js.hsforms.net/forms/current.js"></script>
  <script>
  hbspt.forms.create({
  portalId: '327485',
  formId: 'a8d73dc6-0d3a-486d-8938-b19f28b69c3c',
  formInstanceId: '60',
  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>
  ```
</CodeGroup>

| Parâmetro          | Tipo                    | Descrição                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | Padrão                      |
| ------------------ | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- |
| `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 no URL do painel 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 for True, 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. Esta opção só será mostrada na interface do usuário do editor se os módulos tiverem o parâmetro `overrideable=True`.<br />Por exemplo, para substituir HubID e ID de formulário pelas informações da URL do seu formulário de assinante de blog padrão: `edit_form_link=" <ul>\n <li><a href="https://br.developers.hubspot.com/docs/forms/HubID/FormID/edit/" target="_blank">Default Blog</a></li> \n</ul> "`. <br />Observe que os caracteres de nova linha `\n` acima adicionam uma linha extra de preenchimento antes e depois do link. |                             |

## 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`](/cms/reference/modules/export-to-template-context).

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

  ```text saída.txt theme={null}
  false
  ```
</CodeGroup>

| Parâmetro | Tipo     | Descrição                                                   | Padrão  |
| --------- | -------- | ----------------------------------------------------------- | ------- |
| `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`](/cms/reference/modules/export-to-template-context).

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

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

| Parâmetro | Tipo      | Descrição                                                                                                                                                                                                                                                                 |
| --------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `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 é a seguinte: `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 `<style>` ou em linha, você deverá usar o parâmetro `no_wrapper=True` para remover o wrapper `<span>`.

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

  ```text saída.txt theme={null}
  #000000
  ```
</CodeGroup>

| Parâmetro | Tipo   | Descrição                                          |
| --------- | ------ | -------------------------------------------------- |
| `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.

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

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

| Parâmetro      | Tipo   | Descrição                                                                                                                                                                          |
| -------------- | ------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `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 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 uso em e-mail do código da CTA.\*                                                                                                                                      |

<Info>
  \*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](https://knowledge.hubspot.com/pt/website-and-landing-pages/clone-hubspot-content). Você pode copiar o módulo HubL CTA com todos os parâmetros definidos corretamente para você.

  Há também uma função [CTA](/cms/reference/hubl/functions#cta) que gera um CTA a partir do ID.
</Info>

## 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](/cms/reference/modules/using-modules-in-templates#block-syntax).

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

  Block Syntax Example:

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

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

| Parâmetro | Tipo   | Descrição                                   |
| --------- | ------ | ------------------------------------------- |
| `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](https://br.developers.hubspot.com/docs/cms/start-building/building-blocks/modules/overview).

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:

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

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

| Parâmetro   | Tipo   | Descrição                                                                                                                                                                                                                                                                                    |
| ----------- | ------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `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

Para renderizar o conteúdo do espaço reservado para um módulo no editor, você pode adicionar conteúdo padrão aos campos do módulo ou usar a tag HubL `editor_placeholder`. Isso 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.

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

Para adicionar um espaço reservado para editor a um módulo personalizado, primeiro adicione uma [declaração se](/cms/reference/hubl/if-statements) para o HTML do módulo para renderizar o espaço reservado quando não há conteúdo selecionado no editor. Por exemplo, o código a seguir pode ser usado para adicionar um espaço reservado para editor a um módulo CTA:

```hubl theme={null}
{% if module.label %}
   {% cta guid="{{ module.guid }}" label="my_cta" %}
{% elif is_in_editor %}
  {% editor_placeholder %}
{% endif %}
```

<Info>
  A primeira declaração `if` identifica se o módulo está presente. Então, a
  declaração `elif` identifica se o módulo está sendo renderizado no contexto do
  editor que usa a variável `is_in_editor`. Esta variável retorna `true` se o
  conteúdo está sendo renderizado em qualquer editor de conteúdo, mas você pode
  ser mais específico com outros [editor e visualização no aplicativo
  variáveis](/cms/reference/hubl/variables#in-app-editor-and-preview-variables).
</Info>

Em seguida, defina o conteúdo do espaço reservado no arquivo do módulo `meta.json`.

```json theme={null}
{
  "global": false,
  "host_template_types": ["PAGE"],
  "module_id": 62170380654,
  "is_available_for_new_content": true,
  "placeholder": {
    "show_module_icon": true,
    "title": "Call to action",
    "description": "Select a CTA"
  }
}
```

| Parâmetro          | Tipo     | Descrição                                    |
| ------------------ | -------- | -------------------------------------------- |
| `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. |

## 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](https://knowledge.hubspot.com/pt/website-pages/edit-page-content-in-a-drag-and-drop-area). 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](/cms/reference/fields/module-theme-fields#repeaters), que oferecem uma funcionalidade semelhante.

<CodeGroup>
  ```text entrada.txt theme={null}
  {% widget_container "my_flexible_column" label="My flex column"%}
  {% module "rich_text" path="@hubspot/rich_text" %}
  {% module "linked_image" path="@hubspot/linked_image" %}
  {% end_widget_container %}
  ```

  ```text saída.txt theme={null}
  <span
  id="hs_cos_wrapper_my_flexible_column"
  class="hs_cos_wrapper hs_cos_wrapper_widget_container hs_cos_wrapper_type_widget_container"
  style=""
  data-hs-cos-general-type="widget_container"
  data-hs-cos-type="widget_container"
  ><div
  id="hs_cos_wrapper_rich_text"
  class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_module"
  style=""
  data-hs-cos-general-type="widget"
  data-hs-cos-type="module"
  >
  <span
  id="hs_cos_wrapper_rich_text_"
  class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_rich_text"
  style=""
  data-hs-cos-general-type="widget"
  data-hs-cos-type="rich_text"
  ><h2>Something Powerful</h2>
  <h3>Tell The Reader More</h3>
  <p>
  The headline and subheader tells us what you're
  <a href="#">offering</a>, and the form header closes the deal. Over here
  you can explain why your offer is so great it's worth filling out a form
  for.
  </p>
  <p>Remember:</p>
  <ul>
  <li>Bullets are great</li>
  <li>For spelling out <a href="#">benefits</a> and</li>
  <li>Turning visitors into leads.</li>
  </ul></span
  >
  </div>
  <div
  id="hs_cos_wrapper_linked_image"
  class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_module"
  style=""
  data-hs-cos-general-type="widget"
  data-hs-cos-type="module"
  >
  <span
  id="hs_cos_wrapper_linked_image_"
  class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_linked_image"
  style=""
  data-hs-cos-general-type="widget"
  data-hs-cos-type="linked_image"
  ><img
  src="https://static.hubspot.com/final/img/content/email-template-images/placeholder_200x200.png"
  class="hs-image-widget "
  style="width:200px;border-width:0px;border:0px;"
  width="200"
  alt="placeholder_200x200"
  title="placeholder_200x200"
  /></span></div
  ></span>
  ```
</CodeGroup>

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

## Formulário

Permite que os usuários selecionem um formulário da HubSpot para adicionar à página. O código abaixo inclui um exemplo de uso da sintaxe de tag padrão HubL e um exemplo de uso de [sintaxe de bloco](/cms/reference/modules/using-modules-in-templates#block-syntax).

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

  <!-- Block syntax example -->
  {% module_block form "my_form"
  form_follow_ups_follow_up_type="",
  form_to_use="9e633e9f-0634-498e-917c-f01e355e83c6",
  title="Free Trial",
  notifications_are_overridden=True,
  response_message="Thanks for submitting the form.",
  response_type="inline",
  overrideable=True,
  gotowebinar_webinar_key="",
  webinar_id="",
  webinar_source"",
  label="Form"
  %}
  {% module_attribute "notifications_override_email_addresses" is_json=True %}
  ["email_address@website.com"]
  {% end_module_attribute %}
  {% end_module_block %}
  ```

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

| Parâmetro                                | Tipo       | Descrição                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| ---------------------------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `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.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| `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 possíveis valores 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", habilita um e-mail de acompanhamento simples. Alternativa a `form_follow_ups_follow_up_type`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| `follow_up_type_automation`              | Booleano   | Se for "true", inscreve os envios em um fluxo de trabalho. Alternativa a `form_follow_ups_follow_up_type`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
| `simple_email_campaign_id`               | Número     | Especifica o ID do e-mail de acompanhamento simples. Alternativa a `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 o URL para o 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"` (padrão).                                                                                                                                                                                                                                                                                                                                                                                                    |
| `response_message`                       | String     | Define uma mensagem integrada de agradecimento. Este parâmetro suporta HTML.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| `notifications_are_overridden`           | Booleano   | Se definido como `True`, o formulário enviará notificações de formulário para endereços de e-mail especificados selecionados no parâmetro `notifications_override_email_addresses`, em vez dos padrões do formulário. O padrão é `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.                                                                                                                                                                                                                                                                                                                                                      |
| `sfdc_campaign`                          | String     | Especifica a campanha do Salesforce na qual inscrever os contatos que enviarem o formulário. O valor deste parâmetro deve ser o ID da campanha SFDC e está disponível apenas para contas que são [integradas ao Salesforce](https://knowledge.hubspot.com/pt/salesforce/install-the-hubspot-salesforce-integration).                                                                                                                                                                                                                                                                  |
| `gotowebinar_webinar_key`                | String     | Especifica o webinar GoToWebinar para inscrever contatos após o envio do formulário. Disponível apenas para contas que utilizam a [Integração GoToWebinar](https://knowledge.hubspot.com/pt/integrations/use-the-gotowebinar-integration-with-hubspot).                                                                                                                                                                                                                                                                                                                               |
| `webinar_id`                             | String     | Um campo mais genérico que especifica a ID do webinar do Microsoft Teams ou GoToWebinar para inscrever contatos após o envio do formulário. Disponível apenas em contas que utilizam o [GoToWebinar](https://knowledge.hubspot.com/pt/integrations/use-the-gotowebinar-integration-with-hubspot) ou integrações para [Equipes da Microsoft](https://knowledge.hubspot.com/pt/integrations/connect-hubspot-and-microsoft-teams) e quando `support_all_webinar_types` está definido para `true` em [definição de campos de formulário](/cms/reference/fields/module-theme-fields#form). |
| `webinar_source`                         | String     | O ID do aplicativo de integração, GoToWebinar (`35161`) ou Microsoft Teams (`221635`).                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |

## Rodapé

Renderiza informações de direitos autorais com o ano e o nome da empresa especificados nas [configurações de e-mail marketing da conta](https://knowledge.hubspot.com/pt/marketing-email/edit-office-location-information-in-email-footers#edit-your-default-email-footer-information-in-your-settings).

<CodeGroup>
  ```text entrada.txt theme={null}
  {% page_footer "page_footer" %}
  ```

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

## Galeria

Gera uma tag de galeria do HubSpot. Esta tag de galeria é baseada no [Slick](http://kenwheeler.github.io/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.

<CodeGroup>
  ```text entrada.txt theme={null}
  {% gallery "crm_gallery" %}

  <-- Block syntax -->
  {% widget_block gallery "Gallery" display_mode="standard" sizing="static", transition="slide", caption_position="below", auto_advance=True, overrideable=True, description_text="", show_pagination=True, label="Gallery", loop_slides=True, num_seconds=5  %}
  {% widget_attribute "slides" is_json=True %}
  [{
  "caption": "CRM Contacts App",
  "show_caption": true,
  "link_url": "http://www.hubspot.com/crm",
  "alt_text": "Screenshot of CRM Contacts",
  "img_src": "http://go.hubspot.com/hubfs/Contacts-View-1.png?t=1430860504240",
  "open_in_new_tab": true
  },
  {
  "caption": "HubSpot CRM Contact Profile",
  "show_caption": true,
  "link_url": "http://www.hubspot.com/",
  "alt_text": "HubSpot CRM Contact Profile",
  "img_src": "http://cdn2.hubspot.net/hubfs/53/Contact-Profile.png?t=1430860504240",
  "open_in_new_tab": true
  }]
  {% end_widget_attribute %}
  {% end_widget_block %}
  ```

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

| Parâmetro          | Tipo       | Descrição                                                                                                                                                   | Padrão       |
| ------------------ | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ |
| `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 do 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.

<CodeGroup>
  ```text entrada.txt theme={null}
  {% header "header"  %}
  {% header "my_header" header_tag="h1", overrideable=True, value="A clear and bold header", label="Header" %}
  ```

  ```text saída.txt theme={null}
  <span
  id="hs_cos_wrapper_my_header"
  class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_header"
  style=""
  data-hs-cos-general-type="widget"
  data-hs-cos-type="header"
  >
  <h1>A clear and bold header</h1>
  </span>
  ```
</CodeGroup>

| Parâmetro    | Tipo   | Descrição                                                                                         | Padrão                  |
| ------------ | ------ | ------------------------------------------------------------------------------------------------- | ----------------------- |
| `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](https://github.com/FortAwesome/Font-Awesome/releases/tag/5.0.10), [5.14.0](https://github.com/FortAwesome/Font-Awesome/releases/tag/5.14.0) e [6.4.2](https://github.com/FortAwesome/Font-Awesome/releases/tag/6.4.2).

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

<CodeGroup>
  ```text entrada.txt theme={null}
  {% icon
  name="Accessible Icon"
  style="REGULAR"
  unicode="f368"
  icon_set="fontawesome-5.14.0"
  purpose="decorative"
  title="Accessible Icon"
  %}
  ```

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

| Parâmetro  | Tipo   | Descrição                                                                                                                                                                                                                                                                       | Padrão       |
| ---------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ |
| `name`     | String | Nome do ícone.                                                                                                                                                                                                                                                                  |              |
| `style`    | String | Estilo do ícone. Possíveis valores: `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. Os valores possíveis são:<ul><li>`fontawesome-5.14.0` </li><li>`fontawesome-5.0.10`</li><li>`fontawesome-6.4.2`</li></ul>                                                                                                            |              |
| `purpose`  | String | A finalidade do ícone, usado para [acessibilidade](https://docs.fontawesome.com/v5/web/other-topics/accessibility). Estes são os possíveis valores: `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 a linked\_image abaixo.

<CodeGroup>
  ```text entrada.txt theme={null}
  {% image "image" %}
  {% image "executive_image" label="Executive photo", alt="Photo of Brian Halligan", src="//cdn2.hubspot.net/hub/53/file-733888619-jpg/assets/hubspot.com/about/management/brian-home.jpg", width="300" %}
  ```

  ```text saída.txt theme={null}
  <span
  id="hs_cos_wrapper_executive_image"
  class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_image"
  style=""
  data-hs-cos-general-type="widget"
  data-hs-cos-type="image"
  >
  <img
  src="//cdn2.hubspot.net/hub/53/file-733888619-jpg/assets/hubspot.com/about/management/brian-home.jpg?width=300"
  class="hs-image-widget "
  width="300"
  alt="Photo of Brian Halligan"
  title="Photo of Brian Halligan"
  />
  </span>
  ```
</CodeGroup>

| Parâmetro | Tipo   | Descrição                                                                                                                                                                | Padrão                    |
| --------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------- |
| `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 integradas à 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.](/cms/best-practices/testing-staging-performance/lazy-loading) |                           |

## 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`](/cms/reference/modules/export-to-template-context).

<CodeGroup>
  ```text entrada.txt theme={null}
  {% image_src "image_src" %}
  {% image_src "executve_image_src" src="//cdn2.hubspot.net/hub/53/file-733888614-jpg/assets/hubspot.com/about/management/dharmesh-home.jpg", no_wrapper=True %}
  ```

  ```text saída.txt theme={null}
  //cdn2.hubspot.net/hub/53/file-733888614-jpg/assets/hubspot.com/about/management/dharmesh-home.jpg
  ```
</CodeGroup>

| Parâmetro | Tipo   | Descrição                                 |
| --------- | ------ | ----------------------------------------- |
| `src`     | String | Especifica o src da imagem de URL padrão. |

## Troca 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](https://knowledge.hubspot.com/pt/website-and-landing-pages/create-pages-in-multiple-languages).

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

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

| Parâmetro      | Tipo       | Descrição                                                                                                                                                                                                                                                                                                                 | Padrão      |
| -------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
| `display_mode` | Enumeração | O idioma do texto no botão de idiomas. Os valores são:<ul><li>`Pagelang` significa que os nomes dos idiomas serão exibidos no idioma da página em que o interruptor está ligado.</li><li>`Localized` significa que o nome de cada idioma será exibido nesse idioma.</li><li>`Hybrid` é uma combinação dos dois.</li></ul> | `Localized` |

## Imagem vinculada

Cria uma imagem selecionável pelo usuário que está ligada a um link. Esta tag 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.

<CodeGroup>
  ```text entrada.txt theme={null}
  {% linked_image "linked_image" %}
  {% linked_image "executive_image"
  label="Executive photo",
  link="https://twitter.com/bhalligan", \
  open_in_new_tab=True,
  alt="Photo of Brian Halligan",
  src="//cdn2.hubspot.net/hub/53/file-733888619-jpg/assets/hubspot.com/about/management/brian-home.jpg", width="300"
  %}
  ```

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

| Parâmetro         | Tipo     | Descrição                                                                                                                                                                | Padrão                    |
| ----------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------- |
| `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 integradas à 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.](/cms/best-practices/testing-staging-performance/lazy-loading) |                           |

## Logotipo

Uma marca de logotipo renderiza o logotipo da sua empresa a partir das [configurações do kit de marca](https://knowledge.hubspot.com/pt/branding/edit-your-logo-favicon-and-brand-colors#edit-your-logo).

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

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

| Parâmetro                | Tipo     | Descrição                                                                                                                                                                       | Padrão                        |
| ------------------------ | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------- |
| `alt`                    | String   | Define o texto alternativo padrão para a imagem.                                                                                                                                | `Value in brand kit settings` |
| `src`                    | String   | Preenche o atributo src da tag img.                                                                                                                                             | `Value in brand kit settings` |
| `link`                   | String   | Define a URL de destino do link que envolve a 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: `left`, `right` e `center`.                                                                                 |                               |
| `style`                  | String   | Adiciona declarações CSS integradas à tag img. Por exemplo:`style="border:1px solid blue; margin:10px"`                                                                         |                               |
| `suppress_company_name`  | Booleano | Oculta o nome da empresa se um logotipo não estiver definido.                                                                                                                   | `False`                       |
| `use_account_default`    | Booleano | Defina como `true` para usar o nome da empresa nas configurações padrão da conta.                                                                                               | `False`                       |
| `open_in_new_tab`        | Booleano | Seleciona se quer ou não abrir a URL de destino em outra guia.                                                                                                                  | `False`                       |
| `override_inherited_src` | Booleano | Quando definido como `true`, 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 para [carregamento lento baseado em navegador.](/cms/best-practices/testing-staging-performance/lazy-loading)               |                               |

## 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](/cms/start-building/building-blocks/modules/menus-and-navigation) para obter mais informações sobre como usar menus em [modelos](https://br.developers.hubspot.com/docs/cms/start-building/building-blocks/templates/overview) e [módulos](https://br.developers.hubspot.com/docs/cms/start-building/building-blocks/modules/overview). Se `id` estiver definido como `null`, a tag de menu renderizará o menu padrão da conta da HubSpot.

<CodeGroup>
  ```text entrada.txt theme={null}
  {% menu "menu" %}
  {% menu "my_menu"
  id=456,
  site_map_name="Default",
  overrideable=False,
  root_type="site_root",
  flyouts="true",
  max_levels="2",
  flow="horizontal",
  label="Advanced Menu"
  %}
  ```

  ```text saída.txt theme={null}
  <div id="hs_menu_wrapper_my_menu" class="hs-menu-wrapper active-branch flyouts hs-menu-flow-horizontal" data-sitemap-name="Default">
  <ul>
  <li class="hs-menu-item hs-menu-depth-1"><a href="http://www.husbpot.com/Software">Software</a></li>
  <li class="hs-menu-item hs-menu-depth-1"><a href="http://www.hubspot.com/pricing">Pricing</a></li>
  <li class="hs-menu-item hs-menu-depth-1"><a href="http://www.hubspot.com/resources">Resources</a></li>
  <li class="hs-menu-item hs-menu-depth-1"><a href="http://www.hubspot.com/contact">Contact</a></li>
  </ul>
  </div>
  </span>
  ```
</CodeGroup>

| Parâmetro       | Tipo       | Descrição                                                                                                                                                                                                                                                                                     | Padrão         |
| --------------- | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
| `id`            | Número     | 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`    | Número     | 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 está definido como page\_id ou page\_name, esse parâmetro deve ser o ID ou o rótulo da página, respectivamente.                                                                                                                        | `"horizontal"` |
| `label`         | String     | Algum conteúdo avançado para descrever esta entidade                                                                                                                                                                                                                                          | `False`        |
| `label`         | String     | Algum conteúdo avançado para descrever esta entidade                                                                                                                                                                                                                                          | `False`        |

## Require\_css

Uma tag HubL que coloca na fila um elemento de estilo a ser renderizado no `<head>`.

Essa tag é semelhante à [require\_cssfunção ](/cms/reference/hubl/functions#require-css), exceto que a tag insere estilo integrado em vez de uma folha de estilo. Essa tag também não é desduplicada em outras instâncias do CSS na mesma página. Ao construir um módulo, se você quiser inserir uma folha de estilo e usar o módulo várias vezes em uma única página, é melhor usar a função `require_css`.

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

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

  {{ standard_footer_includes }}
  ```

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

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

```hubl theme={null}
{% require_head %}
  <meta name="third-party-app-verification-id" content="123456">
  <link rel="prefetch" href="http://example.com/large-script.js">
  <!-- these are purely examples, you could add anything that requires being in the head. require_css and require_js should be used instead of this when embedding a style tag or script tag.-->
{% end_require_head %}
```

## Require\_js

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 a em linha, como mostrado aqui), use a função [`require_js(absolute_url)`](/cms/reference/hubl/functions#require-js)).

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

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

  {{ standard_footer_includes }}
  ```

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

| Parâmetro  | Tipo   | Descrição                                                                                            | Padrão     |
| ---------- | ------ | ---------------------------------------------------------------------------------------------------- | ---------- |
| `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.

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

  Block Syntax Example:

  {% widget_block rich_text "right_column" overrideable=True, label="Right Column"  %}
  {% widget_attribute "html" %}
  <h2>Something Powerful</h2>
  <h3>Tell The Reader More</h3>
  <p>The headline and subheader tells us what you're offering, and the form header closes the deal. Over here you can explain why your offer is so great it's worth filling out a form for.</p>
  <p>Remember:</p>
  <ul>
  <li>Bullets are great</li>
  <li>For spelling out <a href="#">benefits</a> and</li>
  <li>Turning visitors into leads.</li>
  </ul>
  {% end_widget_attribute %}
  {% end_widget_block %}
  ```

  ```text saída.txt theme={null}
  <span
  id="hs_cos_wrapper_right_column"
  class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_rich_text"
  style=""
  data-hs-cos-general-type="widget"
  data-hs-cos-type="rich_text"
  >
  <h2>Something Powerful</h2>
  <h3>Tell The Reader More</h3>
  <p>
  The headline and subheader tells us what you're offering, and the form
  header closes the deal. Over here you can explain why your offer is so great
  it's worth filling out a form for.
  </p>
  <p>Remember:</p>
  <ul>
  <li>Bullets are great</li>
  <li>For spelling out benefits and</li>
  <li>Turning visitors into leads.</li>
  </ul>
  </span>
  ```
</CodeGroup>

| Parâmetro | Tipo   | Descrição                                   | Padrão                                                                                                                                                                                                                                                                                                                                                                                             |
| --------- | ------ | ------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `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 [benefits](#) 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.

<Warning>
  ### Observação:

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

<CodeGroup>
  ```text entrada.txt theme={null}
  {% rss_listing "rss_listing" %}
  {% rss_listing "my_rss_listing" rss_url="", publish_date_text="posted at", feed_source={rss_url="", is_external=False, content_group_id="30808594297"}, click_through_text="Read more", show_date=True, include_featured_image=True, overrideable=False, publish_date_format="short", show_detail=True, show_author=True, number_of_items="3", is_external=False, title="", content_group_id="24732847", label="RSS Listing", limit_to_chars="200", attribution_text="by" %}
  ```

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

| Parâmetro                | Tipo     | Descrição                                                                                                                                                                                                                                         | Padrão        |
| ------------------------ | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| `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 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   | O 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 RSS. Quando interno, o formato geral é `{rss_url="", is_external=False, content_group_id="2502431580"}`. Quando o formato externo e 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>`.

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

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

| Parâmetro       | Tipo   | Descrição                                                       | Padrão                       |
| --------------- | ------ | --------------------------------------------------------------- | ---------------------------- |
| `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](/cms/start-building/building-blocks/modules/menus-and-navigation) 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](/cms/reference/modules/using-modules-in-templates#block-syntax) para configurar uma árvore de menus padrão.

<CodeGroup>
  ```text entrada.txt theme={null}
  {% simple_menu "simple_menu" %}
  {% simple_menu "my_simple_menu" orientation="horizontal", label="Simple Menu" %}

  Block Syntax Example:

  {% widget_block simple_menu "block_simple_menu" overrideable=True, orientation="horizontal", label="Simple Menu"  %}
  {% widget_attribute "menu_tree" is_json=True %}[{"contentType": null, "subCategory": null, "pageLinkName": null, "pageLinkId": null, "isPublished": false, "categoryId": null, "linkParams": null, "linkLabel": "Home", "linkTarget": null, "linkUrl": "http://www.hubspot.com", "children": [], "isDeleted": false}, {"contentType": null, "subCategory": null, "pageLinkName": null, "pageLinkId": null, "isPublished": false, "categoryId": null, "linkParams": null, "linkLabel": "About", "linkTarget": null, "linkUrl": "http://www.hubspot.com/internet-marketing-company", "children": [{"contentType": null, "subCategory": null, "pageLinkName": null, "linkUrl": "http://www.hubspot.com/company/management", "isPublished": false, "children": [], "linkParams": null, "linkLabel": "Our Team", "linkTarget": null, "pageLinkId": null, "categoryId": null, "isDeleted": false}], "isDeleted": false}, {"contentType": null, "subCategory": null, "pageLinkName": null, "pageLinkId": null, "isPublished": false, "categoryId": null, "linkParams": null, "linkLabel": "Pricing", "linkTarget": null, "linkUrl": "http://www.hubspot.com/pricing", "children": [], "isDeleted": false}]{% end_widget_attribute %}
  {% end_widget_block %}
  ```

  ```text saída.txt theme={null}
  <span
  id="hs_cos_wrapper_my_simple_menu"
  class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_simple_menu"
  style=""
  data-hs-cos-general-type="widget"
  data-hs-cos-type="simple_menu"
  >
  <ul></ul>
  </span>

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

| Parâmetro     | Tipo       | Descrição                                                                                                                                              | Padrão         |
| ------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------- |
| `orientation` | Enumeração | Define classes de marcação de menu para permitir estilizar a orientação dos itens de menu na página. As opções 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](/cms/reference/modules/using-modules-in-templates#block-syntax) para personalizar as imagens de ícone e muito mais.

<CodeGroup>
  ```text entrada.txt theme={null}
  {% social_sharing "social_sharing" %}
  {% social_sharing "my_social_sharing" use_page_url=True %}

  Block Syntax Example:

  {% widget_block social_sharing "my_social_sharing" label="Social Sharing", use_page_url=True, overrideable=True  %}
  {% widget_attribute "pinterest" is_json=True %}{"custom_link_format": "", "pinterest_media": "http://cdn1.hubspot.com/hub/158015/305390_10100548508246879_837195_59275782_6882128_n.jpg", "enabled": true, "network": "pinterest", "img_src": "https://static.hubspot.com/final/img/common/icons/social/pinterest-24x24.png"}{% end_widget_attribute %}
  {% widget_attribute "twitter" is_json=True %}{"custom_link_format": "", "enabled": true, "network": "twitter", "img_src": "https://static.hubspot.com/final/img/common/icons/social/twitter-24x24.png"}{% end_widget_attribute %}
  {% widget_attribute "linkedin" is_json=True %}{"custom_link_format": "", "enabled": true, "network": "linkedin", "img_src": "https://static.hubspot.com/final/img/common/icons/social/linkedin-24x24.png"}{% end_widget_attribute %}
  {% widget_attribute "facebook" is_json=True %}{"custom_link_format": "", "enabled": true, "network": "facebook", "img_src": "https://static.hubspot.com/final/img/common/icons/social/facebook-24x24.png"}{% end_widget_attribute %}
  {% widget_attribute "email" is_json=True %}{"custom_link_format": "", "enabled": true, "network": "email", "img_src": "https://static.hubspot.com/final/img/common/icons/social/email-24x24.png"}{% end_widget_attribute %}
  {% end_widget_block %}
  ```

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

| Parâmetro      | Tipo     | Descrição                                                                                   | Padrão                            |
| -------------- | -------- | ------------------------------------------------------------------------------------------- | --------------------------------- |
| `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.

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

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

## Tags de página do sistema

As tags a seguir podem ser usadas nas [páginas do sistema](https://br.developers.hubspot.com/docs/cms/start-building/building-blocks/templates/overview#system-pages), 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.](https://knowledge.hubspot.com/pt/design-manager/use-system-templates-to-customize-error-subscription-and-password-prompt-pages)

<CodeGroup>
  ```text entrada.txt theme={null}
  {% email_simple_subscription "email_simple_subscription" %}
  {% email_simple_subscription "email_simple_subscription"
  header="Email Unsubscribe",
  input_help_text="Your email address:",
  input_placeholder="email@example.com",
  button_text="Unsubscribe",
  label="Backup Unsubscribe"
  %}
  ```

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

| Parâmetro           | Tipo   | Descrição                                                                                                   | Padrão                  |
| ------------------- | ------ | ----------------------------------------------------------------------------------------------------------- | ----------------------- |
| `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.](https://knowledge.hubspot.com/pt/design-manager/use-system-templates-to-customize-error-subscription-and-password-prompt-pages)

<CodeGroup>
  ```text entrada.txt theme={null}
  {% email_subscriptions "email_subscriptions" %}
  {% email_subscriptions "email_subscriptions"
  resubscribe_button_text="Yes, resubscribe me!",
  unsubscribe_single_text="Uncheck the types of emails you do not want to receive:",
  subheader_text="\n    If this is not your email address, please ignore this page since the email associated with this page was most likely forwarded to you.\n",
  unsubscribe_all_unsubbed_text="You are presently unsubscribed from all of our emails. Would you like to receive our emails again?",
  button_text="Update email preferences", label="Subscription Preferences", header="Communication Preferences",
  unsubscribe_all_option="Unsubscribe me from all mailing lists.",
  unsubscribe_all_text="Or check here to never receive any emails:"
  %}
  ```

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

| Parâmetro                       | Tipo   | Descrição                                                                                                            | Padrão                                                                                                                                            |
| ------------------------------- | ------ | -------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
| `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>If this is not your email address, please ignore this page since the email associated with this page was most likely forwarded to you.</p>"` |
| `unsubscribe_single_text`       | 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 e-mail

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.](https://knowledge.hubspot.com/pt/design-manager/use-system-templates-to-customize-error-subscription-and-password-prompt-pages)

<CodeGroup>
  ```text entrada.txt theme={null}
  {% email_subscriptions_confirmation "email_subscriptions_confirmation" %}
  {% email_subscriptions_confirmation "email_subscriptions_confirmation"
  label="Subscriptions Update Confirmation",
  unsubscribe_all_success="You have successfully unsubscribed from all email communications.",
  subscription_update_success="You have successfully updated your email preferences.",
  subheader_text="\n    If this is not your email address, please ignore this page since the email associated with this page was most likely forwarded to you.\n"
  %}
  ```

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

| Parâmetro                     | Tipo   | Descrição                                                                                                | Padrão                                                                                                                                            |
| ----------------------------- | ------ | -------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
| `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>If this is not your email address, please ignore this page since the email associated with this page was most likely forwarded to you.</p>"` |
| `unsubscribe_all_success`     | 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](https://knowledge.hubspot.com/pt/website-pages/require-member-registration-to-access-private-content).

<CodeGroup>
  ```text entrada.txt theme={null}
  {% member_login "my_login" %}
  {% member_login "my_login"
  email_label="Email",
  password_label="Password",
  remember_me_label="Remember Me",
  reset_password_text="Forgot your password?",
  submit_button_text="Login",
  show_password="Show password"
  %}
  ```

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

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

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

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

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

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

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

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

| Parâmetro             | Tipo   | Descrição                                     | Padrão                    |
| --------------------- | ------ | --------------------------------------------- | ------------------------- |
| `email_label`         | String | O rótulo para o 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](https://knowledge.hubspot.com/pt/website-pages/require-member-registration-to-access-private-content).

<CodeGroup>
  ```text entrada.txt theme={null}
  {% member_register "my_register" %}
  {% member_register "my_register"
  email_label="Email",
  password_label="Password",
  password_confirm_label="Confirm Password",
  submit_button_text="Save Password",
  show_password="Show password"
  %}
  ```

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

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

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

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

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

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

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

| Parâmetro                | Tipo   | Descrição                                   | Padrão               |
| ------------------------ | ------ | ------------------------------------------- | -------------------- |
| `email_label`            | String | O rótulo para o 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.

<CodeGroup>
  ```text entrada.txt theme={null}
  {% password_reset_request "my_password_reset_request" %}
  {% password_reset_request "my_password_reset_request"
  email_label="Email",
  submit_button_text="Send Reset Email"
  %}
  ```

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

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

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

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

| Parâmetro                | Tipo   | Descrição                                                                 | Padrão               |
| ------------------------ | ------ | ------------------------------------------------------------------------- | -------------------- |
| `email_label`            | String | O rótulo para o 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.

<CodeGroup>
  ```text entrada.txt theme={null}
  {% password_reset "my_password_reset" password_label="Password", password_confirm_label="Confirm Password", submit_button_text="Save password", show_password="Show password" %}
  ```

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

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

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

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

| Parâmetro                | Tipo   | Descrição                                                                   | Padrão               |
| ------------------------ | ------ | --------------------------------------------------------------------------- | -------------------- |
| `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.

<CodeGroup>
  ```text entrada.txt theme={null}
  {% password_prompt "password_prompt" %}
  {% password_prompt "my_password_prompt"
  submit_button_text="Submit",
  bad_password_message="Sorry, please try again.\n",
  label="Password Prompt"
  %}
  ```

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

| Parâmetro              | Tipo   | Descrição                                                    | Padrão                              |
| ---------------------- | ------ | ------------------------------------------------------------ | ----------------------------------- |
| `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`.

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

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

| Parâmetro | Tipo   | Descrição                                               |
| --------- | ------ | ------------------------------------------------------- |
| `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`.

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

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

| Parâmetro | Tipo   | Descrição                               |
| --------- | ------ | --------------------------------------- |
| `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*.

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

| Parâmetro              | Tipo     | Descrição                                                                                                                                                                                                                                                       | Padrão              |
| ---------------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- |
| `hide_playlist`        | Booleano | Oculte a lista de reprodução de 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 | Exiba o botão de incorporação no reprodutor.                                                                                                                                                                                                                    | `False`             |
| `viral_sharing`        | Booleano | Exiba o botão de compartilhamento de redes sociais no reprodutor.                                                                                                                                                                                               | `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 ser incorporado.                                                                                                                                                                                                                       |                     |
| `style`                | String   | Estilo adicional para o reprodutor.                                                                                                                                                                                                                             |                     |
| `conversion_asset`     | JSON     | Configuração de evento para o reprodutor. 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.                                                                                                                                                                                                                                   |                     |
