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

# Etiquetas estándar de HubL

> Guía de referencia completa de la sintaxis y los parámetros disponibles para todas las etiquetas HubL.

Esta página es una guía de referencia completa de la sintaxis y los parámetros disponibles para todas las etiquetas HubL, incluyendo [las etiquetas para las páginas del sistema](#system-page-tags), como la página de suscripción de correo electrónico. Cada etiqueta que aparece a continuación contiene una muestra de la sintaxis básica, así como un ejemplo con parámetros y salida de código.

Si estás creando áreas de arrastrar y soltar, descubre más información sobre las etiquetas de [las áreas de arrastrar y soltar](/cms/reference/hubl/tags/dnd-areas). Si mantienes un sitio web antiguo, también puedes consultar la [lista de funciones de HubL obsoletas](/cms/versions-deprecations/deprecated/hubl/filters-functions).

<Tip>
  La mayoría de las etiquetas de esta página tienen [equivalentes de módulos predeterminados.](/cms/reference/modules/default-modules) Los módulos se pueden utilizar dentro de las áreas de arrastrar y soltar [dnd\_areas](https://developers.hubspot.es/docs/cms/start-building/building-blocks/drag-and-drop/overview) y [columnas flexibles](#flexible-column), lo que los hace más potentes y fáciles de usar que las etiquetas que ves aquí.
</Tip>

## Comentarios del blog

Renderiza el código de inserción de comentarios en una plantilla de blog, incluyendo los comentarios y el formulario para comentar. Obtén más información sobre cómo personalizar las configuraciones y formularios de los comentarios del blog en [este artículo de la base de conocimientos](https://knowledge.hubspot.com/es/blog/set-up-and-moderate-your-blog-comments).

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

  ```text output.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                                    | Descripción                                                                                                                                                                                                                                                   | Predeterminado |
| ------------- | --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
| `limit`       | Número                                  | Fija el número máximo de comentarios.                                                                                                                                                                                                                         | `5000`         |
| `select_blog` | "default", predeterminado o ID del blog | Especifica qué blog está conectado a los comentarios que se insertan. Este parámetro acepta como argumentos `"default"` o un ID de blog (disponible en la URL del panel del blog). Si quieres utilizar el blog predeterminado, este parámetro es innecesario. | `default`      |
| `skip_css`    | Booleano                                | Si se define esta opción como verdadera, el CSS de los comentarios del blog dejará de cargarse.                                                                                                                                                               | `false`        |
| `message`     | Cadena                                  | El mensaje que se mostrará cuando no haya comentarios. De forma predeterminada, aparece como vacío (no se muestra el texto).                                                                                                                                  | `""`           |

## Contenido del blog

Mientras que los [diseños de arrastrar y soltar](/cms/start-building/building-blocks/drag-and-drop/drag-and-drop-templates) incluyen un módulo de contenido de blog, estos módulos no se crean con una sola etiqueta. Por el contrario, utilizan la lógica condicional para definir cómo debe presentarse una publicación y un listado de blog. [Puedes obtener más información sobre la codificación de plantillas para blogs aquí.](/cms/start-building/building-blocks/templates/blog)

## Filtro de publicación de blog

Crea un listado enlazado de posts por tema, mensajes por mes o mensajes por autor.

<Warning>
  ### Nota:

  Este módulo solo se puede utilizar en las plantillas de publicaciones de blog.
</Warning>

<CodeGroup>
  ```text input.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 output.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                    | Descripción                                                                                                                                | Predeterminado |
| ------------------ | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | -------------- |
| `select_blog`      | "default" o ID del blog | Selecciona el blog de HubSpot que se va a utilizar. Este parámetro utiliza un ID de blog o un valor "default".                             | `"default"`    |
| `expand_link_text` | Cadena                  | Enlace de texto que se mostrará si hay más publicaciones que el número definido en max\_links. Excluye el parámetro para omitir el enlace. | `"see all"`    |
| `list_title`       | Cadena                  | Título de la lista para mostrar.                                                                                                           | `""`           |
| `list_tag`         | Cadena                  | Define la etiqueta utilizada para la lista. Por lo general, el valor debe ser `"ul"` o `"ol"`.                                             | `"ul"`         |
| `title_tag`        | Cadena                  | Define la etiqueta utilizada para el título de la lista.                                                                                   | `"h3"`         |
| `max_links`        | Número                  | Número máximo de valores de filtro que se mostrarán. Excluye el parámetro para mostrar todo.                                               | `5`            |
| `filter_type`      | Enumeración             | Selecciona el tipo de filtro. Los valores posibles son `"topic"`, `"month"` y `"author"`.                                                  | `"topic"`      |

## Listado de publicaciones de blog

Agrega un listado de las publicaciones más populares o más importantes.

<Warning>
  ### Nota:

  Esta etiqueta solo se puede utilizar en las plantillas de publicaciones de blog. El contenido de la etiqueta se carga de forma asíncrona en el lado del cliente. Como resultado, si quieres modificar la sección de publicaciones después de que se haya cargado, tendrás que definir una función JS global para manejar esa manipulación. Utiliza la función `hsPostListingComplete(feeds)`, donde `feeds` es el selector de jQuery de todas las secciones que se han completado. Se recomienda modificar directamente el objeto DOM en esa función.
</Warning>

<CodeGroup>
  ```text input.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 output.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                    | Descripción                                                                                                                                                                                                                                | Predeterminado |
| ------------------------ | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------- |
| `select_blog`            | "default" o ID del blog | Selecciona el blog de HubSpot que se utilizará para el listado. Este parámetro utiliza un ID de blog o un valor `"default"`.                                                                                                               | `"default"`    |
| `list_title`             | Cadena                  | Título de la lista para mostrar.                                                                                                                                                                                                           | `""`           |
| `list_tag`               | Cadena                  | Define la etiqueta utilizada para la lista. Por lo general, el valor debe ser `"ul"` o `"ol"`.                                                                                                                                             | `"ul"`         |
| `title_tag`              | Cadena                  | Define la etiqueta utilizada para el título de la lista.                                                                                                                                                                                   | `"h3"`         |
| `listing_type`           | Cadena                  | Muestra las publicaciones del blog según las más recientes o las más populares en un período de tiempo. Los valores posibles incluyen: recent, popular\_all\_time, popular\_past\_year, popular\_past\_six\_months y popular\_past\_month. | `"recent"`     |
| `max_links`              | Número                  | Número máximo de entradas que se publicarán en la lista.                                                                                                                                                                                   | `5`            |
| `include_featured_image` | Booleano                | Mostrar la imagen destacada junto con el enlace de la publicación.                                                                                                                                                                         | `False`        |

## Publicaciones relacionadas con el blog

Agrega un listado de publicaciones de blog basado en un conjunto de parámetros comunes a todas las entradas de todos los blogs. Las publicaciones se seleccionan según su nivel de relevancia con respecto a los parámetros establecidos.

Ten en cuenta que esta etiqueta no genera un módulo editable para la página o la publicación y se configura completamente con HubL.

<CodeGroup>
  ```text input.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 output.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         | Descripción                                                                                                                                                                                                                                                                                                                                                                                                                                   | Predeterminado |
| -------------------- | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
| `blog_ids`           | Número       | Los ID de los blogs de los que se incluirán publicaciones. Si no se especifica, incluirá publicaciones del blog predeterminado.                                                                                                                                                                                                                                                                                                               |                |
| `blog_post_ids`      | Cadena       | Los ID de las publicaciones de blog que se usarán para encontrar publicaciones relacionadas que mostrar, separados por comas. Utiliza este parámetro solo cuando el widget se muestre en páginas. Cuando se usa en las publicaciones de blog, buscará publicaciones relevantes basadas en la publicación de blog que se muestra actualmente.                                                                                                  |                |
| `blog_post_override` | Cadena       | Los ID de las publicaciones de blog que siempre deben aparecer en el listado devuelto, sin importar los demás parámetros o filtros (separados por comas).                                                                                                                                                                                                                                                                                     |                |
| `limit`              | Número       | El número máximo de publicaciones que se incluirán en la lista.                                                                                                                                                                                                                                                                                                                                                                               | `3`            |
| `tags`               | Cadena       | Las etiquetas del blog que deberían utilizarse para determinar si una publicación es relevante (separadas por comas). Las publicaciones de blog con las etiquetas especificadas tendrán una clasificación más alta en cuanto a la relevancia.                                                                                                                                                                                                 |                |
| `tag_boost`          | Número       | Aumenta la relevancia de las etiquetas especificadas en el parámetro `tags` para generar publicaciones relacionadas. Incluye este parámetro para extraer publicaciones más relacionadas con las publicaciones que se muestran actualmente o las publicaciones especificadas. Acepta números positivos.                                                                                                                                        |                |
| `start_date`         | fecha y hora | Fecha de publicación más temprana. Puedes ver un [ejemplo a continuación](#examples).                                                                                                                                                                                                                                                                                                                                                         |                |
| `end_date`           | fecha y hora | Fecha de publicación más reciente. Puedes ver un [ejemplo a continuación](#examples).                                                                                                                                                                                                                                                                                                                                                         |                |
| `blog_authors`       | Cadena       | Los nombres de los autores de los que se incluirán los mensajes (separados por comas). Puedes ver un [ejemplo a continuación](#examples).                                                                                                                                                                                                                                                                                                     |                |
| `path_prefixes`      | Cadena       | Rutas de URL o subdirectorios desde los que incluir las publicaciones (separadas por comas). Si una publicación de blog tiene un prefijo similar en la ruta, la relevancia de la publicación aumenta, mejorando su clasificación en el listado.                                                                                                                                                                                               |                |
| `callback`           | Cadena       | El nombre de una función de JavaScript para renderizar las publicaciones de blog devueltas. A la función se le pasa una matriz de objetos de publicación de blog para darle formato. Si no se especifica el parámetro `callback` ni el parámetro `post_formatter`, la etiqueta generará HTML en un formato predeterminado. Puedes ver un [ejemplo a continuación](#examples).                                                                 | `none`         |
| `post_formatter`     | Cadena       | El nombre de una macro personalizada para renderizar las publicaciones de blog devueltas. A la macro se le pasan tres parámetros que son el objeto de la publicación de blog a dar formato, el recuento en la iteración de publicaciones de blog y el recuento total de publicaciones de blog en los resultados. Si no se especifica o se define como `default`, se utilizará el formateador incorporado para dar formato a cada publicación. | `default`      |
| `allow_any_language` | Booleano     | Cuando se define como `false`, solo aparecerán las publicaciones en el mismo idioma que la página en la que se utiliza la etiqueta. Cuando se define como `true`, la restricción de idioma se ignora y todas las publicaciones relacionadas se extraen independientemente del idioma de la página.                                                                                                                                            | `False`        |

<Warning>
  Recomendamos utilizar el parámetro `callback` en lugar de `post_formatter` para mejorar la velocidad de carga de la página.
</Warning>

### Ejemplos

El siguiente ejemplo genera una lista de publicaciones escritas por uno de los tres `blog_authors` especificados en dos blogs diferentes:

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

En este ejemplo se genera una lista de 10 publicaciones relacionadas con una publicación de blog específica, con la etiqueta "habilitación de ventas" y restringida a un período de tiempo de fecha de publicación específico. En este ejemplo se especifica el parámetro `blog_post_ids`, por lo que se puede usar en una 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" %}
```

En este ejemplo se genera una lista de cinco publicaciones utilizando el parámetro `callback` para controlar la salida HTML de la lista de publicaciones:

```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://developers.hubspot.es/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://developers.hubspot.es/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>
```

## Compartir el blog en redes sociales

Compartir el blog en redes sociales muestra los contadores de contenido compartido de las publicaciones de blog (si están activos en la configuración del contenido).

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

  ```text output.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                       | Descripción                                                                                                                                                                                                                                                     | Predeterminado |
| ---------------------- | -------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
| `select_blog`          | "default" o el ID del blog | Especifica con qué blog están conectados los contadores de compartidos. Este parámetro acepta como argumentos `"default"` o un ID de blog (disponible en la URL del panel del blog). Si quieres utilizar tu blog predeterminado, este parámetro es innecesario. | `default`      |
| `downgrade_shared_url` | Booleano                   | Usa HTTP en la URL enviada a las redes sociales. Se utiliza para mantener los recuentos cuando se actualizan los dominios a solo HTTPS.                                                                                                                         | `false`        |

## Suscripción al blog

Una etiqueta de suscripción a un blog muestra el formulario de suscripción para un blog determinado. Este formulario se genera automáticamente cada vez que se crea un blog en la configuración de contenido, y cada blog cuenta con su propio formulario de suscripción. Ten en cuenta que los campos del formulario de suscripción se configuran en el editor de formularios de la interfaz de usuario.

<CodeGroup>
  ```text input.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 output.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',
  id: 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                    | Descripción                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | Predeterminado              |
| ------------------ | ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- |
| `select_blog`      | "default" o ID del blog | Selecciona el formulario de suscripción al blog que se va a mostrar. Este parámetro acepta como argumentos `"default"` o un ID de blog (disponible en la URL del panel del blog). Si quieres utilizar el blog predeterminado, este parámetro es innecesario.                                                                                                                                                                                                                                                                                                                                                                                                                                        | `default`                   |
| `title`            | Cadena                  | Define el texto de una etiqueta h3 encima del formulario de suscripción.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `"Subscribe Here!"`         |
| `no_title`         | Booleano                | Si es "True", se elimina la etiqueta h3 que está encima del título.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | `false`                     |
| `response_message` | Cadena                  | Define el mensaje de agradecimiento que se muestra cuando un usuario envía un formulario. Es compatible con HTML.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | `"Thanks for Subscribing!"` |
| `edit_form_link`   | Cadena                  | Este parámetro genera un enlace que permite a los usuarios hacer clic en la pantalla del editor de formularios correspondiente. Esta opción solo se mostrará en el editor de la interfaz del usuario si los módulos tienen el parámetro `overrideable=True`.<br />Por ejemplo, para reemplazar Hub ID y el ID del formulario con la información de la URL de tu formulario de suscripción al blog predeterminado: `edit_form_link=" <ul>\n <li><a href="https://developers.hubspot.es/docs/forms/HubID/FormID/edit/" target="_blank">Default Blog</a></li> \n</ul> "` <br />Ten en cuenta que los caracteres de nueva línea `\n` agregan una línea adicional de espacio antes y después del enlace. |                             |

## Booleano

Una etiqueta booleana crea una casilla de verificación en la interfaz de usuario que imprime "verdadero" o "falso". Además de imprimir el valor, este módulo es útil para definir la lógica condicional de la plantilla, cuando se combina con el parámetro [`export_to_template_context`](/cms/reference/modules/export-to-template-context).

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

  ```text output.txt theme={null}
  false
  ```
</CodeGroup>

| Parámetro | Tipo     | Descripción                                                        | Predeterminado |
| --------- | -------- | ------------------------------------------------------------------ | -------------- |
| `value`   | Booleano | Determina si la casilla de verificación está marcada o desmarcada. | `False`        |

## Elección

Una etiqueta de elección crea una lista desplegable en el editor de contenidos de la interfaz del usuario que imprime el valor seleccionado por el usuario. Las etiquetas de opción son ideales para dar a los usuarios un conjunto de ajustes preestablecidos, como la impresión del tipo de página como el encabezado de la página.

Además de imprimir el valor de la opción, esta etiqueta es útil para definir la lógica condicional de la plantilla cuando se combina con el parámetro [`export_to_template_context`](/cms/reference/modules/export-to-template-context).

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

  ```text output.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      | Descripción                                                                                                                                                                                                                                                                                       |
| --------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `value`   | Booleano  | El valor predeterminado del campo para el menú desplegable                                                                                                                                                                                                                                        |
| `choices` | Secuencia | Una lista de valores separados por comas o una lista de pares valor-etiqueta. La sintaxis de los pares de etiquetas de valores es la siguiente: `choices="[[\"value1\", \"Label 1\"], [\"value2\", \"Label 2\"]]"`. El editor mostrará la etiqueta, mientras que imprimirá el valor en la página. |

## Color

La etiqueta de color genera un selector de color en el editor de las páginas de la interfaz de usuario que imprime un valor de color HEX en una plantilla. Ten en cuenta que este módulo solo puede utilizarse en las plantillas, no en los archivos CSS. Si utilizas esta etiqueta en un `<style>` o en un CSS en línea, es recomendable usar el parámetro `no_wrapper=True` para eliminar el contenedor `<span>`.

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

  ```text output.txt theme={null}
  #000000
  ```
</CodeGroup>

| Parámetro | Tipo   | Descripción                                                    |
| --------- | ------ | -------------------------------------------------------------- |
| `color`   | Cadena | Un valor predeterminado de color HEX para el selector de color |

## CTA

Una etiqueta de llamada a la acción o CTA permite a los usuarios agregar un botón de llamada a la acción de HubSpot a un área predefinida de una página.

<CodeGroup>
  ```text input.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 output.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   | Descripción                                                                                                                                                                                                                  |
| -------------- | ------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `embed_code`   | Cadena | El código de inserción para la CTA. \n diferencia los saltos de línea.                                                                                                                                                       |
| `full_html`    | Cadena | El código de inserción para la CTA (igual que embed\_code). \n diferencia los saltos de línea.                                                                                                                               |
| `image_src`    | Cadena | URL de la imagen src que define la imagen de vista previa en el editor de contenido.                                                                                                                                         |
| `image_editor` | Cadena | Marcador para la vista previa del editor de imágenes                                                                                                                                                                         |
| `guid`         | Cadena | El número único de ID de la CTA. Este número de identificación está disponible en la URL de la pantalla de detalles de una CTA en particular. Este parámetro se utiliza para elegir qué CTA mostrar de forma predeterminada. |
| `image_html`   | Cadena | HTML de la imagen de la CTA sin el script de la CTA.\*                                                                                                                                                                       |
| `image_email`  | Cadena | Versión del código de la CTA apta para correo electrónico.\*                                                                                                                                                                 |

<Info>
  \*Si bien estos parámetros se incluyen aquí para ofrecer una visión completa, el código que HubSpot genera para completarlos es muy específico. Si necesitas seleccionar una CTA predeterminada, en lugar de desarrollar los parámetros desde cero, se recomienda configurar la CTA en un diseño de plantilla y luego [clonar al archivo](https://knowledge.hubspot.com/es/website-and-landing-pages/clone-hubspot-content). Así, podrás copiar el módulo HubL de la CTA con todos los parámetros correctamente definidos.

  También hay una [función de CTA](/cms/reference/hubl/functions#cta) que permite generar una CTA a partir de su ID.
</Info>

## HTML personalizado

Un módulo de HTML personalizado permite a los usuarios introducir HTML sin formato en el editor de contenidos. Si necesitas agregar una gran cantidad de HTML predeterminado a la etiqueta, puedes utilizar [la sintaxis de bloques](/cms/reference/modules/using-modules-in-templates#block-syntax).

<CodeGroup>
  ```text input.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 output.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   | Descripción                                         |
| --------- | ------ | --------------------------------------------------- |
| `value`   | Cadena | Define el contenido HTML predeterminado del módulo. |

## Módulos personalizados

Los módulos personalizados permiten a los diseñadores crear un grupo personalizado de objetos de contenido editables que se utilizarán en las plantillas y páginas del CMS, al tiempo que permiten a los profesionales del marketing controlar el contenido específico que aparece en esos módulos página por página. Más información sobre los [módulos personalizados y su sintaxis simplificada de HubL, aquí](https://developers.hubspot.es/docs/cms/start-building/building-blocks/modules/overview).

Los módulos personalizados deben crearse en el editor de módulos personalizados, pero pueden incluirse en plantillas codificadas y módulos HubL. Verás un "fragmento de uso" en la barra lateral derecha del editor de módulos personalizados en "Uso de plantillas".

Los módulos personalizados requieren el ID del módulo como una cadena, así como un parámetro de ruta para especificar qué módulo cargar. El fragmento de uso también incluirá un parámetro de etiqueta. Consulta la sintaxis a continuación:

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

  ```text output.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   | Descripción                                                                                                                                                                                                                                                                                             |
| ----------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `module_id` | Cadena | El ID del módulo que se renderizará.                                                                                                                                                                                                                                                                    |
| `path`      | Cadena | La ruta del módulo que se renderizará. Incluye la barra inclinada para la ruta absoluta, de lo contrario la ruta es relativa a la plantilla. Consulta los módulos predeterminados de HubSpot con rutas correspondientes a sus etiquetas de HubL, como @hubspot/rich\_text, @hubspot/linked\_image, etc. |

## Marcadores de posición del editor

Para mostrar el contenido del marcador de posición de un módulo en el editor, puedes añadir el contenido predeterminado a los campos del módulo o utilizar la etiqueta de HubL `editor_placeholder`. Esta etiqueta puede ser útil cuando el módulo no tiene o necesita contenido predeterminado, o bien para optimizar la construcción del módulo.

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

Para agregar un marcador de posición del editor a un módulo personalizado, añade primero una [instrucción "if"](/cms/reference/hubl/if-statements) al HTML del módulo para que muestre el marcador de posición cuando no haya contenido seleccionado en el editor. Por ejemplo, el siguiente código podría utilizarse para agregar un marcador de posición del editor a un módulo CTA:

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

<Info>
  La primera instrucción `if` identifica si el módulo está presente. Luego, la
  instrucción `elif` identifica si el módulo se renderiza en el contexto del
  editor utilizando la variable `is_in_editor`. Esta variable devuelve `true` si
  el contenido se está renderizando en cualquier editor de contenidos, pero
  puedes especificar aún más con las variables del [editor y la vista previa
  ](/cms/reference/hubl/variables#in-app-editor-and-preview-variables).
</Info>

Luego, define el contenido del marcador de posición en el archivo `meta.json` del módulo.

```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     | Descripción                                            |
| ------------------ | -------- | ------------------------------------------------------ |
| `show_module_icon` | Booleano | Determina si se debe mostrar el ícono del módulo.      |
| `title`            | Cadena   | El título que aparece en el marcador de posición.      |
| `description`      | Cadena   | La descripción que aparece en el marcador de posición. |

## Columna flexible

Las columnas flexibles son columnas verticales en una plantilla que permiten a los creadores de contenido insertar y eliminar módulos en la página utilizando el [editor de contenido](https://knowledge.hubspot.com/es/website-pages/edit-page-content-in-a-drag-and-drop-area). Al codificar una columna flexible con HubL, puedes elegir otros módulos de HubL para que aparezcan en la columna flexible por opción predeterminada. El código de ejemplo que aparece a continuación muestra la sintaxis básica y una columna flexible de ejemplo con un módulo de texto enriquecido y un formulario como contenido predeterminado.

Ten en cuenta que las columnas flexibles solo pueden agregarse a las plantillas de página, pero no a las plantillas de blog o de correo electrónico. Los módulos no pueden contener columnas flexibles, pero pueden contener [campos y grupos repetibles](/cms/reference/fields/module-theme-fields#repeaters), lo que proporciona una funcionalidad similar.

<CodeGroup>
  ```text input.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 output.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>
  ### Nota:

  Cuando uses esta etiqueta, la `label` debe seguir el valor `name` de la columna flexible para funcionar en el editor de contenido. Por ejemplo, la siguiente sintaxis no es válida:

  `[% widget_container label="My label" "my_flexible_column" %}`
</Warning>

## Formulario

Permite a los usuarios seleccionar un formulario de HubSpot para agregarlo a su página. El siguiente código incluye un ejemplo de uso de la sintaxis estándar de etiquetas HubL y un ejemplo de uso de [la sintaxis de bloques](/cms/reference/modules/using-modules-in-templates#block-syntax).

<CodeGroup>
  ```text input.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 output.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',
  id: 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        | Descripción                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| ---------------------------------------- | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `form_key`                               | Cadena      | Especifica un ID único para el formulario a nivel de página.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| `form_to_use`                            | Cadena      | Especifica qué formulario cargar de forma predeterminada, basándose en el ID del formulario. Este ID está disponible en la URL del editor de formularios de cada formulario.                                                                                                                                                                                                                                                                                                                                                                                                                       |
| `title`                                  | Cadena      | Rellena una etiqueta `h3` en el encabezado del formulario.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| `no_title`                               | Booleano    | Si es `True`, se elimina la etiqueta h3 que está encima del título.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
| `form_follow_ups_follow_up_type`         | Enumeración | Especifica las acciones de seguimiento, como inscribir a un contacto en un workflow o enviar un correo de seguimiento simple. Los valores posibles son `no_action`, `simple` y `automation`.                                                                                                                                                                                                                                                                                                                                                                                                       |
| `simple_email_for_live_id`               | Número      | Especifica el ID del correo de seguimiento simple para la página publicada.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| `simple_email_for_buffer_id`             | Número      | Especifica el ID del correo de seguimiento simple para la versión de guardado automático de una página.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
| `follow_up_type_simple`                  | Booleano    | Si es "True", permite un correo de seguimiento simple. Alternativa de `form_follow_ups_follow_up_type`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
| `follow_up_type_automation`              | Booleano    | Si es "True", inscribe los envíos de formularios en un workflow. Alternativa de `form_follow_ups_follow_up_type`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| `simple_email_campaign_id`               | Número      | Especifica el ID del correo de seguimiento simple. Alternativa de `simple_email_for_live_id`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
| `form_follow_ups_workflow_id`            | Número      | Especifica el ID del workflow en el que se inscriben los envíos de formularios.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| `response_redirect_url`                  | Cadena      | Si se redirecciona a una página externa, este parámetro especifica la URL a la que se debe redireccionar.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| `response_redirect_id`                   | Número      | Si se redirecciona a una página alojada en HubSpot, este parámetro especifica el ID de la página. El ID de la página está disponible en la URL del editor de páginas de cada página.                                                                                                                                                                                                                                                                                                                                                                                                               |
| `response_response_type`                 | Enumeración | Determina si se redirecciona a otra página o si se muestra un mensaje de agradecimiento en línea cuando se envía el formulario. El valor de este parámetro debe ser `"redirect"` o `"inline"` (predeterminado).                                                                                                                                                                                                                                                                                                                                                                                    |
| `response_message`                       | Cadena      | Establece un mensaje de agradecimiento en línea. Este parámetro es compatible con HTML.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
| `notifications_are_overridden`           | Booleano    | Si es `True`, el formulario enviará notificaciones a las direcciones de correo electrónico seleccionadas en el parámetro `notifications_override_email_addresses`, en lugar de a los valores predeterminados del formulario. Por opción predeterminada es `False`.                                                                                                                                                                                                                                                                                                                                 |
| `notifications_override_guid_buffer`     | Cadena      | ID de la configuración de anulación en la versión de autoguardado de la página.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| `notifications_override_guid`            | Cadena      | ID de la configuración de anulación en la versión publicada de la página.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| `notifications_override_email_addresses` | JSON        | La sintaxis de bloques admite una lista JSON de destinatarios de correo electrónico que serán notificados al enviar los formularios. Estas direcciones de correo electrónico anulan la configuración de notificación por correo electrónico establecida en el formulario.                                                                                                                                                                                                                                                                                                                          |
| `sfdc_campaign`                          | Cadena      | Especifica la campaña de Salesforce en la que se inscribirán los contactos que envíen el formulario. El valor de este parámetro debe ser el ID de la campaña de SFDC y solo está disponible para los portales que tienen la [integración con Salesforce](https://knowledge.hubspot.com/es/salesforce/install-the-hubspot-salesforce-integration).                                                                                                                                                                                                                                                  |
| `gotowebinar_webinar_key`                | Cadena      | Especifica el webinario de GoToWebinar en el que se inscribirán los contactos tras enviar el formulario. Solo disponible para las cuentas que utilizan la [integración de GoToWebinar](https://knowledge.hubspot.com/es/integrations/use-the-gotowebinar-integration-with-hubspot).                                                                                                                                                                                                                                                                                                                |
| `webinar_id`                             | Cadena      | Un campo más genérico que especifica el ID del webinario de Microsoft Teams o GoToWebinar en el que inscribir a los contactos tras enviar el formulario. Solo disponible en cuentas que utilicen las integraciones [GoToWebinar](https://knowledge.hubspot.com/es/integrations/use-the-gotowebinar-integration-with-hubspot) o [Microsoft Teams](https://knowledge.hubspot.com/es/integrations/connect-hubspot-and-microsoft-teams), y cuando `support_all_webinar_types` esté configurado como `true` en la [definición de campos de formulario](/cms/reference/fields/module-theme-fields#form). |
| `webinar_source`                         | Cadena      | El ID de la app de integración, ya sea GoToWebinar (`35161`) o Microsoft Teams (`221635`).                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |

## Pie de página

Presenta la información de derechos de autor con el año y el nombre de la empresa especificados en la [configuración de correos de marketing](https://knowledge.hubspot.com/es/marketing-email/edit-email-footer-addresses#edit-your-default-email-footer-information-in-your-settings) de la cuenta.

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

  ```text output.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>

## Galería

Genera una etiqueta de galería de HubSpot. Esta etiqueta de la galería está basada en [Slick](http://kenwheeler.github.io/slick/). Mientras que puedes crear un módulo de galería con la sintaxis estándar de HubL, si quieres predefinir diapositivas predeterminadas usando HubL, debes usar la sintaxis de bloques. A continuación se muestran ambos métodos. Las imágenes de la galería se cargan de forma diferida mediante JavaScript.

<CodeGroup>
  ```text input.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 output.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        | Descripción                                                                                                                                                                         | Predeterminado |
| ------------------ | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
| `slides`           | JSON        | Una lista JSON con el título predeterminado, la URL del enlace, el texto alt, el src de la imagen y si se abre en una nueva pestaña o no. Consulta la sintaxis de bloques anterior. |                |
| `loop_slides`      | Booleano    | Cuando es "True", muestra las diapositivas en un bucle continuo.                                                                                                                    | `True`         |
| `num_seconds`      | Número      | Tiempo en segundos de pausa entre diapositivas.                                                                                                                                     | `5`            |
| `show_pagination`  | Booleano    | Proporciona botones debajo del deslizador para navegar entre las diapositivas.                                                                                                      | `True`         |
| `sizing`           | Enumeración | Determina si el deslizador cambia de tamaño según la altura de las diapositivas. Los valores posibles son: "static" o "resize".                                                     | `"static"`     |
| `auto_advance`     | Booleano    | Avanza automáticamente las diapositivas después del tiempo establecido en num\_seconds.                                                                                             | `False`        |
| `transition`       | Enumeración | Define el tipo de transición de las diapositivas. Los valores posibles son: "fade" o "slide".                                                                                       | `"slide"`      |
| `caption_position` | Enumeración | Modifica la posición de los subtítulos en la parte superior o inferior de la diapositiva. Los valores posibles son "below" o "superimpose".                                         | `"below"`      |
| `display_mode`     | Enumeración | Determina cómo se mostrará la galería de imágenes. Los valores posibles son: "standard", "lightbox", "thumbnail".                                                                   | `"standard"`   |
| `lightboxRows`     | Número      | Si "display\_mode" se define como "lightbox", este parámetro controlará el número de filas mostradas dentro del lightbox.                                                           | `3`            |

## Encabezado

Genera un módulo de encabezado que mostrará el texto como una etiqueta h1 a h6.

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

  ```text output.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   | Descripción                                                                                                    | Predeterminado          |
| ------------ | ------ | -------------------------------------------------------------------------------------------------------------- | ----------------------- |
| `header_tag` | Cadena | Selecciona la etiqueta de encabezado que se va a renderizar. Los valores posibles son: h1, h2, h3, h4, h5, h6. | `h1`                    |
| `value`      | Cadena | Representa el texto predeterminado dentro del módulo del encabezado.                                           | `"A clear bold header"` |

## Ícono

Agrega una etiqueta de ícono que permite a los usuarios seleccionar un ícono para usarlo. Los conjuntos de íconos compatibles son 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) y [6.4.2](https://github.com/FortAwesome/Font-Awesome/releases/tag/6.4.2).

Esta etiqueta no puede utilizarse en los módulos habilitados para correo electrónico.

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

  ```text output.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   | Descripción                                                                                                                                                                                                                                                                        | Predeterminado |
| ---------- | ------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
| `name`     | Cadena | Nombre del ícono.                                                                                                                                                                                                                                                                  |                |
| `style`    | Cadena | Estilo del ícono. Valores posibles: `REGULAR` o `SOLID`                                                                                                                                                                                                                            | `REGULAR`      |
| `unicode`  | Cadena | La representación en caracteres Unicode del ícono.                                                                                                                                                                                                                                 |                |
| `icon_set` | Cadena | El conjunto de íconos de FontAwesome que se va a utilizar. Los valores posibles son:<ul><li>`fontawesome-5.14.0` </li><li>`fontawesome-5.0.10`</li><li>`fontawesome-6.4.2`</li></ul>                                                                                               |                |
| `purpose`  | Cadena | El propósito del ícono, utilizado para la [accesibilidad](https://docs.fontawesome.com/v5/web/other-topics/accessibility). Los valores posibles son `decorative` o `semantic`. Si se define como `decorative`, se agregará un atributo adicional de `aria-hidden="true"` al ícono. | `decorative`   |
| `title`    | Cadena | El elemento de título del svg del ícono, junto con un atributo `labelledby` que apunta al título.                                                                                                                                                                                  |                |

## Imagen

Crea una etiqueta de imagen que permite a los usuarios seleccionar una imagen desde el editor de contenidos. Si quieres que la imagen se vincule a una URL de destino, debes usar linked\_image debajo.

<CodeGroup>
  ```text input.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 output.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   | Descripción                                                                                                                                                        | Predeterminado            |
| --------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------- |
| `alt`     | Cadena | Define el texto alternativo predeterminado para la imagen.                                                                                                         |                           |
| `src`     | Cadena | Rellena el atributo src de la etiqueta img.                                                                                                                        |                           |
| `width`   | Número | Define el atributo de anchura de la etiqueta img.                                                                                                                  | `The width of the image`  |
| `height`  | Número | Fija una altura mínima en un atributo de estilo de la etiqueta img **solo para las plantillas de correo**.                                                         | `The height of the image` |
| `hspace`  | Número | Define el atributo hspace de la etiqueta img.                                                                                                                      |                           |
| `align`   | Cadena | Define el atributo align de la etiqueta img. Los valores posibles son: izquierda (left), derecha (right) y centro (center).                                        |                           |
| `style`   | Cadena | Agrega declaraciones de CSS en línea a la etiqueta img. Por ejemplo style="border:1px solid blue; margin:10px"                                                     |                           |
| `loading` | Cadena | Controla el atributo de carga del elemento img. [Se utiliza para la carga diferida en el navegador.](/cms/best-practices/testing-staging-performance/lazy-loading) |                           |

## Src de la imagen

Un módulo src de la imagen crea un selector de imágenes en el editor de contenidos, pero en lugar de imprimir una etiqueta img, muestra la URL de la imagen. Esta etiqueta se usa generalmente con el parámetro `no_wrapper=True`, de modo que la imagen src se puede agregar al CSS en línea o a otros marcadores. Una alternativa al uso de esta etiqueta es utilizar el parámetro [`export_to_template_context`](/cms/reference/modules/export-to-template-context).

<CodeGroup>
  ```text input.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 output.txt theme={null}
  //cdn2.hubspot.net/hub/53/file-733888614-jpg/assets/hubspot.com/about/management/dharmesh-home.jpg
  ```
</CodeGroup>

| Parámetro | Tipo   | Descripción                                              |
| --------- | ------ | -------------------------------------------------------- |
| `src`     | Cadena | Especifica el src de la imagen de la URL predeterminada. |

## Selector de idiomas

Agrega un ícono de globo con enlaces a las versiones traducidas de una determinada página del CMS. Más información sobre los [contenidos multilingües aquí](https://knowledge.hubspot.com/es/website-and-landing-pages/create-pages-in-multiple-languages).

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

  ```text output.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        | Descripción                                                                                                                                                                                                                                                                                                                                        | Predeterminado |
| -------------- | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
| `display_mode` | Enumeración | El idioma del texto en el selector de idiomas. Los valores son:<ul><li>`Pagelang` significa que el nombre de los idiomas se mostrará en el idioma de la página en la que se está el selector.</li><li>`Localized` significa que el nombre de cada idioma aparecerá en ese idioma.</li><li>`Hybrid` es una combinación de ambas opciones.</li></ul> | `Localized`    |

## Imagen enlazada

Genera una imagen seleccionable por el usuario dentro de un enlace. Esta etiqueta tiene todos los parámetros de un módulo de imagen con dos parámetros adicionales que especifican la URL de destino del enlace y si el enlace se abre en una nueva ventana.

<CodeGroup>
  ```text input.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 output.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     | Descripción                                                                                                                                                        | Predeterminado            |
| ----------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------- |
| `alt`             | Cadena   | Define el texto alternativo predeterminado para la imagen.                                                                                                         |                           |
| `src`             | Cadena   | Rellena el atributo src de la etiqueta img.                                                                                                                        |                           |
| `width`           | Número   | Define el atributo de anchura de la etiqueta img.                                                                                                                  | `The width of the image`  |
| `height`          | Número   | Fija una altura mínima en un atributo de estilo de la etiqueta img solo para **las plantillas de correo.**                                                         | `The height of the image` |
| `hspace`          | Número   | Define el atributo hspace de la etiqueta img.                                                                                                                      |                           |
| `align`           | Cadena   | Define el atributo align de la etiqueta img. Los valores posibles son: izquierda (left), derecha (right) y centro (center).                                        |                           |
| `style`           | Cadena   | Agrega declaraciones de CSS en línea a la etiqueta img. Por ejemplo style="border:1px solid blue; margin:10px"                                                     |                           |
| `open_in_new_tab` | Booleano | Selecciona si se abre o no la URL de destino en otra pestaña.                                                                                                      | `False`                   |
| `link`            | Cadena   | Define la URL de destino del enlace que envuelve la etiqueta img.                                                                                                  |                           |
| `target`          | Cadena   | Define el atributo de destino de la etiqueta del enlace.                                                                                                           |                           |
| `loading`         | Cadena   | Controla el atributo de carga del elemento img. [Se utiliza para la carga diferida en el navegador.](/cms/best-practices/testing-staging-performance/lazy-loading) |                           |

## Logotipo

Una etiqueta de logotipo muestra el logotipo de tu empresa desde la [configuración del kit de marca](https://knowledge.hubspot.com/es/branding/edit-your-logo-favicon-and-brand-colors#edit-your-logo) de la cuenta.

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

  ```text output.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     | Descripción                                                                                                                                                                                   | Predeterminado                |
| ------------------------ | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------- |
| `alt`                    | Cadena   | Define el texto alternativo predeterminado para la imagen.                                                                                                                                    | `Value in brand kit settings` |
| `src`                    | Cadena   | Rellena el atributo src de la etiqueta img.                                                                                                                                                   | `Value in brand kit settings` |
| `link`                   | Cadena   | Define la URL de destino del enlace que envuelve la etiqueta img.                                                                                                                             |                               |
| `width`                  | Número   | Define el atributo de anchura de la etiqueta img.                                                                                                                                             | `The width of the image`      |
| `height`                 | Número   | Fija una altura mínima en un atributo de estilo de la etiqueta img solo para **las plantillas de correo.**                                                                                    | `The height of the image`     |
| `hspace`                 | Número   | Define el atributo hspace de la etiqueta `img`.                                                                                                                                               |                               |
| `align`                  | Cadena   | Define el atributo align de la etiqueta `img`. Los valores posibles son `left`, `right` y `center`.                                                                                           |                               |
| `style`                  | Cadena   | Agrega declaraciones de CSS en línea a la etiqueta img. Por ejemplo:`style="border:1px solid blue; margin:10px"`                                                                              |                               |
| `suppress_company_name`  | Booleano | Oculta el nombre de la empresa si no se elige un logotipo de imagen.                                                                                                                          | `False`                       |
| `use_account_default`    | Booleano | Se establece como `true` para utilizar el nombre de la empresa desde la configuración predeterminada de la cuenta.                                                                            | `False`                       |
| `open_in_new_tab`        | Booleano | Selecciona si se abre o no la URL de destino en otra pestaña.                                                                                                                                 | `False`                       |
| `override_inherited_src` | Booleano | Cuando se define como `true`, utiliza el src del widget del logotipo en lugar del src heredado de la configuración o de la plantilla.                                                         | `True`                        |
| `heading_level`          | Cadena   | Cuando se utilizan logotipos basados en texto no enlazados, se envuelve el logotipo basado en texto en una de las siguientes opciones disponibles como etiqueta HTML: `h1`, `h2`, `h3`, `h4`. | `h1`                          |
| `loading`                | Cadena   | Controla el atributo de carga del elemento img de [la carga diferida en el navegador.](/cms/best-practices/testing-staging-performance/lazy-loading)                                          |                               |

## Menú

Genera un menú avanzado basado en un árbol de menús en **Configuración de contenido > Menús avanzados.** Consulta los [menús y la navegación](/cms/start-building/building-blocks/modules/menus-and-navigation) para obtener más información sobre el uso de los menús en las [plantillas](https://developers.hubspot.es/docs/cms/start-building/building-blocks/templates/overview) y los [módulos](https://developers.hubspot.es/docs/cms/start-building/building-blocks/modules/overview). Si `id` se define como `null`, la etiqueta de menú mostrará el menú predeterminado de la cuenta de HubSpot.

<CodeGroup>
  ```text input.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 output.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        | Descripción                                                                                                                                                                                                                                                                                                                               | Predeterminado |
| --------------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
| `id`            | Número      | ID del árbol de menús desde los menús avanzados en la configuración de contenido.                                                                                                                                                                                                                                                         |                |
| `site_map_name` | Cadena      | Nombre del árbol de menús de los menús avanzados en la configuración del contenido.                                                                                                                                                                                                                                                       | `"default"`    |
| `root_type`     | Enumeración | Especifica el tipo de menús avanzados. Las opciones son: "site\_root", "top\_parent", "parent", "page\_name", "page\_id", y "breadcrumb". Estos valores corresponden a estático, dinámico por sección, dinámico por página y breadcrumb.                                                                                                  | `"site_root"`  |
| `flyouts`       | Cadena      | Cuando es "True", se agrega una clase al árbol de menús que se puede adaptar para permitir que los elementos del menú secundario aparezcan cuando se coloca el cursor encima del menú principal. Si es "False", los elementos del menú secundario aparecerán siempre.                                                                     | `"true"`       |
| `max_levels`    | Número      | Determina el número de niveles de menús anidados que se muestran en el marcado. Este parámetro define cuántas opciones secundarias del árbol de menú se pueden expandir dentro del menú.                                                                                                                                                  | `2`            |
| `flow`          | Enumeración | Define la orientación de los elementos del menú. Esto agrega clases al árbol de menú para que puedan aplicarse estilos personalizados. Los valores posibles son "horizontal", "vertical" or "vertical\_flyouts". Los menús horizontales muestran los elementos de lado a lado, y los menús verticales los muestran de arriba hacia abajo. | `"horizontal"` |
| `root_key`      | Cadena      | Se utiliza para encontrar la raíz del menú. Cuando root\_type se define como page\_id o page\_name, este parámetro debe ser el ID de la página o la etiqueta de la página, respectivamente.                                                                                                                                               | `"horizontal"` |
| `label`         | Cadena      | Contenido enriquecido para describir esta entidad                                                                                                                                                                                                                                                                                         | `False`        |
| `label`         | Cadena      | Contenido enriquecido para describir esta entidad                                                                                                                                                                                                                                                                                         | `False`        |

## Require\_css

Una etiqueta HubL que pone en cola un elemento de estilo para ser representado en el `<head>`.

Esta etiqueta es similar a la [require\_css función ](/cms/reference/hubl/functions#require-css), excepto que esta etiqueta inserta el estilo en línea en lugar de hacerlo desde una hoja de estilo. Esta etiqueta tampoco se desduplica con otras instancias del CSS en la misma página. Si estás creando un módulo y quieres insertar una hoja de estilos, pero planeas usar ese módulo varias veces en una misma página, es posible que prefieras utilizar la función `require_css`.

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

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

  {{ standard_footer_includes }}
  ```

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

## Require\_head

Una etiqueta HubL que pone en cola todo lo que se coloca dentro de ella en el `standard_header_includes`, que se encuentra en el `<head>` de la plantilla. Para la mayoría de Javascript y CSS, consulta `require_js` y `require_css`. Algunos casos de uso de `require_head` incluyen el suministro de metaetiquetas y etiquetas de enlace especiales (como prefetch y preconnect) de los 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

Una etiqueta HubL que pone en cola un elemento de script para ser renderizado. Para poner en cola un script para renderizarlo en el `<head />`desde un archivo diferente a través de un elemento `<script />` (en lugar de en línea como se muestra aquí), utiliza la función HubL [`require_js(absolute_url)`](/cms/reference/hubl/functions#require-js).

<CodeGroup>
  ```text input.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 output.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   | Descripción                                                                                                      | Predeterminado |
| ---------- | ------ | ---------------------------------------------------------------------------------------------------------------- | -------------- |
| `position` | Cadena | Establece la posición en la que se renderizará el script en línea. Las opciones incluyen: `"head"` y `"footer"`. | `"footer"`     |

## Texto enriquecido

Crea un editor de contenidos WYSIWYG.

<CodeGroup>
  ```text input.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 output.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   | Descripción                                                   | Predeterminado                                                                                                                                                                                                                                                                                                                                                                                     |
| --------- | ------ | ------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `html`    | Cadena | Contenido de texto enriquecido predeterminado para el 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>` |

## Listado de RSS

Carga una lista de contenidos desde un canal RSS interno o externo.

<Warning>
  ### Nota:

  Este módulo se carga de forma asíncrona en el lado del cliente. Como resultado, si quieres modificar la sección de publicaciones después de que se haya cargado, tendrás que definir una función JS global para manejar esa manipulación. Utiliza la función `hsRssFeedComplete(feeds)`, donde `feeds` es el selector de jQuery de todos los listados de publicaciones que se han completado. Puedes modificar directamente el objeto DOM en esa función.
</Warning>

<CodeGroup>
  ```text input.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 output.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     | Descripción                                                                                                                                                                                                                                                                        | Predeterminado |
| ------------------------ | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
| `show_title`             | Booleano | Muestra u oculta el título del listado de publicaciones RSS.                                                                                                                                                                                                                       | `True`         |
| `show_date`              | Booleano | Muestra la fecha de la publicación.                                                                                                                                                                                                                                                | `True`         |
| `show_author`            | Booleano | Muestra el nombre del autor.                                                                                                                                                                                                                                                       | `True`         |
| `show_detail`            | Booleano | Muestra el resumen de la publicación hasta el número de caracteres fijado por el parámetro `limit_to_chars`.                                                                                                                                                                       | `True`         |
| `title`                  | Cadena   | Rellena el encabezado del listado de publicaciones RSS.                                                                                                                                                                                                                            |                |
| `limit_to_chars`         | Número   | Número máximo de caracteres que se mostrarán en el resumen.                                                                                                                                                                                                                        | `200`          |
| `publish_date_format`    | Cadena   | Formato de la fecha de publicación. Los valores posibles son `"short"`, `"medium"` y `"long"`. También acepta formatos personalizados, como `"MMMM d, yyyy 'at' h:mm a"`.                                                                                                          | `"short"`      |
| `attribution_text`       | Cadena   | El texto que atribuye un autor a una publicación.                                                                                                                                                                                                                                  | `"by"`         |
| `click_through_text`     | Cadena   | El texto que se mostrará como enlace de redirección al final del resumen de una publicación.                                                                                                                                                                                       | `"Read more"`  |
| `publish_date_text`      | Cadena   | El texto que indica cuándo se publicó una entrada de blog.                                                                                                                                                                                                                         | `"posted at"`  |
| `include_featured_image` | Booleano | Muestra una imagen destacada con el enlace de la publicación para los listados de publicaciones RSS generados por HubSpot.                                                                                                                                                         | `False`        |
| `item_title_tag`         | Cadena   | Especifica la etiqueta HTML del título de cada publicación.                                                                                                                                                                                                                        | `span`         |
| `is_external`            | Booleano | El listado de publicaciones RSS es de un blog externo.                                                                                                                                                                                                                             | `False`        |
| `number_of_items`        | Número   | Número máximo de publicaciones que se mostrarán.                                                                                                                                                                                                                                   | `5`            |
| `publish_date_language`  | Cadena   | Especifica el idioma de la fecha de publicación.                                                                                                                                                                                                                                   | `en_US`        |
| `rss_url`                | Cadena   | La URL donde se encuentra el listado de publicaciones RSS.                                                                                                                                                                                                                         |                |
| `content_group_id`       | Cadena   | ID del blog cuando la fuente del listado de publicaciones es un blog interno.                                                                                                                                                                                                      |                |
| `select_blog`            | Cadena   | Se puede utilizar para seleccionar un listado de publicaciones del blog interno de HubSpot.                                                                                                                                                                                        | `default`      |
| `feed_source`            | Cadena   | Definir la fuente del listado de publicaciones RSS. Cuando es interno, el formato general es `{rss_url="", is_external=False, content_group_id="2502431580"}`. Cuando es externo, el formato general es `{rss_url="http://blog.hubspot.com/marketing/rss.xml", is_external=True}`. |                |
| `tag_id`                 | Número   | ID de la etiqueta cuando la fuente del listado de publicaciones es un blog interno.                                                                                                                                                                                                |                |

## Encabezado de la sección

Genera un título html y un subtítulo `<p>`.

<CodeGroup>
  ```text input.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 output.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   | Descripción                                                            | Predeterminado               |
| --------------- | ------ | ---------------------------------------------------------------------- | ---------------------------- |
| `header`        | Cadena | Texto para mostrar en el encabezado.                                   | `"A clear and bold header"`  |
| `subheader`     | Cadena | Texto para mostrar en el subtítulo.                                    | `"A more subdued subheader"` |
| `heading_level` | Cadena | Nivel de encabezado HTML semántico. Se admiten los niveles de h1 a h6. | `"h1"`                       |

## Menú simple

Los menús simples permiten crear [menús de navegación](/cms/start-building/building-blocks/modules/menus-and-navigation) básicos que pueden modificarse a nivel de página. A diferencia de los módulos de menú normales, los menús simples no se gestionan desde la pantalla de navegación en la configuración del sitio web, sino desde los editores de plantillas y páginas. Puedes utilizar la [sintaxis de bloques](/cms/reference/modules/using-modules-in-templates#block-syntax) para configurar un árbol de menús predeterminado.

<CodeGroup>
  ```text input.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 output.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        | Descripción                                                                                                                                                                  | Predeterminado |
| ------------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
| `orientation` | Enumeración | Define las clases de marcadores de menú para permitir adaptar la orientación de los elementos del menú en la página. Los valores posibles son `"horizontal"` y `"vertical"`. | `"horizontal"` |
| `menu_tree`   | JSON        | Estructura del menú, incluidos los nombres de los enlaces de las páginas y las URL de destino.                                                                               | `[]`           |

## Compartir en redes sociales

Las etiquetas de contenido compartido en redes sociales generan íconos de redes sociales que pueden utilizarse para compartir una página determinada. Este módulo se puede utilizar con la [sintaxis de bloques](/cms/reference/modules/using-modules-in-templates#block-syntax) para personalizar las imágenes de los íconos y mucho más.

<CodeGroup>
  ```text input.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 output.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     | Descripción                                                                                        | Predeterminado                    |
| -------------- | -------- | -------------------------------------------------------------------------------------------------- | --------------------------------- |
| `use_page_url` | Booleano | Si es "True", el módulo comparte la URL de la página de forma predeterminada.                      | `True`                            |
| `link`         | Cadena   | Especifica una URL diferente para compartirla, si `use_page_url` es "False".                       |                                   |
| `pinterest`    | JSON     | Parámetros para el formato del enlace de Pinterest y la fuente de la imagen del ícono.             | `See block syntax example, above` |
| `twitter`      | JSON     | Parámetros para el formato del enlace de Twitter y la fuente de la imagen del ícono.               | `See block syntax example, above` |
| `linked_in`    | JSON     | Parámetros para el formato del enlace de LinkedIn y la fuente de la imagen del ícono.              | `See block syntax example, above` |
| `facebook`     | JSON     | Parámetros para el formato del enlace de Facebook y la fuente de la imagen del ícono.              | `See block syntax example, above` |
| `email`        | JSON     | Parámetros para el formato del enlace para compartir el correo y la fuente de la imagen del ícono. | `See block syntax example, above` |

## Separador

Una etiqueta espaciadora genera una etiqueta span vacía. Esta etiqueta se puede estilizar para actuar como espaciador. En los diseños de arrastrar y soltar, el módulo de espacio se encuentra dentro de un contenedor con una clase de span1 a span12, que determina cuánto espacio debe ocupar el módulo dentro de la cuadrícula responsiva de doce columnas.

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

  ```text output.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>

## Etiquetas de la página del sistema

Las siguientes etiquetas se pueden utilizar en las [páginas del sistema](https://developers.hubspot.es/docs/cms/start-building/building-blocks/templates/overview#system-pages), como las páginas de restablecimiento de contraseñas o de suscripción por correo electrónico.

### Copia de seguridad de cancelaciones de suscripción por correo electrónico

La etiqueta de cancelación de suscripción con copia de seguridad se muestra a los destinatarios de correo electrónico si HubSpot no puede determinar su dirección de correo, cuando el destinatario intenta cancelar la suscripción. Esta etiqueta muestra un formulario para que el contacto ingrese su dirección de correo electrónico y cancele la suscripción de las comunicaciones por correo electrónico. Se debe utilizar en una [plantilla del sistema de respaldo de cancelación de la suscripción.](https://knowledge.hubspot.com/es/design-manager/use-system-templates-to-customize-error-subscription-and-password-prompt-pages)

<CodeGroup>
  ```text input.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 output.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   | Descripción                                                                                                               | Predeterminado          |
| ------------------- | ------ | ------------------------------------------------------------------------------------------------------------------------- | ----------------------- |
| `header`            | Cadena | Muestra el texto en una etiqueta h1 encima del formulario de cancelación de suscripción.                                  | `"Email Unsubscribe"`   |
| `input_help_text`   | Cadena | Muestra el texto de ayuda en una etiqueta h3 encima del campo del formulario de cancelación de suscripción a los correos. | `"Your email address:"` |
| `input_placeholder` | Cadena | Agrega el texto de marcador de posición en el campo de dirección de correo electrónico.                                   | `"email@example.com"`   |
| `button_text`       | Cadena | Cambia el texto del botón de envío del formulario de cancelación de suscripción.                                          | `"Unsubscribe"`         |

### Suscripciones a correos

Este módulo se muestra cuando un destinatario de correo electrónico va a editar sus preferencias de suscripción. Debe utilizarse en una [plantilla del sistema de preferencias de suscripción.](https://knowledge.hubspot.com/es/design-manager/use-system-templates-to-customize-error-subscription-and-password-prompt-pages)

<CodeGroup>
  ```text input.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 output.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   | Descripción                                                                                                                                                   | Predeterminado                                                                                                                                    |
| ------------------------------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
| `header`                        | Cadena | Muestra el texto en una etiqueta h1 encima del formulario de preferencias de suscripción.                                                                     | `"Communication Preferences"`                                                                                                                     |
| `subheader_text`                | Cadena | Introduce el texto debajo del encabezado y encima de las preferencias de cancelación de suscripción.                                                          | `"<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`       | Cadena | Muestra el texto en un `<p class="header">` encima de las opciones de suscripción.                                                                            | `"Uncheck the types of emails you do not want to receive:"`                                                                                       |
| `unsubscribe_all_text`          | Cadena | Muestra el texto en un `<p class="header">` encima de la entrada de la casilla de verificación para cancelar la suscripción a todos los correos electrónicos. | `"Or check here to never receive any emails:"`                                                                                                    |
| `unsubscribe_all_unsubbed_text` | Cadena | Introduce el texto dentro de un `<p>` que se muestra si la suscripción de un contacto está actualmente cancelada para todos los correos electrónicos.         | `"You are presently unsubscribed from all of our emails. Would you like to receive our emails again?"`                                            |
| `unsubscribe_all_option`        | Cadena | Define el texto que está junto a la entrada de la casilla de verificación de cancelación de suscripción a todos los correos electrónicos.                     | `"Unsubscribe me from all mailing lists."`                                                                                                        |
| `button_text`                   | Cadena | Define el texto del botón de envío que actualiza las preferencias de suscripción.                                                                             | `"Update email preferences"`                                                                                                                      |
| `resubscribe_button_text`       | Cadena | Define el texto del botón de envío para cuando los contactos se vuelvan a suscribir.                                                                          | `"Yes, resubscribe me!"`                                                                                                                          |

### Confirmación de suscripción a correos

La actualización de confirmación de suscripción al correo electrónico es un módulo que puede agregarse a la plantilla de agradecimiento para cuando un destinatario actualiza sus preferencias de suscripción o las cancela. Debe utilizarse en una [plantilla del sistema de preferencias de suscripción.](https://knowledge.hubspot.com/es/design-manager/use-system-templates-to-customize-error-subscription-and-password-prompt-pages)

<CodeGroup>
  ```text input.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 output.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   | Descripción                                                                                                              | Predeterminado                                                                                                                                    |
| ----------------------------- | ------ | ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------- |
| `header`                      | Cadena | Muestra el texto en una etiqueta h1 encima del formulario de cancelación de suscripción.                                 | `"Communication Preferences"`                                                                                                                     |
| `subheader_text`              | Cadena | Muestra el texto encima del mensaje de confirmación.                                                                     | `"<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`     | Cadena | Define el texto que se mostrará cuando alguien cancele la suscripción a todas las comunicaciones por correo electrónico. | `"You have successfully unsubscribed from all email communications."`                                                                             |
| `subscription_update_success` | Cadena | Define el texto cuando un destinatario actualiza sus preferencias de suscripción.                                        | `"You have successfully updated your email preferences."`                                                                                         |

### Inicio de sesión de membresías

Crea un formulario de inicio de sesión para dar acceso a [contenido privado](https://knowledge.hubspot.com/es/website-pages/require-member-registration-to-access-private-content).

<CodeGroup>
  ```text input.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 output.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://developers.hubspot.es/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://developers.hubspot.es/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   | Descripción                                             | Predeterminado            |
| --------------------- | ------ | ------------------------------------------------------- | ------------------------- |
| `email_label`         | Cadena | La etiqueta para el campo del correo electrónico.       | `"Email"`                 |
| `password_label`      | Cadena | La etiqueta para el campo de la contraseña.             | `"Password"`              |
| `remember_me_label`   | Cadena | La etiqueta de la casilla de verificación "Recordarme". | `"Remember Me"`           |
| `reset_password_text` | Cadena | El texto para el hipervínculo de cambio de contraseña.  | `"Forgot your password?"` |
| `submit_button_text`  | Cadena | El texto para el botón de envío.                        | `"Login"`                 |
| `show_password`       | Cadena | El texto del enlace para revelar la contraseña.         | `"Show password"`         |

### Registro de membresías

Crea un formulario de registro para acceder a [contenido privado](https://knowledge.hubspot.com/es/website-pages/require-member-registration-to-access-private-content).

<CodeGroup>
  ```text input.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 output.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://developers.hubspot.es/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://developers.hubspot.es/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   | Descripción                                                 | Predeterminado       |
| ------------------------ | ------ | ----------------------------------------------------------- | -------------------- |
| `email_label`            | Cadena | La etiqueta para el campo del correo electrónico.           | `"Email"`            |
| `password_label`         | Cadena | La etiqueta para el campo de la contraseña.                 | `"Password"`         |
| `password_confirm_label` | Cadena | La etiqueta para el campo de confirmación de la contraseña. | `"Confirm Password"` |
| `submit_button_text`     | Cadena | El texto para el botón de envío.                            | `"Save Password"`    |
| `show_password`          | Cadena | El texto del enlace para revelar la contraseña.             | `"Show password"`    |

### Solicitud de restablecimiento de contraseña

Crea un formulario para enviar un correo electrónico de restablecimiento de contraseña para acceder a páginas protegidas por contraseña.

<CodeGroup>
  ```text input.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 output.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   | Descripción                                                                    | Predeterminado       |
| ------------------------ | ------ | ------------------------------------------------------------------------------ | -------------------- |
| `email_label`            | Cadena | La etiqueta para el campo del correo electrónico.                              | `"Email"`            |
| `submit_button_text`     | Cadena | El texto para el botón de envío.                                               | `"Send Reset Email"` |
| `password_reset_message` | Cadena | El mensaje que aparece después de solicitar el correo de cambio de contraseña. | `False`              |

### Restablecimiento de contraseña

Renderiza un formulario de restablecimiento de contraseña para acceder a páginas protegidas por contraseña.

<CodeGroup>
  ```text input.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 output.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   | Descripción                                                                        | Predeterminado       |
| ------------------------ | ------ | ---------------------------------------------------------------------------------- | -------------------- |
| `password_label`         | Cadena | La etiqueta de texto para el campo de la contraseña.                               | `"Email"`            |
| `password_confirm_label` | Cadena | La etiqueta de texto para el campo de confirmación de contraseña.                  | `"Send Reset Email"` |
| `submit_button_text`     | Cadena | La etiqueta de texto para el botón de envío del formulario.                        | `False`              |
| `show_password`          | Cadena | La etiqueta de texto del botón para mostrar el valor de la contraseña introducida. | `False`              |
| `password_requirements`  | Cadena | La etiqueta de texto que describe los requisitos de la contraseña.                 | `False`              |

### Solicitud de la contraseña

Agrega un solicitud de contraseña a las páginas protegidas con contraseña.

<CodeGroup>
  ```text input.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 output.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   | Descripción                                                                 | Predeterminado                      |
| ---------------------- | ------ | --------------------------------------------------------------------------- | ----------------------------------- |
| `submit_button_text`   | Cadena | Etiqueta para el botón que está debajo del campo de la contraseña.          | `"Submit"`                          |
| `bad_password_message` | Cadena | Se muestra un mensaje si se introduce una contraseña incorrecta.            | `"<p>Sorry, please try again.</p>"` |
| `password_placeholder` | Cadena | Define el texto del marcador de posición dentro del campo de la contraseña. | `"Password"`                        |

## Texto

Crea una sola línea de texto. Esta etiqueta puede ser útil para combinarse con el marcador cuando se utiliza junto con el parámetro `no_wrapper=True`. Por ejemplo, si quieres que los usuarios finales puedan definir el destino de un ancla predefinida, podrías rellenar el `href` con un módulo de texto con `no_wrapper=True`.

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

  ```text output.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   | Descripción                                                     |
| --------- | ------ | --------------------------------------------------------------- |
| `value`   | Cadena | Define el texto predeterminado del campo de texto de una línea. |

## Textarea

Un textarea es similar a un módulo de texto ya que permite a los usuarios introducir texto sin formato, pero les da un área más grande para trabajar en el editor de contenidos. Este módulo no es compatible con HTML. Si quieres utilizarlo directamente dentro de una etiqueta de contenedor predefinida, agrega el parámetro `no_wrapper=true`.

<CodeGroup>
  ```text input.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 output.txt theme={null}
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a urna quis
  lacus vehicula rutrum.
  ```
</CodeGroup>

| Parámetro | Tipo   | Descripción                                  |
| --------- | ------ | -------------------------------------------- |
| `value`   | Cadena | Define el texto predeterminado del textarea. |

## Reproductor de video

Renderiza un reproductor de video para un archivo de video desde el administrador de archivos que tiene activa la opción *Permitir incrustar, compartir y rastrear*.

<Tabs>
  <Tab title="Input">
    ```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     | Descripción                                                                                                                                                                                                                                                             | Predeterminado      |
| ---------------------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- |
| `hide_playlist`        | Booleano | Oculta la lista de reproducción de videos.                                                                                                                                                                                                                              | `True`              |
| `playlist_color`       | Cadena   | Un valor de color HEX para la lista de reproducción.                                                                                                                                                                                                                    |                     |
| `play_button_color`    | Cadena   | Un valor de color HEX para los botones de reproducción y pausa.                                                                                                                                                                                                         | `#2A2A2A`           |
| `embed_button`         | Booleano | Muestra el botón de inserción en el reproductor                                                                                                                                                                                                                         | `False`             |
| `viral_sharing`        | Booleano | Mostrar el botón para compartir en las redes sociales en el reproductor.                                                                                                                                                                                                | `False`             |
| `width`                | Número   | Anchura del reproductor de video insertado.                                                                                                                                                                                                                             | `Auto`              |
| `height`               | Número   | Altura del reproductor de video insertado.                                                                                                                                                                                                                              | `Auto`              |
| `player_id`            | Número   | El `player_id` del video que se insertará.                                                                                                                                                                                                                              |                     |
| `style`                | Cadena   | Estilo adicional del reproductor.                                                                                                                                                                                                                                       |                     |
| `conversion_asset`     | JSON     | Configuración de eventos para el reproductor. Puede renderizar una CTA o un formulario antes o después de la reproducción del video. Este parámetro toma un objeto JSON con tres parámetros: tipo (FORM o CTA), id (El guid del tipo de objeto), posición (POST o PRE). | `See above example` |
| `placeholder_alt_text` | Cadena   | El texto alternativo del video.                                                                                                                                                                                                                                         |                     |
