La mayoría de las etiquetas de esta página tienen equivalentes de módulos predeterminados. Los módulos se pueden utilizar dentro de las áreas de arrastrar y soltar dnd_areas y columnas flexibles, lo que los hace más potentes y fáciles de usar que las etiquetas que ves aquí.
Comentarios del blog
Renderiza el código de inserción de comentarios en una plantilla de blog, incluyendo los comentarios y el formulario para comentar. Obtén más información sobre cómo personalizar las configuraciones y formularios de los comentarios del blog en este artículo de la base de conocimientos.{% blog_comments "blog_comments" label="Blog comments" select_blog="359485112" %}
<span
id="hs_cos_wrapper_blog_comments"
class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_blog_comments"
style=""
data-hs-cos-general-type="widget"
data-hs-cos-type="blog_comments"
>
<div class="section post-footer">
<div id="comments-listing" class="new-comments"></div>
<div id="hs_form_target_{formID}" data-hs-forms-root="true">
<div class="hs-comment-message hs-common-confirm-message">
Your comment has been received.
</div>
<form
id="hsForm_id"
method="POST"
accept-charset="UTF-8"
enctype="multipart/form-data"
novalidate=""
action="https://forms.hsforms.com/submissions/v3/public/submit/formsnext/multipart/{hubID}/{formID}"
class="hs-form-private hs-form stacked"
target="target_iframe_07e1eb93-87f2-48039"
data-instance-id="{formID}"
data-formid="{formID}"
data-portal-id="123456"
data-test-id="hsForm_{formID}"
data-hs-cf-bound="true"
>
<div
class="hs_firstname hs-firstname hs-fieldtype-text field hs-form-field"
>
<label
id="label-firstname-07e1eb93"
class=""
placeholder="Enter your First Name"
for="firstname-07e1eb9339"
><span>First Name</span
><span class="hs-form-required">*</span></label
>
<legend class="hs-field-desc" style="display: none;"></legend>
<div class="input">
<input
id="firstname-{formID}"
name="firstname"
required=""
placeholder=""
type="text"
class="hs-input"
inputmode="text"
autocomplete="given-name"
value=""
/>
</div>
</div>
<div
class="hs_lastname hs-lastname hs-fieldtype-text field hs-form-field"
>
<label
id="label-lastname-{formID}"
class=""
placeholder="Enter your Last Name"
for="lastname-{formID}"
><span>Last Name</span></label
>
<legend class="hs-field-desc" style="display: none;"></legend>
<div class="input">
<input
id="lastname-{formID}"
name="lastname"
placeholder=""
type="text"
class="hs-input"
inputmode="text"
autocomplete="family-name"
value=""
/>
</div>
</div>
<div class="hs_email hs-email hs-fieldtype-text field hs-form-field">
<label
id="label-email-{formID}"
class=""
placeholder="Enter your Email"
for="email-{formID}"
><span>Email</span><span class="hs-form-required">*</span></label
>
<legend class="hs-field-desc" style="display: none;"></legend>
<div class="input">
<input
id="email-{formID}"
name="email"
required=""
placeholder=""
type="email"
class="hs-input"
inputmode="email"
autocomplete="email"
value=""
/>
</div>
</div>
<div
class="hs_website hs-website hs-fieldtype-text field hs-form-field"
>
<label
id="label-website-{formID}"
class=""
placeholder="Enter your Website"
for="website-{formID}"
><span>Website</span></label
>
<legend class="hs-field-desc" style="display: none;"></legend>
<div class="input">
<input
id="website-{formID}"
name="website"
placeholder=""
type="text"
class="hs-input"
inputmode="url"
value=""
/>
</div>
</div>
<div
class="hs_comment hs-comment hs-fieldtype-textarea field hs-form-field"
>
<label
id="label-comment-{formID}"
class=""
placeholder="Enter your Comment"
for="comment-{formID}"
><span>Comment</span><span class="hs-form-required">*</span></label
>
<legend class="hs-field-desc" style="display: none;"></legend>
<div class="input">
<textarea
id="comment-{formID}"
class="hs-input hs-fieldtype-textarea"
name="comment"
required=""
placeholder=""
></textarea>
</div>
</div>
<div class="hs_recaptcha hs-recaptcha field hs-form-field">
<div class="input">
<div
class="grecaptcha-badge"
data-style="inline"
style="width: 256px; height: 60px; box-shadow: gray 0px 0px 5px;"
>
<div class="grecaptcha-logo">
<iframe
title="reCAPTCHA"
width="256"
height="60"
role="presentation"
name="a-pp7yub2hvkn1"
frameborder="0"
scrolling="no"
sandbox="allow-forms allow-popups allow-same-origin allow-scripts allow-top-navigation allow-modals allow-popups-to-escape-sandbox allow-storage-access-by-user-activation"
src="https://www.google.com/recaptcha/enterprise/anchor?{queryParams}"
></iframe>
</div>
<div class="grecaptcha-error"></div>
<textarea
id="g-recaptcha-response"
name="g-recaptcha-response"
class="g-recaptcha-response"
style="width: 250px; height: 40px; border: 1px solid rgb(193, 193, 193); margin: 10px 25px; padding: 0px; resize: none; display: none;"
></textarea>
</div>
<iframe style="display: none;"></iframe>
</div>
<input
type="hidden"
name="g-recaptcha-response"
id="hs-recaptcha-response"
value=""
/>
</div>
<div class="hs_submit hs-submit">
<div class="hs-field-desc" style="display: none;"></div>
<div class="actions">
<input
type="submit"
class="hs-button primary"
value="Submit Comment"
/>
</div>
</div>
<input name="hs_context" type="hidden" value="{submissionContext}" />
<iframe name="target_iframe_{formID}" style="display: none;"></iframe>
</form>
</div>
</div>
</span>
| Parámetro | Tipo | Descripción | Predeterminado |
|---|---|---|---|
limit | Número | Fija el número máximo de comentarios. | 5000 |
select_blog | ”default”, predeterminado o ID del blog | Especifica qué blog está conectado a los comentarios que se insertan. Este parámetro acepta como argumentos "default" o un ID de blog (disponible en la URL del panel del blog). Si quieres utilizar el blog predeterminado, este parámetro es innecesario. | default |
skip_css | Booleano | Si se define esta opción como verdadera, el CSS de los comentarios del blog dejará de cargarse. | false |
message | Cadena | El mensaje que se mostrará cuando no haya comentarios. De forma predeterminada, aparece como vacío (no se muestra el texto). | "" |
Contenido del blog
Mientras que los diseños de arrastrar y soltar incluyen un módulo de contenido de blog, estos módulos no se crean con una sola etiqueta. Por el contrario, utilizan la lógica condicional para definir cómo debe presentarse una publicación y un listado de blog. Puedes obtener más información sobre la codificación de plantillas para blogs aquí.Filtro de publicación de blog
Crea un listado enlazado de posts por tema, mensajes por mes o mensajes por autor.Nota:
Este módulo solo se puede utilizar en las plantillas de publicaciones de blog.{% post_filter "post_filter" %}
{% post_filter "posts_by_topic"
select_blog="default",
expand_link_text="see all",
overrideable=False,
list_title="Posts by Topic",
max_links=5,
filter_type="topic",
label="Posts by Topic"
%}
<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>
| Parámetro | Tipo | Descripción | Predeterminado |
|---|---|---|---|
select_blog | ”default” o ID del blog | Selecciona el blog de HubSpot que se va a utilizar. Este parámetro utiliza un ID de blog o un valor “default”. | "default" |
expand_link_text | Cadena | Enlace de texto que se mostrará si hay más publicaciones que el número definido en max_links. Excluye el parámetro para omitir el enlace. | "see all" |
list_title | Cadena | Título de la lista para mostrar. | "" |
list_tag | Cadena | Define la etiqueta utilizada para la lista. Por lo general, el valor debe ser "ul" o "ol". | "ul" |
title_tag | Cadena | Define la etiqueta utilizada para el título de la lista. | "h3" |
max_links | Número | Número máximo de valores de filtro que se mostrarán. Excluye el parámetro para mostrar todo. | 5 |
filter_type | Enumeración | Selecciona el tipo de filtro. Los valores posibles son "topic", "month" y "author". | "topic" |
Listado de publicaciones de blog
Agrega un listado de las publicaciones más populares o más importantes.Nota:
Esta etiqueta solo se puede utilizar en las plantillas de publicaciones de blog. El contenido de la etiqueta se carga de forma asíncrona en el lado del cliente. Como resultado, si quieres modificar la sección de publicaciones después de que se haya cargado, tendrás que definir una función JS global para manejar esa manipulación. Utiliza la funciónhsPostListingComplete(feeds), donde feeds es el selector de jQuery de todas las secciones que se han completado. Se recomienda modificar directamente el objeto DOM en esa función.{% post_listing "post_listing" %}
{% post_listing "top_posts" select_blog="default", label="Recent Posts", overrideable=False, list_title="Recent Posts", listing_type="recent", max_links=5 %}
<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>
| Parámetro | Tipo | Descripción | Predeterminado |
|---|---|---|---|
select_blog | ”default” o ID del blog | Selecciona el blog de HubSpot que se utilizará para el listado. Este parámetro utiliza un ID de blog o un valor "default". | "default" |
list_title | Cadena | Título de la lista para mostrar. | "" |
list_tag | Cadena | Define la etiqueta utilizada para la lista. Por lo general, el valor debe ser "ul" o "ol". | "ul" |
title_tag | Cadena | Define la etiqueta utilizada para el título de la lista. | "h3" |
listing_type | Cadena | Muestra las publicaciones del blog según las más recientes o las más populares en un período de tiempo. Los valores posibles incluyen: recent, popular_all_time, popular_past_year, popular_past_six_months y popular_past_month. | "recent" |
max_links | Número | Número máximo de entradas que se publicarán en la lista. | 5 |
include_featured_image | Booleano | Mostrar la imagen destacada junto con el enlace de la publicación. | False |
Publicaciones relacionadas con el blog
Agrega un listado de publicaciones de blog basado en un conjunto de parámetros comunes a todas las entradas de todos los blogs. Las publicaciones se seleccionan según su nivel de relevancia con respecto a los parámetros establecidos. Ten en cuenta que esta etiqueta no genera un módulo editable para la página o la publicación y se configura completamente con HubL.{% 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>
| Parámetro | Tipo | Descripción | Predeterminado |
|---|---|---|---|
blog_ids | Número | Los ID de los blogs de los que se incluirán publicaciones. Si no se especifica, incluirá publicaciones del blog predeterminado. | |
blog_post_ids | Cadena | Los ID de las publicaciones de blog que se usarán para encontrar publicaciones relacionadas que mostrar, separados por comas. Utiliza este parámetro solo cuando el widget se muestre en páginas. Cuando se usa en las publicaciones de blog, buscará publicaciones relevantes basadas en la publicación de blog que se muestra actualmente. | |
blog_post_override | Cadena | Los ID de las publicaciones de blog que siempre deben aparecer en el listado devuelto, sin importar los demás parámetros o filtros (separados por comas). | |
limit | Número | El número máximo de publicaciones que se incluirán en la lista. | 3 |
tags | Cadena | Las etiquetas del blog que deberían utilizarse para determinar si una publicación es relevante (separadas por comas). Las publicaciones de blog con las etiquetas especificadas tendrán una clasificación más alta en cuanto a la relevancia. | |
tag_boost | Número | Aumenta la relevancia de las etiquetas especificadas en el parámetro tags para generar publicaciones relacionadas. Incluye este parámetro para extraer publicaciones más relacionadas con las publicaciones que se muestran actualmente o las publicaciones especificadas. Acepta números positivos. | |
start_date | fecha y hora | Fecha de publicación más temprana. Puedes ver un ejemplo a continuación. | |
end_date | fecha y hora | Fecha de publicación más reciente. Puedes ver un ejemplo a continuación. | |
blog_authors | Cadena | Los nombres de los autores de los que se incluirán los mensajes (separados por comas). Puedes ver un ejemplo a continuación. | |
path_prefixes | Cadena | Rutas de URL o subdirectorios desde los que incluir las publicaciones (separadas por comas). Si una publicación de blog tiene un prefijo similar en la ruta, la relevancia de la publicación aumenta, mejorando su clasificación en el listado. | |
callback | Cadena | El nombre de una función de JavaScript para renderizar las publicaciones de blog devueltas. A la función se le pasa una matriz de objetos de publicación de blog para darle formato. Si no se especifica el parámetro callback ni el parámetro post_formatter, la etiqueta generará HTML en un formato predeterminado. Puedes ver un ejemplo a continuación. | none |
post_formatter | Cadena | El nombre de una macro personalizada para renderizar las publicaciones de blog devueltas. A la macro se le pasan tres parámetros que son el objeto de la publicación de blog a dar formato, el recuento en la iteración de publicaciones de blog y el recuento total de publicaciones de blog en los resultados. Si no se especifica o se define como default, se utilizará el formateador incorporado para dar formato a cada publicación. | default |
allow_any_language | Booleano | Cuando se define como false, solo aparecerán las publicaciones en el mismo idioma que la página en la que se utiliza la etiqueta. Cuando se define como true, la restricción de idioma se ignora y todas las publicaciones relacionadas se extraen independientemente del idioma de la página. | False |
Recomendamos utilizar el parámetro
callback en lugar de post_formatter para mejorar la velocidad de carga de la página.Ejemplos
El siguiente ejemplo genera una lista de publicaciones escritas por uno de los tresblog_authors especificados en dos blogs diferentes:
{% related_blog_posts blog_ids="3241539189,3261083894", limit=6, blog_authors="John Smith,Joe Smith,Frank Smith" %}
blog_post_ids, por lo que se puede usar en una página:
{% related_blog_posts blog_post_ids="3267910554", limit=10, tags="sales enablement", start_date="2018-02-05", end_date="2018-06-10" %}
callback para controlar la salida HTML de la lista de publicaciones:
{% related_blog_posts limit=5, callback="blog_post_formatter" %}
<script>
var blog_post_formatter = function(blogposts) {
var formatted = "<div>";
for (var i = 0; i < blogposts.length; i++) {
var blogpost = blogposts[i];
formatted += '<div class="related-blog-item">';
formatted += `<span>Related Post ${i + 1}/${blogposts.length}</span><br>`;
formatted += `<a class="related-blog-title" href="https://developers.hubspot.es/docs${blogpost.url}"><span>${blogpost.name}</span></a>`;
formatted += `<div class="hs-related-blog-byline">by <span class="related-blog-author">${blogpost.blogAuthor.fullName}</span><span class="related-blog-posted-at"> posted on </span><span class="related-blog-date">${new Date(blogpost.publishDate).toLocaleDateString()}</span></div>`;
formatted += `<p class="related-blog-post-summary">${blogpost.postSummary}<a href="https://developers.hubspot.es/docs${blogpost.url}">Read more</a></p>`;
formatted += '<div class="related-blog-tags">';
if (blogpost.tagList.length > 0) {
formatted += `Tags: ${blogpost.tagList.map(tag => tag.label).join(", ")}`;
}
formatted += '</div>';
if (blogpost.featuredImage) {
formatted += `<img src="${blogpost.featuredImage}" alt="${blogpost.featuredImageAltText}">`;
}
formatted += '</div>';
}
formatted += '</div>';
return formatted;
}
</script>
Compartir el blog en redes sociales
Compartir el blog en redes sociales muestra los contadores de contenido compartido de las publicaciones de blog (si están activos en la configuración del contenido).{% blog_social_sharing "blog_social_sharing" %}
{% blog_social_sharing "blog_social_sharing" select_blog="359485112" %}
<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>
| Parámetro | Tipo | Descripción | Predeterminado |
|---|---|---|---|
select_blog | ”default” o el ID del blog | Especifica con qué blog están conectados los contadores de compartidos. Este parámetro acepta como argumentos "default" o un ID de blog (disponible en la URL del panel del blog). Si quieres utilizar tu blog predeterminado, este parámetro es innecesario. | default |
downgrade_shared_url | Booleano | Usa HTTP en la URL enviada a las redes sociales. Se utiliza para mantener los recuentos cuando se actualizan los dominios a solo HTTPS. | false |
Suscripción al blog
Una etiqueta de suscripción a un blog muestra el formulario de suscripción para un blog determinado. Este formulario se genera automáticamente cada vez que se crea un blog en la configuración de contenido, y cada blog cuenta con su propio formulario de suscripción. Ten en cuenta que los campos del formulario de suscripción se configuran en el editor de formularios de la interfaz de usuario.{% 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',
id: 2749976739,
pageName:
'Apple, Google & Starbucks: Inside the Web Design Style Guides of 10 Famous Companies',
redirectUrl:
'http://designers.hubspot.com/blog/web-design-style-guides-examples?hsFormKey=a56a754bc4c3465015935953363b8ff3#blog_subscription',
css: '',
target: '#hs_form_target_blog_subscription',
formData: { cssClass: 'hs-form stacked' },
});
</script>
</span>
| Parámetro | Tipo | Descripción | Predeterminado |
|---|---|---|---|
select_blog | ”default” o ID del blog | Selecciona el formulario de suscripción al blog que se va a mostrar. Este parámetro acepta como argumentos "default" o un ID de blog (disponible en la URL del panel del blog). Si quieres utilizar el blog predeterminado, este parámetro es innecesario. | default |
title | Cadena | Define el texto de una etiqueta h3 encima del formulario de suscripción. | "Subscribe Here!" |
no_title | Booleano | Si es “True”, se elimina la etiqueta h3 que está encima del título. | false |
response_message | Cadena | Define el mensaje de agradecimiento que se muestra cuando un usuario envía un formulario. Es compatible con HTML. | "Thanks for Subscribing!" |
edit_form_link | Cadena | Este parámetro genera un enlace que permite a los usuarios hacer clic en la pantalla del editor de formularios correspondiente. Esta opción solo se mostrará en el editor de la interfaz del usuario si los módulos tienen el parámetro overrideable=True.Por ejemplo, para reemplazar Hub ID y el ID del formulario con la información de la URL de tu formulario de suscripción al blog predeterminado: edit_form_link=" <ul>\n <li><a href="https://developers.hubspot.es/docs/forms/HubID/FormID/edit/" target="_blank">Default Blog</a></li> \n</ul> " Ten en cuenta que los caracteres de nueva línea \n agregan una línea adicional de espacio antes y después del enlace. |
Booleano
Una etiqueta booleana crea una casilla de verificación en la interfaz de usuario que imprime “verdadero” o “falso”. Además de imprimir el valor, este módulo es útil para definir la lógica condicional de la plantilla, cuando se combina con el parámetroexport_to_template_context.
{% boolean "boolean" %}
{% boolean "nav_toggle" label="Hide navigation", value=False, no_wrapper=True %}
false
| Parámetro | Tipo | Descripción | Predeterminado |
|---|---|---|---|
value | Booleano | Determina si la casilla de verificación está marcada o desmarcada. | False |
Elección
Una etiqueta de elección crea una lista desplegable en el editor de contenidos de la interfaz del usuario que imprime el valor seleccionado por el usuario. Las etiquetas de opción son ideales para dar a los usuarios un conjunto de ajustes preestablecidos, como la impresión del tipo de página como el encabezado de la página. Además de imprimir el valor de la opción, esta etiqueta es útil para definir la lógica condicional de la plantilla cuando se combina con el parámetroexport_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>
| Parámetro | Tipo | Descripción |
|---|---|---|
value | Booleano | El valor predeterminado del campo para el menú desplegable |
choices | Secuencia | Una lista de valores separados por comas o una lista de pares valor-etiqueta. La sintaxis de los pares de etiquetas de valores es la siguiente: choices="[[\"value1\", \"Label 1\"], [\"value2\", \"Label 2\"]]". El editor mostrará la etiqueta, mientras que imprimirá el valor en la página. |
Color
La etiqueta de color genera un selector de color en el editor de las páginas de la interfaz de usuario que imprime un valor de color HEX en una plantilla. Ten en cuenta que este módulo solo puede utilizarse en las plantillas, no en los archivos CSS. Si utilizas esta etiqueta en un<style> o en un CSS en línea, es recomendable usar el parámetro no_wrapper=True para eliminar el contenedor <span>.
{% color "color" %}
{% color "my_color_picker" label="Choose a color", color="#000000", no_wrapper=True %}
#000000
| Parámetro | Tipo | Descripción |
|---|---|---|
color | Cadena | Un valor predeterminado de color HEX para el selector de color |
CTA
Una etiqueta de llamada a la acción o CTA permite a los usuarios agregar un botón de llamada a la acción de HubSpot a un área predefinida de una página.{% 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>
| Parámetro | Tipo | Descripción |
|---|---|---|
embed_code | Cadena | El código de inserción para la CTA. \n diferencia los saltos de línea. |
full_html | Cadena | El código de inserción para la CTA (igual que embed_code). \n diferencia los saltos de línea. |
image_src | Cadena | URL de la imagen src que define la imagen de vista previa en el editor de contenido. |
image_editor | Cadena | Marcador para la vista previa del editor de imágenes |
guid | Cadena | El número único de ID de la CTA. Este número de identificación está disponible en la URL de la pantalla de detalles de una CTA en particular. Este parámetro se utiliza para elegir qué CTA mostrar de forma predeterminada. |
image_html | Cadena | HTML de la imagen de la CTA sin el script de la CTA.* |
image_email | Cadena | Versión del código de la CTA apta para correo electrónico.* |
*Si bien estos parámetros se incluyen aquí para ofrecer una visión completa, el código que HubSpot genera para completarlos es muy específico. Si necesitas seleccionar una CTA predeterminada, en lugar de desarrollar los parámetros desde cero, se recomienda configurar la CTA en un diseño de plantilla y luego clonar al archivo. Así, podrás copiar el módulo HubL de la CTA con todos los parámetros correctamente definidos.También hay una función de CTA que permite generar una CTA a partir de su ID.
HTML personalizado
Un módulo de HTML personalizado permite a los usuarios introducir HTML sin formato en el editor de contenidos. Si necesitas agregar una gran cantidad de HTML predeterminado a la etiqueta, puedes utilizar la sintaxis de bloques.{% raw_html "raw_html" %}
{% raw_html "my_custom_html_module" label="Enter HTML here" value="<div>My HTML Block</div>" %}
Block Syntax Example:
{% widget_block raw_html "my_custom_html_module" overrideable=True, label="My custom HTML module" %}
{% widget_attribute "value" %}
<div>Default HTML block</div>
{% end_widget_attribute %}
{% end_widget_block %}
<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>
| Parámetro | Tipo | Descripción |
|---|---|---|
value | Cadena | Define el contenido HTML predeterminado del módulo. |
Módulos personalizados
Los módulos personalizados permiten a los diseñadores crear un grupo personalizado de objetos de contenido editables que se utilizarán en las plantillas y páginas del CMS, al tiempo que permiten a los profesionales del marketing controlar el contenido específico que aparece en esos módulos página por página. Más información sobre los módulos personalizados y su sintaxis simplificada de HubL, aquí. Los módulos personalizados deben crearse en el editor de módulos personalizados, pero pueden incluirse en plantillas codificadas y módulos HubL. Verás un “fragmento de uso” en la barra lateral derecha del editor de módulos personalizados en “Uso de plantillas”. Los módulos personalizados requieren el ID del módulo como una cadena, así como un parámetro de ruta para especificar qué módulo cargar. El fragmento de uso también incluirá un parámetro de etiqueta. Consulta la sintaxis a continuación:{% module "module_15677217712485" path="/Custom/Test custom module" %}
{% module "module_25642219712432" path="/Assets/Custom calendar module" label="Custom calendar module" %}
<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>
| Parámetro | Tipo | Descripción |
|---|---|---|
module_id | Cadena | El ID del módulo que se renderizará. |
path | Cadena | La ruta del módulo que se renderizará. Incluye la barra inclinada para la ruta absoluta, de lo contrario la ruta es relativa a la plantilla. Consulta los módulos predeterminados de HubSpot con rutas correspondientes a sus etiquetas de HubL, como @hubspot/rich_text, @hubspot/linked_image, etc. |
Marcadores de posición del editor
Para mostrar el contenido del marcador de posición de un módulo en el editor, puedes añadir el contenido predeterminado a los campos del módulo o utilizar la etiqueta de HubLeditor_placeholder. Esta etiqueta puede ser útil cuando el módulo no tiene o necesita contenido predeterminado, o bien para optimizar la construcción del módulo.
{% if module.label %}
{% cta guid="{{ module.guid }}" label="my_cta" %}
{% elif is_in_editor %}
{% editor_placeholder %}
{% endif %}
La primera instrucción
if identifica si el módulo está presente. Luego, la
instrucción elif identifica si el módulo se renderiza en el contexto del
editor utilizando la variable is_in_editor. Esta variable devuelve true si
el contenido se está renderizando en cualquier editor de contenidos, pero
puedes especificar aún más con las variables del editor y la vista previa
.meta.json del módulo.
{
"global": false,
"host_template_types": ["PAGE"],
"module_id": 62170380654,
"is_available_for_new_content": true,
"placeholder": {
"show_module_icon": true,
"title": "Call to action",
"description": "Select a CTA"
}
}
| Parámetro | Tipo | Descripción |
|---|---|---|
show_module_icon | Booleano | Determina si se debe mostrar el ícono del módulo. |
title | Cadena | El título que aparece en el marcador de posición. |
description | Cadena | La descripción que aparece en el marcador de posición. |
Columna flexible
Las columnas flexibles son columnas verticales en una plantilla que permiten a los creadores de contenido insertar y eliminar módulos en la página utilizando el editor de contenido. Al codificar una columna flexible con HubL, puedes elegir otros módulos de HubL para que aparezcan en la columna flexible por opción predeterminada. El código de ejemplo que aparece a continuación muestra la sintaxis básica y una columna flexible de ejemplo con un módulo de texto enriquecido y un formulario como contenido predeterminado. Ten en cuenta que las columnas flexibles solo pueden agregarse a las plantillas de página, pero no a las plantillas de blog o de correo electrónico. Los módulos no pueden contener columnas flexibles, pero pueden contener campos y grupos repetibles, lo que proporciona una funcionalidad similar.{% widget_container "my_flexible_column" label="My flex column"%}
{% module "rich_text" path="@hubspot/rich_text" %}
{% module "linked_image" path="@hubspot/linked_image" %}
{% end_widget_container %}
<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 uses esta etiqueta, lalabel debe seguir el valor name de la columna flexible para funcionar en el editor de contenido. Por ejemplo, la siguiente sintaxis no es válida:[% widget_container label="My label" "my_flexible_column" %}Formulario
Permite a los usuarios seleccionar un formulario de HubSpot para agregarlo a su página. El siguiente código incluye un ejemplo de uso de la sintaxis estándar de etiquetas HubL y un ejemplo de uso de la sintaxis de bloques.{% form "my_form"
form_to_use="{formID}",
title="Free Trial"
%}
<!-- Block syntax example -->
{% module_block form "my_form"
form_follow_ups_follow_up_type="",
form_to_use="9e633e9f-0634-498e-917c-f01e355e83c6",
title="Free Trial",
notifications_are_overridden=True,
response_message="Thanks for submitting the form.",
response_type="inline",
overrideable=True,
gotowebinar_webinar_key="",
webinar_id="",
webinar_source"",
label="Form"
%}
{% module_attribute "notifications_override_email_addresses" is_json=True %}
["email_address@website.com"]
{% end_module_attribute %}
{% end_module_block %}
<div
id="hs_cos_wrapper_my_form"
class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_form"
style=""
data-hs-cos-general-type="widget"
data-hs-cos-type="form"
>
<h3
id="hs_cos_wrapper_module_13885064832664947_title"
class="hs_cos_wrapper form-title"
data-hs-cos-general-type="widget_field"
data-hs-cos-type="text"
>
Free Trial
</h3>
<div id="hs_form_target_module_13885064832664947">
<form
accept-charset="UTF-8"
enctype="multipart/form-data"
id="hsForm_08bd9f0d-3be9-41c2-93b6-231a3a71b143_6756"
class="hs-form stacked hs-custom-form"
action="https://forms.hubspot.com/uploads/form/v2/158015/08bd9f0d-3be9-41c2-93b6-231a3a71b143"
method="POST"
novalidate="novalidate"
>
<div class="hs_lastname field hs-form-field">
<label
placeholder="Enter your Last Name"
for="lastname-08bd9f0d-3be9-41c2-93b6-231a3a71b143_6756"
>Last Name</label
>
<div class="hs-field-desc" style="display: none;"></div>
<div class="input">
<input
class="hs-input"
type="text"
id="lastname-08bd9f0d-3be9-41c2-93b6-231a3a71b143_6756"
name="lastname"
value=""
placeholder=""
/>
</div>
</div>
<div class="hs_firstname field hs-form-field">
<label
placeholder="Enter your First Name"
for="firstname-08bd9f0d-3be9-41c2-93b6-231a3a71b143_6756"
>First Name</label
>
<div class="hs-field-desc" style="display: none;"></div>
<div class="input">
<input
class="hs-input"
type="text"
id="firstname-08bd9f0d-3be9-41c2-93b6-231a3a71b143_6756"
name="firstname"
value=""
placeholder=""
/>
</div>
</div>
<div class="hs_email field hs-form-field">
<label
placeholder="Enter your Email"
for="email-08bd9f0d-3be9-41c2-93b6-231a3a71b143_6756"
>Email<span class="hs-form-required"> * </span></label
>
<div class="hs-field-desc" style="display: none;"></div>
<div class="input">
<input
class="hs-input"
type="email"
required="required"
id="email-08bd9f0d-3be9-41c2-93b6-231a3a71b143_6756"
name="email"
value=""
placeholder=""
/>
</div>
</div>
<div class="hs_submit">
<div class="hs-field-desc" style="display: none;"></div>
<div class="actions">
<input class="hs-button primary large" type="submit" value="Submit" />
</div>
</div>
</form>
</div>
<script charset="utf-8" src="//js.hsforms.net/forms/current.js"></script>
<script>
hbspt.forms.create({
portalId: '123456',
formId: '{formID}',
formInstanceId: '6756',
id: 1,
redirectUrl: 'http:\/\/www.hubspot.com\/',
deactivateSmartForm: true,
css: '',
target: '#hs_form_target_module_13885064832664947',
contentType: 'landing-page',
formData: {
cssClass: 'hs-form stacked hs-custom-form',
},
});
</script>
</div>
| Parámetro | Tipo | Descripción |
|---|---|---|
form_key | Cadena | Especifica un ID único para el formulario a nivel de página. |
form_to_use | Cadena | Especifica qué formulario cargar de forma predeterminada, basándose en el ID del formulario. Este ID está disponible en la URL del editor de formularios de cada formulario. |
title | Cadena | Rellena una etiqueta h3 en el encabezado del formulario. |
no_title | Booleano | Si es True, se elimina la etiqueta h3 que está encima del título. |
form_follow_ups_follow_up_type | Enumeración | Especifica las acciones de seguimiento, como inscribir a un contacto en un workflow o enviar un correo de seguimiento simple. Los valores posibles son no_action, simple y automation. |
simple_email_for_live_id | Número | Especifica el ID del correo de seguimiento simple para la página publicada. |
simple_email_for_buffer_id | Número | Especifica el ID del correo de seguimiento simple para la versión de guardado automático de una página. |
follow_up_type_simple | Booleano | Si es “True”, permite un correo de seguimiento simple. Alternativa de form_follow_ups_follow_up_type. |
follow_up_type_automation | Booleano | Si es “True”, inscribe los envíos de formularios en un workflow. Alternativa de form_follow_ups_follow_up_type. |
simple_email_campaign_id | Número | Especifica el ID del correo de seguimiento simple. Alternativa de simple_email_for_live_id. |
form_follow_ups_workflow_id | Número | Especifica el ID del workflow en el que se inscriben los envíos de formularios. |
response_redirect_url | Cadena | Si se redirecciona a una página externa, este parámetro especifica la URL a la que se debe redireccionar. |
response_redirect_id | Número | Si se redirecciona a una página alojada en HubSpot, este parámetro especifica el ID de la página. El ID de la página está disponible en la URL del editor de páginas de cada página. |
response_response_type | Enumeración | Determina si se redirecciona a otra página o si se muestra un mensaje de agradecimiento en línea cuando se envía el formulario. El valor de este parámetro debe ser "redirect" o "inline" (predeterminado). |
response_message | Cadena | Establece un mensaje de agradecimiento en línea. Este parámetro es compatible con HTML. |
notifications_are_overridden | Booleano | Si es True, el formulario enviará notificaciones a las direcciones de correo electrónico seleccionadas en el parámetro notifications_override_email_addresses, en lugar de a los valores predeterminados del formulario. Por opción predeterminada es False. |
notifications_override_guid_buffer | Cadena | ID de la configuración de anulación en la versión de autoguardado de la página. |
notifications_override_guid | Cadena | ID de la configuración de anulación en la versión publicada de la página. |
notifications_override_email_addresses | JSON | La sintaxis de bloques admite una lista JSON de destinatarios de correo electrónico que serán notificados al enviar los formularios. Estas direcciones de correo electrónico anulan la configuración de notificación por correo electrónico establecida en el formulario. |
sfdc_campaign | Cadena | Especifica la campaña de Salesforce en la que se inscribirán los contactos que envíen el formulario. El valor de este parámetro debe ser el ID de la campaña de SFDC y solo está disponible para los portales que tienen la integración con Salesforce. |
gotowebinar_webinar_key | Cadena | Especifica el webinario de GoToWebinar en el que se inscribirán los contactos tras enviar el formulario. Solo disponible para las cuentas que utilizan la integración de GoToWebinar. |
webinar_id | Cadena | Un campo más genérico que especifica el ID del webinario de Microsoft Teams o GoToWebinar en el que inscribir a los contactos tras enviar el formulario. Solo disponible en cuentas que utilicen las integraciones GoToWebinar o Microsoft Teams, y cuando support_all_webinar_types esté configurado como true en la definición de campos de formulario. |
webinar_source | Cadena | El ID de la app de integración, ya sea GoToWebinar (35161) o Microsoft Teams (221635). |
Pie de página
Presenta la información de derechos de autor con el año y el nombre de la empresa especificados en la configuración de correos de marketing de la cuenta.{% 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 está basada en Slick. Mientras que puedes crear un módulo de galería con la sintaxis estándar de HubL, si quieres predefinir diapositivas predeterminadas usando HubL, debes usar la sintaxis de bloques. A continuación se muestran ambos métodos. Las imágenes de la galería se cargan de forma diferida mediante JavaScript.{% gallery "crm_gallery" %}
<-- Block syntax -->
{% widget_block gallery "Gallery" display_mode="standard" sizing="static", transition="slide", caption_position="below", auto_advance=True, overrideable=True, description_text="", show_pagination=True, label="Gallery", loop_slides=True, num_seconds=5 %}
{% widget_attribute "slides" is_json=True %}
[{
"caption": "CRM Contacts App",
"show_caption": true,
"link_url": "http://www.hubspot.com/crm",
"alt_text": "Screenshot of CRM Contacts",
"img_src": "http://go.hubspot.com/hubfs/Contacts-View-1.png?t=1430860504240",
"open_in_new_tab": true
},
{
"caption": "HubSpot CRM Contact Profile",
"show_caption": true,
"link_url": "http://www.hubspot.com/",
"alt_text": "HubSpot CRM Contact Profile",
"img_src": "http://cdn2.hubspot.net/hubfs/53/Contact-Profile.png?t=1430860504240",
"open_in_new_tab": true
}]
{% end_widget_attribute %}
{% end_widget_block %}
<span
id="hs_cos_wrapper_crm_gallery"
class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_gallery"
style=""
data-hs-cos-general-type="widget"
data-hs-cos-type="gallery"
>
<div
id="hs_cos_flex_gallery_crm_gallery"
class="hs_cos_flex-gallery flex-gallery-main gallery-mode-gallery"
>
<div
class="hs_cos_flex-viewport"
style="overflow: hidden; position: relative;"
>
<ul
class="hs_cos_flex-slides hs_cos_flex-slides-main "
style="width: 800%; -webkit-transition-duration: 0s; transition-duration: 0s; -webkit-transform: translate3d(-1090px, 0px, 0px);"
>
<li
class="hs_cos_flex-slide-main clone"
aria-hidden="true"
style="width: 1090px; float: left; display: block;"
>
<a href="//www.hubspot.com/" target="_blank"
><img
src="//cdn2.hubspot.net/hubfs/53/Contact-Profile.png?t=1430860504240&t=1430335520686"
alt="HubSpot CRM Contact Profile"
draggable="false"
/></a>
<div class="caption">HubSpot CRM Contact Profile</div>
</li>
<li
class="hs_cos_flex-slide-main hs_cos_flex-active-slide"
style="width: 1090px; float: left; display: block;"
>
<a href="//www.hubspot.com/crm" target="_blank"
><img
src="http://go.hubspot.com/hubfs/Contacts-View-1.png?t=1430860504240&t=1430335520686"
alt="Screenshot of CRM Contacts"
draggable="false"
/></a>
<div class="caption">CRM Contacts App</div>
</li>
<li
class="hs_cos_flex-slide-main"
style="width: 1090px; float: left; display: block;"
>
<a href="//www.hubspot.com/" target="_blank"
><img
src="//cdn2.hubspot.net/hubfs/53/Contact-Profile.png?t=1430860504240&t=1430335520686"
alt="HubSpot CRM Contact Profile"
draggable="false"
/></a>
<div class="caption">HubSpot CRM Contact Profile</div>
</li>
<li
class="hs_cos_flex-slide-main clone"
aria-hidden="true"
style="width: 1090px; float: left; display: block;"
>
<a href="//www.hubspot.com/crm" target="_blank"
><img
src="http://go.hubspot.com/hubfs/Contacts-View-1.png?t=1430860504240&t=1430335520686"
alt="Screenshot of CRM Contacts"
draggable="false"
/></a>
<div class="caption">CRM Contacts App</div>
</li>
</ul>
</div>
<ol class="hs_cos_flex-control-nav hs_cos_flex-control-paging">
<li><a class="hs_cos_flex-active">1</a></li>
<li><a class="">2</a></li>
</ol>
<ul class="hs_cos_flex-direction-nav">
<li><a class="hs_cos_flex-prev" href="#">Previous</a></li>
<li><a class="hs_cos_flex-next" href="#">Next</a></li>
</ul>
</div>
<script>
window.hsSliderConfig = window.hsSliderConfig || {};
window.hsSliderConfig['crm_gallery'] = {
mode: 'gallery',
mainConfig: {
animationLoop: true,
direction: 'horizontal',
slideshowSpeed: 5000.0,
controlNav: true,
smoothHeight: false,
namespace: 'hs_cos_flex-',
slideshow: true,
selector: '.hs_cos_flex-slides > li',
animation: 'slide',
},
};
</script></span
>
| Parámetro | Tipo | Descripción | Predeterminado |
|---|---|---|---|
slides | JSON | Una lista JSON con el título predeterminado, la URL del enlace, el texto alt, el src de la imagen y si se abre en una nueva pestaña o no. Consulta la sintaxis de bloques anterior. | |
loop_slides | Booleano | Cuando es “True”, muestra las diapositivas en un bucle continuo. | True |
num_seconds | Número | Tiempo en segundos de pausa entre diapositivas. | 5 |
show_pagination | Booleano | Proporciona botones debajo del deslizador para navegar entre las diapositivas. | True |
sizing | Enumeración | Determina si el deslizador cambia de tamaño según la altura de las diapositivas. Los valores posibles son: “static” o “resize”. | "static" |
auto_advance | Booleano | Avanza automáticamente las diapositivas después del tiempo establecido en num_seconds. | False |
transition | Enumeración | Define el tipo de transición de las diapositivas. Los valores posibles son: “fade” o “slide”. | "slide" |
caption_position | Enumeración | Modifica la posición de los subtítulos en la parte superior o inferior de la diapositiva. Los valores posibles son “below” o “superimpose”. | "below" |
display_mode | Enumeración | Determina cómo se mostrará la galería de imágenes. Los valores posibles son: “standard”, “lightbox”, “thumbnail”. | "standard" |
lightboxRows | Número | Si “display_mode” se define como “lightbox”, este parámetro controlará el número de filas mostradas dentro del lightbox. | 3 |
Encabezado
Genera un módulo de encabezado que mostrará el texto como una etiqueta h1 a h6.{% 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>
| Parámetro | Tipo | Descripción | Predeterminado |
|---|---|---|---|
header_tag | Cadena | Selecciona la etiqueta de encabezado que se va a renderizar. Los valores posibles son: h1, h2, h3, h4, h5, h6. | h1 |
value | Cadena | Representa el texto predeterminado dentro del módulo del encabezado. | "A clear bold header" |
Ícono
Agrega una etiqueta de ícono que permite a los usuarios seleccionar un ícono para usarlo. Los conjuntos de íconos compatibles son FontAwesome 5.0.10, 5.14.0 y 6.4.2. Esta etiqueta no puede utilizarse en los módulos habilitados para correo electrónico.{% icon
name="Accessible Icon"
style="REGULAR"
unicode="f368"
icon_set="fontawesome-5.14.0"
purpose="decorative"
title="Accessible Icon"
%}
<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>
| Parámetro | Tipo | Descripción | Predeterminado |
|---|---|---|---|
name | Cadena | Nombre del ícono. | |
style | Cadena | Estilo del ícono. Valores posibles: REGULAR o SOLID | REGULAR |
unicode | Cadena | La representación en caracteres Unicode del ícono. | |
icon_set | Cadena | El conjunto de íconos de FontAwesome que se va a utilizar. Los valores posibles son:
| |
purpose | Cadena | El propósito del ícono, utilizado para la accesibilidad. Los valores posibles son decorative o semantic. Si se define como decorative, se agregará un atributo adicional de aria-hidden="true" al ícono. | decorative |
title | Cadena | El elemento de título del svg del ícono, junto con un atributo labelledby que apunta al título. |
Imagen
Crea una etiqueta de imagen que permite a los usuarios seleccionar una imagen desde el editor de contenidos. Si quieres que la imagen se vincule a una URL de destino, debes usar linked_image debajo.{% 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>
| Parámetro | Tipo | Descripción | Predeterminado |
|---|---|---|---|
alt | Cadena | Define el texto alternativo predeterminado para la imagen. | |
src | Cadena | Rellena el atributo src de la etiqueta img. | |
width | Número | Define el atributo de anchura de la etiqueta img. | The width of the image |
height | Número | Fija una altura mínima en un atributo de estilo de la etiqueta img solo para las plantillas de correo. | The height of the image |
hspace | Número | Define el atributo hspace de la etiqueta img. | |
align | Cadena | Define el atributo align de la etiqueta img. Los valores posibles son: izquierda (left), derecha (right) y centro (center). | |
style | Cadena | Agrega declaraciones de CSS en línea a la etiqueta img. Por ejemplo style=“border:1px solid blue; margin:10px” | |
loading | Cadena | Controla el atributo de carga del elemento img. Se utiliza para la carga diferida en el navegador. |
Src de la imagen
Un módulo src de la imagen crea un selector de imágenes en el editor de contenidos, pero en lugar de imprimir una etiqueta img, muestra la URL de la imagen. Esta etiqueta se usa generalmente con el parámetrono_wrapper=True, de modo que la imagen src se puede agregar al CSS en línea o a otros marcadores. Una alternativa al uso de esta etiqueta es utilizar el parámetro export_to_template_context.
{% image_src "image_src" %}
{% image_src "executve_image_src" src="//cdn2.hubspot.net/hub/53/file-733888614-jpg/assets/hubspot.com/about/management/dharmesh-home.jpg", no_wrapper=True %}
//cdn2.hubspot.net/hub/53/file-733888614-jpg/assets/hubspot.com/about/management/dharmesh-home.jpg
| Parámetro | Tipo | Descripción |
|---|---|---|
src | Cadena | Especifica el src de la imagen de la URL predeterminada. |
Selector de idiomas
Agrega un ícono de globo con enlaces a las versiones traducidas de una determinada página del CMS. Más información sobre los contenidos multilingües aquí.{% 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>
| Parámetro | Tipo | Descripción | Predeterminado |
|---|---|---|---|
display_mode | Enumeración | El idioma del texto en el selector de idiomas. Los valores son:
| Localized |
Imagen enlazada
Genera una imagen seleccionable por el usuario dentro de un enlace. Esta etiqueta tiene todos los parámetros de un módulo de imagen con dos parámetros adicionales que especifican la URL de destino del enlace y si el enlace se abre en una nueva ventana.{% linked_image "linked_image" %}
{% linked_image "executive_image"
label="Executive photo",
link="https://twitter.com/bhalligan", \
open_in_new_tab=True,
alt="Photo of Brian Halligan",
src="//cdn2.hubspot.net/hub/53/file-733888619-jpg/assets/hubspot.com/about/management/brian-home.jpg", width="300"
%}
<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>
| Parámetro | Tipo | Descripción | Predeterminado |
|---|---|---|---|
alt | Cadena | Define el texto alternativo predeterminado para la imagen. | |
src | Cadena | Rellena el atributo src de la etiqueta img. | |
width | Número | Define el atributo de anchura de la etiqueta img. | The width of the image |
height | Número | Fija una altura mínima en un atributo de estilo de la etiqueta img solo para las plantillas de correo. | The height of the image |
hspace | Número | Define el atributo hspace de la etiqueta img. | |
align | Cadena | Define el atributo align de la etiqueta img. Los valores posibles son: izquierda (left), derecha (right) y centro (center). | |
style | Cadena | Agrega declaraciones de CSS en línea a la etiqueta img. Por ejemplo style=“border:1px solid blue; margin:10px” | |
open_in_new_tab | Booleano | Selecciona si se abre o no la URL de destino en otra pestaña. | False |
link | Cadena | Define la URL de destino del enlace que envuelve la etiqueta img. | |
target | Cadena | Define el atributo de destino de la etiqueta del enlace. | |
loading | Cadena | Controla el atributo de carga del elemento img. Se utiliza para la carga diferida en el navegador. |
Logotipo
Una etiqueta de logotipo muestra el logotipo de tu empresa desde la configuración del kit de marca de la cuenta.{% logo "logo" %}
{% logo "my_logo" width="200" %}
<span
id="hs_cos_wrapper_my_logo"
class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_logo"
style=""
data-hs-cos-general-type="widget"
data-hs-cos-type="logo"
>
<a href="//www.hubspot.com" id="hs-link-my_logo">
<img
src="//cdn2.hubspot.net/hub/53/file-1237149549-png/assets/hubspot.com/V2-Global/hubspot-logo-dark.png?t=1430948896766&width=200"
class="hs-image-widget "
width="200"
alt="HubSpot logo"
title="HubSpo logot"
/>
</a>
</span>
| Parámetro | Tipo | Descripción | Predeterminado |
|---|---|---|---|
alt | Cadena | Define el texto alternativo predeterminado para la imagen. | Value in brand kit settings |
src | Cadena | Rellena el atributo src de la etiqueta img. | Value in brand kit settings |
link | Cadena | Define la URL de destino del enlace que envuelve la etiqueta img. | |
width | Número | Define el atributo de anchura de la etiqueta img. | The width of the image |
height | Número | Fija una altura mínima en un atributo de estilo de la etiqueta img solo para las plantillas de correo. | The height of the image |
hspace | Número | Define el atributo hspace de la etiqueta img. | |
align | Cadena | Define el atributo align de la etiqueta img. Los valores posibles son left, right y center. | |
style | Cadena | Agrega declaraciones de CSS en línea a la etiqueta img. Por ejemplo:style="border:1px solid blue; margin:10px" | |
suppress_company_name | Booleano | Oculta el nombre de la empresa si no se elige un logotipo de imagen. | False |
use_account_default | Booleano | Se establece como true para utilizar el nombre de la empresa desde la configuración predeterminada de la cuenta. | False |
open_in_new_tab | Booleano | Selecciona si se abre o no la URL de destino en otra pestaña. | False |
override_inherited_src | Booleano | Cuando se define como true, utiliza el src del widget del logotipo en lugar del src heredado de la configuración o de la plantilla. | True |
heading_level | Cadena | Cuando se utilizan logotipos basados en texto no enlazados, se envuelve el logotipo basado en texto en una de las siguientes opciones disponibles como etiqueta HTML: h1, h2, h3, h4. | h1 |
loading | Cadena | Controla el atributo de carga del elemento img de la carga diferida en el navegador. |
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. Siid se define como null, la etiqueta de menú mostrará el menú predeterminado de la cuenta de HubSpot.
{% menu "menu" %}
{% menu "my_menu"
id=456,
site_map_name="Default",
overrideable=False,
root_type="site_root",
flyouts="true",
max_levels="2",
flow="horizontal",
label="Advanced Menu"
%}
<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>
| Parámetro | Tipo | Descripción | Predeterminado |
|---|---|---|---|
id | Número | ID del árbol de menús desde los menús avanzados en la configuración de contenido. | |
site_map_name | Cadena | Nombre del árbol de menús de los menús avanzados en la configuración del contenido. | "default" |
root_type | Enumeración | Especifica el tipo de menús avanzados. Las opciones son: “site_root”, “top_parent”, “parent”, “page_name”, “page_id”, y “breadcrumb”. Estos valores corresponden a estático, dinámico por sección, dinámico por página y breadcrumb. | "site_root" |
flyouts | Cadena | Cuando es “True”, se agrega una clase al árbol de menús que se puede adaptar para permitir que los elementos del menú secundario aparezcan cuando se coloca el cursor encima del menú principal. Si es “False”, los elementos del menú secundario aparecerán siempre. | "true" |
max_levels | Número | Determina el número de niveles de menús anidados que se muestran en el marcado. Este parámetro define cuántas opciones secundarias del árbol de menú se pueden expandir dentro del menú. | 2 |
flow | Enumeración | Define la orientación de los elementos del menú. Esto agrega clases al árbol de menú para que puedan aplicarse estilos personalizados. Los valores posibles son “horizontal”, “vertical” or “vertical_flyouts”. Los menús horizontales muestran los elementos de lado a lado, y los menús verticales los muestran de arriba hacia abajo. | "horizontal" |
root_key | Cadena | Se utiliza para encontrar la raíz del menú. Cuando root_type se define como page_id o page_name, este parámetro debe ser el ID de la página o la etiqueta de la página, respectivamente. | "horizontal" |
label | Cadena | Contenido enriquecido para describir esta entidad | False |
label | Cadena | Contenido enriquecido para describir esta entidad | False |
Require_css
Una etiqueta HubL que pone en cola un elemento de estilo para ser representado en el<head>.
Esta etiqueta es similar a la require_css función , excepto que esta etiqueta inserta el estilo en línea en lugar de hacerlo desde una hoja de estilo. Esta etiqueta tampoco se desduplica con otras instancias del CSS en la misma página. Si estás creando un módulo y quieres insertar una hoja de estilos, pero planeas usar ese módulo varias veces en una misma página, es posible que prefieras utilizar la función require_css.
{{ standard_header_includes }}
<!-- more html -->
{% require_css %}
<style>
body {
color: red;
}
</style>
{% end_require_css %}
{{ standard_footer_includes }}
<!-- other standard header html -->
<style>
body {
color: red;
}
</style>
<!-- more html -->
<!-- other standard footer html -->
Require_head
Una etiqueta HubL que pone en cola todo lo que se coloca dentro de ella en elstandard_header_includes, que se encuentra en el <head> de la plantilla. Para la mayoría de Javascript y CSS, consulta require_js y require_css. Algunos casos de uso de require_head incluyen el suministro de metaetiquetas y etiquetas de enlace especiales (como prefetch y preconnect) de los módulos.
{% require_head %}
<meta name="third-party-app-verification-id" content="123456">
<link rel="prefetch" href="http://example.com/large-script.js">
<!-- these are purely examples, you could add anything that requires being in the head. require_css and require_js should be used instead of this when embedding a style tag or script tag.-->
{% end_require_head %}
Require_js
Una etiqueta HubL que pone en cola un elemento de script para ser renderizado. Para poner en cola un script para renderizarlo en el<head />desde un archivo diferente a través de un elemento <script /> (en lugar de en línea como se muestra aquí), utiliza la función HubL require_js(absolute_url).
{{ standard_header_includes }}
<!-- more html -->
{% require_js position="footer" %}
<script>
console.log("The CMS is awesome!");
</script>
{% end_require_js %}
{{ standard_footer_includes }}
<!-- other standard header html -->
<!-- more html -->
<script>
console.log('The CMS is awesome!');
</script>
<!-- other standard footer html -->
| Parámetro | Tipo | Descripción | Predeterminado |
|---|---|---|---|
position | Cadena | Establece la posición en la que se renderizará el script en línea. Las opciones incluyen: "head" y "footer". | "footer" |
Texto enriquecido
Crea un editor de contenidos WYSIWYG.{% 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>
| Parámetro | Tipo | Descripción | Predeterminado |
|---|---|---|---|
html | Cadena | Contenido de texto enriquecido predeterminado para el módulo. | <h2>Something Powerful</h2> <h3>Tell The Reader More</h3> <p>The headline and subheader tells us what you're offering, and the form header closes the deal. Over here you can explain why your offer is so great it's worth filling out a form for.</p> <p>Remember:</p> <ul><li>Bullets are great</li><li>For spelling out [benefits](#) and</li><li>Turning visitors into leads.</li></ul> |
Listado de RSS
Carga una lista de contenidos desde un canal RSS interno o externo.Nota:
Este módulo se carga de forma asíncrona en el lado del cliente. Como resultado, si quieres modificar la sección de publicaciones después de que se haya cargado, tendrás que definir una función JS global para manejar esa manipulación. Utiliza la funciónhsRssFeedComplete(feeds), donde feeds es el selector de jQuery de todos los listados de publicaciones que se han completado. Puedes modificar directamente el objeto DOM en esa función.{% rss_listing "rss_listing" %}
{% rss_listing "my_rss_listing" rss_url="", publish_date_text="posted at", feed_source={rss_url="", is_external=False, content_group_id="30808594297"}, click_through_text="Read more", show_date=True, include_featured_image=True, overrideable=False, publish_date_format="short", show_detail=True, show_author=True, number_of_items="3", is_external=False, title="", content_group_id="24732847", label="RSS Listing", limit_to_chars="200", attribution_text="by" %}
<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>
| Parámetro | Tipo | Descripción | Predeterminado |
|---|---|---|---|
show_title | Booleano | Muestra u oculta el título del listado de publicaciones RSS. | True |
show_date | Booleano | Muestra la fecha de la publicación. | True |
show_author | Booleano | Muestra el nombre del autor. | True |
show_detail | Booleano | Muestra el resumen de la publicación hasta el número de caracteres fijado por el parámetro limit_to_chars. | True |
title | Cadena | Rellena el encabezado del listado de publicaciones RSS. | |
limit_to_chars | Número | Número máximo de caracteres que se mostrarán en el resumen. | 200 |
publish_date_format | Cadena | Formato de la fecha de publicación. Los valores posibles son "short", "medium" y "long". También acepta formatos personalizados, como "MMMM d, yyyy 'at' h:mm a". | "short" |
attribution_text | Cadena | El texto que atribuye un autor a una publicación. | "by" |
click_through_text | Cadena | El texto que se mostrará como enlace de redirección al final del resumen de una publicación. | "Read more" |
publish_date_text | Cadena | El texto que indica cuándo se publicó una entrada de blog. | "posted at" |
include_featured_image | Booleano | Muestra una imagen destacada con el enlace de la publicación para los listados de publicaciones RSS generados por HubSpot. | False |
item_title_tag | Cadena | Especifica la etiqueta HTML del título de cada publicación. | span |
is_external | Booleano | El listado de publicaciones RSS es de un blog externo. | False |
number_of_items | Número | Número máximo de publicaciones que se mostrarán. | 5 |
publish_date_language | Cadena | Especifica el idioma de la fecha de publicación. | en_US |
rss_url | Cadena | La URL donde se encuentra el listado de publicaciones RSS. | |
content_group_id | Cadena | ID del blog cuando la fuente del listado de publicaciones es un blog interno. | |
select_blog | Cadena | Se puede utilizar para seleccionar un listado de publicaciones del blog interno de HubSpot. | default |
feed_source | Cadena | Definir la fuente del listado de publicaciones RSS. Cuando es interno, el formato general es {rss_url="", is_external=False, content_group_id="2502431580"}. Cuando es externo, el formato general es {rss_url="http://blog.hubspot.com/marketing/rss.xml", is_external=True}. | |
tag_id | Número | ID de la etiqueta cuando la fuente del listado de publicaciones es un blog interno. |
Encabezado de la sección
Genera un título html y un subtítulo<p>.
{% 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>
| Parámetro | Tipo | Descripción | Predeterminado |
|---|---|---|---|
header | Cadena | Texto para mostrar en el encabezado. | "A clear and bold header" |
subheader | Cadena | Texto para mostrar en el subtítulo. | "A more subdued subheader" |
heading_level | Cadena | Nivel de encabezado HTML semántico. Se admiten los niveles de h1 a h6. | "h1" |
Menú simple
Los menús simples permiten crear menús de navegación 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>
| Parámetro | Tipo | Descripción | Predeterminado |
|---|---|---|---|
orientation | Enumeración | Define las clases de marcadores de menú para permitir adaptar la orientación de los elementos del menú en la página. Los valores posibles son "horizontal" y "vertical". | "horizontal" |
menu_tree | JSON | Estructura del menú, incluidos los nombres de los enlaces de las páginas y las URL de destino. | [] |
Compartir en redes sociales
Las etiquetas de contenido compartido en redes sociales generan íconos de redes sociales que pueden utilizarse para compartir una página determinada. Este módulo se puede utilizar con la sintaxis de bloques para personalizar las imágenes de los íconos y mucho más.{% social_sharing "social_sharing" %}
{% social_sharing "my_social_sharing" use_page_url=True %}
Block Syntax Example:
{% widget_block social_sharing "my_social_sharing" label="Social Sharing", use_page_url=True, overrideable=True %}
{% widget_attribute "pinterest" is_json=True %}{"custom_link_format": "", "pinterest_media": "http://cdn1.hubspot.com/hub/158015/305390_10100548508246879_837195_59275782_6882128_n.jpg", "enabled": true, "network": "pinterest", "img_src": "https://static.hubspot.com/final/img/common/icons/social/pinterest-24x24.png"}{% end_widget_attribute %}
{% widget_attribute "twitter" is_json=True %}{"custom_link_format": "", "enabled": true, "network": "twitter", "img_src": "https://static.hubspot.com/final/img/common/icons/social/twitter-24x24.png"}{% end_widget_attribute %}
{% widget_attribute "linkedin" is_json=True %}{"custom_link_format": "", "enabled": true, "network": "linkedin", "img_src": "https://static.hubspot.com/final/img/common/icons/social/linkedin-24x24.png"}{% end_widget_attribute %}
{% widget_attribute "facebook" is_json=True %}{"custom_link_format": "", "enabled": true, "network": "facebook", "img_src": "https://static.hubspot.com/final/img/common/icons/social/facebook-24x24.png"}{% end_widget_attribute %}
{% widget_attribute "email" is_json=True %}{"custom_link_format": "", "enabled": true, "network": "email", "img_src": "https://static.hubspot.com/final/img/common/icons/social/email-24x24.png"}{% end_widget_attribute %}
{% end_widget_block %}
<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>
| Parámetro | Tipo | Descripción | Predeterminado |
|---|---|---|---|
use_page_url | Booleano | Si es “True”, el módulo comparte la URL de la página de forma predeterminada. | True |
link | Cadena | Especifica una URL diferente para compartirla, si use_page_url es “False”. | |
pinterest | JSON | Parámetros para el formato del enlace de Pinterest y la fuente de la imagen del ícono. | See block syntax example, above |
twitter | JSON | Parámetros para el formato del enlace de Twitter y la fuente de la imagen del ícono. | See block syntax example, above |
linked_in | JSON | Parámetros para el formato del enlace de LinkedIn y la fuente de la imagen del ícono. | See block syntax example, above |
facebook | JSON | Parámetros para el formato del enlace de Facebook y la fuente de la imagen del ícono. | See block syntax example, above |
email | JSON | Parámetros para el formato del enlace para compartir el correo y la fuente de la imagen del ícono. | See block syntax example, above |
Separador
Una etiqueta espaciadora genera una etiqueta span vacía. Esta etiqueta se puede estilizar para actuar como espaciador. En los diseños de arrastrar y soltar, el módulo de espacio se encuentra dentro de un contenedor con una clase de span1 a span12, que determina cuánto espacio debe ocupar el módulo dentro de la cuadrícula responsiva de doce columnas.{% 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 contraseñas o de suscripción por correo electrónico.Copia de seguridad de cancelaciones de suscripción por correo electrónico
La etiqueta de cancelación de suscripción con copia de seguridad se muestra a los destinatarios de correo electrónico si HubSpot no puede determinar su dirección de correo, cuando el destinatario intenta cancelar la suscripción. Esta etiqueta muestra un formulario para que el contacto ingrese su dirección de correo electrónico y cancele la suscripción de las comunicaciones por correo electrónico. Se debe utilizar en una plantilla del sistema de respaldo de cancelación de la suscripción.{% email_simple_subscription "email_simple_subscription" %}
{% email_simple_subscription "email_simple_subscription"
header="Email Unsubscribe",
input_help_text="Your email address:",
input_placeholder="email@example.com",
button_text="Unsubscribe",
label="Backup Unsubscribe"
%}
<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>
| Parámetro | Tipo | Descripción | Predeterminado |
|---|---|---|---|
header | Cadena | Muestra el texto en una etiqueta h1 encima del formulario de cancelación de suscripción. | "Email Unsubscribe" |
input_help_text | Cadena | Muestra el texto de ayuda en una etiqueta h3 encima del campo del formulario de cancelación de suscripción a los correos. | "Your email address:" |
input_placeholder | Cadena | Agrega el texto de marcador de posición en el campo de dirección de correo electrónico. | "email@example.com" |
button_text | Cadena | Cambia el texto del botón de envío del formulario de cancelación de suscripción. | "Unsubscribe" |
Suscripciones a correos
Este módulo se muestra cuando un destinatario de correo electrónico va a editar sus preferencias de suscripción. Debe utilizarse en una plantilla del sistema de preferencias de suscripción.{% 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>
| Parámetro | Tipo | Descripción | Predeterminado |
|---|---|---|---|
header | Cadena | Muestra el texto en una etiqueta h1 encima del formulario de preferencias de suscripción. | "Communication Preferences" |
subheader_text | Cadena | Introduce el texto debajo del encabezado y encima de las preferencias de cancelación de suscripción. | "<p>If this is not your email address, please ignore this page since the email associated with this page was most likely forwarded to you.</p>" |
unsubscribe_single_text | Cadena | Muestra el texto en un <p class="header"> encima de las opciones de suscripción. | "Uncheck the types of emails you do not want to receive:" |
unsubscribe_all_text | Cadena | Muestra el texto en un <p class="header"> encima de la entrada de la casilla de verificación para cancelar la suscripción a todos los correos electrónicos. | "Or check here to never receive any emails:" |
unsubscribe_all_unsubbed_text | Cadena | Introduce el texto dentro de un <p> que se muestra si la suscripción de un contacto está actualmente cancelada para todos los correos electrónicos. | "You are presently unsubscribed from all of our emails. Would you like to receive our emails again?" |
unsubscribe_all_option | Cadena | Define el texto que está junto a la entrada de la casilla de verificación de cancelación de suscripción a todos los correos electrónicos. | "Unsubscribe me from all mailing lists." |
button_text | Cadena | Define el texto del botón de envío que actualiza las preferencias de suscripción. | "Update email preferences" |
resubscribe_button_text | Cadena | Define el texto del botón de envío para cuando los contactos se vuelvan a suscribir. | "Yes, resubscribe me!" |
Confirmación de suscripción a correos
La actualización de confirmación de suscripción al correo electrónico es un módulo que puede agregarse a la plantilla de agradecimiento para cuando un destinatario actualiza sus preferencias de suscripción o las cancela. Debe utilizarse en una plantilla del sistema de preferencias de suscripción.{% 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>
| Parámetro | Tipo | Descripción | Predeterminado |
|---|---|---|---|
header | Cadena | Muestra el texto en una etiqueta h1 encima del formulario de cancelación de suscripción. | "Communication Preferences" |
subheader_text | Cadena | Muestra el texto encima del mensaje de confirmación. | "<p>If this is not your email address, please ignore this page since the email associated with this page was most likely forwarded to you.</p>" |
unsubscribe_all_success | Cadena | Define el texto que se mostrará cuando alguien cancele la suscripción a todas las comunicaciones por correo electrónico. | "You have successfully unsubscribed from all email communications." |
subscription_update_success | Cadena | Define el texto cuando un destinatario actualiza sus preferencias de suscripción. | "You have successfully updated your email preferences." |
Inicio de sesión de membresías
Crea un formulario de inicio de sesión para dar acceso a contenido privado.{% 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&hs_preview_key=c4H4EEQCL-JSCFBlDzG4wg&portalId=2272014&tc_deviceCategory=desktop&template_file_path=my-test-theme%2Ftemplates%2Fsystem%2Fmembership-login.html&updated=1644243124141&redirect_url=/"
id="hs-membership-form"
onsubmit="onFormSubmit()"
data-hs-do-not-collect=""
>
<input name="csrf_token" type="hidden" value="" />
<input name="redirect_url" type="hidden" value="/" />
<input
id="hs-membership-form-hubspotutk"
name="hubspotutk"
type="hidden"
value=""
/>
<div class="hs-form-field">
<label class="hs-login-widget-email-label" for="hs-login-widget-email"
>Email*</label
>
<input
class="hs-input"
name="email"
type="text"
placeholder="Email"
id="hs-login-widget-email"
value=""
/>
</div>
<div class="hs-form-field">
<label
class="hs-login-widget-password-label"
for="hs-login-widget-password"
>Password*</label
>
<a
class="hs-login-widget-show-password"
href="https://developers.hubspot.es/docsjavascript:show_password("hs-login-widget-password');"
>Show password</a
>
<input
class="hs-input"
name="password"
type="password"
placeholder="Password"
id="hs-login-widget-password"
/>
</div>
<div class="hs-form-field">
<input
class="hs-input"
name="remember_me"
type="checkbox"
id="hs-login-widget-remember"
value="true"
checked=""
/>
<label for="hs-login-widget-remember">Remember Me</label>
</div>
<div>
<a id="hs_login_reset" href="https://developers.hubspot.es/docs/_hcms/mem/reset/request"
>Forgot your password?</a
>
</div>
<div class="hs-membership-loader hs_submit hs-submit">
<div class="actions">
<input type="submit" class="hs-button primary large" value="Login" />
</div>
</div>
</form>
<script type="text/javascript">
function onFormSubmit() {
// document.querySelector('.hs-membership-loader').classList.add('active');
}
document.onkeydown = function (e) {
if (['ArrowUp', 'ArrowDown'].includes(e.code)) {
var children = [].slice.call(
document.querySelectorAll(
'#hs-membership-form input:not([type="hidden"]):not([type="checkbox"]):not([disabled])'
)
);
for (i = 0; i < children.length; i++) {
var input = children[i];
if (input === document.activeElement) {
if (e.code == 'ArrowDown' && children[i + 1] !== undefined) {
children[i + 1].focus();
break;
} else if (e.code == 'ArrowUp' && children[i - 1] !== undefined) {
children[i - 1].focus();
break;
}
} else if (i + 1 === children.length) {
children[0].focus();
}
}
} else if ('Enter' === e.code) {
e.preventDefault();
var children = [].slice.call(
document.querySelectorAll(
'#hs-membership-form input:not([type="hidden"]):not([type="checkbox"]):not([disabled])'
)
);
for (i = 0; i < children.length; i++) {
var input = children[i];
if (
input === document.activeElement &&
children[i + 1] !== undefined
) {
children[i + 1].focus();
break;
} else if (
input === document.activeElement &&
i + 1 === children.length
) {
// document.querySelector('.hs-membership-loader').classList.add('active');
document.getElementById('hs-membership-form').submit();
} else if (i + 1 === children.length) {
children[0].focus();
}
}
}
};
</script>
<div id="hs-membership-rate-limit-error-text" style="display:none">
You've made too many attempts at this request. Please try this action again
in a few minutes.
</div>
<script type="text/javascript">
function show_password(id) {
var input = document.getElementById(id);
input.type = input.type === 'password' ? 'text' : 'password';
}
</script>
<script>
function getCookie(name) {
var nameEQ = name + '=';
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
}
return null;
}
document.getElementById('hs-membership-form-hubspotutk').value =
getCookie('hubspotutk');
</script>
</span>
| Parámetro | Tipo | Descripción | Predeterminado |
|---|---|---|---|
email_label | Cadena | La etiqueta para el campo del correo electrónico. | "Email" |
password_label | Cadena | La etiqueta para el campo de la contraseña. | "Password" |
remember_me_label | Cadena | La etiqueta de la casilla de verificación “Recordarme”. | "Remember Me" |
reset_password_text | Cadena | El texto para el hipervínculo de cambio de contraseña. | "Forgot your password?" |
submit_button_text | Cadena | El texto para el botón de envío. | "Login" |
show_password | Cadena | El texto del enlace para revelar la contraseña. | "Show password" |
Registro de membresías
Crea un formulario de registro para acceder a contenido privado.{% 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&hs_preview_key=_zUv_TyY1BCRQ2RviUepiQ&portalId=2272014&tc_deviceCategory=desktop&template_file_path=my-test-theme%2Ftemplates%2Fsystem%2Fmembership-register.html&updated=1644243124290&redirect_url=/_hcms/mem/login?success%3Dtrue"
id="hs-membership-form"
onsubmit="onFormSubmit()"
data-hs-do-not-collect=""
>
<input name="csrf_token" type="hidden" value="" />
<input
name="redirect_url"
type="hidden"
value="/_hcms/mem/login?success=true"
/>
<input
id="hs-membership-form-hubspotutk"
name="hubspotutk"
type="hidden"
value=""
/>
<div class="hs-form-field">
<label for="hs-register-widget-email">Email*</label>
<input
class="hs-input"
name="email_read_only"
type="email"
value=""
id="hs-register-widget-email"
disabled=""
/>
<input name="email" type="hidden" value="" />
<input name="token" type="hidden" value="" />
</div>
<div class="hs-form-field">
<label for="hs-register-widget-password">Password*</label>
<a
class="hs-register-widget-show-password"
href="https://developers.hubspot.es/docsjavascript:show_password("hs-register-widget-password');"
>Show password</a
>
<input
class="hs-input"
name="password"
type="password"
placeholder="Password"
id="hs-register-widget-password"
/>
</div>
<div
class="form-input-validation-message"
id="hs-membership-password-requirements"
>
<ul class="no-list hs-error-msgs">
<li>
<label
>Password must be at least 8 characters long and include lower and
uppercase letters, a number, and a symbol</label
>
</li>
</ul>
</div>
<div class="hs-form-field">
<label for="hs-register-widget-password-confirm">Confirm Password*</label>
<a
class="hs-register-widget-show-password"
href="https://developers.hubspot.es/docsjavascript:show_password("hs-register-widget-password-confirm');"
>Show password</a
>
<input
class="hs-input"
name="password_confirm"
type="password"
placeholder="Confirm Password"
id="hs-register-widget-password-confirm"
/>
</div>
<div class="hs-membership-loader hs_submit hs-submit">
<div class="actions">
<input
type="submit"
class="hs-button primary large"
value="Save Password"
/>
</div>
</div>
</form>
<script type="text/javascript">
function onFormSubmit() {
// document.querySelector('.hs-membership-loader').classList.add('active');
}
document.onkeydown = function (e) {
if (['ArrowUp', 'ArrowDown'].includes(e.code)) {
var children = [].slice.call(
document.querySelectorAll(
'#hs-membership-form input:not([type="hidden"]):not([type="checkbox"]):not([disabled])'
)
);
for (i = 0; i < children.length; i++) {
var input = children[i];
if (input === document.activeElement) {
if (e.code == 'ArrowDown' && children[i + 1] !== undefined) {
children[i + 1].focus();
break;
} else if (e.code == 'ArrowUp' && children[i - 1] !== undefined) {
children[i - 1].focus();
break;
}
} else if (i + 1 === children.length) {
children[0].focus();
}
}
} else if ('Enter' === e.code) {
e.preventDefault();
var children = [].slice.call(
document.querySelectorAll(
'#hs-membership-form input:not([type="hidden"]):not([type="checkbox"]):not([disabled])'
)
);
for (i = 0; i < children.length; i++) {
var input = children[i];
if (
input === document.activeElement &&
children[i + 1] !== undefined
) {
children[i + 1].focus();
break;
} else if (
input === document.activeElement &&
i + 1 === children.length
) {
// document.querySelector('.hs-membership-loader').classList.add('active');
document.getElementById('hs-membership-form').submit();
} else if (i + 1 === children.length) {
children[0].focus();
}
}
}
};
</script>
<script type="text/javascript">
function show_password(id) {
var input = document.getElementById(id);
input.type = input.type === 'password' ? 'text' : 'password';
}
</script>
<script>
function getCookie(name) {
var nameEQ = name + '=';
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
}
return null;
}
document.getElementById('hs-membership-form-hubspotutk').value =
getCookie('hubspotutk');
</script>
</span>
| Parámetro | Tipo | Descripción | Predeterminado |
|---|---|---|---|
email_label | Cadena | La etiqueta para el campo del correo electrónico. | "Email" |
password_label | Cadena | La etiqueta para el campo de la contraseña. | "Password" |
password_confirm_label | Cadena | La etiqueta para el campo de confirmación de la contraseña. | "Confirm Password" |
submit_button_text | Cadena | El texto para el botón de envío. | "Save Password" |
show_password | Cadena | El texto del enlace para revelar la contraseña. | "Show password" |
Solicitud de restablecimiento de contraseña
Crea un formulario para enviar un correo electrónico de restablecimiento de contraseña para acceder a páginas protegidas por contraseña.{% 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&hs_preview_key=x7aXsEAvlLtUOa1P5t89wQ&portalId=2272014&tc_deviceCategory=desktop&template_file_path=my-test-theme%2Ftemplates%2Fsystem%2Fmembership-reset-password-request.html&updated=1644243124282&redirect_url=/"
id="hs-membership-form"
onsubmit="onFormSubmit()"
data-hs-do-not-collect=""
>
<input name="csrf_token" type="hidden" value="" />
<input name="redirect_url" type="hidden" value="/" />
<div class="hs-form-field">
<label for="hs-reset-request-widget-email">Email*</label>
<input
class="hs-input"
name="email"
type="text"
placeholder="Email"
id="hs-reset-request-widget-email"
/>
</div>
<div class="hs-membership-loader hs_submit hs-submit">
<div class="actions">
<input
type="submit"
class="hs-button primary large"
value="Send Reset Email"
/>
</div>
</div>
</form>
<script type="text/javascript">
function onFormSubmit() {
// document.querySelector('.hs-membership-loader').classList.add('active');
}
document.onkeydown = function (e) {
if (['ArrowUp', 'ArrowDown'].includes(e.code)) {
var children = [].slice.call(
document.querySelectorAll(
'#hs-membership-form input:not([type="hidden"]):not([type="checkbox"]):not([disabled])'
)
);
for (i = 0; i < children.length; i++) {
var input = children[i];
if (input === document.activeElement) {
if (e.code == 'ArrowDown' && children[i + 1] !== undefined) {
children[i + 1].focus();
break;
} else if (e.code == 'ArrowUp' && children[i - 1] !== undefined) {
children[i - 1].focus();
break;
}
} else if (i + 1 === children.length) {
children[0].focus();
}
}
} else if ('Enter' === e.code) {
e.preventDefault();
var children = [].slice.call(
document.querySelectorAll(
'#hs-membership-form input:not([type="hidden"]):not([type="checkbox"]):not([disabled])'
)
);
for (i = 0; i < children.length; i++) {
var input = children[i];
if (
input === document.activeElement &&
children[i + 1] !== undefined
) {
children[i + 1].focus();
break;
} else if (
input === document.activeElement &&
i + 1 === children.length
) {
// document.querySelector('.hs-membership-loader').classList.add('active');
document.getElementById('hs-membership-form').submit();
} else if (i + 1 === children.length) {
children[0].focus();
}
}
}
};
</script>
</span>
| Parámetro | Tipo | Descripción | Predeterminado |
|---|---|---|---|
email_label | Cadena | La etiqueta para el campo del correo electrónico. | "Email" |
submit_button_text | Cadena | El texto para el botón de envío. | "Send Reset Email" |
password_reset_message | Cadena | El mensaje que aparece después de solicitar el correo de cambio de contraseña. | False |
Restablecimiento de contraseña
Renderiza un formulario de restablecimiento de contraseña para acceder a páginas protegidas por contraseña.{% 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&hs_preview_key=x7aXsEAvlLtUOa1P5t89wQ&portalId=2272014&tc_deviceCategory=desktop&template_file_path=my-test-theme%2Ftemplates%2Fsystem%2Fmembership-reset-password-request.html&updated=1644243124282&redirect_url=/"
id="hs-membership-form"
onsubmit="onFormSubmit()"
data-hs-do-not-collect=""
>
<input name="csrf_token" type="hidden" value="" />
<input name="redirect_url" type="hidden" value="/" />
<div class="hs-form-field">
<label for="hs-reset-request-widget-email">Email*</label>
<input
class="hs-input"
name="email"
type="text"
placeholder="Email"
id="hs-reset-request-widget-email"
/>
</div>
<div class="hs-membership-loader hs_submit hs-submit">
<div class="actions">
<input
type="submit"
class="hs-button primary large"
value="Send Reset Email"
/>
</div>
</div>
</form>
<script type="text/javascript">
function onFormSubmit() {
// document.querySelector('.hs-membership-loader').classList.add('active');
}
document.onkeydown = function (e) {
if (['ArrowUp', 'ArrowDown'].includes(e.code)) {
var children = [].slice.call(
document.querySelectorAll(
'#hs-membership-form input:not([type="hidden"]):not([type="checkbox"]):not([disabled])'
)
);
for (i = 0; i < children.length; i++) {
var input = children[i];
if (input === document.activeElement) {
if (e.code == 'ArrowDown' && children[i + 1] !== undefined) {
children[i + 1].focus();
break;
} else if (e.code == 'ArrowUp' && children[i - 1] !== undefined) {
children[i - 1].focus();
break;
}
} else if (i + 1 === children.length) {
children[0].focus();
}
}
} else if ('Enter' === e.code) {
e.preventDefault();
var children = [].slice.call(
document.querySelectorAll(
'#hs-membership-form input:not([type="hidden"]):not([type="checkbox"]):not([disabled])'
)
);
for (i = 0; i < children.length; i++) {
var input = children[i];
if (
input === document.activeElement &&
children[i + 1] !== undefined
) {
children[i + 1].focus();
break;
} else if (
input === document.activeElement &&
i + 1 === children.length
) {
// document.querySelector('.hs-membership-loader').classList.add('active');
document.getElementById('hs-membership-form').submit();
} else if (i + 1 === children.length) {
children[0].focus();
}
}
}
};
</script>
</span>
| Parámetro | Tipo | Descripción | Predeterminado |
|---|---|---|---|
password_label | Cadena | La etiqueta de texto para el campo de la contraseña. | "Email" |
password_confirm_label | Cadena | La etiqueta de texto para el campo de confirmación de contraseña. | "Send Reset Email" |
submit_button_text | Cadena | La etiqueta de texto para el botón de envío del formulario. | False |
show_password | Cadena | La etiqueta de texto del botón para mostrar el valor de la contraseña introducida. | False |
password_requirements | Cadena | La etiqueta de texto que describe los requisitos de la contraseña. | False |
Solicitud de la contraseña
Agrega un solicitud de contraseña a las páginas protegidas con contraseña.{% 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>
| Parámetro | Tipo | Descripción | Predeterminado |
|---|---|---|---|
submit_button_text | Cadena | Etiqueta para el botón que está debajo del campo de la contraseña. | "Submit" |
bad_password_message | Cadena | Se muestra un mensaje si se introduce una contraseña incorrecta. | "<p>Sorry, please try again.</p>" |
password_placeholder | Cadena | Define el texto del marcador de posición dentro del campo de la contraseña. | "Password" |
Texto
Crea una sola línea de texto. Esta etiqueta puede ser útil para combinarse con el marcador cuando se utiliza junto con el parámetrono_wrapper=True. Por ejemplo, si quieres que los usuarios finales puedan definir el destino de un ancla predefinida, podrías rellenar el href con un módulo de texto con no_wrapper=True.
{% text "text" %}
{% text "simple_text_field" label="Enter text here", value="This is the default value for this text field" %}
<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
>
| Parámetro | Tipo | Descripción |
|---|---|---|
value | Cadena | Define el texto predeterminado del campo de texto de una línea. |
Textarea
Un textarea es similar a un módulo de texto ya que permite a los usuarios introducir texto sin formato, pero les da un área más grande para trabajar en el editor de contenidos. Este módulo no es compatible con HTML. Si quieres utilizarlo directamente dentro de una etiqueta de contenedor predefinida, agrega el parámetrono_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.
| Parámetro | Tipo | Descripción |
|---|---|---|
value | Cadena | Define el texto predeterminado del textarea. |
Reproductor de video
Renderiza un reproductor de video para un archivo de video desde el administrador de archivos que tiene activa la opción Permitir incrustar, compartir y rastrear.- Input
{% video_player "embed_player" %}
{% video_player "embed_player" overrideable=False, type="scriptV4", hide_playlist=True, viral_sharing=False, embed_button=False, width="600", height="375", player_id="6178121750", style="", conversion_asset="{"type":"FORM","id":"9a77c63f-bee6-4ff8-9202-b0af020ea4b2","position":"POST"}" %}
| Parámetro | Tipo | Descripción | Predeterminado |
|---|---|---|---|
hide_playlist | Booleano | Oculta la lista de reproducción de videos. | True |
playlist_color | Cadena | Un valor de color HEX para la lista de reproducción. | |
play_button_color | Cadena | Un valor de color HEX para los botones de reproducción y pausa. | #2A2A2A |
embed_button | Booleano | Muestra el botón de inserción en el reproductor | False |
viral_sharing | Booleano | Mostrar el botón para compartir en las redes sociales en el reproductor. | False |
width | Número | Anchura del reproductor de video insertado. | Auto |
height | Número | Altura del reproductor de video insertado. | Auto |
player_id | Número | El player_id del video que se insertará. | |
style | Cadena | Estilo adicional del reproductor. | |
conversion_asset | JSON | Configuración de eventos para el reproductor. Puede renderizar una CTA o un formulario antes o después de la reproducción del video. Este parámetro toma un objeto JSON con tres parámetros: tipo (FORM o CTA), id (El guid del tipo de objeto), posición (POST o PRE). | See above example |
placeholder_alt_text | Cadena | El texto alternativo del video. |