Reference documentation for syntax and available parameters for all HubL tags.
This page is a comprehensive reference guide of the syntax and the available parameters for all standard HubL tags, including tags for system pages, such as the email subscription page. Each tag below contains a sample of the basic syntax, as well as an example with parameters and code output.If you’re building drag and drop areas, learn more about drag and drop area tags. If you maintain an older website, you may also want to check out the list of deprecated HubL tags.
Renders the comments embed code on a blog template, including the comments themselves and the comment form. Learn more about customizing blog comment settings and forms on the Knowledge Base.
Specifies which blog is connected to the comments embed. This parameter accepts arguments of either "default" or a blog ID (available in the URL of the Blog dashboard). If want to use your default blog, this parameter is unnecessary.
default
skip_css
Boolean
Setting this option to True will stop the blog comments CSS from loading.
false
message
String
The message to display when there are no comments. By default, appears as empty (no text)
Please note:This tag can only be used in blog post templates. The tag’s content is loaded asynchronously on the client-side. As a result, if you want to manipulate the feed after it’s loaded, you’ll need to define a global JS function to handle that manipulation. Use the function hsPostListingComplete(feeds), where feeds is the jQuery selector on all feeds that have been completed. You will want to directly manipulate the DOM object in that function.
<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>
Parameter
Type
Description
Default
select_blog
”default” or blog ID
Selects the HubSpot blog to use for the listing. This parameter uses either an blog ID or "default" value.
"default"
list_title
String
List title to display.
""
list_tag
String
Sets the tag used for the list. Value should generally be "ul" or "ol".
"ul"
title_tag
String
Sets the tag used for the list title.
"h3"
listing_type
String
List the blog posts by most recent or most popular in a time range. Possible values include recent, popular_all_time, popular_past_year, popular_past_six_months, and popular_past_month.
Adds a listing of blog posts based off of a set of parameters shared by posts across blogs. Posts are selected based off of their relevance to the set parameters.This tag does not generate a page/post-level editable module, it is entirely configured with HubL.
The IDs of the blogs to include posts from. If not specified, it will include posts from the default blog.
blog_post_ids
String
The IDs of the blog posts to use when finding relevant blog posts to list, separated by commas.Use this parameter only when the widget is appearing on pages. When used on blog posts, it will look for relevant posts based on the currently displaying blog post.
blog_post_override
String
The IDs of the blog posts which should always show up in the returned listing, despite all other parameter values and filters (comma separated).
limit
Number
The maximum number of blog posts to list.
3
tags
String
The blog tags that should be used to determine if a post is relevant (comma separated). Blog posts with the specified tags will rank higher for relevancy.
tag_boost
Number
Increases the weight given to the tags specified in the tags parameter to generate related posts. Include this parameter to pull in posts more closely related to the currently displaying or specified posts. Accepts positive numbers.
The names of authors to include posts from (comma separated).See an example below.
path_prefixes
String
URL paths or subdirectories to include posts from (comma separated). If a blog post has a similar prefix in its path, the post’s relevancy is increased, improving its ranking in the listing.
callback
String
The name of a JavaScript function to render returned blog posts. The function is passed an array of blog post objects to format. If neither the callback nor post_formatter parameter is specified, the tag will generate HTML in a default format.See an example below.
none
post_formatter
String
The name of a custom macro to render returned blog posts. The macro is passed three parameters which are the blogs blog post object to format, the count in the iteration of blog posts, and the total count of blog posts in the results. If not specified or set to default, the built-in formatter will be used to format each post.
default
allow_any_language
Boolean
When set to false, only posts in the same language as the page the tag is used on will appear. When set to true, the language restriction is ignored and all related posts are pulled in regardless of the page language.
False
We strongly recommend using the callback parameter instead of
post_formatter to improve page loading speed.
The following example generates a listing of 10 posts related to a specific blog post, with the blog tag “sales enablement,” and restricted to a specific publish date time frame. This example specifies the blog_post_ids parameter, so it would be used on a page:
Species which blog is connected to the share counters. This parameter accepts arguments of either "default" or a blog ID (available in the URL of the Blog dashboard). If you want to use your default blog, this parameter is unnecessary.
default
downgrade_shared_url
Boolean
Use HTTP in the url sent to the social media networks. Used to preserve counts when upgrading domains to HTTPS only.
A blog subscription tag renders the blog subscriber form for a particular blog. This form is automatically created whenever a blog is created in Content Settings, and there is always one subscription form per blog. Please note that the subscribe form’s fields are configured within the Forms editor UI.
HubL
Output
Report incorrect code
Copy
Ask AI
{% blog_subscribe "blog_subscribe" %} {% blog_subscribe"subscribe_designers_blog" select_blog="default", title="Subscribe to theDesigners Blog", response_message="Thanks for Subscribing!", label="Blog EmailSubscription", overrideable=False %}
Report incorrect code
Copy
Ask AI
<span id="hs_cos_wrapper_blog_subscription" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_blog_subscribe" style="" data-hs-cos-general-type="widget" data-hs-cos-type="blog_subscribe"> <h3 id="hs_cos_wrapper_blog_subscription_title" class="hs_cos_wrapper form-title" data-hs-cos-general-type="widget_field" data-hs-cos-type="text" > Subscribe to Designers Blog </h3> <div id="hs_form_target_blog_subscription"></div> <script charset="utf-8" src="//js.hsforms.net/forms/current.js"></script> <script> hbspt.forms.create({ portalId: '327485', formId: 'a8d73dc6-0d3a-486d-8938-b19f28b69c3c', formInstanceId: '60', pageId: 2749976739, pageName: 'Apple, Google & Starbucks: Inside the Web Design Style Guides of 10 Famous Companies', redirectUrl: 'http://designers.hubspot.com/blog/web-design-style-guides-examples?hsFormKey=a56a754bc4c3465015935953363b8ff3#blog_subscription', css: '', target: '#hs_form_target_blog_subscription', formData: { cssClass: 'hs-form stacked' }, }); </script></span>
Parameter
Type
Description
Default
select_blog
”default” or blog ID
Selects which blog subscription form to render. This parameter accepts arguments of either "default" or a blog ID (available in the URL of the Blog dashboard). If want to use your default blog, this parameter is unnecessary.
default
title
String
Defines text in an h3 tag title above the subscribe form.
"Subscribe Here!"
no_title
Boolean
If True, the h3 tag above the title is removed.
false
response_message
String
Defines the inline thank-you message that is rendered when a user submits a form. Supports HTML.
"Thanks for Subscribing!"
edit_form_link
String
This parameter generates a link that allows users to click through to the corresponding Form editor screen. This option will only show in the editor UI if the modules has the parameter overrideable=True. For example, to replace HubID and form ID with the information from the URL of your default blog subscriber form: edit_form_link=" <ul>\n <li><a href="https://developers.hubspot.com/docs/forms/HubID/FormID/edit/" target="_blank">Default Blog</a></li> \n</ul> ". Note that the \n newline characters above add an extra line of padding before and after the link.
A boolean tag creates a checkbox in the UI that prints “true” or “false.” In addition to printing the value, this module is useful for defining conditional template logic, when combined with the parameter export_to_template_context.
A choice tag creates a dropdown in the content editor UI that prints the value selected by the user. Choice tags are great for giving your users a preset set of options, such as printing the type of page as a page header.In addition to printing the choice value, this tag is useful for defining conditional template logic, when combined with the parameter export_to_template_context.
HubL
Output
Report incorrect code
Copy
Ask AI
{% choice "choice" %} {% choice "type_of_page" label="Choose the type of page",value="About", choices="About, Careers, Contact, Store" %}
A comma-separated list of values, or list of value-label pairs. The syntax for value label pairs is as follows: choices="[[\"value1\", \"Label 1\"], [\"value2\", \"Label 2\"]]". The editor will display the label, while it will print the value to the page.
The color tag generates a color picker in the page editor UI that prints a HEX color value to a template. Please note that this module can only be used in templates, not CSS files. If using this tag in a <style> or inline CSS, you will want to use the no_wrapper=True parameter to remove the wrapper <span> wrapper.
HubL
Output
Report incorrect code
Copy
Ask AI
{% color "color" %} {% color "my_color_picker" label="Choose a color",color="#000000", no_wrapper=True %}
The embed code for the CTA. \n differentiates line breaks.
full_html
String
The embed code for the CTA (Same as embed_code). \n differentiates line breaks.
image_src
String
Image src url that defines the preview image in the content editor.
image_editor
String
Markup for the image editor preview
guid
String
The unique ID number of the CTA. This ID number is available in the URL of the Details screen of a particular CTA. This parameter is used to choose which CTA to display by default.
image_html
String
CTA image HTML without the CTA script.*
image_email
String
Email-friendly version of the CTA code.*
*While these parameters are included here for the sake of being comprehensive, the code generated by HubSpot to populate them is very specific. If you need a default CTA selected, rather than trying to develop the CTA parameters from scratch, it is recommended that set up the CTA on a template layout, and then clone to file. You can then copy the HubL CTA module of the CTA with all parameters set correctly for you.There is also a CTA function that generates a CTA from the ID.
A custom HTML module allows users to enter raw HTML into the content editor. If you need to add extensive default HTML to the tag, you may want to use block syntax.
Custom Modules allow HubSpot designers to create a custom group of editable content objects to be used across templates and pages on HubSpot’s CMS, while still allowing marketers to control the specific content appearing within those modules on a page-by-page basis. You can learn more about custom modules and their simplified HubL syntax, here.Custom modules must be built in the Custom Module editor, but they can be included into coded templates and HubL modules. You will see a ‘Usage Snippet’ in the right sidebar of the Custom Module editor under ‘Template Usage’.Custom modules require the ID of the module as a string as well as a path parameter in order to specify which module to load. The usage snippet will also include a label parameter. See the syntax below:
The path of the module to render. Include leading slash for absolute path, otherwise path is relative to template. Reference HubSpot default modules with paths corresponding to their HubL tags such as @hubspot/rich_text, @hubspot/linked_image, etc.
To render placeholder content for a module in the editor, you can either add default content to module fields or use the editor_placeholder HubL tag. This can be useful when the module doesn’t have or need default content, or to streamline module building.
To add an editor placeholder to a custom module, first add an if statement to the module’s HTML to render the placeholder when there’s no content selected in the editor. For example, the following code could be used to add an editor placeholder to a CTA module:
The first if statement identifies whether the module is present. Then, the
elif statement identifies if the module is being rendered in the context of
the editor using the is_in_editor variable. This variable returns true if
the content is being rendered in any content editor, but you can be more
specific with other in-app editor and preview
variables.
Then, define the placeholder content in the module’s meta.json file.
Flexible columns are vertical columns in a template that enable content creators to insert and remove modules to the page using the content editor. When coding a flexible column with HubL, you can choose to wrap other HubL modules to make them appear in the flexible column by default. The sample code below shows the basic syntax and a sample flexible column with a rich text and form module contained as default content.Please note that flexible columns can only be added to page templates, not blog or email templates. Modules cannot contain flexible columns, but they can instead contain repeatable fields and groups, which provide a similar functionality.
<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>
Please note:When using this tag, the label must follow the name value for the flexible column to function in the content editor. For example, the following syntax is invalid:[% widget_container label="My label" "my_flexible_column" %}
Allows users to select a HubSpot form to add to their page. The code below includes an example of using the standard HubL tag syntax and an example of using block syntax.
HubL
Output
Report incorrect code
Copy
Ask AI
{% 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 theform.", 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 %}
Specifies a unique ID for the form at the page level.
form_to_use
String
Specifies which form to load by default, based on the Form ID. This ID is available in the form editor URL of a each form.
title
String
Populates an h3 header tag above the form.
no_title
Boolean
If True, the h3 tag above the title is removed.
form_follow_ups_follow_up_type
Enumeration
Specifies follow up actions such as enrolling a contact into a workflow or sending a simple follow up email. Possible values include: no_action, simple, and automation.
simple_email_for_live_id
Number
Specifies the ID of the simple follow-up email for the live page.
simple_email_for_buffer_id
Number
Specifies the ID of the simple follow-up email for the auto-save version of a page.
follow_up_type_simple
Boolean
If true, enables a simple follow-up email. Alternative to form_follow_ups_follow_up_type.
follow_up_type_automation
Boolean
If true, enrolls submissions in a workflow. Alternative to form_follow_ups_follow_up_type.
simple_email_campaign_id
Number
Specifies the ID of the simple follow-up email. Alternative to simple_email_for_live_id.
form_follow_ups_workflow_id
Number
Specifies the ID of the workflow in which to enroll submissions.
response_redirect_url
String
If redirecting to an external page, this parameter specifies the URL to redirect to.
response_redirect_id
Number
If redirecting to HubSpot hosted page, this parameter specifies the page ID of that page. The page ID is available in the page editor URL of each page.
response_response_type
Enumeration
Determines whether to redirect to another page or to display an inline thank you message on submission. The value of this parameter should either be "redirect" or "inline" (default).
response_message
String
Sets an inline thank you message. This parameter supports HTML.
notifications_are_overridden
Boolean
If set to True, the form will send form notifications to specified email addresses selected in the notifications_override_email_addresses parameter, instead of the form defaults. Default is False.
notifications_override_guid_buffer
String
ID of override settings in auto-save version of page.
notifications_override_guid
String
ID of override settings in live version of page.
notifications_override_email_addresses
JSON
Block syntax supports a JSON list of email recipients that will be notified upon form submission. These email addresses will override the email notification settings set in the form.
sfdc_campaign
String
Specifies the Salesforce campaign to enroll contacts who submit the form into. This parameter’s value should be the SFDC campaign ID and is only available for accounts that are integrated with Salesforce.
gotowebinar_webinar_key
String
Specifies the GoToWebinar webinar to enroll contacts into after submitting the form. Only available for accounts using the GoToWebinar integration.
webinar_id
String
A more generic field that specifies the ID of the Microsoft Teams or GoToWebinar webinar to enroll contacts into after submiting the form. Only available in accounts using the GoToWebinar or Microsoft Teams integrations, and when support_all_webinar_types is set to true in the form fields definition.
webinar_source
String
The ID of the integration app, either GoToWebinar (35161) or Microsoft Teams (221635).
Generates a HubSpot gallery tag. This gallery tag is based on Slick. While you can create a gallery module with standard module HubL syntax, If you want to predefine default slides using HubL, you must use block syntax. Both methods are shown below. Gallery images are lazy loaded using JavaScript.
Adds an icon tag that allows users to select and icon for use. Supported icons sets are FontAwesome 5.0.10, 5.14.0, and 6.4.2.This tag cannot be used in modules enabled for email.
Style of the icon. Possible values: REGULAR or SOLID
REGULAR
unicode
String
The Unicode character representation of the icon.
icon_set
String
The FontAwesome icon set to use. Possible values are:
fontawesome-5.14.0
fontawesome-5.0.10
fontawesome-6.4.2
purpose
String
The purpose of the icon, used for accessibility. Possible values are decorative or semantic. If set to decorative, an additional attribute of aria-hidden="true" will be added to the icon.
decorative
title
String
The title element of the icon’s svg, along with a labelledby attribute that points to the title.
Creates a image tag that allows users to select an image from the content editor. If you want the image to be linked to a destination URL, you should use linked_image below.
HubL
Output
Report incorrect code
Copy
Ask AI
{% 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" %}
Report incorrect code
Copy
Ask AI
<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>
Parameter
Type
Description
Default
alt
String
Sets the default alt text for the image.
src
String
Populates the src attribute of the img tag.
width
Number
Sets the width attribute of the img tag.
The width of the image
height
Number
Sets a min-height in a style attribute of the img tag for email templates only.
The height of the image
hspace
Number
Sets the hspace attribute of the img tag.
align
String
Sets the align attribute of the img tag. Possible values include: left, right, & center.
style
String
Adds inline CSS declarations to the img tag. For example style=“border:1px solid blue; margin:10px”
An image src module creates a image selector in the content editor, but rather than printing a img tag, it renders the URL of the image. This tag is generally used with no_wrapper=True parameter, so that the image src can be added to inline CSS or other markup. An alternative to using this tag is to use the export_to_template_context parameter.
Creates a user-selectable image that is wrapped in a link. This tag has all of the parameters of an image module with two additional parameters that specify the link destination URL and whether the link opens in a new window.
HubL
Output
Report incorrect code
Copy
Ask AI
{% 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" %}
Report incorrect code
Copy
Ask AI
<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>
Parameter
Type
Description
Default
alt
String
Sets the default alt text for the image.
src
String
Populates the src attribute of the img tag.
width
Number
Sets the width attribute of the img tag.
The width of the image
height
Number
Sets a min-height in a style attribute of the img tag for email templates only.
The height of the image
hspace
Number
Sets the hspace attribute of the img tag.
align
String
Sets the align attribute of the img tag. Possible values include: left, right, & center.
style
String
Adds inline CSS declarations to the img tag. For example style=“border:1px solid blue; margin:10px”
open_in_new_tab
Boolean
Selects whether or not to open the destination URL in another tab.
False
link
String
Sets the destination URL of the link that wraps the img tag.
Generates an advanced menu based on a menu tree in Content Settings > Advanced Menus. See menus and navigation for more information on using menus in templates and modules. If id is set to null the menu tag will render the default menu for the HubSpot account.
HubL
Output
Report incorrect code
Copy
Ask AI
{% 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" %}
ID of Menu Tree from Advanced Menus in Content Settings.
site_map_name
String
Name of Menu Tree from Advanced Menus in Content Settings.
"default"
root_type
Enumeration
Specifies the type of advanced menus. Options include: “site_root”, “top_parent”, “parent”, “page_name”, “page_id”, and “breadcrumb”. These values correspond to static, dynamic by section, dynamic by page, and breadcrumb.
"site_root"
flyouts
String
When true, a class is added to the menu tree that can be styled to allow child menu items will appear when you hover over the parent. When false, child menu items will always appear.
"true"
max_levels
Number
Determines how many levels of nested menus render in the markup. This parameter dictates number of menu tree children that can be expanded in the menu.
2
flow
Enumeration
Sets orientation of menu items. This adds classes to menu tree, so that they can be styled accordingly. Possible values include “horizontal”, “vertical” or “vertical_flyouts”. Horizontal menus display items side-by-side, and vertical menus are top-to-bottom.
"horizontal"
root_key
String
Used to find the menu root. When root_type is set to page_id or page_name, this param should be the page ID or the label of the page, respectively.
A HubL tag that enqueues a style element to be rendered in the <head>.This tag is similar to the require_css function, except that this tag inserts styling inline rather than from a stylesheet. This tag also does not deduplicate against other instances of the CSS on the same page. If you’re building a module and want to insert a stylesheet, but you might use that module multiple times on a single page, you may want to use the require_css function instead.
HubL
Output
Report incorrect code
Copy
Ask AI
{{ standard_header_includes }}<!-- more html -->{% require_css %}<style> body { color: red; }</style>{% end_require_css %} {{ standard_footer_includes }}
Report incorrect code
Copy
Ask AI
<!-- other standard header html --><style> body { color: red; }</style><!-- more html --><!-- other standard footer html -->
A HubL tag that enqueues anything placed inside of it into the standard_header_includes which is in the template’s <head>. For most Javascript and CSS see require_js and require_css. Some use-cases for require_head include supplying meta tags, and special link tags (like prefetch and preconnect) from modules.
Report incorrect code
Copy
Ask AI
{% 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 %}
A HubL tag that enqueues a script element to be rendered. To enqueue a script to render in the <head />from a different file via a <script /> element (as opposed to inline as shown here), use the HubL function require_js(absolute_url) instead.
HubL
Output
Report incorrect code
Copy
Ask AI
{{ standard_header_includes }}<!-- more html -->{% require_js position="footer" %}<script> console.log('The CMS is awesome!');</script>{% end_require_js %} {{ standard_footer_includes }}
Report incorrect code
Copy
Ask AI
<!-- other standard header html --><!-- more html --><script> console.log('The CMS is awesome!');</script><!-- other standard footer html -->
Parameter
Type
Description
Default
position
String
Set the position where the inline script will be rendered. Options include: "head" and "footer".
{% 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 %}
Report incorrect code
Copy
Ask AI
<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>
Parameter
Type
Description
Default
html
String
Default rich text content for module.
<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>
Loads a list of content from an internal or external RSS feed.
Please note:This module loads asynchronously on the client-side. As a result, if you want to manipulate the feed after it’s loaded, you’ll need to define a global JS function to handle that manipulation. Use the function hsRssFeedComplete(feeds), where feeds is the jQuery selector on all feeds that have been completed. You can directly manipulate the DOM object in that function.
<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>
Parameter
Type
Description
Default
show_title
Boolean
Shows or hides RSS feed title.
True
show_date
Boolean
Displays post date.
True
show_author
Boolean
Displays author name.
True
show_detail
Boolean
Display post summary up to number of characters set by limit_to_chars parameter.
True
title
String
Populates a heading above the RSS feed listing.
limit_to_chars
Number
Maximum number of characters to display in summary.
200
publish_date_format
String
Format for the publish date. Possible values include "short", "medium" and "long". Also accepts custom formats including "MMMM d, yyyy 'at' h:mm a".
"short"
attribution_text
String
The text which attributes an author to a post.
"by"
click_through_text
String
The text which will be displayed for the click through link at the end of a post summary.
"Read more"
publish_date_text
String
The text which indicates when a post was published.
"posted at"
include_featured_image
Boolean
Displays featured image with post link for HubSpot generated RSS feeds.
False
item_title_tag
String
Specifies HTML tag of each post title.
span
is_external
Boolean
RSS feed is from an external blog.
False
number_of_items
Number
Maximum number of posts to display.
5
publish_date_language
String
Specifies the language of the publish date.
en_US
rss_url
String
The URL where the RSS feed is located.
content_group_id
String
ID for blog when feed source is internal blog.
select_blog
String
Can be used to select an internal HubSpot blog feed.
default
feed_source
String
Set source for RSS feed. When internal, general format is {rss_url="", is_external=False, content_group_id="2502431580"}. When external, general format is {rss_url="http://blog.hubspot.com/marketing/rss.xml", is_external=True}.
Simple menus allow you to create basic navigation menus that can be modified at the page level. Unlike regular menu modules, simple menus are not managed from the Navigation screen in Website Settings, but rather from the template and page editors. You can use block syntax to set up a default menu tree.
Social sharing tags generate social media icons that can be used to share a particular page. This module can be used with block syntax to customize the icon images and more.
A spacer tag generates an empty span tag. This tag can be styled to act as a spacer. In drag and drop layouts, the spacer module is wrapped in a container with a class of span1-span12 to determine how much space the module should take up in the twelve column responsive grid.
HubL
Output
Report incorrect code
Copy
Ask AI
{% space "space" %} {% space "spacer" label="Horizontal Spacer" %}
The backup unsubscribe tag renders for email recipients, if HubSpot is unable to determine their email address, when that recipient tries to unsubscribe. This tag renders a form for the contact to enter his or her email address to unsubscribe from email communications. It should be used on an Unsubscribe Backup system template.
{% 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 toreceive:", subheader_text="\n If this is not your email address, please ignorethis page since the email associated with this page was most likely forwarded toyou.\n", unsubscribe_all_unsubbed_text="You are presently unsubscribed from allof our emails. Would you like to receive our emails again?", button_text="Updateemail preferences", label="Subscription Preferences", header="CommunicationPreferences", unsubscribe_all_option="Unsubscribe me from all mailing lists.",unsubscribe_all_text="Or check here to never receive any emails:" %}
The email subscriptions update confirmation is a module that can be added to the thank you template for when a recipient updates his or her subscription preferences or unsubscribes. It should be used on a Subscription Preference system template.
HubL
Output
Report incorrect code
Copy
Ask AI
{% email_subscriptions_confirmation "email_subscriptions_confirmation" %} {%email_subscriptions_confirmation "email_subscriptions_confirmation"label="Subscriptions Update Confirmation", unsubscribe_all_success="You havesuccessfully unsubscribed from all email communications.",subscription_update_success="You have successfully updated your emailpreferences.", subheader_text="\n If this is not your email address, pleaseignore this page since the email associated with this page was most likelyforwarded to you.\n" %}
Report incorrect code
Copy
Ask AI
<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>
Parameter
Type
Description
Default
header
String
Renders text in an h1 tag above the unsubscribe form.
"Communication Preferences"
subheader_text
String
Populates text above the confirmation message.
"<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
String
Sets the text that will display when someone unsubscribes from all email communications.
"You have successfully unsubscribed from all email communications."
subscription_update_success
String
Sets the text when a recipient updates his or her subscription preferences.
"You have successfully updated your email preferences."
Creates a single line of text. This tag can be useful to be mixed into your markup, when used in conjunction with the no_wrapper=True parameter. For example, if you wanted your end users to be able to define a destination of a predefined anchor, you could populate the href with a text module with no_wrapper=True.
HubL
Output
Report incorrect code
Copy
Ask AI
{% text "text" %}{% text "simple_text_field" label="Enter text here", value="This is the default value for this text field"%}
Report incorrect code
Copy
Ask AI
<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>
Parameter
Type
Description
value
String
Sets the default text of the single line text field.
A textarea is similar to a text module in that it allows users to enter plain text, but it gives them a larger area to work in the content editor. This module does not support HTML. If you want to use directly within a predefined wrapping tag, add the no_wrapper=true parameter.
HubL
Output
Report incorrect code
Copy
Ask AI
{% textarea "my_textarea" %} {% textarea "my_textarea" label="Enter plain textblock", value="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean aurna quis lacus vehicula rutrum.", no_wrapper=True %}
Report incorrect code
Copy
Ask AI
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a urna quislacus vehicula rutrum.
Display the social networks sharing button on the player.
False
width
Number
Width of the embedded video player.
Auto
height
Number
Height of the embedded video player.
Auto
player_id
Number
The player_id of the video to embed.
style
String
Additional style for player.
conversion_asset
JSON
Event setting for player. Can render CTA or Form before or after video plays. This parameter takes a JSON object with three parameters: type (FORM or CTA), id (The guid of the type object), position (POST or PRE).