Skip to main content
This page is a full reference 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.
Most of the tags in this page have default module equivalents. Modules can be used within dnd_areas and flexible columns, making them more powerful and user friendly than the tags you see here.

Blog comments

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.

Blog content

While drag and drop layouts include a blog content module, these modules are not created with a single tag. They instead use conditional logic to define how a blog post and a blog listing should render. You can learn more about coding blog templates here.

Blog post filter

Creates a linked listing of posts by tag, posts by month, or posts by author.
Please note:This module can only be used in blog post templates.

Blog post listing

Adds a listing of most popular or top posts.
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.
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.
We strongly recommend using the callback parameter instead of post_formatter to improve page loading speed.

Examples

The following example generates a listing of posts written by one of the three specified blog_authors across two different blogs:
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:
The following example generates a listing of five posts using the callback parameter to control the HTML output of the post listing:

Blog social sharing

Blog social sharing renders share counters on your blog posts (if enabled in Content Settings).

Blog subscription

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.

Boolean

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.

Choice

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.

Color

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.

CTA

A Call to Action or CTA tag allows users to add a HubSpot Call to Action button to a predefined area of a page.
*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.

Custom HTML

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

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:

Editor placeholders

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.
module-placeholder-content
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 column

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

Form

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.
Renders copyright information with the year and company name specified in the account’s marketing email settings.
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.
Generates a header module that will render text as an h1-h6 tag.

Icon

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.

Image

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.

Image src

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.

Language switcher

Adds a Globe Icon with links to the translated versions of a given CMS page. Learn more about multi-language content here.

Linked image

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.
A logo tag renders your company’s logo from the account’s brand kit settings.
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.

Require_css

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.

Require_head

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.

Require_js

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.

Rich text

Creates a WYSIWYG content editor.

RSS listing

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.

Section header

Generates an html heading and <p> subheader.

Simple menu

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

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.

Spacer

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.

System page tags

The following tags can be used on system pages, such as the password reset or email subscription pages.

Email backup unsubscribe

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

This module renders when an email recipient goes to edit his or her subscription preferences. It should be used on a Subscription Preference system template.

Email subscriptions confirmation

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.

Membership login

Creates a login form to provide access to private content.

Membership register

Creates a registration form to provide access to private content.

Password reset request

Creates a form to send a password reset email for accessing password-protected pages.

Password reset

Renders a password reset form for accessing password-protected pages.

Password prompt

Adds a password prompt to password-protected pages.

Text

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.

Textarea

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.

Video Player

Render a video player for a video file from the file manager that has the Allow embedding, sharing, and tracking setting turned on.
Last modified on March 29, 2026