Etiquetas estándar de HubL

Last updated:

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 construyendo áreas de arrastrar y soltar, descubre más información sobre las etiquetas de área 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ódulo predeterminado. Los módulos se pueden utilizar dentro de dnd_areas y columnas flexibles lo que los hace más potentes y fáciles de usar que las etiquetas que se ven aquí.

Comentarios del blog

Una etiqueta de comentarios del blog muestra el código de incrustación de los comentarios en una plantilla de blog. Este código Javascript incrustado carga el formulario de comentarios y los comentarios, según la configuración de su sitio web.

Blog Comment Form module: {% blog_comments "blog_comments" overrideable=False, label="Blog Comments" %} Blog Comment Count module: {% blog_comments "blog_comments" %} Blog Comment listing for specific blog: {% blog_comments "default_blog_comments" select_blog="359485112" %}Blog Commment Form Output: <span id="hs_cos_wrapper_blog_comments" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_blog_comments" style="" data-hs-cos-general-type="widget" data-hs-cos-type="blog_comments"> <div class="section post-footer"> <div id="comments-listing" class="new-comments no-comments"></div> <div id="hs-comment-embed" style="display:none;"></div> <div id="comment-form" class="new-comments"> <form novalidate="" accept-charset="UTF-8" action="https://api.hubapi.com/comments/v3/comment?portalId=311600" enctype="multipart/form-data" id="hsForm_d30edada-82e4-4a69-aaf4-a9d0376f37e6" method="POST" class="hs-form stacked" data-form-id="d30edada-82e4-4a69-aaf4-a9d0376f37e6" data-portal-id="311600" data-reactid=".hbspt-forms-0"> <div data-reactid=".hbspt-forms-0.0:$0"> <div class="hs_email field hs-form-field" data-reactid=".hbspt-forms-0.0:$0.$email"> <label class="" placeholder="Enter your Email" for="email-d30edada-82e4-4a69-aaf4-a9d0376f37e6" data-reactid=".hbspt-forms-0.0:$0.$email.0"> <span data-reactid=".hbspt-forms-0.0:$0.$email.0.0">Email</span><span class="hs-form-required" data-reactid=".hbspt-forms-0.0:$0.$email.0.1">*</span> </label> <legend class="hs-field-desc" style="display:none;" data-reactid=".hbspt-forms-0.0:$0.$email.1"> </legend> <div class="input" data-reactid=".hbspt-forms-0.0:$0.$email.$email"> <input id="email-d30edada-82e4-4a69-aaf4-a9d0376f37e6" class="hs-input" type="email" name="email" required="" placeholder="" value="" data-reactid=".hbspt-forms-0.0:$0.$email.$email.0"> </div> </div> </div> <div data-reactid=".hbspt-forms-0.0:$1"> <div class="hs_website field hs-form-field" data-reactid=".hbspt-forms-0.0:$1.$website"> <label class="" placeholder="Enter your Website" for="website-d30edada-82e4-4a69-aaf4-a9d0376f37e6" data-reactid=".hbspt-forms-0.0:$1.$website.0"> <span data-reactid=".hbspt-forms-0.0:$1.$website.0.0">Website</span> </label> <legend class="hs-field-desc" style="display:none;" data-reactid=".hbspt-forms-0.0:$1.$website.1"></legend> <div class="input" data-reactid=".hbspt-forms-0.0:$1.$website.$website"> <input id="website-d30edada-82e4-4a69-aaf4-a9d0376f37e6" class="hs-input" type="text" name="website" value="" placeholder="" data-reactid=".hbspt-forms-0.0:$1.$website.$website.0"> </div> </div> </div> <div data-reactid=".hbspt-forms-0.0:$2"> <div class="hs_comment field hs-form-field" data-reactid=".hbspt-forms-0.0:$2.$comment"> <label class="" placeholder="Enter your Comment" for="comment-d30edada-82e4-4a69-aaf4-a9d0376f37e6" data-reactid=".hbspt-forms-0.0:$2.$comment.0"> <span data-reactid=".hbspt-forms-0.0:$2.$comment.0.0">Comment</span> <span class="hs-form-required" data-reactid=".hbspt-forms-0.0:$2.$comment.0.1">*</span> </label> <legend class="hs-field-desc" style="display:none;" data-reactid=".hbspt-forms-0.0:$2.$comment.1"></legend> <div class="input" data-reactid=".hbspt-forms-0.0:$2.$comment.$comment"> <textarea id="comment-d30edada-82e4-4a69-aaf4-a9d0376f37e6" class="hs-input" name="comment" required="" placeholder="" data-reactid=".hbspt-forms-0.0:$2.$comment.$comment.0"></textarea> </div> </div> </div> <div data-reactid=".hbspt-forms-0.0:$3"> <div class="hs_subscribe field hs-form-field" data-reactid=".hbspt-forms-0.0:$3.$subscribe"> <label class="" placeholder="Enter your Subscribe to follow-up comments for this post" for="subscribe-d30edada-82e4-4a69-aaf4-a9d0376f37e6" data-reactid=".hbspt-forms-0.0:$3.$subscribe.0"> <span data-reactid=".hbspt-forms-0.0:$3.$subscribe.0.0"></span> </label> <legend class="hs-field-desc" style="display:none;" data-reactid=".hbspt-forms-0.0:$3.$subscribe.1"></legend> <div class="input" data-reactid=".hbspt-forms-0.0:$3.$subscribe.$subscribe"> <ul class="inputs-list" data-reactid=".hbspt-forms-0.0:$3.$subscribe.$subscribe.0"> <li class="hs-form-booleancheckbox" data-reactid=".hbspt-forms-0.0:$3.$subscribe.$subscribe.0.0"> <label for="subscribe-d30edada-82e4-4a69-aaf4-a9d0376f37e6" class="hs-form-booleancheckbox-display" data-reactid=".hbspt-forms-0.0:$3.$subscribe.$subscribe.0.0.0"> <input id="subscribe-d30edada-82e4-4a69-aaf4-a9d0376f37e6" class="hs-input" type="checkbox" name="subscribe" value="true" data-reactid=".hbspt-forms-0.0:$3.$subscribe.$subscribe.0.0.0.0"> <span data-reactid=".hbspt-forms-0.0:$3.$subscribe.$subscribe.0.0.0.1">Subscribe to follow-up comments for this post</span> </label> </li> </ul> </div> </div> </div> <div data-reactid=".hbspt-forms-0.0:$4"> <div class="hs_lifecyclestage field hs-form-field" style="display:none;" data-reactid=".hbspt-forms-0.0:$4.$lifecyclestage"> <label class="" placeholder="Enter your Lifecycle Stage" for="lifecyclestage-d30edada-82e4-4a69-aaf4-a9d0376f37e6" data-reactid=".hbspt-forms-0.0:$4.$lifecyclestage.0"> <span data-reactid=".hbspt-forms-0.0:$4.$lifecyclestage.0.0">Lifecycle Stage</span> </label> <legend class="hs-field-desc" style="display:none;" data-reactid=".hbspt-forms-0.0:$4.$lifecyclestage.1"></legend> <div class="input" data-reactid=".hbspt-forms-0.0:$4.$lifecyclestage.$lifecyclestage"> <input name="lifecyclestage" class="hs-input" type="hidden" value="subscriber" data-reactid=".hbspt-forms-0.0:$4.$lifecyclestage.$lifecyclestage.0"> </div> </div> </div> <div class="hs_submit" data-reactid=".hbspt-forms-0.2"> <div class="hs-field-desc" style="display:none;" data-reactid=".hbspt-forms-0.2.0"></div> <div class="actions" data-reactid=".hbspt-forms-0.2.1"> <input type="submit" value="Submit Comment" class="hs-button primary" data-reactid=".hbspt-forms-0.2.1.0"> </div> </div> <input name="hs_context" type="hidden" value="{&quot;rumScriptExecuteTime&quot;:1396.815,&quot;rumServiceResponseTime&quot;:7737.500000000001,&quot;rumFormRenderTime&quot;:187.17999999999938,&quot;rumTotalRenderTime&quot;:7738.14,&quot;rumTotalRequestTime&quot;:183.2549999999992,&quot;pageUrl&quot;:&quot;http://311600.hs-sites.com/-temporary-slug-5eccb1d9-1f1b-4bbd-8e19-00e198331b15?hs_preview=ALicr-ma-4312320350&quot;,&quot;pageTitle&quot;:&quot;HubSpot Sales Professional User Guide: HubSpot Sales Professional Overview&quot;,&quot;source&quot;:&quot;FormsNext-static-1.390&quot;,&quot;isHostedOnHubspot&quot;:true,&quot;timestamp&quot;:1479135449193,&quot;userAgent&quot;:&quot;Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.71 Safari/537.36&quot;,&quot;referrer&quot;:&quot;&quot;,&quot;hutk&quot;:&quot;a525e671c25f6b108d25e08c892e359e&quot;,&quot;originalEmbedContext&quot;:{&quot;portalId&quot;:&quot;311600&quot;,&quot;formId&quot;:&quot;d30edada-82e4-4a69-aaf4-a9d0376f37e6&quot;,&quot;target&quot;:&quot;#comment-form&quot;,&quot;redirectUrl&quot;:&quot;http://www.hubspot.com/contact-sales/thanks/&quot;,&quot;pageId&quot;:&quot;23423&quot;,&quot;pageName&quot;:&quot;My great landing page&quot;,&quot;css&quot;:&quot;.your-custom-css {background-color: #fe7722}&quot;,&quot;requiredCss&quot;:&quot;.my-custom-error-msgs {border-radius: 3px;}&quot;,&quot;submitButtonClass&quot;:&quot;hs-button primary&quot;},&quot;recentFieldsCookie&quot;:{},&quot;pageId&quot;:&quot;23423&quot;,&quot;pageName&quot;:&quot;My great landing page&quot;,&quot;boolCheckBoxFields&quot;:&quot;subscribe&quot;,&quot;dateFields&quot;:&quot;&quot;,&quot;redirectUrl&quot;:&quot;http://www.hubspot.com/contact-sales/thanks/&quot;,&quot;smartFields&quot;:{},&quot;urlParams&quot;:{&quot;hs_preview&quot;:&quot;ALicr-ma-4312320350&quot;},&quot;formValidity&quot;:{},&quot;correlationId&quot;:&quot;55d71532-ab6b-4415-98f5-f3a16d7741c9&quot;,&quot;disableCookieSubmission&quot;:false}" data-reactid=".hbspt-forms-0.3"> <input type="hidden" id="id_portalId" name="portalId" value="311600"><input type="hidden" id="id_contentId" name="contentId" value="4312320350"> <input type="hidden" id="id_collectionId" name="collectionId" value="2224463151"> <input type="hidden" id="id_contentAuthorEmail" name="contentAuthorEmail" value="cstone@hubspot.com"><input type="hidden" id="id_contentAuthorName" name="contentAuthorName" value="Christopher Stone"> <input type="hidden" id="id_comment_verification_text" name="comment_verification_text" value="Your comment has been received."> <input type="hidden" id="id_contentTitle" name="contentTitle" value="HubSpot Sales Professional User Guide: HubSpot Sales Professional Overview"> <input type="hidden" id="id_contentPermalink" name="contentPermalink" value="http://311600.hs-sites.com/-temporary-slug-5eccb1d9-1f1b-4bbd-8e19-00e198331b15"> <input type="hidden" id="id_contentCreatedAt" name="contentCreatedAt" value="1479135208000"> <input type="hidden" id="id_formGuid" name="formGuid" value="d30edada-82e4-4a69-aaf4-a9d0376f37e6"> </form> </div> </div> </span> Blog Comment Listing Module Output: (function ($) { var commentsEmbedContext = { portalId: 327485, collectionId: 359485112, contentId: 2684120609, target: '#comments-listing.new-comments', showComments: true, showForm: true, commentVerificationText: "Your comment has been received.", embedScriptEnv: "prod", apiEnv: "prod", contentTitle: "Post title", contentCreatedAt: "1427849160000", contentPermalink: "http:\/\/designers.hubspot.com\/blog\/post-name, contentAuthorEmail: "dhunt@hubspot.com", contentAuthorName: "David Hunt", captchaRequired: true, captchaKey: "6Lc3uMsSAAAAAMjk4NIvPQK9_-ZLk2wBokFCo5Qt", maxThreadDepth: 3, formId: "8d42bb92-241b-4894-b853-1d5f6553daa0" }; function loadComments() { if (window.hubspot && typeof window.hubspot.loadCommentsEmbed === 'function') { hubspot.loadCommentsEmbed(commentsEmbedContext.embedScriptEnv, function () { if (typeof window.hsEmbedComments === 'function') { window.hsEmbedComments(commentsEmbedContext); } }); } else { setTimeout(loadComments, 50); } } loadComments(); })(window.hsjQuery || jQuery);
ParameterTypeDescription Default
limit
Entero

Establece el número máximo de comentarios.

5000
select_blog
"predeterminado" o ID del blog

Especifica qué blog está conectado a los comentarios incrustados. Este parámetro acepta como argumentos "default" o un ID de blog (disponible en la URL del panel del blog). Si deseas utilizar tu blog predeterminado, este parámetro es innecesario.

default
skip_css
Boolean

Si se establece esta opción como True, el CSS de los comentarios del blog dejará de cargarse. 

false
message
String

El mensaje a mostrar cuando no hay comentarios. De forma predeterminada, aparece como vacío (no se muestra 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. En su lugar, utilizan la lógica condicional para definir cómo debe presentarse un post 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 plantillas de posts 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" %}<span id="hs_cos_wrapper_posts_by_topic" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_post_filter" style="" data-hs-cos-general-type="widget" data-hs-cos-type="post_filter"> <div class="block"> <h3>Posts by Topic</h3> <div class="widget-module"> <ul> <li><a href="http://www.hubspot.com/blog/topic/sales">Sales</a></li> <li><a href="http://www.hubspot.com/blog/topic/marketing">Marketing</a></li> <li><a href="http://www.hubspot.com/blog/topic/service">Service</a> </li> <li> <a href="http://www.hubspot.com/blog/topic/operations">Operations</a> </li> <li> <a href="http://www.hubspot.com/blog/topic/cms">CMS</a> </li> <li> <a href="http://www.hubspot.com/blog/topic/industry">Industry</a> </li> </ul> </div> </div> </span>
ParameterTypeDescription Default
select_blog
"predeterminado" o ID del blog

Selecciona el blog de HubSpot a utilizar. Este parámetro utiliza un ID de blog o un valor "default".

"default"
expand_link_text
String

 Enlace de texto que se mostrará si hay más posts que el número de max_links disponibles. Parámetro de exclusión para omitir el enlace.

"see all"
list_title
String

Lista de títulos por mostrar.

""
list_tag
String

Establece la etiqueta utilizada para la lista. El valor debe ser generalmente "ul" o "ol".

"ul"
title_tag
String

Establece la etiqueta utilizada para el título de la lista.

"h3"
max_links
Number

Número máximo de valores de filtro que se mostrarán. Parámetro de excusión para mostrar todo.

5
filter_type
Enumeración

Selecciona el tipo de filtro. Los valores posibles son "topic", "month" y "author".

"topic"

Listado de publicaciones de blog

Agrega un listado de los posts más populares o más importantes.

Nota: esta etiqueta solo se puede utilizar en las plantillas de los posts del blog. El contenido de la etiqueta se carga de forma asíncrona en el lado del cliente. Como resultado, si quieres manipular el feed 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 jQuery de todos los feeds que se han completado. Se recomienda manipular 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 %}<span id="hs_cos_wrapper_module_42751498763_top_posts" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_post_listing" style="" data-hs-cos-general-type="widget" data-hs-cos-type="post_listing"> <div class="block"> <h3>Recent Posts</h3> <div class="widget-module"> <ul class="hs-hash-1630637453-1678475653429"> <li class="hs-postlisting-item"> <a href="https://blog.hubspot.com/marketing/product-category-marketing">9 Product Category Marketing Examples to Inspire Your Own</a> </li> <li class="hs-postlisting-item"> <a href="https://blog.hubspot.com/marketing/increasing-mobile-conversion-rate">Mobile Conversion Rate: What It Is and How To Increase It</a> </li> <li class="hs-postlisting-item"> <a href="https://blog.hubspot.com/blog/tabid/6307/bid/33401/14-real-life-examples-of-cta-copy-you-should-copy.aspx">14 Real-Life Examples of CTA Copy YOU Should Copy</a> </li> </ul> </div> </div> </span>
ParameterTypeDescription Default
select_blog
"predeterminado" o ID del blog

 Selecciona el blog de HubSpot que se utilizará para el listado. Este parámetro utiliza un ID de blog o un valor "default".

"default"
list_title
String

Lista de títulos por mostrar.

""
list_tag
String

Establece la etiqueta utilizada para la lista. El valor debe ser generalmente "ul" o "ol".

"ul"
title_tag
String

Establece la etiqueta utilizada para el título de la lista.

"h3"
listing_type
String

Enumerar los posts del blog por las más recientes o las más populares en un rango de tiempo. Los valores posibles son recent, popular_all_time, popular_past_year, popular_past_six_months y popular_past_month.

"recent"
max_links
Number

 Número máximo de posts en la lista

5
include_featured_image
Boolean

 Mostrar la imagen destacada junto con el enlace del post.

False

Posts relacionados con el blog

Agrega un listado de posts de blog basado en un conjunto de parámetros compartidos por los posts de todos los blogs. Los posts se seleccionan en función de su relevancia con respecto a los parámetros establecidos. Para ver un ejemplo de uso del parámetro opcional callback, consulta la creación de un listado de posts de blog relacionados con la etiqueta HubL de entradas relacionadas de blog.

Ten en cuenta que esta etiqueta no genera un módulo editable a nivel de página/post, se configura completamente con HubL.

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

La(s) identificación(es) del (de los) blog(s) de los que se incluirán los posts. Omite este parámetro para utilizar el blog predeterminado.

blog_post_ids
String

El(los) identificador(es) de un post de blog que se utilizará(n) cuando se busquen posts de blog relevantes para la lista (separados por comas). Este parámetro solo debe usarse cuando el widget aparece en páginas, ya que en los posts del blog, por opción predeterminada, será el post en la que aparece el widget.

blog_post_override
String

El(los) ID(s) de los posts de un blog que deben aparecer siempre en el listado devuelto, a pesar de todos los demás valores de parámetros y filtros (separados por comas).

limit
Entero

 El número máximo de posts de blog en la lista.

3
tags
String

La(s) etiqueta(s) que debe(n) utilizarse para determinar si un post es relevante (separadas por comas). Si un post de blog tiene una de estas etiquetas o una similar, la relevancia del post aumenta, mejorando su clasificación en el listado.

tag_boost
Number

Aumenta el peso dado a las etiquetas especificadas en el parámetro de tags para generar publicaciones relacionadas. Incluye este parámetro para extraer publicaciones más estrechamente relacionadas con las publicaciones que se muestran actualmente o las publicaciones especificadas. Acepta números positivos.

start_date
datetime

Fecha de publicación más temprana.

end_date
datetime

Última fecha de publicación.

blog_authors
String

 Los nombres de los autores de los que se incluirán los mensajes (separados por comas).

path_prefixes
String

Rutas de URLs o subdirectorios desde los que incluir los posts (separadas por comas). Si un post de blog tiene un prefijo similar en tu ruta, la relevancia del post aumenta, mejorando su clasificación en el listado.

callback
String

El nombre de una función javascript para renderizar los posts de blog devueltos. A la función se le pasa una matriz de objetos de posts de blog para formatear. Si no se especifican los parámetros callback o post_formatter, la etiqueta generará HTML en un formato predeterminado.

none
post_formatter
String

El nombre de una macro personalizada para renderizar los posts de blog devueltos. A la macro se le pasan tres parámetros que son el objeto de post de blog a formatear, el recuento en la iteración de posts de blog, y el recuento total de posts de blog en los resultados. Si no se especifica o se establece como “default”, se utilizará el formateador incorporado para dar formato a cada post.

default
allow_any_language
String

Si se establece en false, solo aparecerán las posts en el mismo idioma que la página en la que se utiliza la etiqueta. Cuando el parámetro se establece como true, la restricción de idioma se ignora y todos los posts relacionados 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.

Compartir blog en redes sociales

Compartir el blog en redes sociales muestra los contadores de contenido compartido de los posts de tu blog (si están activados en la Configuración del contenido).

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

Especifica qué blog está conectado a los contadores de acciones. Este parámetro acepta como argumentos "default" o un ID de blog (disponible en la URL del panel del blog). Si quieres utilizar tu blog predeterminado, este parámetro es innecesario.

default
downgrade_shared_url
Boolean

Utiliza HTTP en la url enviada a las redes sociales. Se utiliza para conservar 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 a un blog determinado. Este formulario se crea automáticamente cada vez que se crea un blog en la Configuración de contenidos, y siempre hay un formulario de suscripción por blog. Ten en cuenta que los campos del formulario de suscripción se configuran en la interfaz de usuario del editor de formularios.

{% 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 %}<span id="hs_cos_wrapper_blog_subscription" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_blog_subscribe" style="" data-hs-cos-general-type="widget" data-hs-cos-type="blog_subscribe"> <h3 id="hs_cos_wrapper_blog_subscription_title" class="hs_cos_wrapper form-title" data-hs-cos-general-type="widget_field" data-hs-cos-type="text">Subscribe to Designers Blog</h3> <div id="hs_form_target_blog_subscription"></div> <script charset="utf-8" src="//js.hsforms.net/forms/current.js"></script> <script> hbspt.forms.create({ portalId: '327485', formId: 'a8d73dc6-0d3a-486d-8938-b19f28b69c3c', formInstanceId: '60', pageId: 2749976739, pageName: 'Apple, Google & Starbucks: Inside the Web Design Style Guides of 10 Famous Companies', redirectUrl: 'http://designers.hubspot.com/blog/web-design-style-guides-examples?hsFormKey=a56a754bc4c3465015935953363b8ff3#blog_subscription', css: '', target: '#hs_form_target_blog_subscription', formData: { cssClass: 'hs-form stacked' } }); </script> </span>
ParameterTypeDescription Default
select_blog
"predeterminado" o ID del blog

Selecciona el formulario de suscripción al blog que se va a mostrar. Este parámetro acepta como argumentos "default" o un ID de blog (disponible en la URL del panel del blog). Si deseas utilizar tu blog predeterminado, este parámetro es innecesario.

default
title
String

Define el texto de una etiqueta h3 sobre el formulario de suscripción.

"Subscribe Here!"
no_title
Boolean

Si es True, se elimina la etiqueta h3 que está encima del título.

false
response_message
String

Define el mensaje de agradecimiento en línea que se muestra cuando un usuario envía un formulario. Soporta HTML.

"Thanks for Subscribing!"
edit_form_link
String

Este parámetro genera un enlace que permite a los usuarios hacer clic en la pantalla del editor de formularios correspondiente. Esta opción solo se mostrará en la interfaz del editor si los módulos tienen el parámetro overrideable=True.

Por ejemplo, para sustituir HubID y el ID del formulario por la información de la URL de tu formulario de suscripción al blog predeterminado: edit_form_link=" <ul>\n <li><a href="/forms/HubID/FormID/edit/" target="_blank">Blog predeterminado</a></li> \n</ul> ".

\n deja el código en una nueva línea.

Boolean

Una etiqueta booleana crea una casilla de comprobació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 %}false
ParameterTypeDescription Default
value
Boolean

Determina si la casilla de comprobación está marcada o desmarcada.

False

Choice

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

Además de imprimir el valor de la elecció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" %}<span id="hs_cos_wrapper_type_of_page" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_choice" style="" data-hs-cos-general-type="widget" data-hs-cos-type="choice"> About </span>
ParameterTypeDescription
value
Boolean

El valor predeterminado del campo para la lista desplegable

choices
Secuencia

Una lista de valores separada por comas, o una lista de pares valor-etiqueta. La sintaxis de los pares de etiquetas de valores es la siguiente: choices="[[\"valor1\", \"etiqueta 1\"], [\"valor2\", \"etiqueta 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 la interfaz de usuario del editor de páginas que imprime un valor de color HEX en una plantilla. Ten en cuenta que este módulo solo puede utilizarse en plantillas, no en archivos CSS. Si utilizas esta etiqueta en un <style> o en un CSS en línea, querrás utilizar el parámetro no_wrapper=True para eliminar la envoltura <span>.

{% color "color" %} {% color "my_color_picker" label="Choose a color", color="#000000", no_wrapper=True %}#000000
ParameterTypeDescription
color
String

Un valor predeterminado de color HEX para el selector de color

Llamadas a la acción

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

El código de incrustación para la CTA. \n diferencia los saltos de línea.

full_html
String

El código de incrustación para la CTA (Igual que embed_code). \n diferencia los saltos de línea.

image_src
String

Url de la imagen src que define la imagen de vista previa en el editor de contenidos.

image_editor
String

Marcación de la vista previa del editor de imágenes

guid
String

El número de identificación único de la CTA. Este número de identificación está disponible en la URL de la pantalla de detalles de una CTA concreta. Este parámetro se utiliza para elegir qué CTA mostrar por opción predeterminada.

image_html
String

Imagen CTA HTML sin el script CTA.*

image_email
String

Versión del código CTA apta para el correo electrónico.*

*Si bien estos parámetros se incluyen aquí en aras de ser exhaustivos, el código generado por HubSpot para rellenarlos es muy específico. Si necesita una CTA predeterminada seleccionada, en lugar de intentar desarrollar los parámetros de la CTA desde cero, se recomienda configurar la CTA en un diseño de plantilla, y luego clonar al archivo. A continuación, puedes copiar el módulo HubL CTA de la CTA con todos los parámetros establecidos correctamente para ti.

También hay una función CTA que genera un CTA a partir del ID.

HTML personalizado

Un módulo de HTML personalizado permite a los usuarios introducir HTML en bruto en el editor de contenidos. Si necesitas agregar un extenso HTML predeterminado a la etiqueta, puedes utilizar la sintaxis de bloque.

{% 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 %}<span id="hs_cos_wrapper_my_custom_html_module" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_raw_html" style="" data-hs-cos-general-type="widget" data-hs-cos-type="raw_html"> <div>My HTML block</div> </span>
ParameterTypeDescription
value
String

Establece el contenido HTML predeterminado del módulo.

Módulos personalizados

Los módulos personalizados permiten a los diseñadores de HubSpot 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. Puedes aprender más sobre los módulos personalizados y su sintaxis simplificada de HubL, aquí.

Los módulos personalizados deben construirse 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 más abajo:

{% module "module_15677217712485" path="/Custom/Test custom module" %} {% module "module_25642219712432" path="/Assets/Custom calendar module" label="Custom calendar module" %}<div id="hs_cos_wrapper_module_15677217712485" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_module" style="" data-hs-cos-general-type="widget" data-hs-cos-type="module">content!</div> <style> @import "//cdn2.hubspotqa.net/qa/hub/126/file-613025667-css/custom_widget_example.css" </style> <div> <img class="persons-photo" src="//cdn2.hubspotqa.net/qa/hub/124/file-1360297556-jpeg/dharmesh.jpeg" alt="dharmesh.jpeg"> <div> <img class="company-logo with-background" src="//cdn2.hubspotqa.net/qa/hub/124/file-221882251-png/HubSpot_Logo_2x.png" width="60px" height="inherit" alt="HubSpot_Logo_2x.png"> </div> </div> <div> <p class="quote"> <span class="quotation-mark"><b>" </b></span>The Content Optimization System matches content with context to create a highly personalized, relevant and meaningful customer experience. <span class="quotation-mark"><b>" </b></span> </p> </div> <div class="name-and-company"> <span><b>Dharmesh Shah,</b></span> <span>HubSpot</span> </div>
ParameterTypeDescription
module_id
String

El id del módulo a renderizar.

path
String

La ruta del módulo a renderizar. Incluye la barra inclinada para la ruta absoluta, de lo contrario la ruta es relativa a la plantilla. Haz referencia a los módulos predeterminados de HubSpot con las rutas correspondientes a sus etiquetas HubL, como @hubspot/rich_text, @hubspot/linked_image, etc.

Marcadores de posición del editor

Cuando construyas un módulo, puedes agregar contenido predeterminado a tus campos o una etiqueta HubL editor_placeholder al archivo HTML + HubL para representar el contenido del marcador de posición. Esta etiqueta muestra el icono y el nombre del módulo como marcadores de posición vacíos en el editor.

module-placeholder-content0

Esta etiqueta puede ser útil cuando el módulo no tiene o necesita contenido predeterminado, o para agilizar la construcción del módulo.

Para agregar un marcador de posición a un módulo personalizado, puedes agregar una sentencia if al archivo HTML + HubL para mostrar el marcador de posición cuando no haya contenido seleccionado. Por ejemplo, puedes hacer lo siguiente:

{% if module.cta_field.name %} {% cta guid="{{ module.cta_field }}" %} {% elif is_in_editor %} {% editor_placeholder %} {% endif %}

Aunque no puedes editar el estilo del marcador de posición, puedes agregar las siguientes propiedades al archivo meta.json del módulo para personalizar su contenido:

ParameterTypeDescription
show_module_icon
Boolean

Si se muestra el icono del módulo.

title
String

El título que aparece en el marcador de posición.

description
String

La descripción que aparece en el marcador de posición.

Por ejemplo, tu archivo meta.json podría tener el siguiente aspecto:

// Module meta.json { "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" } }

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

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

[% widget_container label="Mi etiqueta" "mi_columna_flexible" %}

Formulario

Permite a los usuarios seleccionar un formulario de HubSpot para agregarlo a su página.

{% form "form" %} {% form "my_form" form_to_use="08bd9f0d-3be9-41c2-93b6-231a3a71b143", title="Free Trial" %} Block Syntax Example: {% widget_block form "my_form" form_follow_ups_follow_up_type="", response_redirect_id=306590405, form_to_use="08bd9f0d-3be9-41c2-93b6-231a3a71b143", title="Free Trial", notifications_are_overridden=True, sfdc_campaign="", response_message="Thanks for submitting the form.", response_response_type="redirect", response_redirect_url="", overrideable=True, gotowebinar_webinar_key="", response_redirect_name="Homepage (http://www.hubspot.com/)", label="Form", response={message="Thank you for submitting the form.", redirect_url=""} %} {% widget_attribute "notifications_override_email_addresses" is_json=True %}["noreply@hubspot.com"]{% end_widget_attribute %} {% end_widget_block %}<div id="hs_cos_wrapper_my_form" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_form" style="" data-hs-cos-general-type="widget" data-hs-cos-type="form"> <h3 id="hs_cos_wrapper_module_13885064832664947_title" class="hs_cos_wrapper form-title" data-hs-cos-general-type="widget_field" data-hs-cos-type="text">Free Trial</h3> <div id="hs_form_target_module_13885064832664947"> <form accept-charset="UTF-8" enctype="multipart/form-data" id="hsForm_08bd9f0d-3be9-41c2-93b6-231a3a71b143_6756" class="hs-form stacked hs-custom-form" action="https://forms.hubspot.com/uploads/form/v2/158015/08bd9f0d-3be9-41c2-93b6-231a3a71b143" method="POST" novalidate="novalidate"> <div class="hs_lastname field hs-form-field"> <label placeholder="Enter your Last Name" for="lastname-08bd9f0d-3be9-41c2-93b6-231a3a71b143_6756">Last Name</label> <div class="hs-field-desc" style="display: none;"></div> <div class="input"> <input class="hs-input" type="text" id="lastname-08bd9f0d-3be9-41c2-93b6-231a3a71b143_6756" name="lastname" value="" placeholder=""> </div> </div> <div class="hs_firstname field hs-form-field"> <label placeholder="Enter your First Name" for="firstname-08bd9f0d-3be9-41c2-93b6-231a3a71b143_6756">First Name</label> <div class="hs-field-desc" style="display: none;"></div> <div class="input"> <input class="hs-input" type="text" id="firstname-08bd9f0d-3be9-41c2-93b6-231a3a71b143_6756" name="firstname" value="" placeholder=""> </div> </div> <div class="hs_email field hs-form-field"> <label placeholder="Enter your Email" for="email-08bd9f0d-3be9-41c2-93b6-231a3a71b143_6756">Email<span class="hs-form-required"> * </span></label> <div class="hs-field-desc" style="display: none;"></div> <div class="input"> <input class="hs-input" type="email" required="required" id="email-08bd9f0d-3be9-41c2-93b6-231a3a71b143_6756" name="email" value="" placeholder=""> </div> </div> <div class="hs_submit"> <div class="hs-field-desc" style="display: none;"></div> <div class="actions"> <input class="hs-button primary large" type="submit" value="Submit"> </div> </div> </form> </div> <script charset="utf-8" src="//js.hsforms.net/forms/current.js"></script> <script> hbspt.forms.create({ portalId: '158015', formId: '08bd9f0d-3be9-41c2-93b6-231a3a71b143', formInstanceId: '6756', pageId: 1, redirectUrl: "http:\/\/www.davidjosephhunt.com\/404", deactivateSmartForm: true, css: '', target: '#hs_form_target_module_13885064832664947', contentType: "landing-page", formData: { cssClass: 'hs-form stacked hs-custom-form' } }); </script> </div>
ParameterTypeDescription Default
form_key
String

Especifica un identificador único para el formulario a nivel de página.

form_to_use
String

Especifica qué formulario cargar por opción predeterminada, basándose en el ID del formulario. Este ID está disponible en la URL del editor de formularios de cada formulario.

title
String

Rellena una etiqueta de cabecera h3 encima del formulario.

no_title
Boolean

 Si es True, se elimina la etiqueta h3 que está encima del título.

False
form_follow_ups_follow_up_type
Enumeración

Especifica las acciones de seguimiento, como la inscripción de un contacto en un workflow o el envío de un simple correo electrónico de seguimiento. Los valores posibles son: no_action, simple y automation.

simple_email_for_live_id
Number

Especifica el ID del correo electrónico de seguimiento simple para la página en vivo.

simple_email_for_buffer_id
Number

Especifica el ID del correo electrónico de seguimiento simple para la versión de guardado automático de una página.

follow_up_type_simple
Boolean

Si es cierto, permite un simple correo electrónico de seguimiento. Alternativa a form_follow_ups_follow_up_type.

follow_up_type_automation
Boolean

Si es verdadero, inscribe los envíos en un workflow. Alternativa a form_follow_ups_follow_up_type.

simple_email_campaign_id
Number

Especifica el ID del correo electrónico de seguimiento simple. Alternativa a simple_email_for_live_id.

form_follow_ups_workflow_id
Number

Especifica el ID del workflow en el que se inscriben los envíos.

response_redirect_url
String

Si se redirige a una página externa, este parámetro especifica la URL a la que se debe redirigir.

response_redirect_id
Number

Si se redirige a una página alojada en HubSpot, este parámetro especifica el ID de la página. El ID de la página está disponible en la URL del editor de páginas de cada página.

response_response_type
Enumeración

Determina si se redirige a otra página o si se muestra un mensaje de agradecimiento en línea cuando se envía. El valor de este parámetro debe ser "redirect" o "inline".

inline
response_message
String

Establece un mensaje de agradecimiento en línea. Este parámetro es compatible con HTML.

notifications_are_overridden
Boolean

Si es True, el formulario enviará notificaciones a las direcciones de correo electrónico seleccionadas en el campo notifications_override_email_addresses
en lugar de los valores predeterminados del formulario

False
notifications_override_guid_buffer
String

ID de la configuración de anulación en la versión de autoguardado de la página.

notifications_override_guid
String

ID de la configuración de anulación en la versión en vivo de la página.

notifications_override_email_addresses
JSON

La sintaxis del bloque admite una lista JSON de destinatarios de correo electrónico que serán notificados al enviar el formulario. Estas direcciones de correo electrónico anulan la configuración de notificación por correo electrónico establecida en el formulario.

gotowebinar_webinar_key
String

Especifica el seminario web de GoToWebinar en el que se inscribirán los contactos que envíen el formulario. Solo disponible para los portales que utilizan la integración de GoToWebinar.

sfdc_campaign
String

Especifica la campaña de Salesforce en la que se inscribirán los contactos que envíen el formulario. El valor de este parámetro debe ser el ID de la campaña de SFDC y solo está disponible para los portales que están integrados con Salesforce.

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 contenido (Email > Footer Information).

{% page_footer "page_footer" %}<span id="hs_cos_wrapper_page_footer" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_page_footer" style="" data-hs-cos-general-type="widget" data-hs-cos-type="page_footer"> <footer> <span class="hs-footer-company-copyright">© 2020 HubSpot</span> </footer> </span>

Galería

Genera una etiqueta de galería de HubSpot. Esta etiqueta de la galería se basa 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 bloque. A continuación se muestran ambos métodos. Las imágenes de la galería se cargan de forma perezosa 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 %}<span id="hs_cos_wrapper_crm_gallery" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_gallery" style="" data-hs-cos-general-type="widget" data-hs-cos-type="gallery"> <div id="hs_cos_flex_gallery_crm_gallery" class="hs_cos_flex-gallery flex-gallery-main gallery-mode-gallery"> <div class="hs_cos_flex-viewport" style="overflow: hidden; position: relative;"> <ul class="hs_cos_flex-slides hs_cos_flex-slides-main " style="width: 800%; -webkit-transition-duration: 0s; transition-duration: 0s; -webkit-transform: translate3d(-1090px, 0px, 0px);"> <li class="hs_cos_flex-slide-main clone" aria-hidden="true" style="width: 1090px; float: left; display: block;"> <a href="//www.hubspot.com/" target="_blank"><img src="//cdn2.hubspot.net/hubfs/53/Contact-Profile.png?t=1430860504240&t=1430335520686" alt="HubSpot CRM Contact Profile" draggable="false"></a> <div class="caption"> HubSpot CRM Contact Profile </div> </li> <li class="hs_cos_flex-slide-main hs_cos_flex-active-slide" style="width: 1090px; float: left; display: block;"> <a href="//www.hubspot.com/crm" target="_blank"><img src="http://go.hubspot.com/hubfs/Contacts-View-1.png?t=1430860504240&t=1430335520686" alt="Screenshot of CRM Contacts" draggable="false"></a> <div class="caption"> CRM Contacts App </div> </li> <li class="hs_cos_flex-slide-main" style="width: 1090px; float: left; display: block;"> <a href="//www.hubspot.com/" target="_blank"><img src="//cdn2.hubspot.net/hubfs/53/Contact-Profile.png?t=1430860504240&t=1430335520686" alt="HubSpot CRM Contact Profile" draggable="false"></a> <div class="caption"> HubSpot CRM Contact Profile </div> </li> <li class="hs_cos_flex-slide-main clone" aria-hidden="true" style="width: 1090px; float: left; display: block;"> <a href="//www.hubspot.com/crm" target="_blank"><img src="http://go.hubspot.com/hubfs/Contacts-View-1.png?t=1430860504240&t=1430335520686" alt="Screenshot of CRM Contacts" draggable="false"></a> <div class="caption"> CRM Contacts App </div> </li> </ul> </div> <ol class="hs_cos_flex-control-nav hs_cos_flex-control-paging"> <li><a class="hs_cos_flex-active">1</a></li> <li><a class="">2</a></li> </ol> <ul class="hs_cos_flex-direction-nav"> <li><a class="hs_cos_flex-prev" href="#">Previous</a></li> <li><a class="hs_cos_flex-next" href="#">Next</a></li> </ul> </div> <script> window.hsSliderConfig = window.hsSliderConfig || {}; window.hsSliderConfig['crm_gallery'] = { mode: 'gallery', mainConfig: { "animationLoop": true, "direction": "horizontal", "slideshowSpeed": 5000.0, "controlNav": true, "smoothHeight": false, "namespace": "hs_cos_flex-", "slideshow": true, "selector": ".hs_cos_flex-slides > li", "animation": "slide" } }; </script>
ParameterTypeDescription Default
slides
JSON

Una lista JSON con el título predeterminado, la url del enlace, el texto alt, el src de la imagen y si se abre en una nueva pestaña. Consulta la sintaxis del bloque anterior.

loop_slides
Boolean

Cuando es Verdadero, hace un bucle continuo a través de las diapositivas.

True
num_seconds
Number

Tiempo en segundos de pausa entre diapositivas.

5
show_pagination
Boolean

Proporcionar botones debajo del deslizador para navegar entre las diapositivas.

True
sizing
Enumeración

Determina si el deslizador cambia de tamaño, en función de la altura de las diapositivas. Los valores posibles son: "estático" o "redimensionado».

"static"
auto_advance
Boolean

Avanza automáticamente las diapositivas después del tiempo establecido en num_seconds.

False
transition
Enumeración

Establece el tipo de transición de la diapositiva. Los valores posibles son: "fade" o "slide".

"slide"
caption_position
Enumeración

Afecta a la posición de los subtítulos en o debajo de la diapositiva. Los valores posibles son "below" o "superimpose".

"below"
display_mode
Enumeración

Determina cómo se mostrará la galería de imágenes. Los valores posibles son: "standard", "lightbox", "thumbnail".

"standard"
lightboxRows
Number

Si "display_mode" se establece como "lightbox", este parámetro controlará el número de filas mostradas dentro de la caja de luz.

3

Encabezado

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

{% header "header" %} {% header "my_header" header_tag="h1", overrideable=True, value="A clear and bold header", label="Header" %}<span id="hs_cos_wrapper_my_header" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_header" style="" data-hs-cos-general-type="widget" data-hs-cos-type="header"> <h1>A clear and bold header</h1> </span>
ParameterTypeDescription Default
header_tag
String

Selecciona la etiqueta de encabezamiento que se va a representar. Los valores posibles son: h1, h2, h3, h4, h5, h6.

h1
value
String

Renderiza el texto predeterminado dentro del módulo de encabezamiento.

"A clear bold header"

Icono

Agrega una etiqueta de icono que permite a los usuarios seleccionar un icono para su uso. Los conjuntos de iconos admitidos son FontAwesome 5.0.10, 5.14.0 y 6.4.2.

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

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

Nombre del icono.

style
String

Estilo del icono. Valores posibles: REGULAR o SOLID

REGULAR
unicode
String

La representación en caracteres Unicode del icono.

icon_set
String

El conjunto de iconos de FontAwesome a utilizar. Los valores posibles son:

  • fontawesome-5.14.0 
  • fontawesome-5.0.10
  • fontawesome-6.4.2
purpose
String

El propósito del icono, utilizado para la accesibilidad. Los valores posibles son decorativos o semánticos. Si se establece como decorativo, se agregará un atributo adicional aria-hidden="true" al icono.

decorative
title
String

El elemento del título del svg del icono, 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 deseas que la imagen esté vinculada a una URL de destino, debes utilizar linked_image a continuación.

{% 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" %}<span id="hs_cos_wrapper_executive_image" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_image" style="" data-hs-cos-general-type="widget" data-hs-cos-type="image"> <img src="//cdn2.hubspot.net/hub/53/file-733888619-jpg/assets/hubspot.com/about/management/brian-home.jpg?width=300" class="hs-image-widget " width="300" alt="Photo of Brian Halligan" title="Photo of Brian Halligan"> </span>
ParameterTypeDescription Default
alt
String

Establece el texto alternativo predeterminado para la imagen.

src
String

Rellena el atributo src de la etiqueta img.

width
Number

Establece el atributo de ancho de la etiqueta img.

The width of the image
height
Number

Establece una altura mínima en un atributo de estilo de la etiqueta img solo para las plantillas de correo electrónico.

The height of the image
hspace
Number

Establece el atributo hspace de la etiqueta img.

align
String

Establece el atributo align de la etiqueta img. Los valores posibles son: izquierda, derecha y centro.

style
String

Agrega declaraciones CSS en línea a la etiqueta img. Por ejemplo style="border:1px solid blue; margin:10px"

loading
String

Controla el atributo de carga del elemento img. Se utiliza para la carga lenta basada en el navegador.

Src de la imagen

Un módulo image src 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 utiliza generalmente con el parámetro no_wrapper=True, de modo que el src de la imagen puede agregarse al CSS en línea o a otras marcas. 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 %}//cdn2.hubspot.net/hub/53/file-733888614-jpg/assets/hubspot.com/about/management/dharmesh-home.jpg
ParameterTypeDescription Default
src
String

 Especifica el src de la imagen de la URL predeterminada.

Conmutador de idiomas

Agrega un Icono del 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" %}<span id="hs_cos_wrapper_module_1487954976079503" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_language_switcher" style="" data-hs-cos-general-type="widget" data-hs-cos-type="language_switcher"> <div class="lang_switcher_class"> <div class="globe_class"> <ul class="lang_list_class"> <li> <a class="lang_switcher_link" href="http://www.hubspot.com">English</a> </li> <li> <a class="lang_switcher_link" href="http://www.hubspot.com/es">Spanish</a> </li> </ul> </div> </div> </span>
ParameterTypeDescription Default
display_mode
Enumeración

El idioma del texto en el conmutador de idiomas. Los valores son:

  • Pagelang significa que los nombres de los idiomas se mostrarán en el idioma de la página en la que se encuentra el conmutador.
  • Localizado significa que el nombre de cada idioma aparecerá en dicho idioma.
  • Híbrido es una combinación de los dos.
Localized

Imagen enlazada

Crea una imagen seleccionable por el usuario que se envuelve en un enlace. Este módulo 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" %}<span id="hs_cos_wrapper_executive_image" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_linked_image" style="" data-hs-cos-general-type="widget" data-hs-cos-type="linked_image"> <a href="https://twitter.com/bhalligan" target="_blank" id="hs-link-executive_image" style="border-width:0px;border:0px;"> <img src="//cdn2.hubspot.net/hub/53/file-733888619-jpg/assets/hubspot.com/about/management/brian-home.jpg?width=300" class="hs-image-widget " style="width:300px;border-width:0px;border:0px;" width="300" alt="Photo of Brian Halligan" title="Photo of Brian Halligan"> </a> </span>
ParameterTypeDescription Default
alt
String

Establece el texto alternativo predeterminado para la imagen.

src
String

Rellena el atributo src de la etiqueta img.

width
Number

Establece el atributo de ancho de la etiqueta img.

The width of the image
height
Number

Establece una altura mínima en un atributo de estilo de la etiqueta img solo para las plantillas de correo electrónico.

The height of the image
hspace
Number

Establece el atributo hspace de la etiqueta img.

align
String

Establece el atributo align de la etiqueta img. Los valores posibles son: izquierda, derecha y centro.

style
String

Agrega declaraciones CSS en línea a la etiqueta img. Por ejemplo style="border:1px solid blue; margin:10px"

open_in_new_tab
Boolean

Selecciona si se abre o no la URL de destino en otra pestaña.

False
link
String

Establece la URL de destino del enlace que envuelve la etiqueta img.

target
String

Establece el atributo de destino de la etiqueta de enlace.

loading
String

Controla el atributo de carga del elemento img. Se utiliza para la carga lenta basada en el navegador.

Logotipo

Un módulo de logotipos muestra la imagen del logotipo de su empresa desde la configuración de contenidos.

{% logo "logo" %} {% logo "my_logo" width="200" %}<span id="hs_cos_wrapper_my_logo" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_logo" style="" data-hs-cos-general-type="widget" data-hs-cos-type="logo"> <a href="//www.hubspot.com" id="hs-link-my_logo"> <img src="//cdn2.hubspot.net/hub/53/file-1237149549-png/assets/hubspot.com/V2-Global/hubspot-logo-dark.png?t=1430948896766&amp;width=200" class="hs-image-widget " width="200" alt="HubSpot logo" title="HubSpo logot"> </a> </span>
ParameterTypeDescription Default
suppress_company_name
Boolean

Oculta el nombre de la empresa si no se establece un logotipo de imagen.

False
alt
String

Establece el texto alternativo predeterminado para la imagen.

Value in Content Settings
src
String

Rellena el atributo src de la etiqueta img.

Value in Content Settings
width
Number

Establece el atributo de ancho de la etiqueta img.

The width of the image
height
Number

Establece una altura mínima en un atributo de estilo de la etiqueta img solo para las plantillas de correo electrónico.

The height of the image
hspace
Number

Establece el atributo hspace de la etiqueta img.

align
String

Establece el atributo align de la etiqueta img. Los valores posibles son: izquierda, derecha y centro.

style
String

Agrega declaraciones CSS en línea a la etiqueta img. Por ejemplo style="border:1px solid blue; margin:10px"

open_in_new_tab
Boolean

Selecciona si se abre o no la URL de destino en otra pestaña.

False
link
String

Establece la URL de destino del enlace que envuelve la etiqueta img.

override_inherited_src
Boolean

Si es verdadero, usa el src del widget del logo en lugar del src heredado de la configuración o de la plantilla.

True
heading_level
String

Cuando se utilizan logotipos basados en texto no enlazados, esto envuelve el logotipo basado en texto en una de las siguientes opciones disponibles como etiqueta HTML: h1, h2, h3, h4

h1
loading
String

Controla el atributo de carga del elemento img. Se utiliza para la carga lenta basada 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 el id es nulo, 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" %}<div id="hs_menu_wrapper_my_menu" class="hs-menu-wrapper active-branch flyouts hs-menu-flow-horizontal" data-sitemap-name="Default"> <ul> <li class="hs-menu-item hs-menu-depth-1"><a href="http://www.husbpot.com/Software">Software</a></li> <li class="hs-menu-item hs-menu-depth-1"><a href="http://www.hubspot.com/pricing">Pricing</a></li> <li class="hs-menu-item hs-menu-depth-1"><a href="http://www.hubspot.com/resources">Resources</a></li> <li class="hs-menu-item hs-menu-depth-1"><a href="http://www.hubspot.com/contact">Contact</a></li> </ul> </div> </span>
ParameterTypeDescription Default
id
Entero

ID del árbol de menús desde los menús avanzados en la configuración de contenidos.

site_map_name
String

Nombre del árbol de menús de los menús avanzados en la configuración del contenido.

"default"
root_type
Enumeración

Especifica el tipo de menús avanzados. Las opciones son: "site_root", "top_parent", "parent", "page_name", "page_id" y "breadcrumb". Estos valores corresponden a estático, dinámico por sección, dinámico por página y breadcrumb.

"site_root"
flyouts
String

Cuando es verdadero, se agrega una clase al árbol de menús que puede ser estilizada para permitir que los elementos del menú secundario aparezcan cuando se coloca el cursor encima del menú principal. Si es falso, los elementos del menú secundario aparecerán siempre.

"true"
max_levels
Entero

Determina el número de niveles de menús anidados que se muestran en el marcado. Este parámetro determina el número de opciones secundarias del árbol de menú que se pueden expandir en el menú.

2
flow
Enumeración

Establece la orientación de los elementos del menú. Esto agrega clases al árbol de menús, para que puedan ser estilizados en consecuencia. Los valores posibles son "horizontal", "vertical" o "vertical_flyouts". Los menús horizontales muestran los elementos de lado a lado, y los menús verticales los muestran de arriba hacia abajo.

"horizontal"
root_key
String

Se utiliza para encontrar la raíz del menú. Cuando root_type se establece 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"

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 función require_css, excepto que esta etiqueta inserta el estilo en línea en lugar de desde una hoja de estilos. Esta etiqueta tampoco se desduplica contra otras instancias del CSS en la misma página. Si estás creando un módulo y deseas insertar una hoja de estilos, pero puedes usar ese módulo varias veces en una sola página, es posible que desees usar la función require_css en su lugar. 

{{ standard_header_includes }} <!-- more html --> {% require_css %} <style> body { color: red; } </style> {% end_require_css %} {{ standard_footer_includes }}<!-- other standard header html --> <style> body { color: red; } </style> <!-- more html --> <!-- other standard footer html -->

Require_head

Una etiqueta HubL que encola todo lo que se coloca dentro de ella en el standard_header_includes que está en la plantilla <head>. Para la mayoría de Javascript y CSS ver require_js y require_css.  Algunos casos de uso de require_head incluyen el suministro de meta etiquetas 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 renderizar 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) en su lugar.

{{ standard_header_includes }} <!-- more html --> {% require_js position="footer" %} <script> console.log("The CMS is awesome!"); </script> {% end_require_js %} {{ standard_footer_includes }}<!-- other standard header html --> <!-- more html --> <script> console.log("The CMS is awesome!"); </script> <!-- other standard footer html -->
ParameterTypeDescription Default
position
String

Establece la posición en la que se renderizará el script en línea. Las opciones son: "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 %}<span id="hs_cos_wrapper_right_column" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_rich_text" style="" data-hs-cos-general-type="widget" data-hs-cos-type="rich_text"> <h2>Something Powerful</h2> <h3>Tell The Reader More</h3> <p>The headline and subheader tells us what you're offering, and the form header closes the deal. Over here you can explain why your offer is so great it's worth filling out a form for.</p> <p>Remember:</p> <ul> <li>Bullets are great</li> <li>For spelling out benefits and</li> <li>Turning visitors into leads.</li> </ul> </span>
ParameterTypeDescription Default
html
String

Contenido de texto enriquecido predeterminado para el módulo.

<h2>Something Powerful</h2> <h3>Tell The Reader More</h3> <p>The headline and subheader tells us what you're offering, and the form header closes the deal. Over here you can explain why your offer is so great it's worth filling out a form for.</p> <p>Remember:</p> <ul> <li>Bullets are great</li> <li>For spelling out <a href="#">benefits</a> 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 manipular el feed 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 jQuery de todos los feeds que se han completado. Puedes manipular 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" %}<span id="hs_cos_wrapper_module_70642123068_my_rss_listing" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_rss_listing" style="" data-hs-cos-general-type="widget" data-hs-cos-type="rss_listing"> <h3></h3> <div class="hs-rss-module feedreader_box hs-hash-758735283"> <div class="hs-rss-item "> <div class="hs-rss-item-text"> <a class="hs-rss-title" href="https://developers.hubspot.com/blog/how-to-write-cron-jobs-in-hubspot-to-take-time-based-action-on-crm-data"> <span>How to Write Cron Jobs in HubSpot to take Time Based Action on CRM Data</span> </a> <div class="hs-rss-byline"> by <span class="hs-rss-author">Jon McLaren</span> <span class="hs-rss-posted-at"> posted at</span> <span class="hs-rss-date">3/8/23 10:42 AM</span> </div> <div class="hs-rss-description"> <p>First things first: Cron jobs are scripts that get executed based on time. Understanding where this shorthand name comes from may help you remember this: <a href="https://developers.hubspot.com/blog/how-to-write-cron-jobs-in-hubspot-to-take-time-based-action-on-crm-data">Read more</a> </p> </div> </div> </div> <div class="hs-rss-item "> <div class="hs-rss-item-text"> <a class="hs-rss-title" href="https://developers.hubspot.com/blog/implementing-semantic-search-into-a-hubspot-workflow"> <span>Using OpenAI Embeddings API to implement Semantic Search into a HubSpot Workflow</span> </a> <div class="hs-rss-byline"> by <span class="hs-rss-author">Roman Kozak</span> <span class="hs-rss-posted-at"> posted at</span> <span class="hs-rss-date">3/7/23 2:09 PM</span> </div> <div class="hs-rss-description"> <p>This article was authored by a member of the HubSpot developer community, Roman Kozak. <a href="https://developers.hubspot.com/blog/implementing-semantic-search-into-a-hubspot-workflow">Read more</a> </p> </div> </div> </div> <div class="hs-rss-item "> <div class="hs-rss-item-text"> <a class="hs-rss-title" href="https://developers.hubspot.com/blog/how-to-use-npm-packages-in-custom-code-workflow-actions"> <span>How to Use NPM Packages in Custom Code Workflow Actions</span> </a> <div class="hs-rss-byline"> by <span class="hs-rss-author">Joshua Beatty</span> <span class="hs-rss-posted-at"> posted at</span> <span class="hs-rss-date">2/28/23 10:30 AM</span> </div> <div class="hs-rss-description"> <p>This article was authored by a member of the HubSpot developer community, Joshua Beatty. <a href="https://developers.hubspot.com/blog/how-to-use-npm-packages-in-custom-code-workflow-actions">Read more</a> </p> </div> </div> </div> </div> </span>
ParameterTypeDescription Default
show_title
Boolean

 Muestra u oculta el título del canal RSS.

True
show_date
Boolean

Muestra la fecha del post.

True
show_author
Boolean

Muestra el nombre del autor.

True
show_detail
Boolean

Mostrar el resumen del post hasta el número de caracteres establecido por el parámetro limit_to_chars.

True
title
String

Rellena un encabezado sobre el listado de canales RSS.

limit_to_chars
Number

Número máximo de caracteres a mostrar en el resumen.

200
publish_date_format
String

Formato de la fecha de publicación. Los valores posibles son "short", "medium" y "long". También acepta formatos personalizados como "MMMM d, aaaa 'a' h:mm a".

"short"
attribution_text
String

El texto que atribuye un autor a un post.

"by"
click_through_text
String

El texto que se mostrará al hacer clic en el enlace al final de un resumen del post.

"Read more"
publish_date_text
String

 El texto que indica cuando fue publicada un post.

"posted at"
include_featured_image
Boolean

Muestra la imagen destacada con el enlace del post para los canales RSS generados por HubSpot.

False
item_title_tag
String

Especifica la etiqueta HTML del título de cada post.

span
is_external
Boolean

El feed RSS es de un blog externo.

False
number_of_items
Number

Número máximo de posts que se mostrarán.

5
publish_date_language
String

Especifica el idioma de la fecha de publicación.

en_US
rss_url
String

 La URL donde se encuentra el feed RSS.

content_group_id
String

ID para el blog cuando la fuente de feed es un blog interno.

select_blog
String

Se puede utilizar para seleccionar un feed de blog interno de HubSpot.

default
feed_source
String

Establecer la fuente de feed de RSS. Cuando es interno, el formato general es {rss_url="", is_external=False, content_group_id="2502431580"}. Cuando es externo, el formato general es {rss_url="http://blog.hubspot.com/marketing/rss.xml", is_external=True}.

tag_id
Number

ID para la etiqueta cuando la fuente de feed 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" %}<span id="hs_cos_wrapper_my_section_header" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_section_header" style="" data-hs-cos-general-type="widget" data-hs-cos-type="section_header"> <div class="page-header section-header"> <h1>A clear and bold header</h1> <p class="secondary-header"><span id="hs_cos_wrapper_subheader" class="section-subheader">A more subdued subheader</span></p> </div> </span>
ParameterTypeDescription Default
header
String

Texto a mostrar en la cabecera.

"A clear and bold header"
subheader
String

Texto a mostrar en el subtítulo.

"A more subdued subheader"
heading_level
String

El nivel de encabezamiento HTML semántico. Se admiten 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 %}<span id="hs_cos_wrapper_my_simple_menu" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_simple_menu" style="" data-hs-cos-general-type="widget" data-hs-cos-type="simple_menu"> <ul></ul> </span> <span id="hs_cos_wrapper_block_simple_menu" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_simple_menu" style="" data-hs-cos-general-type="widget" data-hs-cos-type="simple_menu"> <div id="hs_menu_wrapper_module_143093417497114626" class="hs-menu-wrapper active-branch flyouts hs-menu-flow-horizontal" data-sitemap-name=""> <ul> <li class="hs-menu-item hs-menu-depth-1"><a href="//www.hubspot.com" target="_self">Home</a></li> <li class="hs-menu-item hs-menu-depth-1 hs-item-has-children"><a href="//www.hubspot.com/internet-marketing-company" target="_self">About</a> <ul class="hs-menu-children-wrapper"> <li class="hs-menu-item hs-menu-depth-2"><a href="//www.hubspot.com/company/management" target="_self">Our Team</a></li> </ul> </li> <li class="hs-menu-item hs-menu-depth-1"><a href="//www.hubspot.com/pricing" target="_self">Pricing</a></li> </ul> </div> </span>
ParameterTypeDescription Default
orientation
Enumeración

Define clases de marcado de menú para permitir estilizar la orientación de los elementos de menú en la página. Los valores posibles son "horizontal" y "vertical".

"horizontal"
menu_tree
JSON

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

Si es verdadero, el módulo comparte la URL de la página por opción predeterminada.

True
link
String

Especifica una URL diferente para compartir, si use_page_url es falso.

pinterest
JSON

Parámetros para el formato del enlace de Pinterest y la fuente de la imagen del icono.

See block syntax example, above
twitter
JSON

Parámetros para el formato del enlace de Twitter y la fuente de la imagen del icono.

See block syntax example, above
linked_in
JSON

Parámetros para el formato del enlace de LinkedIn y la fuente de la imagen del icono.

See block syntax example, above
facebook
JSON

Parámetros para el formato del enlace de Facebook y la fuente de la imagen del icono.

See block syntax example, above
email
JSON

Parámetros para el formato del enlace para compartir el correo electrónico y la fuente de la imagen del icono.

See block syntax example, above

Separador

Una etiqueta espaciadora genera una etiqueta span vacía. Esta etiqueta puede ser estilizada para actuar como espaciador. En los diseños de arrastrar y soltar, el módulo espaciador se envuelve en un contenedor con una clase de span1-span12 para determinar cuánto espacio debe ocupar el módulo en la rejilla responsiva de doce columnas.

{% space "space" %} {% space "spacer" label="Horizontal Spacer" %}<span id="hs_cos_wrapper_module_spacer" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_space" style="" data-hs-cos-general-type="widget" data-hs-cos-type="space"></span>

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 la contraseña o de suscripción por correo electrónico.

Cancelación de suscripción con de copia de seguridad de correo electrónico

La plantilla de cancelación de suscripción con copia de seguridad sirve para recuperar destinatarios de correo electrónico si HubSpot no puede determinar la dirección de correo cuando un destinatario intenta cancelar la suscripción. Esta etiqueta muestra un formulario para que el contacto introduzca su dirección de correo electrónico para cancelar 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" %}<span class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_simple_subscription" data-hs-cos-general-type="widget" data-hs-cos-type="email_simple_subscription" id="hs_cos_wrapper_email_simple_subscription" style=""></span> <div class="page-header"> <span class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_simple_subscription" data-hs-cos-general-type="widget" data-hs-cos-type="email_simple_subscription" id="hs_cos_wrapper_email_simple_subscription" style=""></span> <h1><span class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_simple_subscription" data-hs-cos-general-type="widget" data-hs-cos-type="email_simple_subscription" id="hs_cos_wrapper_email_simple_subscription" style="">Email Unsubscribe</span></h1><span class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_simple_subscription" data-hs-cos-general-type="widget" data-hs-cos-type="email_simple_subscription" id="hs_cos_wrapper_email_simple_subscription" style=""></span> </div> <form id="email-prefs-form" method="post" name="email-prefs-form" style="position: relative"> <span class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_simple_subscription" data-hs-cos-general-type="widget" data-hs-cos-type="email_simple_subscription" id="hs_cos_wrapper_email_simple_subscription" style=""></span> <div id="content"> <span class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_simple_subscription" data-hs-cos-general-type="widget" data-hs-cos-type="email_simple_subscription" id="hs_cos_wrapper_email_simple_subscription" style=""></span> <h3 style="font-weight: normal"><span class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_simple_subscription" data-hs-cos-general-type="widget" data-hs-cos-type="email_simple_subscription" id="hs_cos_wrapper_email_simple_subscription" style="">Your email address:</span></h3> <div style="padding-bottom: 10px"> <span class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_simple_subscription" data-hs-cos-general-type="widget" data-hs-cos-type="email_simple_subscription" id="hs_cos_wrapper_email_simple_subscription" style=""><input class="email-edit hs-input" name="email" placeholder="email@example.com" style="padding: 6px; font-size: 15px; width: 507px; margin-left: 0px" type="email" value=""></span> </div><span class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_simple_subscription" data-hs-cos-general-type="widget" data-hs-cos-type="email_simple_subscription" id="hs_cos_wrapper_email_simple_subscription" style=""><input class="hs-button primary" id="submitbutton" type="submit" value="Unsubscribe"></span> </div><span class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_simple_subscription" data-hs-cos-general-type="widget" data-hs-cos-type="email_simple_subscription" id="hs_cos_wrapper_email_simple_subscription" style=""></span> </form>
ParameterTypeDescription Default
header
String

Muestra el texto en una etiqueta h1 sobre el formulario de cancelación de la suscripción.

"Email Unsubscribe"
input_help_text
String

Muestra el texto de ayuda en una etiqueta h3 sobre el campo del formulario de cancelación de la suscripción por correo electrónico.

"Your email address:"
input_placeholder
String

Agrega un texto de marcador de posición en el campo de la dirección de correo electrónico.

"email@example.com"
button_text
String

Cambia el texto del botón de envío del formulario de cancelación de suscripción.

"Unsubscribe"

Suscripciones de correo electrónico

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

Muestra el texto en una etiqueta h1 sobre el formulario de preferencias de suscripción.

"Communication Preferences"
subheader_text
String

Rellena el texto debajo del encabezado sobre las preferencias de cancelación de la suscripción.

"<p>\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</p>"
unsubscribe_single_text
String

Muestra el texto <p class="header"> por encima de las opciones de suscripción.

"Uncheck the types of emails you do not want to receive:"
unsubscribe_all_text
String

Muestra el texto en una entrada <p class="header"> sobre la entrada de la casilla de comprobación para cancelar la suscripción a todos los correos electrónicos.

"Or check here to never receive any emails:"
unsubscribe_all_unsubbed_text
String

Rellena el texto dentro de un <p> que muestra, si la suscripción de un contacto está actualmente cancelada de todos los correos electrónicos.

"You are presently unsubscribed from all of our emails. Would you like to receive our emails again?"
unsubscribe_all_option
String

Establece el texto junto a la entrada de la casilla de comprobación de cancelar la suscripción a todos los correos electrónicos.

"Unsubscribe me from all mailing lists."
button_text
String

Establece el texto del botón de envío que actualiza las preferencias de suscripción.

"Update email preferences"
resubscribe_button_text
String

Establece 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 confirmación de actualización de suscripciones por 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 la 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" %}<span class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_subscriptions_confirmation" data-hs-cos-general-type="widget" data-hs-cos-type="email_subscriptions_confirmation" id="hs_cos_wrapper_email_subscriptions_confirmation" style=""></span> <div class="page-header"> <span class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_subscriptions_confirmation" data-hs-cos-general-type="widget" data-hs-cos-type="email_subscriptions_confirmation" id="hs_cos_wrapper_email_subscriptions_confirmation" style=""></span> <h2><span class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_subscriptions_confirmation" data-hs-cos-general-type="widget" data-hs-cos-type="email_subscriptions_confirmation" id="hs_cos_wrapper_email_subscriptions_confirmation" style="">example@email.com</span></h2><span class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_subscriptions_confirmation" data-hs-cos-general-type="widget" data-hs-cos-type="email_subscriptions_confirmation" id="hs_cos_wrapper_email_subscriptions_confirmation" style=""><br></span> <p><span class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_subscriptions_confirmation" data-hs-cos-general-type="widget" data-hs-cos-type="email_subscriptions_confirmation" id="hs_cos_wrapper_email_subscriptions_confirmation" style="">If this is not your email address, please ignore this page since the email associated with this page was most likely forwarded to you.</span></p> </div> <div class="success" id="content"> <span class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_subscriptions_confirmation" data-hs-cos-general-type="widget" data-hs-cos-type="email_subscriptions_confirmation" id="hs_cos_wrapper_email_subscriptions_confirmation" style="">You have successfully updated your email preferences.</span> </div>
ParameterTypeDescription Default
header
String

Muestra el texto en una etiqueta h1 sobre el formulario de cancelación de la suscripción.

"Communication Preferences"
subheader_text
String

Rellena el texto por encima del mensaje de confirmación.

"<p>\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</p>"
unsubscribe_all_success
String

Establece el texto que se mostrará cuando alguien cancela la suscripción de todas las comunicaciones por correo electrónico.

"You have successfully unsubscribed from all email communications."
subscription_update_success
String

Establece el texto cuando un destinatario actualiza sus preferencias de suscripción.

"You have successfully updated your email preferences."

Inicio de sesión de membresía

Crea un formulario de inicio de sesión para dar acceso a contenidos privados

{% 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" %}<span id="hs_cos_wrapper_my_login" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_member_login" style="" data-hs-cos-general-type="widget" data-hs-cos-type="member_login"><div class="hs-form-field"> <ul class="no-list hs-error-msgs" style="text-align:center"> <li> <label class="hs-membership-global-error hs-error-msg"></label> </li> </ul> </div> <form method="post" action="/_hcms/mem/login?domain=default&amp;hs_preview_key=c4H4EEQCL-JSCFBlDzG4wg&amp;portalId=2272014&amp;tc_deviceCategory=desktop&amp;template_file_path=my-test-theme%2Ftemplates%2Fsystem%2Fmembership-login.html&amp;updated=1644243124141&amp;redirect_url=/" id="hs-membership-form" onsubmit="onFormSubmit()" data-hs-do-not-collect=""> <input name="csrf_token" type="hidden" value=""> <input name="redirect_url" type="hidden" value="/"> <input id="hs-membership-form-hubspotutk" name="hubspotutk" type="hidden" value=""> <div class="hs-form-field"> <label class="hs-login-widget-email-label" for="hs-login-widget-email">Email*</label> <input class="hs-input" name="email" type="text" placeholder="Email" id="hs-login-widget-email" value=""> </div> <div class="hs-form-field"> <label class="hs-login-widget-password-label" for="hs-login-widget-password">Password*</label> <a class="hs-login-widget-show-password" href="javascript:show_password('hs-login-widget-password');">Show password</a> <input class="hs-input" name="password" type="password" placeholder="Password" id="hs-login-widget-password"> </div> <div class="hs-form-field"> <input class="hs-input" name="remember_me" type="checkbox" id="hs-login-widget-remember" value="true" checked=""> <label for="hs-login-widget-remember">Remember Me</label> </div> <div> <a id="hs_login_reset" href="/_hcms/mem/reset/request">Forgot your password?</a> </div> <div class="hs-membership-loader hs_submit hs-submit"> <div class="actions"> <input type="submit" class="hs-button primary large" value="Login"> </div> </div> </form> <script type="text/javascript"> function onFormSubmit() { // document.querySelector('.hs-membership-loader').classList.add('active'); } document.onkeydown = function(e) { if (['ArrowUp','ArrowDown'].includes(e.code)) { var children = [].slice.call(document.querySelectorAll('#hs-membership-form input:not([type="hidden"]):not([type="checkbox"]):not([disabled])')); for (i = 0; i < children.length; i++) { var input = children[i]; if (input === document.activeElement) { if (e.code =='ArrowDown' && children[i+1] !== undefined) { children[i+1].focus(); break; } else if (e.code=='ArrowUp' && children[i-1]!==undefined) { children[i-1].focus(); break; } } else if (i + 1 === children.length) { children[0].focus(); } } } else if ('Enter' === e.code) { e.preventDefault(); var children = [].slice.call(document.querySelectorAll('#hs-membership-form input:not([type="hidden"]):not([type="checkbox"]):not([disabled])')); for (i = 0; i < children.length; i++) { var input=children[i]; if (input === document.activeElement && children[i+1] !== undefined) { children[i+1].focus(); break; } else if (input === document.activeElement && i + 1 === children.length) { // document.querySelector('.hs-membership-loader').classList.add('active'); document.getElementById('hs-membership-form').submit(); } else if (i + 1 === children.length) { children[0].focus(); } } } } </script> <div id="hs-membership-rate-limit-error-text" style="display:none"> You've made too many attempts at this request. Please try this action again in a few minutes. </div> <script type="text/javascript"> function show_password(id) { var input = document.getElementById(id); input.type = input.type === 'password' ? 'text' : 'password'; } </script> <script> function getCookie(name) { var nameEQ = name + "="; var ca = document.cookie.split(';'); for(var i=0;i < ca.length;i++) { var c = ca[i]; while (c.charAt(0)==' ') c = c.substring(1,c.length); if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length); } return null; } document.getElementById('hs-membership-form-hubspotutk').value = getCookie("hubspotutk"); </script> </span>
Use this table to describe parameters / fields
ParameterTypeDescription Default
email_label
String

La etiqueta para el campo de entrada de correo electrónico.

"Email"
password_label
String

La etiqueta para el campo de entrada de la contraseña.

"Password"
remember_me_label
String

La etiqueta de la casilla de comprobación "Recordarme".

"Remember Me"
reset_password_text
String

El texto para el hipervínculo de restablecimiento de la contraseña.

"Forgot your password?"
submit_button_text
String

El texto para el botón de envío.

"Login"
show_password
String

El texto del enlace para revelar la contraseña.

"Show password"

Registro de membresía

Crea un formulario de registro para acceder a contenidos privados

{% 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" %}<span id="hs_cos_wrapper_my_register" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_member_register" style="" data-hs-cos-general-type="widget" data-hs-cos-type="member_register"><div class="hs-form-field"> <ul class="no-list hs-error-msgs" style="text-align:center"> <li> <label class="hs-membership-global-error hs-error-msg"></label> </li> </ul> </div> <form method="post" action="/_hcms/mem/register?domain=default&amp;hs_preview_key=_zUv_TyY1BCRQ2RviUepiQ&amp;portalId=2272014&amp;tc_deviceCategory=desktop&amp;template_file_path=my-test-theme%2Ftemplates%2Fsystem%2Fmembership-register.html&amp;updated=1644243124290&amp;redirect_url=/_hcms/mem/login?success%3Dtrue" id="hs-membership-form" onsubmit="onFormSubmit()" data-hs-do-not-collect=""> <input name="csrf_token" type="hidden" value=""> <input name="redirect_url" type="hidden" value="/_hcms/mem/login?success=true"> <input id="hs-membership-form-hubspotutk" name="hubspotutk" type="hidden" value=""> <div class="hs-form-field"> <label for="hs-register-widget-email">Email*</label> <input class="hs-input" name="email_read_only" type="email" value="" id="hs-register-widget-email" disabled=""> <input name="email" type="hidden" value=""> <input name="token" type="hidden" value=""> </div> <div class="hs-form-field"> <label for="hs-register-widget-password">Password*</label> <a class="hs-register-widget-show-password" href="javascript:show_password('hs-register-widget-password');">Show password</a> <input class="hs-input" name="password" type="password" placeholder="Password" id="hs-register-widget-password"> </div> <div class="form-input-validation-message" id="hs-membership-password-requirements"> <ul class="no-list hs-error-msgs"> <li> <label>Password must be at least 8 characters long and include lower and uppercase letters, a number, and a symbol</label> </li> </ul> </div> <div class="hs-form-field"> <label for="hs-register-widget-password-confirm">Confirm Password*</label> <a class="hs-register-widget-show-password" href="javascript:show_password('hs-register-widget-password-confirm');">Show password</a> <input class="hs-input" name="password_confirm" type="password" placeholder="Confirm Password" id="hs-register-widget-password-confirm"> </div> <div class="hs-membership-loader hs_submit hs-submit"> <div class="actions"> <input type="submit" class="hs-button primary large" value="Save Password"> </div> </div> </form> <script type="text/javascript"> function onFormSubmit() { // document.querySelector('.hs-membership-loader').classList.add('active'); } document.onkeydown = function(e) { if (['ArrowUp','ArrowDown'].includes(e.code)) { var children = [].slice.call(document.querySelectorAll('#hs-membership-form input:not([type="hidden"]):not([type="checkbox"]):not([disabled])')); for (i = 0; i < children.length; i++) { var input = children[i]; if (input === document.activeElement) { if (e.code =='ArrowDown' && children[i+1] !== undefined) { children[i+1].focus(); break; } else if (e.code=='ArrowUp' && children[i-1]!==undefined) { children[i-1].focus(); break; } } else if (i + 1 === children.length) { children[0].focus(); } } } else if ('Enter' === e.code) { e.preventDefault(); var children = [].slice.call(document.querySelectorAll('#hs-membership-form input:not([type="hidden"]):not([type="checkbox"]):not([disabled])')); for (i = 0; i < children.length; i++) { var input=children[i]; if (input === document.activeElement && children[i+1] !== undefined) { children[i+1].focus(); break; } else if (input === document.activeElement && i + 1 === children.length) { // document.querySelector('.hs-membership-loader').classList.add('active'); document.getElementById('hs-membership-form').submit(); } else if (i + 1 === children.length) { children[0].focus(); } } } } </script> <script type="text/javascript"> function show_password (id) { var input = document.getElementById(id); input.type = input.type === 'password' ? 'text' : 'password'; } </script> <script> function getCookie(name) { var nameEQ = name + "="; var ca = document.cookie.split(';'); for(var i=0;i < ca.length;i++) { var c = ca[i]; while (c.charAt(0)==' ') c = c.substring(1,c.length); if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length); } return null; } document.getElementById('hs-membership-form-hubspotutk').value = getCookie("hubspotutk"); </script> </span>
Use this table to describe parameters / fields
ParameterTypeDescription Default
email_label
String

La etiqueta para el campo de entrada de correo electrónico.

"Email"
password_label
String

La etiqueta para el campo de entrada de la contraseña.

"Password"
password_confirm_label
String

La etiqueta para el campo de confirmación de la contraseña.

"Confirm Password"
submit_button_text
String

El texto para el botón de envío.

"Save Password"
show_password
String

El texto del enlace para revelar la contraseña.

"Show password"

Solicitud de restablecimiento de contraseña

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

{% password_reset_request "my_password_reset_request" %} {% password_reset_request "my_password_reset_request" email_label="Email", submit_button_text="Send Reset Email" %}<span id="hs_cos_wrapper_my_password_reset_request" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_password_reset_request" style="" data-hs-cos-general-type="widget" data-hs-cos-type="password_reset_request"><div class="hs-form-field"> <ul class="no-list hs-error-msgs" style="text-align:center"> <li> <label class="hs-membership-global-error hs-error-msg"></label> </li> </ul> </div> <div class="hs-form-field"> <ul class="no-list" style="text-align:center"> <li> <label class="hs-membership-global-message"></label> </li> </ul> </div> <form method="post" action="/_hcms/mem/reset/request?domain=default&amp;hs_preview_key=x7aXsEAvlLtUOa1P5t89wQ&amp;portalId=2272014&amp;tc_deviceCategory=desktop&amp;template_file_path=my-test-theme%2Ftemplates%2Fsystem%2Fmembership-reset-password-request.html&amp;updated=1644243124282&amp;redirect_url=/" id="hs-membership-form" onsubmit="onFormSubmit()" data-hs-do-not-collect=""> <input name="csrf_token" type="hidden" value=""> <input name="redirect_url" type="hidden" value="/"> <div class="hs-form-field"> <label for="hs-reset-request-widget-email">Email*</label> <input class="hs-input" name="email" type="text" placeholder="Email" id="hs-reset-request-widget-email"> </div> <div class="hs-membership-loader hs_submit hs-submit"> <div class="actions"> <input type="submit" class="hs-button primary large" value="Send Reset Email"> </div> </div> </form> <script type="text/javascript"> function onFormSubmit() { // document.querySelector('.hs-membership-loader').classList.add('active'); } document.onkeydown = function(e) { if (['ArrowUp','ArrowDown'].includes(e.code)) { var children = [].slice.call(document.querySelectorAll('#hs-membership-form input:not([type="hidden"]):not([type="checkbox"]):not([disabled])')); for (i = 0; i < children.length; i++) { var input = children[i]; if (input === document.activeElement) { if (e.code =='ArrowDown' && children[i+1] !== undefined) { children[i+1].focus(); break; } else if (e.code=='ArrowUp' && children[i-1]!==undefined) { children[i-1].focus(); break; } } else if (i + 1 === children.length) { children[0].focus(); } } } else if ('Enter' === e.code) { e.preventDefault(); var children = [].slice.call(document.querySelectorAll('#hs-membership-form input:not([type="hidden"]):not([type="checkbox"]):not([disabled])')); for (i = 0; i < children.length; i++) { var input=children[i]; if (input === document.activeElement && children[i+1] !== undefined) { children[i+1].focus(); break; } else if (input === document.activeElement && i + 1 === children.length) { // document.querySelector('.hs-membership-loader').classList.add('active'); document.getElementById('hs-membership-form').submit(); } else if (i + 1 === children.length) { children[0].focus(); } } } } </script> </span>
Use this table to describe parameters / fields
ParameterTypeDescription Default
email_label
String

La etiqueta para el campo de entrada de correo electrónico.

"Email"
submit_button_text
String

El texto para el botón de envío.

"Send Reset Email"
password_reset_message
String

El mensaje que aparece después de solicitar el correo electrónico de restablecimiento de contraseña.

False

Restablecimiento de contraseña

Representa 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" %}<span id="hs_cos_wrapper_my_password_reset_request" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_password_reset_request" style="" data-hs-cos-general-type="widget" data-hs-cos-type="password_reset_request"><div class="hs-form-field"> <ul class="no-list hs-error-msgs" style="text-align:center"> <li> <label class="hs-membership-global-error hs-error-msg"></label> </li> </ul> </div> <div class="hs-form-field"> <ul class="no-list" style="text-align:center"> <li> <label class="hs-membership-global-message"></label> </li> </ul> </div> <form method="post" action="/_hcms/mem/reset/request?domain=default&amp;hs_preview_key=x7aXsEAvlLtUOa1P5t89wQ&amp;portalId=2272014&amp;tc_deviceCategory=desktop&amp;template_file_path=my-test-theme%2Ftemplates%2Fsystem%2Fmembership-reset-password-request.html&amp;updated=1644243124282&amp;redirect_url=/" id="hs-membership-form" onsubmit="onFormSubmit()" data-hs-do-not-collect=""> <input name="csrf_token" type="hidden" value=""> <input name="redirect_url" type="hidden" value="/"> <div class="hs-form-field"> <label for="hs-reset-request-widget-email">Email*</label> <input class="hs-input" name="email" type="text" placeholder="Email" id="hs-reset-request-widget-email"> </div> <div class="hs-membership-loader hs_submit hs-submit"> <div class="actions"> <input type="submit" class="hs-button primary large" value="Send Reset Email"> </div> </div> </form> <script type="text/javascript"> function onFormSubmit() { // document.querySelector('.hs-membership-loader').classList.add('active'); } document.onkeydown = function(e) { if (['ArrowUp','ArrowDown'].includes(e.code)) { var children = [].slice.call(document.querySelectorAll('#hs-membership-form input:not([type="hidden"]):not([type="checkbox"]):not([disabled])')); for (i = 0; i < children.length; i++) { var input = children[i]; if (input === document.activeElement) { if (e.code =='ArrowDown' && children[i+1] !== undefined) { children[i+1].focus(); break; } else if (e.code=='ArrowUp' && children[i-1]!==undefined) { children[i-1].focus(); break; } } else if (i + 1 === children.length) { children[0].focus(); } } } else if ('Enter' === e.code) { e.preventDefault(); var children = [].slice.call(document.querySelectorAll('#hs-membership-form input:not([type="hidden"]):not([type="checkbox"]):not([disabled])')); for (i = 0; i < children.length; i++) { var input=children[i]; if (input === document.activeElement && children[i+1] !== undefined) { children[i+1].focus(); break; } else if (input === document.activeElement && i + 1 === children.length) { // document.querySelector('.hs-membership-loader').classList.add('active'); document.getElementById('hs-membership-form').submit(); } else if (i + 1 === children.length) { children[0].focus(); } } } } </script> </span>
Use this table to describe parameters / fields
ParameterTypeDescription Default
password_label
String

La etiqueta de texto para el campo de entrada de contraseña.

"Email"
password_confirm_label
String

La etiqueta de texto para el campo de entrada de confirmación de contraseña.

"Send Reset Email"
submit_button_text
String

La etiqueta de texto para el botón de envío del formulario.

False
show_password
String

La etiqueta de texto del botón para mostrar el valor de la contraseña introducida.

False
password_requirements
String

La etiqueta de texto que describe los requisitos de contraseña.

False

Solicitud de contraseña

Agrega un aviso 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" %}<span id="hs_cos_wrapper_password_prompt" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_password_prompt" style="" data-hs-cos-general-type="widget" data-hs-cos-type="password_prompt"> <form method="post" action="/_hcms/protected/auth"> <input name="content_id" type="hidden" value="1"> <input name="redirect_url" type="hidden" value="https://preview.hs-sites.com/content-rendering/v1/public/_hcms/preview/template/multi"> <input name="password" type="password" id="hs-pwd-widget-password" style="height: 22px; margin-top: -5px"> <input type="submit" class="hs-button primary large" value="Submit"> </form> <script type="text/javascript"> document.getElementById("hs-pwd-widget-password").focus(); </script> </span>
ParameterTypeDescription Default
submit_button_text
String

 Etiqueta para el botón debajo del campo de entrada de la contraseña.

"Submit"
bad_password_message
String

 Se muestra un mensaje si se introduce una contraseña incorrecta.

"<p>Sorry, please try again.</p>"
password_placeholder
String

 Define el texto del marcador de posición dentro del campo de la contraseña.

"Password"

Texto

Crea una sola línea de texto. Esta etiqueta puede ser útil para ser mezclada en tu marcado, cuando se utiliza junto con el parámetro no_wrapper=True. Por ejemplo, si quiere que sus usuarios finales puedan definir el destino de un ancla predefinida, podría 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" %}<span id="hs_cos_wrapper_simple_text_field" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_text" style="" data-hs-cos-general-type="widget" data-hs-cos-type="text">This is the default value for this text field</span>
ParameterTypeDescription Default
value
String

Establece el texto predeterminado del campo de texto de una línea.

Textarea

Un textarea es similar a un módulo de texto en el sentido de 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 desea utilizarlo directamente dentro de una etiqueta de envoltura 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 %}Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a urna quis lacus vehicula rutrum.
ParameterTypeDescription Default
value
String

Establece el texto predeterminado del textarea.

Reproductor de video

Muestra un reproductor de vídeo para un archivo de video desde el gestor de archivos que tiene activada 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"}" %}
ParameterTypeDescription Default
hide_playlist
Boolean

Ocultar la lista de reproducción de videos.

True
playlist_color
String

Un valor de color HEX para la lista de reproducción.

play_button_color
String

Un valor de color HEX para los botones de reproducción y pausa.

#2A2A2A
embed_button
Boolean

Mostrar el botón de incrustación en el reproductor

False
viral_sharing
Boolean

Mostrar el botón para compartir en redes sociales en el reproductor.

False
width
Number

Ancho del reproductor de video incrustado.

Auto
height
Number

Altura del reproductor de video incrustado.

Auto
player_id
Number

El player_id del video a incrustar.

style
String

Estilo adicional para el jugador.

conversion_asset
JSON

Ajuste del evento para el jugador. Puede mostrar 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 objeto tipo), posición (POST o PRE).

See above example
placeholder_alt_text
String

El texto alternativo del video.


¿Te resultó útil este artículo?
Con este formulario puedes enviar tu opinión sobre nuestros documentos para desarrolladores. Si tienes comentarios sobre el producto de HubSpot, puedes enviarlos al Foro de ideas.