Última modificación: 7 de octubre de 2025
Abajo encontrarás los módulos predeterminados que HubSpot proporciona para crear plantillas para páginas web, publicaciones de blog y páginas de índice de blog. También encontrarás módulos predeterminados que puedes usar para crear plantillas de cotización.
Al desarrollar localmente, puedes obtener un módulo predeterminado específico utilizando la ruta del módulo (por ejemplo, hs fetch @hubspot/linked_image.module
).
Para ver el código de un módulo predeterminado, puedes ver y clonar el módulo dentro de la carpeta @hubspot
del administrador de diseño. En el código, algunos módulos predeterminados utilizan el ID de cuenta 7052064, en lugar del que pertenece a la cuenta actual.
Comentarios del blog
Disponible en publicaciones de blog e índices de blog.
{% module "blog_comments" path="@hubspot/blog_comments" %}
Suscripción a los correos electrónicos del blog
Disponible en páginas, publicaciones de blog e índices de blog.
{% module "blog_subscribe" path="@hubspot/blog_subscribe" %}
Parámetro | Tipo | Descripción | Predeterminado |
---|
select_blog | Blog | El blog que se usará en el módulo. | |
title | Cadena | Título del módulo (envuelto en una etiqueta h3) | "Subscribe Here!" |
response_message | Texto enriquecido | El mensaje que aparece al enviar el formulario. | Thanks for subscribing! |
Publicaciones de blog
Agrega este módulo a las páginas de índice del blog para mostrar vistas preliminares de las publicaciones, incluyendo el título, la imagen destacada, el autor, la fecha de publicación y más, con un botón en el que se puede hacer clic para acceder a cada publicación.
Este módulo predeterminado se creó utilizando React, y puedes ver su código fuente en GitHub.
Nota:
- No se puede acceder a este módulo desde el administrador de diseño. Se puede hacer referencia al módulo con HubL en plantillas codificadas y agregarlo en el editor de la página de índice del blog.
- Este módulo reemplaza al módulo anterior
blog_listing
, que ha quedado obsoleto.
{% module "blog_posts"
path="@hubspot/blog_posts"
layout="grid",
columns=4,
displayForEachListItem=[
"image",
"title",
"authorName",
"tags",
"publishDate",
"description",
"button"
]
%}
Parámetro | Tipo | Descripción | Predeterminado |
---|
layout | Opción | La disposición del contenido para cada vista previa de publicación de blog.grid (predeterminado): alinea las publicaciones en una cuadrícula básica.singleColumn : alinea las publicaciones en una sola columna con imágenes destacadas en su propia fila encima del resto del contenido de la publicación.sideBySide : alinea las publicaciones en una columna con imágenes destacadas alineadas horizontalmente con el contenido de la publicación.
| grid |
columns | Número | Cuando se utiliza la disposición grid , el número de publicaciones por fila. Puede ser 2 , 3 o 4 . | 3 |
alternateImage | Booleano | Al usar la disposición sideBySide , se define como true para alinear la imagen destacada en los lados derecho e izquierdo de la vista previa de la publicación, alternando. | false |
fullImage | Booleano | Al usar los diseños grid o singleColumn , definir este campo como true para que la imagen destacada sea el fondo de la vista previa de la publicación. | false |
displayForEachListItem | Matriz | El contenido que se incluirá en cada vista previa de la publicación del blog. Las opciones incluyen:image : la imagen destacada de la publicación.title : el título de la publicación.authorImage : la imagen del autor de la publicación.authorName : el nombre del autor de la publicación.tags : las etiquetas del blog de la publicación.publishDate : la fecha de publicación del artículo.description : la metadescripción de la publicación.button : el botón “Más información” que se enlaza con la publicación del blog.
| [ 'image', 'title', 'authorImage', 'authorName', 'tags', 'publishDate', 'description', 'button' ] |
buttonText | Cadena | El texto que aparece en el botón “Más información”, si está incluido. | Read more |
Filtro de publicación de blog
Disponible en páginas, índices de blog y publicaciones de blog.
{% module "post_filter" path="@hubspot/post_filter" %}
Parámetro | Tipo | Descripción | Predeterminado |
---|
select_blog | Blog | Seleccionar un blog para mostrarlo. Como valor predeterminado, se mostrará el blog actual cuando se use en una plantilla de blog, o el blog principal cuando se utilice en otros lugares. | |
filter_type | Opción | Tipos de enlaces de filtrado que se mostrarán. Las opciones incluyen: | tag |
order_by | Opción | Ordena los valores de los enlaces del filtro. Las opciones incluyen: | post_count |
list_title | Texto | Un encabezado H3. | "Posts by Tag" |
max_links | Número | Número de enlaces de filtro que se mostrarán. Dejar en blanco para mostrar todos. | 5 |
expand_link_text | Texto | Texto para mostrar si hay disponible más que el max_links valor para mostrar. | "See all" |
Índice de publicaciones de blog
Disponible en páginas, índices de blog y publicaciones de blog.
{% module "post_listing" path="@hubspot/post_listing" %}
Parámetro | Tipo | Descripción | Predeterminado |
---|
select_blog | Blog | Seleccionar un blog para mostrarlo. Como valor predeterminado, se mostrará el blog actual cuando se use en una plantilla de blog, o el blog principal cuando se utilice en otros lugares. | |
listing_type | Opción | El tipo de índice para las publicaciones. Las opciones incluyen:recent : más reciente.popular_all_time : más popular de todos los tiempos.popular_past_year : más popular el año pasado.popular_past_six_months : más popular en los últimos seis meses.popular_past_month : más popular el mes pasado.
| recent |
list_title | Texto | Un encabezado H3. | "Recent Posts" |
max_links | Número | Número máximo de publicaciones que se mostrarán. | 5 |
Botón
Disponible en páginas, publicaciones de blog e índices de blog.
{% module "button" path="@hubspot/button" %}
Parámetro | Tipo | Descripción | Predeterminado |
---|
link | Enlace | La URL a la que redirecciona el botón. | { "url": { "type": "EXTERNAL", "href": "www.hubspot.com", "content_id": null }, "open_in_new_tab": false, "no_follow": false } |
button_text | Texto | Texto que se mostrará en el botón. | "Add a button link here" |
style | Objeto | override_default_style (booleano)
button_font (fuente)
button_color (color)
text_hover_color (color)
button_hover_color (color)
| { "override_default_style": false, "button_font": { "color": "#FFFFFF", "size_unit": "px" }, "button_color": { "color": "#000000", "opacity": 100 }, "text_hover_color": { "color": "#000000", "opacity": 100 }, "button_hover_color": { "color": "#CCCCCC", "opacity": 100 } } |
Llamada a la acción
Disponible en páginas, índices de blog y publicaciones de blog.
{% module "cta" path="@hubspot/cta" %}
Parámetro | Tipo | Descripción |
---|
guid | Cadena | Identificador único global de la CTA. |
Eliminar datos
A partir del 26 de mayo de 2025, este módulo ha quedado obsoleto en favor de la función de la página de solicitud de privacidad de datos.
La información de referencia de este módulo se ha trasladado a la documentación de los módulos obsoletos.
Divisor
Disponible en páginas. Hay una nueva versión de este módulo disponible en las cuentas creadas después del 25 de agosto de 2022. Más información sobre este cambio.
{% module "divider" path="@hubspot/divider" %}
Parámetro | Tipo | Descripción | Predeterminado |
---|
height | Número | Altura en píxeles (px) de la línea divisoria. | 1 |
width | Número | Porcentaje (%) de anchura de la línea divisoria. | 50 |
color | Color | Color (hexadecimal) y opacidad (número) de la línea divisoria. | { "color": "#000000", "opacity": 100 } |
line_type | Opción | Tipo de línea. Las opciones incluyen: | solid |
alignment | Opción | Alineación horizontal de la línea divisoria. Las opciones incluyen: | center |
show_padding | Booleano | Mostrar u ocultar los márgenes superior e inferior en el divisor. | false |
padding | Número | Valor en píxeles (px) del margen superior e inferior de la línea divisoria. Opción disponible cuando show_padding es igual a true . | 5 |
Descargar datos
A partir del 26 de mayo de 2025, este módulo ha quedado obsoleto en favor de la función de la página de solicitud de privacidad de datos.
La información de referencia de este módulo se ha trasladado a la documentación de los módulos obsoletos.
Disponible en páginas, publicaciones de blog e índices de blog.
{% module "form"
path="@hubspot/form"
form={
"form_id": "9e633e9f-0634-498e-917c-f01e355e83c6",
"response_type": "redirect",
"message": "Thanks for submitting the form.",
"redirect_id": null,
"redirect_url": "http://www.google.com"
}
%}
Parámetro | Tipo | Descripción | Predeterminado |
---|
title | Texto | Encabezado H3 | |
form | Objeto | Objeto formulario que incluye:form_id : el ID del formulario que se usaráresponse_type : lo que el visitante verá después de enviar el formulario:message : mensaje en línea si response_type se define como inline redirect_id : ID de la página a la que se redireccionará si response_type se define como redirect .redirect_url : URL a la que se redireccionará si response_type se define como redirect
| |
{ "form_id": "", "response_type": "redirect", "message": "Thanks for submitting the form.", "redirect_id": null, "redirect_url": "http://www.google.com" } | | | |
notifications_are_overridden | Booleano | Correo al que enviar la notificación en lugar de los valores predeterminados del formulario. | false |
notifications_override_email_addresses | Correo | Lista de comandos separados por comas para enviarlos cuando notifications_are_overridden es igual a true . | |
follow_up_type_simple | Booleano | Habilita el envío de un correo de seguimiento. | false |
simple_email_for_live_id | Correo de seguimiento | ID del correo de seguimiento. Disponible cuando follow_up_type_simple es igual a true . | |
sfdc_campaign | Campaña de Salesforce | Cuando la integración con Salesforce está activa, el ID de la campaña. | |
Encabezado
Disponible en páginas, índices de blog y publicaciones de blog.
{% module "header" path="@hubspot/header" %}
Parámetro | Tipo | Descripción | Predeterminado |
---|
value | Texto | Texto del encabezado. | "A clear and bold header" |
header_tag | Opción | Elige un nivel de encabezado. La opción incluye h1 a través de h6 . | h1 |
Espaciador horizontal
Disponible en páginas, índice de blog, publicaciones de blog y correos
{% module "horizontal_spacer" path="@hubspot/horizontal_spacer" %}
Ícono
Disponible en páginas, índices de blog y publicaciones de blog. Los íconos se pueden extraer de los conjuntos de íconos de Font Awesome 5.0.10 y 5.14.0.
{% module "icon" path="@hubspot/icon" %}
Parámetro | Tipo | Descripción | Predeterminado |
---|
name | Cadena | El nombre del ícono. | "hubspot" |
purpose | Opción | Una opción de accesibilidad que clasifica el propósito del ícono para los lectores de pantalla. Los valores disponibles son:decorative: ignorados por el lector de pantalla.semantic: leídos por el lector de pantalla.
| "decorative" |
title | Cadena | Una opción de accesibilidad que asigna un título al ícono. | |
style | Cadena | El tipo de ícono. Puede ser una de las siguientes: solid , regular , light , thin o duotone . | "solid" |
unicode | Cadena | El valor unicode del ícono. | f3b2 |
Imagen
Disponible en páginas, índices de blog y publicaciones de blog.
{% module "linked_image" path="@hubspot/linked_image" %}
Parámetro | Tipo | Descripción | Predeterminado |
---|
img | Imagen | Objeto imagen que contiene:src : URL de la imagenalt : texto alternativo para la imagenloading : las opciones de carga diferida incluyen:width : valor en píxelesheight : valor en píxeles
| { "src": "https://static.hubspot.com/final/img/content/email-template-images/placeholder_200x200.png", "alt": "placeholder_200x200", "loading": "disabled", "width": 200, "height": 200 } |
link | Texto | Enlace opcional para la imagen. | |
target | Booleano | Abre el enlace en una nueva pestaña. | false |
Cuadrícula de imágenes
Disponible en páginas, índices de blog y publicaciones de blog.
{% module "image_grid" path="@hubspot/image_grid", label="image_grid.module" %}
Parámetro | Tipo | Descripción | Predeterminado |
---|
slides | Objeto | Objeto que contiene información para cada diapositiva. El objeto contiene:img : URL de la imagen.link_url : URL donde se debe enlazar la diapositiva.hover_messages : texto que se superpone a la imagen al pasar el cursor por encima.
| [ { "show_caption": false, "open_in_new_tab": false } ] |
display_mode | Opción | Modo de visualización de la galería de imágenes. Las opciones incluyen:standard : control deslizante estándar.thumbnail : navegador de miniaturas.lightbox : galería lightbox.
| standard |
lightboxRows | Número | Número de filas en la galería lightbox cuando display_mode es igual a lightbox . | 3 |
loop_slides | Booleano | Permite recorrer las diapositivas en bucle con siguiente y anterior cuando display_mode es igual a standard o thumbnail . | true |
auto_advance | Booleano | Avanza automáticamente a la siguiente diapositiva cuando display_mode es igual a standard o thumbnail . | true |
num_seconds | Número | Cantidad de tiempo (segundos) entre el avance a la siguiente diapositiva cuando display_mode es igual a standard o thumbnail . | 5 |
show_pagination | Booleano | Mostrar botones de navegación cuando display_mode es igual a standard o thumbnail . | true |
sizing | Opción | Fija la altura de las diapositivas cuando display_mode es igual a standard o thumbnail . Las opciones incluyen:static : altura fija.resize : altura variable.
| static |
transition | Opción | Estilos de transición de diapositiva cuando display_mode es igual a standard o thumbnail . Las opciones incluyen:slide : transición de deslizamiento.fade : transición de desvanecimiento.
| slide |
caption_position | Opción | Posición de los subtítulos de la diapositiva cuando display_mode es igual a standard o thumbnail . Las opciones incluyen:below : mantener los subtítulos siempre debajo de la imagen.superimpose : superponer los subtítulos encima de las imágenes.
| below |
Galería de imágenes
Disponible en páginas, publicaciones de blog e índices de blog.
{% module "gallery" path="@hubspot/gallery" %}
Parámetro | Tipo | Descripción | Predeterminado |
---|
slides | Objeto | Objeto que contiene información para cada diapositiva. El objeto contiene:img : URL de la imagen.show_caption : valor booleano para mostrar los subtítulos de la diapositiva.caption : texto enriquecido para la leyenda.link_url : URL donde la diapositiva debe enlazarse.open_in_new_tab : valor booleano para indicar si el enlace debe abrirse en una nueva pestaña.
| [ { "show_caption": false, "open_in_new_tab": false } ] |
display_mode | Opción | Modo de visualización de la galería de imágenes. Las opciones incluyen:standard : control deslizante estándar.thumbnail : navegador de miniaturas.lightbox : galería lightbox.
| standard |
lightboxRows | Número | Número de filas en la galería lightbox cuando display_mode es igual a lightbox . | 3 |
loop_slides | Booleano | Permite recorrer las diapositivas en bucle con siguiente y anterior cuando display_mode es igual a standard o thumbnail . | true |
auto_advance | Booleano | Avanza automáticamente a la siguiente diapositiva cuando display_mode es igual a standard o thumbnail . | true |
num_seconds | Número | Cantidad de tiempo (segundos) entre el avance a la siguiente diapositiva cuando display_mode es igual a standard o thumbnail . | 5 |
show_pagination | Booleano | Mostrar botones de navegación cuando display_mode es igual a standard o thumbnail . | true |
sizing | Opción | Fija la altura de las diapositivas cuando display_mode es igual a standard o thumbnail . Las opciones incluyen:static : altura fija.resize : altura variable.
| static |
transition | Opción | Estilos de transición de diapositiva cuando display_mode es igual a standard o thumbnail . Las opciones incluyen:slide : transición de deslizamiento.fade : transición de desvanecimiento.
| slide |
caption_position | Opción | Posición de los subtítulos de la diapositiva cuando display_mode es igual a standard o thumbnail . Las opciones incluyen:below : mantener los subtítulos siempre debajo de la imagen.superimpose : superponer los subtítulos encima de las imágenes.
| below |
Galería de imágenes deslizable
Disponible en páginas, publicaciones de blog e índices de blog.
{% module "unique_name"
path="@hubspot/image_slider_gallery",
slides=[
{
"img": {
"src": "",
"alt": "Default image alt text"
},
"caption": "<strong>1</strong> An optional caption for the image that will be added to the gallery. Enter any descriptive text for this image that you would like visitors to be able to read.",
"link_url": ""
},
{
"img": {
"src": "",
"alt": "Default image alt text"
},
"caption": "<strong>2</strong> An optional caption for the image that will be added to the gallery. Enter any descriptive text for this image that you would like visitors to be able to read.",
"link_url": ""
}
]
slideshow_settings={
"slides": {
"per_page": 1,
"sizing": "natural",
"aspect_ratio": "16/9",
"show_captions": true,
"caption_position": "below"
},
"movement": {
"transition": "slide",
"loop_slides": false,
"auto_advance": false,
"auto_advance_speed_seconds": 5
},
"navigation": {
"show_main_arrows": true,
"show_thumbnails": false,
"show_dots": false
}
}
%}
Parámetro | Tipo | Descripción |
---|
slides | Grupo de campos | Un grupo de campos que contiene los siguientes campos:img : URL de la imagen.caption : texto enriquecido para el pie de imagen.link_url : URL con la que se enlaza la diapositiva.
|
slideshow_settings | Grupo de campos | El grupo de campos de configuración del control deslizante de la imagen. Incluye los siguientes grupos de campos:slides : ajustes de diapositivas, que incluyen:per_page : número de diapositivas por página.sizing : tamaño de la imagen.aspect_ratio : relación de aspecto de la imagen.show_captions : un valor booleano
movement : configuración del comportamiento del deslizamiento de imágenes.navigation : configuración de navegación por imágenes.
|
default_text | Grupo de campos | Los elementos de texto predeterminados del módulo, que incluyen:default_caption : subtítulo de la imagen.default_image_alt_text : texto de la imagen.slider_aria_label : la etiqueta ARIA predeterminada del módulo.arial_label_thumbnails : la miniatura ARIA predeterminada del módulo.slider_nav_aria_label : la etiqueta ARIA predeterminada de la barra de navegación del módulo.prev : texto de la diapositiva anterior.next : texto de la diapositiva siguiente.first : ir al texto de la primera diapositiva.slideX : ir al texto de la diapositiva X.pageX : ir al texto de la página X.play : iniciar texto de reproducción automática.pause : pausar texto de reproducción automática.carousel : texto del carrusel.select : texto para seleccionar una diapositiva para mostrarla.slide : texto de la diapositiva.slidelabel : etiqueta de la diapositiva.
|
Selector de idiomas
Disponible en páginas.
{% module "language_switcher" path="@hubspot/language_switcher" %}
Parámetro | Tipo | Descripción | Predeterminado |
---|
display_mode | Opción | El idioma del texto del selector de idiomas. Las opciones incluyen:pagelang : el nombre de los idiomas aparecerá en el idioma de la página en la que está el conmutador.localized : el nombre de cada idioma aparecerá en ese idioma.hybrid : una combinación de ambas opciones.
| localized |
Logotipo
Disponible en páginas, índices de blog y publicaciones de blog.
{% module "logo" path="@hubspot/logo" %}
Parámetro | Tipo | Descripción | Predeterminado |
---|
img | Imagen | Objeto imagen que contiene:override_inherited_src : anula el logotipo predeterminado desde la configuraciónsrc : URL de la imagenalt : texto alternativo para el logotipo
| { "override_inherited_src": false, "src": null, "alt": null } |
link | Texto | Enlace opcional para el logotipo. Si no se especifica ninguna URL, el logotipo se vinculará a la URL del logotipo en la configuración de la marca. | |
open_in_new_tab | Booleano | Abre el enlace en una nueva pestaña. | false |
suppress_company_name | Booleano | Ocultar el nombre de la empresa cuando no se selecciona una imagen. | true |
heading_level | Opción | Elegir un nivel de encabezado cuando no hay ninguna imagen seleccionada y suppress_company_name es igual a false Las opciones incluyen desde h1 hasta h6 . | h1 |
Cuadrícula del logotipo
Una cuadrícula personalizable de contenedores para mostrar los logotipos de manera uniforme. Disponible en páginas, índices de blog y publicaciones de blog.
{% module "logo grid"
path="@hubspot/logo_grid"
group_logos=[
{
"logo": {
"loading": "lazy",
"alt": "company_logo",
"src": "https://www.example.com/Logos/color/logo.png"
}
},
{
"logo": {
"loading": "lazy",
"alt": "company2_logo",
"src": "https://www.example.com/Logos/color/logo2.png"
}
},
{
"logo": {
"alt": "lorem-logo",
"height": 40,
"loading": "lazy",
"max_height": 40,
"max_width": 175,
"src": "https://www.example.com/Logos/color/logo3.png",
"width": 175
}
}
],
styles={
"group_logo": {
"group_background": {
"aspect_ratio": "1/1",
"background_color": {
"color": "#8E7CC3",
"opacity": 100
}
},
"group_spacing": {
"padding": {
"padding": {
"bottom": {
"units": "px",
"value": 75
},
"left": {
"units": "px",
"value": 75
},
"right": {
"units": "px",
"value": 75
},
"top": {
"units": "px",
"value": 75
}
}
}
},
"max_logo_height": 85
},
"group_logo_grid": {
"column_count": 3,
"grid_gap": 54
}
}
%}
Parámetro | Tipo | Descripción |
---|
group_logos | Matriz | Una matriz que contiene un objeto para cada logotipo en la cuadrícula. |
logo | Objeto | En group_logos , un objeto para cada logotipo en la cuadrícula. Cada logotipo puede incluir los siguientes parámetros:src : la ruta del archivo del logotipo.loading : el comportamiento de la carga diferida del logotipo.alt : el texto alternativo del logotipo.height : la altura del logotipo.width : la anchura del logotipo.max_height : la altura máxima del logotipo.max_width : la anchura máxima del logotipo.
|
styles | Matriz | Una matriz que contiene los campos de estilo que afectan a la disposición de la cuadrícula, a los contenedores de logotipos y a las imágenes de logotipos. Esta matriz contiene los siguientes grupos de estilos:group_logo : estilos que afectan a los contenedores e imágenes de logotipos. Contiene lo siguiente:group_background : estilos que definen la relación de aspecto y el color de fondo de los contenedores de cuadrícula. Las relaciones de aspecto incluyen: 1/1 , 4/3 , 16/9 .group_spacing : estilos que definen el relleno interior del contenedor del logotipo. Para logotipos más anchos, un valor de relleno más alto puede disminuir la anchura del logotipo.max_logo_height : la altura máxima de cada logotipo.
group_logo_grid : estilo que define la disposición de la cuadrícula, incluidos:column_count : el número de columnas de la cuadrícula.grid_gap : el espaciado entre los elementos de la cuadrícula.
|
Reuniones
Disponible en páginas, publicaciones de blog e índices de blog.
{% module "meetings" path="@hubspot/meetings" %}
Parámetro | Tipo | Descripción |
---|
meeting | Reunión | Seleccionar un enlace de reunión. |
Inicios de sesión de redes sociales para membresías
Proporciona opciones de inicio de sesión de Google y Facebook para las páginas de membresía. El usuario debe iniciar sesión con una cuenta vinculada a la dirección de correo electrónico del registro de contacto en el CRM. Puedes elegir qué opciones de inicio de sesión con redes sociales deseas habilitar.
Disponible en páginas de inicio de sesión de membresías.
{% module "social" path="@hubspot/membership_social_logins",
clientid=""
appid=""
facebook_enabled=true
google_enabled=true
%}
Parámetro | Tipo | Descripción | Predeterminado |
---|
facebook_appid | Cadena | El ID de tu aplicación de Facebook. | |
facebook_enabled | Booleano | Activar el botón de inicio de sesión de Facebook facebook_appid es obligatorio. | False |
google_clientid | Cadena | Tu ID de cliente de Google. | |
google_enabled | Booleano | Activar el botón de inicio de sesión de Google. google_clientid es obligatorio. | False |
Menú
Disponible en páginas, publicaciones de blog e índices de blog.
Si quieres crear tu propio menú personalizado, Prueba la función menu().
{% module "menu" path="@hubspot/menu" %}
Parámetro | Tipo | Descripción | Predeterminado |
---|
id | Menú | ID del menú. | |
root_type | Opción | Tipo de menú avanzado. Las opciones incluyen:site_root : mostrar siempre las páginas de nivel superior en el menú.top_parent : mostrar las páginas del menú que están relacionadas con la sección que se está viendo.parent : mostrar las páginas del menú que están relacionadas con la página que se está viendo.breadcrumb : menú de ruta al estilo de navegación (usa flujo horizontal).
| site_root |
max_levels | Opción | Determina el número de árboles de menú secundarios que se pueden expandir en el menú. Las opciones incluyen del 1 al 10 | 2 |
flow | Opción | Orientación del menú. Las opciones incluyen: | horizontal |
flyouts | Booleano | Función de habilitación con el cursor encima en los elementos del menú secundario. | true |
Pie de página
Disponible en páginas, índices de blog y publicaciones de blog.
{% module "page_footer" path="@hubspot/page_footer" %}
Solicitud de contraseña
Disponible en páginas, publicaciones de blog e índices de blog.
{% module "password_prompt" path="@hubspot/password_prompt" %}
Parámetro | Tipo | Descripción | Predeterminado |
---|
submit_button_text | Texto | Texto que aparece en el botón de envío. | "Submit" |
password_placeholder | Texto | : Texto del marcador de posición para el campo de contraseña. | "Password" |
bad_password_message | Texto enriquecido | Mensaje para mostrar cuando se introduce una contraseña incorrecta. | "Sorry, please try again. " |
Pagos
Disponible en páginas, publicaciones de blog e índices de blog.
{% module "payments" path="@hubspot/payments" %}
Parámetro | Tipo | Descripción | Predeterminado |
---|
payment | Cadena | Para configurar el módulo para que utilice un enlace de pago específico, debes incluir el ID del enlace de pago. Puedes encontrar el ID en la URL mientras editas el enlace de pago. | |
checkout_location | Cadena | Define si el formulario de pago se abre en una nueva pestaña o en una ventana emergente. Los valores disponibles son:new_tab : abre el formulario de pago en una nueva pestaña.overlay : abre el formulario de pago en una ventana emergente deslizante.
| "new_tab" |
button_text | Cadena | Definir el texto del botón de pago. | "Checkout" |
button_target | Opción | Si el botón utiliza un enlace de pago de HubSpot o un enlace externo. Las opciones incluyen: | "payment_link" |
button_link | Enlace | Cuando button_target se define como custom_link , define el destino del enlace externo. Los tipos de enlaces compatibles incluyen: | EXTERNAL |
Producto
Muestra un producto de la biblioteca de productos de la cuenta. Disponible en páginas, publicaciones de blog e índices de blog.
{% module
path="@hubspot/product",
product={
"id" : 2124070179
},
group_button={
"button_text" : "Buy",
"override_product_button" : true,
"button_override" : {
"no_follow" : false,
"open_in_new_tab" : false,
"sponsored" : false,
"url" : {
"href" : "https://www.test.com",
"type" : "EXTERNAL"
}
},
group_description={
"description_override" : "Monthly gym membership with access to shared locker facilities.",
"override_product_description" : true
},
group_name={
"heading_level" : "h3",
"name_override" : "Gym membership",
"override_product_name" : true
},
group_image={
"image_override" : {
"alt" : "360_F_317724775_qHtWjnT8YbRdFNIuq5PWsSYypRhOmalS",
"height" : 360,
"loading" : "lazy",
"src" : "https://2272014.fs1.hubspotusercontent-na1.net/hubfs/2272014/360_F_317724775_qHtWjnT8YbRdFNIuq5PWsSYypRhOmalS.jpg",
"width" : 640
},
"override_product_image" : true
}
%}
Parámetro | Tipo | Descripción |
---|
product | Producto | El producto que se mostrará, especificado por ID de producto. |
group_button | Grupo de campos | De forma predeterminada, el módulo incluye un botón que dirige a los usuarios a la URL fijada para el producto. Para personalizar el destino del botón, incluye este grupo de campos opcionales junto con los siguientes campos:button_text : una cadena que define el texto del botón.override_product_button : se define como true para anular la configuración predeterminada del enlace del botón. Luego, incluye el objeto button_override . Más información sobre button_override abajo.
|
button_override | Objeto | En el grupo de objetos group_button define el comportamiento de la URL del botón cuando override_product_button se define como true . Incluye los siguientes campos:no_follow : campo booleano para el comportamiento no_follow del enlace.open_link_in_new_tab : campo booleano para el comportamiento del enlace abierto.url : un objeto que especifica el destino del botón. En el campo url , puedes definir el tipo de destino a través del campo type , que admite los siguientes tipos de contenidos:EXTERNAL : una URL estándar. Incluir la URL en un campo href .CONTENT : una página de HubSpot. Incluir el ID de la página en un campo content_id .PAYMENT : un enlace de pago. Incluir el enlace de pago en un campo href .EMAIL_ADDRESS : una dirección de correo electrónico. Incluir la dirección en un campo href .
|
group_name | Grupo de campos | De forma predeterminada, el módulo mostrará el nombre del producto en la parte superior del módulo como un h3. Para personalizar el nombre, incluye este grupo de campos opcionales junto con los siguientes campos:heading_level : el tamaño del encabezado. Puede ser del h1 al h6 .override_product_name : se define como true para especificar texto en lugar del nombre del producto.name_override : la cadena que quieres mostrar en la parte superior del módulo.
|
group_description | Grupo de campos | De forma predeterminada, el módulo mostrará la descripción del conjunto del producto. Para personalizar la descripción, incluye este grupo de campos opcionales junto con los siguientes campos:override_product_description : definir como true para personalizar la descripción del producto.description_override : una cadena que contiene la nueva descripción.
|
group_image | Grupo de campos | De forma predeterminada, el módulo mostrará la imagen seleccionada para el producto. Para personalizar esta imagen, incluye este grupo de campos opcionales con los siguientes campos:override_product_image : definir como true para especificar una nueva imagen. image_override : un objeto que especifica la nueva imagen, incluyendo las siguientes propiedades:
|
Descarga de cotizaciones
Disponible en las plantillas de cotización.
{% module "download" path="@hubspot/quote_download" %}
Parámetro | Tipo | Descripción | Predeterminado |
---|
button_text | Cadena | El texto que se muestra en el botón de descarga. | Download |
download_error | Cadena | Mensaje de error que se muestra si falla la descarga. | There was a problem downloading the quote. Please try again. |
Pago de cotizaciones
Disponible en las plantillas de cotización.
{% module "payment" path="@hubspot/quote_payment" %}
Parámetro | Tipo | Descripción | Predeterminado |
---|
heading_text | Cadena | El encabezado que aparece encima de la sección de pago de una plantilla de cotización. | Payment |
heading_tag | Opción | El tipo de encabezado utilizado para mostrar heading_text . Los valores incluyen: h1 , h2 , h3 , h4 , h5 , h6 . | h3 |
checkout | Cadena | El texto del botón de pago. | Pay now |
needs_signature | Cadena | Texto del botón cuando se requiere una firma. | Payment can't be made because the quote isn't fully signed. |
checkout_error | Texto enriquecido | Mensaje que se muestra cuando hay un error durante el pago. | There was a problem setting up checkout. Please contact the person who sent you this quote. |
payment_status_error | Texto enriquecido | Mensaje que se muestra cuando hay un error al intentar realizar un pago. | There was a problem loading the payment status for this quote. Please try refreshing the page. |
paid | Cadena | Un indicador de estado de pago hecho correctamente. | Paid |
payment_processing | Cadena | Un indicador de estado del procesamiento de un pago. | Payment processing |
Firma de cotizaciones
Disponible en las plantillas de cotización.
{% module "signature" path="@hubspot/quote_signature" %}
Cuando una cotización requiere una firma electrónica, los siguientes campos están disponibles dentro de un objeto esignature
:
Parámetro | Tipo | Descripción | Predeterminado |
---|
pretext | Texto enriquecido | Texto explicativo de la firma electrónica. | Before you sign this quote, an email must be sent to you to verify your identity. Find your profile below to request a verification email. |
verify_button | Cadena | Texto que aparece en el botón de verificación. | Verify to sign |
failure | Cadena | Texto de alerta que aparece cuando no se puede obtener la información de la firma. | There was a problem retrieving the signature information. Please reload the page. |
verification_sent | Cadena | Un indicador de estado que aparece cuando la solicitud de verificación se envió correctamente al firmante de la cotización. | Verification sent |
signed | Cadena | Texto que se muestra cuando la cotización fue firmada correctamente. | Signed |
Cuando una cotización requiere una firma impresa, los siguientes campos están disponibles dentro de un objeto print_signature
:
Parámetro | Tipo | Descripción | Predeterminado |
---|
header | Texto enriquecido | Texto que se muestra en la parte superior de la sección de la firma. | Signature |
signature | Cadena | Texto que se muestra junto al campo de firma. | Signature |
date | Cadena | Texto que se muestra junto al campo de fecha. | Date |
printed_name | Cadena | Texto que se muestra junto al campo del nombre impreso. | Printed name |
countersignature | Objeto | Un objeto que contiene el contenido para la sección de contrafirma Este objeto puede contener los siguientes campos:header : texto que se muestra en la parte superior de la sección de refrendo.countersignature : texto que se muestra junto al campo de refrendo.date : texto que se muestra junto al campo de fecha.printed_name : texto que se muestra junto al campo del nombre impreso.
| Signed |
Elementos de pedido
Disponible en las plantillas de cotización. Este módulo también incluye el texto predeterminado utilizado en las cotizaciones personalizadas.
{% module "module_165350106057652" path="@hubspot/line_items", label="line_items.module" %}
Parámetro | Tipo | Descripción | Predeterminado |
---|
title | Texto | El título de la columna del elemento de pedido. | Column description |
use_additional_product_property | Booleano | Mostrar casilla de verificación para permitir a los usuarios seleccionar columnas de elementos de pedido adicionales de las propiedades del producto. | False |
additional_product_properties | Opción | Una propiedad de producto. Las opciones incluyen: price : precio de elemento de pedido. item_description : descripción de elemento de pedido. quantity : número de elementos de pedido. amount : precio total de elementos de pedido. hs_recurring_billing_start_date : fecha de inicio de facturación para elementos de pedido recurrentes. discount : la cantidad del descuento que se aplica al elemento de pedido.
| |
crm_product_property | Propiedad de objeto del CRM | Seleccionar cualquier propiedad de producto para que aparezca como un encabezado de columna de elemento de pedido. | |
Texto enriquecido
Disponible en todos los tipos de plantillas.
{% module "rich_text" path="@hubspot/rich_text" %}
Parámetro | Tipo | Descripción | Predeterminado |
---|
html | Texto enriquecido | Bloque HTML. | ## Something Powerful \n ### Tell The Reader More \n The headline and subheader tells us what you're [offering](https://developers.hubspot.es/docs\"#\"), and the form header closes the deal. Over here you can explain why your offer is so great it's worth filling out a form for. \n Remember: \n<ul>\n<li>Bullets are great</li>\n<li>For spelling out [benefits](https://developers.hubspot.es/docs\"#\") and</li>\n<li>Turning visitors into leads.</li>\n</ul> |
Disponible en páginas, índices de blog y publicaciones de blog.
{% module "rss_listing" path="@hubspot/rss_listing" %}
Parámetro | Tipo | Descripción | Predeterminado |
---|
title | Texto | Un encabezado H3. | "Test" |
rss_feed_type | Opción | Tipo de fuente RSS. Las opciones incluyen:blog - Blog alojado en HubSpot.external - Una fuente RSS externa.
| blog |
rss_url | Texto | URL de RSS que se usará cuando rss_feed_type es igual a external . | |
content_group_id | Blog | ID del blog que se usará cuando rss_feed_type es igual a blog . | |
topic_id | Etiqueta | (opcional) ID de la etiqueta con la que filtrar cuando rss_feed_type es igual a blog . | |
number_of_items | Número | Número máximo de publicaciones que se mostrarán. | 5 |
include_featured_image | Booleano | Incluir la imagen destacada. | false |
show_author | Booleano | Mostrar el nombre del autor. | true |
attribution_text | Texto | Texto que atribuye un autor a una publicación. Se muestra cuando show_author es igual a true . | "by" |
show_detail | Booleano | Mostrar el texto de resumen de la publicación. | true |
limit_to_chars | Número | Limita la extensión del texto de resumen cuando show_detail es igual a true . | 200 |
click_through_text | Texto | El texto que se mostrará para el enlace de redireccionamiento al final del resumen de una publicación cuando show_detail es igual a true . | "Read more" |
show_date | Booleano | Mostrar fecha de publicación. | true |
publish_date_format | Opción | Formato de la fecha de publicación cuando show_date es igual a true . Las opciones incluyen:short (ejemplo: 11/06/06 12:00)medium (ejemplo: 6 de junio de 2006 12:00:00)long (ejemplo: 6 de junio de 2017 12:00:00 EDT)MMMM d, yyyy 'at' h:mm a (ejemplo: 6 de junio de 2006 a las 12:00)h:mm a 'on' MMMM d, yyyy (ejemplo: 12:00 del 6 de junio de 2006)
| short |
publish_date_text | Texto | El texto que indica cuándo se publicó una entrada cuando show_date es igual a true . | "posted at" |
Disponible en páginas, publicaciones de blog e índices de blog.
{% module "search_input" path="./local-search_input"
placeholder="Search"
include_search_button=true
results={
"use_custom_search_results_template": "true",
"path_id": "77977569400"
}
%}
Parámetro | Tipo | Descripción | Predeterminado |
---|
field_label | Texto | Texto de etiqueta de entrada de búsqueda | |
placeholder | Texto | Texto del marcador de posición para el campo de entrada. | "Search" |
include_search_button | Booleano | Incluir un botón de búsqueda. | false |
content_types | Objeto | Qué tipos de contenido incluir en los resultados de búsqueda. El objeto contiene las siguientes claves con valores booleanos:website_pages landing_pages blog_posts knowledge_articles
| { "website_pages": true, "landing_pages": false, "blog_posts": true, "knowledge_articles": false } |
results | Objeto | Un objeto que habilita los controles para usar una página de resultados de búsqueda personalizada. Incluye las siguientes propiedades:
use_custom_search_results_template (booleano): cuando se define como true , los usuarios pueden seleccionar una página de resultados de búsqueda personalizada. El valor predeterminado es false .path_id (cadena): el ID de la página que se utilizará para los resultados de búsqueda. La página referenciada debe contener el módulo de resultados de búsqueda.
| |
Resultados de la búsqueda
Disponible en páginas, publicaciones de blog e índices de blog.
{% module "search_results" path="@hubspot/search_results" %}
Parámetro | Tipo | Descripción | Predeterminado |
---|
display_featured_images | Booleano | Mostrar imágenes destacadas para los elementos. | false |
Encabezado de la sección
Disponible en páginas, índices de blog y publicaciones de blog.
{% module "section_header" path="@hubspot/section_header" %}
Parámetro | Tipo | Descripción | Predeterminado |
---|
header | Texto | Contenido del encabezado de la sección. | "A clear and bold header" |
heading_level | Opción | Nivel de encabezado para header . Las opciones incluyen desde h1 hasta h6 . | h1 |
subheader | Texto | Texto del párrafo del subencabezado para la sección. | "A more subdued subheader" |
Menú simple
Disponible en páginas, índices de blog y publicaciones de blog.
{% module "simple_menu" path="@hubspot/simple_menu" %}
Parámetro | Tipo | Descripción | Predeterminado |
---|
menu_tree | Menú simple | Objeto de menú simple. | [] |
orientation | Opción | Orientación del menú. Las opciones incluyen: | horizontal |
Seguimiento en redes sociales
Agrega enlaces a tus perfiles de redes sociales, reordenando mediante la función de arrastrar y soltar en el editor de contenido. Inserta automáticamente íconos basados en la URL de la red social, pero estos pueden anularse.
Disponible en páginas, índices de blog y publicaciones de blog.
{% module "social_follow" path="@hubspot/social_follow" %}
Parámetro | Tipo | Descripción | Predeterminado |
---|
link | Texto | El enlace de destino para la página de redes sociales agregada en el editor. | |
open_in_new_window | Booleano | Cuando se define como false , el enlace se abrirá en la misma pestaña del navegador. | true |
is_podcast | Booleano | Se define como true para que aparezca un ícono de pódcast en lugar de un ícono predeterminado o personalizado. | false |
customize_alt_text | Booleano | De forma predeterminada, el texto alternativo se genera automáticamente. Si se define como true , puedes anular el texto alternativo predeterminado con un valor personalizado usando el campo aria_label . | false |
aria-label | Cadena | Cuando customize_alt_text es true , este campo define el texto alternativo del ícono (por ejemplo, Follow us on Facebook ). Los lectores de pantalla lo usan para describirles el ícono a usuarios con discapacidad visual. | False |
customize_icon | Booleano | De forma predeterminada, los íconos se rellenan automáticamente según la URL del enlace. Cuando se define como true , puedes usar el campo custom_icon para seleccionar uno de los otros íconos proporcionados (Font Awesome 6.4.2). | false |
custom_icon | Ícono | Cuando customize_icon es true y is_podcast es false , utiliza este campo para especificar un ícono personalizado del conjunto proporcionado. Los íconos disponibles son de Font Awesome 6.4.2. | |
Compartir en redes sociales
Disponible en páginas, índices de blog y publicaciones de blog.
{% module "social_sharing" path="@hubspot/social_sharing" %}
Nota: La variable social_link_url
en la columna predeterminada que aparece abajo es el mismo valor que el parámetro link
.
Parámetro | Tipo | Descripción | Predeterminado |
---|
link | Texto | Este es el enlace de destino que se acortará para compartirlo más fácilmente en las redes sociales. | |
facebook | Objeto | Objeto que contiene:enabled : valor booleano para activar el elemento de redes socialescustom_link_format : URL personalizada para la URL del usuario que comparte en las redes sociales
| { "enabled": false, "custom_link_format": "http://www.facebook.com/share.php?u={{ social_link_url }}" } |
twitter | Objeto | Objeto que contiene:enabled : valor booleano para activar el elemento de redes socialescustom_link_format : URL personalizada para la URL del usuario que comparte en las redes sociales
| { “enabled”: false, “custom_link_format”: “https://twitter.com/intent/tweet?original_referer=\{\{ social_link_url }}&url={{ social_link_url }}&source=tweetbutton&text={{ social_page_title|urlencode }}” } |
linkedin | Objeto | Objeto que contiene:enabled : valor booleano para activar el elemento de redes socialescustom_link_format : URL personalizada para la URL del usuario que comparte en las redes sociales
| { "enabled": false, "custom_link_format": "http://www.linkedin.com/shareArticle?mini=true&url={{ social_link_url }}" } |
pinterest | Objeto | Objeto que contiene:enabled : valor booleano para activar el elemento de redes sociales.custom_link_format : URL personalizada para la URL del usuario que comparte en las redes sociales.pinterest_media : objeto Imagen que incluye:src : URL de imagen.alt : texto alternativo de la imagen.
| { "enabled": false, "custom_link_format": "http://pinterest.com/pin/create/button/?url={{ social_link_url }}&media={{ pinterest_media }}", "pinterest_media": { "src": "", "alt": null } } |
email | Objeto | Objeto que contiene:enabled : valor booleano para activar el elemento de redes socialescustom_link_format : URL personalizada para la URL del usuario que comparte en las redes sociales
| { "enabled": false, "custom_link_format": "mailto:?subject=Check out {{ social_link_url }} &body=Check out {{ social_link_url }}" } |
Tarjeta con pestañas
Disponible en páginas, índices de blog y publicaciones de blog.
{% module
path="@hubspot/tabbed_card",
tabs=[
{
"content" : "<p>This is the descriptive text contained in tab 1.</p>",
"tab_label" : "Tab 1 label"
},
{
"content" : "<p>This is the descriptive text contained in tab 2.</p>",
"tab_label" : "Tab 2 label"
}
],
fixed_height=false
%}
Parámetro | Tipo | Descripción | Predeterminado |
---|
tabs | Grupo de campos | Un grupo de campos que contiene la etiqueta de la pestaña y el contenido del texto de cada pestaña. Contiene los siguientes campos:tab_label : la etiqueta de la pestaña.content : el contenido del texto enriquecido de la pestaña.
| "Some additional information in one line" |
fixed_height | Booleano | De forma predeterminada, las pestañas tendrán una altura fija para que la altura del contenedor permanezca igual al cambiar entre pestañas. Puedes definirlo como false si quieres que la altura del contenedor de tarjetas con pestañas se base en el contenido de la pestaña activa. | False |
Una línea de texto
Disponible en páginas, índices de blog y publicaciones de blog.
{% module "text" path="@hubspot/text" %}
Parámetro | Tipo | Descripción | Predeterminado |
---|
value | Texto | Agrega el texto a este parámetro. | "Some additional information in one line" |
Video
Disponible en páginas, índices de blog y publicaciones de blog.
{% module "video" path="@hubspot/video" %}
Parámetro | Tipo | Descripción | Predeterminado |
---|
video_type | Opción | Tipo de video. Las opciones incluyen:embed : insertar código de una fuente externa.hubspot_video : video alojado en HubSpot.
| embed |
hubspot_video | Reproductor de video | Video alojado en HubSpot. Se utiliza cuando video_type es igual a hubspot_video . | |
embed_field | Inserción | Incluye los tipos de inserción:oembed html : código de inserción de video.
| |
oembed_thumbnail | Imagen | Anula la imagen en miniatura insertada cuando video_type es igual a embed y embed_field es igual a oembed . | |
style_options | Objeto | Objeto que contiene oembed_thumbnail_play_button_color - Campo de color. | {"oembed_thumbnail_play_button_color":"#ffffff"} |
placeholder_fields | Objeto | Objeto que contiene:placeholder_title : campo de texto.placeholder_description : campo de texto.
| {"placeholder_title":"No video selected", "placeholder_description":"Select a video type in the sidebar."} |
Inserción de video (landing page)
Disponible en páginas.
{% module "video_embed_lp" path="@hubspot/video_embed_lp" %}
Parámetro | Tipo | Descripción | Predeterminado |
---|
url | Texto | URL de video. Las URL de Vimeo y YouTube son compatibles. | "https://www.youtube.com/watch?v=X1Rr5BFO5rg" |
is_full_width | Booleano | Reproducir el video en ancho completo (true ) o fijar manualmente la anchura y la altura (false ). | true |
max_width | Número | Anchura máxima (px) | 800 |
max_height | Número | Altura máxima (px) | 450 |
Enlace de WhatsApp
Disponible en páginas, publicaciones de blog y páginas de índice de blog. Requiere un canal de WhatsApp conectado.
{% module "whatsapp_link" path="@hubspot/whatsapp_link", label="whatsapp_link" %}
Parámetro | Tipo | Descripción | Predeterminado |
---|
whatsapp_number | URL | Seleccionar uno de los canales de WhatsApp conectados a la cuenta. | |
optin_text | Opción | El texto para darse de alta y de baja. | |
whatsapp_display | Opción | Seleccionar si el botón muestra texto, un ícono de WhatsApp o ambos. Las opciones incluyen: | text_and_icon |
icon_position | Opción | La posición del ícono en el botón. Las opciones incluyen left y right . | left |
button_text | Cadena | El texto del botón. | Chat on WhatsApp |
whatsapp_icon_title | Cadena | El texto del ícono para los lectores de pantalla. | WhatsApp Icon |