Última modificación: 22 de agosto de 2025
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, 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. Si mantienes un sitio web antiguo, también puedes consultar la lista de funciones de HubL obsoletas.
La mayoría de las etiquetas de esta página tienen equivalentes de módulos predeterminados. Los módulos se pueden utilizar dentro de las áreas de arrastrar y soltar dnd_areas y columnas flexibles, lo que los hace más potentes y fáciles de usar que las etiquetas que ves aquí.

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.
{% blog_comments "blog_comments" label="Blog comments" select_blog="359485112" %}
ParámetroTipoDescripciónPredeterminado
limitNúmeroFija el número máximo de comentarios.5000
select_blog”default”, predeterminado o ID del blogEspecifica 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_cssBooleanoSi se define esta opción como verdadera, el CSS de los comentarios del blog dejará de cargarse.false
messageCadenaEl 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 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í.

Filtro de publicación de blog

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

Nota:

Este módulo solo se puede utilizar en las plantillas de publicaciones de blog.
{% post_filter "post_filter" %}
{% post_filter "posts_by_topic"
select_blog="default",
expand_link_text="see all",
overrideable=False,
list_title="Posts by Topic",
max_links=5,
filter_type="topic",
label="Posts by Topic"
%}
ParámetroTipoDescripciónPredeterminado
select_blog”default” o ID del blogSelecciona el blog de HubSpot que se va a utilizar. Este parámetro utiliza un ID de blog o un valor “default”."default"
expand_link_textCadenaEnlace 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_titleCadenaTítulo de la lista para mostrar.""
list_tagCadenaDefine la etiqueta utilizada para la lista. Por lo general, el valor debe ser "ul" o "ol"."ul"
title_tagCadenaDefine la etiqueta utilizada para el título de la lista."h3"
max_linksNúmeroNúmero máximo de valores de filtro que se mostrarán. Excluye el parámetro para mostrar todo.5
filter_typeEnumeraciónSelecciona 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.

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.
{% 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 %}
ParámetroTipoDescripciónPredeterminado
select_blog”default” o ID del blogSelecciona el blog de HubSpot que se utilizará para el listado. Este parámetro utiliza un ID de blog o un valor "default"."default"
list_titleCadenaTítulo de la lista para mostrar.""
list_tagCadenaDefine la etiqueta utilizada para la lista. Por lo general, el valor debe ser "ul" o "ol"."ul"
title_tagCadenaDefine la etiqueta utilizada para el título de la lista."h3"
listing_typeCadenaMuestra 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_linksNúmeroNúmero máximo de entradas que se publicarán en la lista.5
include_featured_imageBooleanoMostrar 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.
{% 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"
%}
ParámetroTipoDescripciónPredeterminado
blog_idsNúmeroLos ID de los blogs de los que se incluirán publicaciones. Si no se especifica, incluirá publicaciones del blog predeterminado.
blog_post_idsCadenaLos 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_overrideCadenaLos 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).
limitNúmeroEl número máximo de publicaciones que se incluirán en la lista.3
tagsCadenaLas 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_boostNúmeroAumenta 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_datefecha y horaFecha de publicación más temprana. Puedes ver un ejemplo a continuación.
end_datefecha y horaFecha de publicación más reciente. Puedes ver un ejemplo a continuación.
blog_authorsCadenaLos nombres de los autores de los que se incluirán los mensajes (separados por comas). Puedes ver un ejemplo a continuación.
path_prefixesCadenaRutas 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.
callbackCadenaEl 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.none
post_formatterCadenaEl 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_languageBooleanoCuando 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
Recomendamos utilizar el parámetro callback en lugar de post_formatter para mejorar la velocidad de carga de la página.

Ejemplos

El siguiente ejemplo genera una lista de publicaciones escritas por uno de los tres blog_authors especificados en dos blogs diferentes:
{% 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:
{% 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:
{% 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).
{% blog_social_sharing "blog_social_sharing" %}
{% blog_social_sharing "blog_social_sharing" select_blog="359485112" %}
ParámetroTipoDescripciónPredeterminado
select_blog”default” o el ID del blogEspecifica 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_urlBooleanoUsa 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.
{% 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 %}
ParámetroTipoDescripciónPredeterminado
select_blog”default” o ID del blogSelecciona 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
titleCadenaDefine el texto de una etiqueta h3 encima del formulario de suscripción."Subscribe Here!"
no_titleBooleanoSi es “True”, se elimina la etiqueta h3 que está encima del título.false
response_messageCadenaDefine el mensaje de agradecimiento que se muestra cuando un usuario envía un formulario. Es compatible con HTML."Thanks for Subscribing!"
edit_form_linkCadenaEste 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.
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> "
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.
{% boolean "boolean" %}
{% boolean "nav_toggle" label="Hide navigation", value=False, no_wrapper=True %}
ParámetroTipoDescripciónPredeterminado
valueBooleanoDetermina 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.
{% choice "choice" %}
{% choice "type_of_page" label="Choose the type of page", value="About", choices="About, Careers, Contact, Store" %}
ParámetroTipoDescripción
valueBooleanoEl valor predeterminado del campo para el menú desplegable
choicesSecuenciaUna 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>.
{% color "color" %}
{% color "my_color_picker" label="Choose a color", color="#000000", no_wrapper=True %}
ParámetroTipoDescripción
colorCadenaUn 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.
{% 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" %}
ParámetroTipoDescripción
embed_codeCadenaEl código de inserción para la CTA. \n diferencia los saltos de línea.
full_htmlCadenaEl código de inserción para la CTA (igual que embed_code). \n diferencia los saltos de línea.
image_srcCadenaURL de la imagen src que define la imagen de vista previa en el editor de contenido.
image_editorCadenaMarcador para la vista previa del editor de imágenes
guidCadenaEl 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_htmlCadenaHTML de la imagen de la CTA sin el script de la CTA.*
image_emailCadenaVersión del código de la CTA apta para correo electrónico.*
*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. 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 que permite generar una CTA a partir de su ID.

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.
{% 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 %}
ParámetroTipoDescripción
valueCadenaDefine 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í. 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:
{% module "module_15677217712485" path="/Custom/Test custom module"  %}
{% module "module_25642219712432" path="/Assets/Custom calendar module" label="Custom calendar module" %}
ParámetroTipoDescripción
module_idCadenaEl ID del módulo que se renderizará.
pathCadenaLa 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.
module-placeholder-content
Para agregar un marcador de posición del editor a un módulo personalizado, añade primero una instrucción “if” 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:
{% if module.label %}
   {% cta guid="{{ module.guid }}" label="my_cta" %}
{% elif is_in_editor %}
  {% editor_placeholder %}
{% endif %}
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 .
Luego, define el contenido del marcador de posición en el archivo meta.json del módulo.
{
  "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ámetroTipoDescripción
show_module_iconBooleanoDetermina si se debe mostrar el ícono del módulo.
titleCadenaEl título que aparece en el marcador de posición.
descriptionCadenaLa 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. 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, lo que proporciona una funcionalidad similar.
{% 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 %}

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

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.
{% 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 %}
ParámetroTipoDescripción
form_keyCadenaEspecifica un ID único para el formulario a nivel de página.
form_to_useCadenaEspecifica 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.
titleCadenaRellena una etiqueta h3 en el encabezado del formulario.
no_titleBooleanoSi es True, se elimina la etiqueta h3 que está encima del título.
form_follow_ups_follow_up_typeEnumeraciónEspecifica 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_idNúmeroEspecifica el ID del correo de seguimiento simple para la página publicada.
simple_email_for_buffer_idNúmeroEspecifica el ID del correo de seguimiento simple para la versión de guardado automático de una página.
follow_up_type_simpleBooleanoSi es “True”, permite un correo de seguimiento simple. Alternativa de form_follow_ups_follow_up_type.
follow_up_type_automationBooleanoSi es “True”, inscribe los envíos de formularios en un workflow. Alternativa de form_follow_ups_follow_up_type.
simple_email_campaign_idNúmeroEspecifica el ID del correo de seguimiento simple. Alternativa de simple_email_for_live_id.
form_follow_ups_workflow_idNúmeroEspecifica el ID del workflow en el que se inscriben los envíos de formularios.
response_redirect_urlCadenaSi se redirecciona a una página externa, este parámetro especifica la URL a la que se debe redireccionar.
response_redirect_idNúmeroSi 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_typeEnumeraciónDetermina 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_messageCadenaEstablece un mensaje de agradecimiento en línea. Este parámetro es compatible con HTML.
notifications_are_overriddenBooleanoSi 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_bufferCadenaID de la configuración de anulación en la versión de autoguardado de la página.
notifications_override_guidCadenaID de la configuración de anulación en la versión publicada de la página.
notifications_override_email_addressesJSONLa 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_campaignCadenaEspecifica 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.
gotowebinar_webinar_keyCadenaEspecifica 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.
webinar_idCadenaUn 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 o Microsoft Teams, y cuando support_all_webinar_types esté configurado como true en la definición de campos de formulario.
webinar_sourceCadenaEl 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 de la cuenta.
{% page_footer "page_footer" %}

Galería

Genera una etiqueta de galería de HubSpot. Esta etiqueta de la galería está basada en 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.
{% 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 %}
ParámetroTipoDescripciónPredeterminado
slidesJSONUna 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_slidesBooleanoCuando es “True”, muestra las diapositivas en un bucle continuo.True
num_secondsNúmeroTiempo en segundos de pausa entre diapositivas.5
show_paginationBooleanoProporciona botones debajo del deslizador para navegar entre las diapositivas.True
sizingEnumeraciónDetermina si el deslizador cambia de tamaño según la altura de las diapositivas. Los valores posibles son: “static” o “resize”."static"
auto_advanceBooleanoAvanza automáticamente las diapositivas después del tiempo establecido en num_seconds.False
transitionEnumeraciónDefine el tipo de transición de las diapositivas. Los valores posibles son: “fade” o “slide”."slide"
caption_positionEnumeraciónModifica 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_modeEnumeraciónDetermina cómo se mostrará la galería de imágenes. Los valores posibles son: “standard”, “lightbox”, “thumbnail”."standard"
lightboxRowsNúmeroSi “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.
{% header "header"  %}
{% header "my_header" header_tag="h1", overrideable=True, value="A clear and bold header", label="Header" %}
ParámetroTipoDescripciónPredeterminado
header_tagCadenaSelecciona la etiqueta de encabezado que se va a renderizar. Los valores posibles son: h1, h2, h3, h4, h5, h6.h1
valueCadenaRepresenta 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, 5.14.0 y 6.4.2. Esta etiqueta no puede utilizarse en los módulos habilitados para correo electrónico.
{% icon
name="Accessible Icon"
style="REGULAR"
unicode="f368"
icon_set="fontawesome-5.14.0"
purpose="decorative"
title="Accessible Icon"
%}
ParámetroTipoDescripciónPredeterminado
nameCadenaNombre del ícono.
styleCadenaEstilo del ícono. Valores posibles: REGULAR o SOLIDREGULAR
unicodeCadenaLa representación en caracteres Unicode del ícono.
icon_setCadenaEl conjunto de íconos de FontAwesome que se va a utilizar. Los valores posibles son:
  • fontawesome-5.14.0
  • fontawesome-5.0.10
  • fontawesome-6.4.2
purposeCadenaEl propósito del ícono, utilizado para la accesibilidad. Los valores posibles son decorative o semantic. Si se define como decorative, se agregará un atributo adicional de aria-hidden="true" al ícono.decorative
titleCadenaEl 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.
{% 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" %}
ParámetroTipoDescripciónPredeterminado
altCadenaDefine el texto alternativo predeterminado para la imagen.
srcCadenaRellena el atributo src de la etiqueta img.
widthNúmeroDefine el atributo de anchura de la etiqueta img.The width of the image
heightNúmeroFija una altura mínima en un atributo de estilo de la etiqueta img solo para las plantillas de correo.The height of the image
hspaceNúmeroDefine el atributo hspace de la etiqueta img.
alignCadenaDefine el atributo align de la etiqueta img. Los valores posibles son: izquierda (left), derecha (right) y centro (center).
styleCadenaAgrega declaraciones de CSS en línea a la etiqueta img. Por ejemplo style=“border:1px solid blue; margin:10px”
loadingCadenaControla el atributo de carga del elemento img. Se utiliza para la carga diferida en el navegador.

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.
{% 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 %}
ParámetroTipoDescripción
srcCadenaEspecifica 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í.
{% language_switcher "language_switcher" overrideable=false, display_mode="localized", label="Language Switcher" %}
ParámetroTipoDescripciónPredeterminado
display_modeEnumeraciónEl idioma del texto en el selector de idiomas. Los valores son:
  • Pagelang significa que el nombre de los idiomas se mostrará en el idioma de la página en la que se está el selector.
  • Localized significa que el nombre de cada idioma aparecerá en ese idioma.
  • Hybrid es una combinación de ambas opciones.
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.
{% 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"
%}
ParámetroTipoDescripciónPredeterminado
altCadenaDefine el texto alternativo predeterminado para la imagen.
srcCadenaRellena el atributo src de la etiqueta img.
widthNúmeroDefine el atributo de anchura de la etiqueta img.The width of the image
heightNúmeroFija una altura mínima en un atributo de estilo de la etiqueta img solo para las plantillas de correo.The height of the image
hspaceNúmeroDefine el atributo hspace de la etiqueta img.
alignCadenaDefine el atributo align de la etiqueta img. Los valores posibles son: izquierda (left), derecha (right) y centro (center).
styleCadenaAgrega declaraciones de CSS en línea a la etiqueta img. Por ejemplo style=“border:1px solid blue; margin:10px”
open_in_new_tabBooleanoSelecciona si se abre o no la URL de destino en otra pestaña.False
linkCadenaDefine la URL de destino del enlace que envuelve la etiqueta img.
targetCadenaDefine el atributo de destino de la etiqueta del enlace.
loadingCadenaControla el atributo de carga del elemento img. Se utiliza para la carga diferida en el navegador.

Logotipo

Una etiqueta de logotipo muestra el logotipo de tu empresa desde la configuración del kit de marca de la cuenta.
{% logo "logo" %}
{% logo "my_logo" width="200" %}
ParámetroTipoDescripciónPredeterminado
altCadenaDefine el texto alternativo predeterminado para la imagen.Value in brand kit settings
srcCadenaRellena el atributo src de la etiqueta img.Value in brand kit settings
linkCadenaDefine la URL de destino del enlace que envuelve la etiqueta img.
widthNúmeroDefine el atributo de anchura de la etiqueta img.The width of the image
heightNúmeroFija una altura mínima en un atributo de estilo de la etiqueta img solo para las plantillas de correo.The height of the image
hspaceNúmeroDefine el atributo hspace de la etiqueta img.
alignCadenaDefine el atributo align de la etiqueta img. Los valores posibles son left, right y center.
styleCadenaAgrega declaraciones de CSS en línea a la etiqueta img. Por ejemplo:style="border:1px solid blue; margin:10px"
suppress_company_nameBooleanoOculta el nombre de la empresa si no se elige un logotipo de imagen.False
use_account_defaultBooleanoSe establece como true para utilizar el nombre de la empresa desde la configuración predeterminada de la cuenta.False
open_in_new_tabBooleanoSelecciona si se abre o no la URL de destino en otra pestaña.False
override_inherited_srcBooleanoCuando 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_levelCadenaCuando 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
loadingCadenaControla el atributo de carga del elemento img de la carga diferida en el navegador.

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 para obtener más información sobre el uso de los menús en las plantillas y los módulos. Si id se define como null, la etiqueta de menú mostrará el menú predeterminado de la cuenta de HubSpot.
{% menu "menu" %}
{% menu "my_menu"
id=456,
site_map_name="Default",
overrideable=False,
root_type="site_root",
flyouts="true",
max_levels="2",
flow="horizontal",
label="Advanced Menu"
%}
ParámetroTipoDescripciónPredeterminado
idNúmeroID del árbol de menús desde los menús avanzados en la configuración de contenido.
site_map_nameCadenaNombre del árbol de menús de los menús avanzados en la configuración del contenido."default"
root_typeEnumeraciónEspecifica 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"
flyoutsCadenaCuando 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_levelsNúmeroDetermina 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
flowEnumeraciónDefine 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_keyCadenaSe 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"
labelCadenaContenido enriquecido para describir esta entidadFalse
labelCadenaContenido enriquecido para describir esta entidadFalse

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 , 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.
{{ standard_header_includes }}
<!-- more html -->

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

{{ standard_footer_includes }}

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.
{% 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).
{{ standard_header_includes }}
<!-- more html -->

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

{{ standard_footer_includes }}
ParámetroTipoDescripciónPredeterminado
positionCadenaEstablece 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.
{% 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 %}
ParámetroTipoDescripciónPredeterminado
htmlCadenaContenido 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.

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.
{% 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" %}
ParámetroTipoDescripciónPredeterminado
show_titleBooleanoMuestra u oculta el título del listado de publicaciones RSS.True
show_dateBooleanoMuestra la fecha de la publicación.True
show_authorBooleanoMuestra el nombre del autor.True
show_detailBooleanoMuestra el resumen de la publicación hasta el número de caracteres fijado por el parámetro limit_to_chars.True
titleCadenaRellena el encabezado del listado de publicaciones RSS.
limit_to_charsNúmeroNúmero máximo de caracteres que se mostrarán en el resumen.200
publish_date_formatCadenaFormato 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_textCadenaEl texto que atribuye un autor a una publicación."by"
click_through_textCadenaEl texto que se mostrará como enlace de redirección al final del resumen de una publicación."Read more"
publish_date_textCadenaEl texto que indica cuándo se publicó una entrada de blog."posted at"
include_featured_imageBooleanoMuestra una imagen destacada con el enlace de la publicación para los listados de publicaciones RSS generados por HubSpot.False
item_title_tagCadenaEspecifica la etiqueta HTML del título de cada publicación.span
is_externalBooleanoEl listado de publicaciones RSS es de un blog externo.False
number_of_itemsNúmeroNúmero máximo de publicaciones que se mostrarán.5
publish_date_languageCadenaEspecifica el idioma de la fecha de publicación.en_US
rss_urlCadenaLa URL donde se encuentra el listado de publicaciones RSS.
content_group_idCadenaID del blog cuando la fuente del listado de publicaciones es un blog interno.
select_blogCadenaSe puede utilizar para seleccionar un listado de publicaciones del blog interno de HubSpot.default
feed_sourceCadenaDefinir 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_idNúmeroID 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>.
{% section_header "section_header" %}
{% section_header "my_section_header" subheader="A more subdued subheader", header="A clear and bold header", label="Section Header"  %}
ParámetroTipoDescripciónPredeterminado
headerCadenaTexto para mostrar en el encabezado."A clear and bold header"
subheaderCadenaTexto para mostrar en el subtítulo."A more subdued subheader"
heading_levelCadenaNivel 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 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 para configurar un árbol de menús predeterminado.
{% 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 %}
ParámetroTipoDescripciónPredeterminado
orientationEnumeraciónDefine 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_treeJSONEstructura 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 para personalizar las imágenes de los íconos y mucho más.
{% 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 %}
ParámetroTipoDescripciónPredeterminado
use_page_urlBooleanoSi es “True”, el módulo comparte la URL de la página de forma predeterminada.True
linkCadenaEspecifica una URL diferente para compartirla, si use_page_url es “False”.
pinterestJSONParámetros para el formato del enlace de Pinterest y la fuente de la imagen del ícono.See block syntax example, above
twitterJSONParámetros para el formato del enlace de Twitter y la fuente de la imagen del ícono.See block syntax example, above
linked_inJSONParámetros para el formato del enlace de LinkedIn y la fuente de la imagen del ícono.See block syntax example, above
facebookJSONParámetros para el formato del enlace de Facebook y la fuente de la imagen del ícono.See block syntax example, above
emailJSONPará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.
{% space "space" %}
{% space "spacer" label="Horizontal Spacer" %}

Etiquetas de la página del sistema

Las siguientes etiquetas se pueden utilizar en las páginas del sistema, 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.
{% 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"
%}
ParámetroTipoDescripciónPredeterminado
headerCadenaMuestra el texto en una etiqueta h1 encima del formulario de cancelación de suscripción."Email Unsubscribe"
input_help_textCadenaMuestra 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_placeholderCadenaAgrega el texto de marcador de posición en el campo de dirección de correo electrónico."email@example.com"
button_textCadenaCambia 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.
{% 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:"
%}
ParámetroTipoDescripciónPredeterminado
headerCadenaMuestra el texto en una etiqueta h1 encima del formulario de preferencias de suscripción."Communication Preferences"
subheader_textCadenaIntroduce 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_textCadenaMuestra 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_textCadenaMuestra 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_textCadenaIntroduce 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_optionCadenaDefine 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_textCadenaDefine el texto del botón de envío que actualiza las preferencias de suscripción."Update email preferences"
resubscribe_button_textCadenaDefine 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.
{% 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"
%}
ParámetroTipoDescripciónPredeterminado
headerCadenaMuestra el texto en una etiqueta h1 encima del formulario de cancelación de suscripción."Communication Preferences"
subheader_textCadenaMuestra 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_successCadenaDefine 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_successCadenaDefine 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.
{% 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"
%}
ParámetroTipoDescripciónPredeterminado
email_labelCadenaLa etiqueta para el campo del correo electrónico."Email"
password_labelCadenaLa etiqueta para el campo de la contraseña."Password"
remember_me_labelCadenaLa etiqueta de la casilla de verificación “Recordarme”."Remember Me"
reset_password_textCadenaEl texto para el hipervínculo de cambio de contraseña."Forgot your password?"
submit_button_textCadenaEl texto para el botón de envío."Login"
show_passwordCadenaEl texto del enlace para revelar la contraseña."Show password"

Registro de membresías

Crea un formulario de registro para acceder a contenido privado.
{% member_register "my_register" %}
{% member_register "my_register"
email_label="Email",
password_label="Password",
password_confirm_label="Confirm Password",
submit_button_text="Save Password",
show_password="Show password"
%}
ParámetroTipoDescripciónPredeterminado
email_labelCadenaLa etiqueta para el campo del correo electrónico."Email"
password_labelCadenaLa etiqueta para el campo de la contraseña."Password"
password_confirm_labelCadenaLa etiqueta para el campo de confirmación de la contraseña."Confirm Password"
submit_button_textCadenaEl texto para el botón de envío."Save Password"
show_passwordCadenaEl 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.
{% password_reset_request "my_password_reset_request" %}
{% password_reset_request "my_password_reset_request"
email_label="Email",
submit_button_text="Send Reset Email"
%}
ParámetroTipoDescripciónPredeterminado
email_labelCadenaLa etiqueta para el campo del correo electrónico."Email"
submit_button_textCadenaEl texto para el botón de envío."Send Reset Email"
password_reset_messageCadenaEl 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.
{% password_reset "my_password_reset" password_label="Password", password_confirm_label="Confirm Password", submit_button_text="Save password", show_password="Show password" %}
ParámetroTipoDescripciónPredeterminado
password_labelCadenaLa etiqueta de texto para el campo de la contraseña."Email"
password_confirm_labelCadenaLa etiqueta de texto para el campo de confirmación de contraseña."Send Reset Email"
submit_button_textCadenaLa etiqueta de texto para el botón de envío del formulario.False
show_passwordCadenaLa etiqueta de texto del botón para mostrar el valor de la contraseña introducida.False
password_requirementsCadenaLa 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.
{% password_prompt "password_prompt" %}
{% password_prompt "my_password_prompt"
submit_button_text="Submit",
bad_password_message="Sorry, please try again.\n",
label="Password Prompt"
%}
ParámetroTipoDescripciónPredeterminado
submit_button_textCadenaEtiqueta para el botón que está debajo del campo de la contraseña."Submit"
bad_password_messageCadenaSe muestra un mensaje si se introduce una contraseña incorrecta."<p>Sorry, please try again.</p>"
password_placeholderCadenaDefine 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.
{% text "text" %}
{% text "simple_text_field" label="Enter text here", value="This is the default value for this text field" %}
ParámetroTipoDescripción
valueCadenaDefine 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.
{% 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 %}
ParámetroTipoDescripción
valueCadenaDefine 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.
{% 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"}" %}
ParámetroTipoDescripciónPredeterminado
hide_playlistBooleanoOculta la lista de reproducción de videos.True
playlist_colorCadenaUn valor de color HEX para la lista de reproducción.
play_button_colorCadenaUn valor de color HEX para los botones de reproducción y pausa.#2A2A2A
embed_buttonBooleanoMuestra el botón de inserción en el reproductorFalse
viral_sharingBooleanoMostrar el botón para compartir en las redes sociales en el reproductor.False
widthNúmeroAnchura del reproductor de video insertado.Auto
heightNúmeroAltura del reproductor de video insertado.Auto
player_idNúmeroEl player_id del video que se insertará.
styleCadenaEstilo adicional del reproductor.
conversion_assetJSONConfiguració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_textCadenaEl texto alternativo del video.