Default web modules
Below, learn about the default modules that HubSpot provides for building templates for website pages, blog posts, and blog listing pages. You'll also find default modules that can be used to build quote templates.
When developing locally, you can fetch a specific default module using the module path (e.g. hs fetch @hubspot/linked_image.module
).
To view a default module's code, you can view and clone the module within the @hubspot
folder of the design manager.
Please note: default web modules are separate from default email modules, which are for email templates. If your email templates include any of the following default web modules, you should replace them with the corresponding email-specific module:
cta
header
linked_image
logo
post_filter
post_listing
section_header
social_sharing
text
Supported in pages, blog posts, and blog listings.
Parameter | Type | Description | Default |
---|---|---|---|
select_blog
| Blog | The blog to use for the module. | |
title
| String | Title for the module (wrapped in a h3 tag) |
"Subscribe Here!"
|
response_message
| Rich Text | The message that is shown upon submitting the form. |
Thanks for subscribing!
|
Add this module to blog listing pages to display blog post previews containing each post's title, featured image, author, publish date, and more with a clickable button that navigates to the post.
This default module has built using React, and you can view its source code on GitHub.
Please note:
- This module cannot be accessed from the design manager. The module can be referenced with HubL in coded templates and added within the blog listing page editor.
- This module replaces the previous
blog_listing
module, which has been deprecated.
Parameter | Type | Description | Default |
---|---|---|---|
layout
Required
| Choice | The content layout for each blog post preview.
|
grid
|
columns
| Number | When using the |
3
|
alternateImage
| Boolean | When using the |
false
|
fullImage
| Boolean | When using the |
false
|
displayForEachListItem
| Array | The content to include in each blog post preview. Choices include:
|
[
'image',
'title',
'authorImage',
'authorName',
'tags',
'publishDate',
'description',
'button'
]
|
buttonText
| String | The text that displays on the read more button, if included. |
Read more
|
Supported in pages, blog listings, and blog posts.
Parameter | Type | Description | Default |
---|---|---|---|
select_blog
| Blog | Select a blog to display. Default will use the current blog when used in a blog template or the primary blog when used elsewhere. | |
filter_type
| Choice | Type of filtering links to show. Choices include:
|
tag
|
order_by
| Choice | Ordering for the values of filter links. Choices include:
|
post_count
|
list_title
| Text | An H3 heading. |
"Posts by Tag"
|
max_links
| Number | Number of filter links to show. Leave blank to show all. |
5
|
expand_link_text
| Text | Text to display if more than the |
"See all"
|
Supported in pages, blog listings, and blog posts.
Parameter | Type | Description | Default |
---|---|---|---|
select_blog
| Blog | Select a blog to display. Default will use the current blog when used in a blog template or the primary blog when used elsewhere. | |
listing_type
| Choice | The type of listing for your posts. Choices include:
|
recent
|
list_title
| Text | An H3 heading. |
"Recent Posts"
|
max_links
| Number | Maximum number of posts to display. |
5
|
Supported in pages, blog posts, and blog listings.
Parameter | Type | Description | Default |
---|---|---|---|
link
| Link | The URL that the button redirects to. |
{ "url": { "type": "EXTERNAL", "href": "www.hubspot.com", "content_id": null }, "open_in_new_tab": false, "no_follow": false }
|
button_text
| Text | Text that will be displayed on the button. |
"Add a button link here"
|
style
| Object |
|
{ "override_default_style": false, "button_font": { "color": "#FFFFFF", "size_unit": "px" }, "button_color": { "color": "#000000", "opacity": 100 }, "text_hover_color": { "color": "#000000", "opacity": 100 }, "button_hover_color": { "color": "#CCCCCC", "opacity": 100 } }
|
You can add this module to your subscription preferences page to allow contacts to request that their data be deleted. This function is required under certain data privacy laws. Once a contact requests that their data be deleted, they have 30 minutes to confirm in an email that will automatically be sent.
Users with super admin permissions will receive a notification email about these requests. Learn how to allow contacts to request a download of their data.
Parameter | Type | Description | Default |
---|---|---|---|
content
| Rich Text | Message displayed above the button. |
<h3>Delete Data</h3> <p>Permanently delete your personal data stored by {{ site_settings.company_name}}. Personal data is information that can be used to identify you and doesn't include anonymized data.<p/> <p>You'll get a follow-up email where you'll need to verify your request.</p>
|
button_text
| Text | Button text. |
Request data deletion
|
group_alerts
| Field group | The success and fail alert field group. Including the following field groups:
|
Supported in pages. There's a new version of this module available in accounts created after August 25th, 2022. Learn more about this change.
Parameter | Type | Description | Default |
---|---|---|---|
height
| Number | Pixel (px) height of the divider line. |
1
|
width
| Number | Percentage (%) width of the divider line. |
50
|
color
| Color | Color (hex) and opacity (number) of the divider line. |
{ "color": "#000000", "opacity": 100 }
|
line_type
| Choice | Line type. Choices include:
|
solid
|
alignment
| Choice | Horizontal alignment of divider line. Choices include:
|
center
|
show_padding
| Boolean | Show/hide top and bottom margining on the divider. |
false
|
padding
| Number | Pixel (px) value for the margining on top and bottom of divider line. Option available when |
5
|
You can add this module to your subscription preferences page to allow contacts to request a copy of their data. This function is required under certain data privacy laws. Users with super admin permissions will receive a notification email about these requests. Learn how to allow contacts to request that their data be deleted.
Parameter | Type | Description | Default |
---|---|---|---|
content
| Rich Text | Message displayed above the button. |
<h3>Download Data</h3> <p>Download your personal data stored by {{ site_settings.company_name}}.</p> <p>Personal data is information that can be used to identify you and doesn't include anonymized data. </p>
|
button_text
| Text | Button text. |
Request data download
|
group_alerts
| Field group | The success and fail alert field group. Including the following field groups:
|
Supported in pages, blog posts, and blog listings.
Parameter | Type | Description | Default |
---|---|---|---|
title
| Text | H3 heading | |
form
| Object | Form object including:
|
{ "form_id": "", "response_type": "redirect", "message": "Thanks for submitting the form.", "redirect_id": null, "redirect_url": "http://www.google.com" }
|
notifications_are_overridden
| Boolean | Email to send form notification to instead of form defaults. |
false
|
notifications_override_email_addresses
| Comma-separated list of emails to send to when | ||
follow_up_type_simple
| Boolean | Enabled sending a follow up email. |
false
|
simple_email_for_live_id
| Followupemail | ID of the follow-up email. Available when | |
sfdc_campaign
| Salesforcecampaign | When Salesforce integration is active, the campaign ID. |
Supported in pages, blog listings, and blog posts.
Parameter | Type | Description | Default |
---|---|---|---|
value
| Text | Text for the heading. |
"A clear and bold header"
|
header_tag
| Choice | Choose a heading level. Choice include |
h1
|
Supported in pages, blog listings, and blog posts. Icons can be pulled from the Font Awesome 5.0.10 and 5.14.0 icon sets.
Parameter | Type | Description | Default |
---|---|---|---|
name
| String | The name of the icon. |
"hubspot"
|
purpose
| Choice | An accessibility option that categorizes the purpose of the icon for screen readers. Available values are:
|
"decorative"
|
title
| String | An accessibility option that assigns the icon a title. | |
style
| String | The type of icon. Can be one of solid , regular , light , thin , or duotone . |
"solid"
|
unicode
| String | The icon's unicode value. |
f3b2
|
Supported in pages, blog listings, and blog posts.
Parameter | Type | Description | Default |
---|---|---|---|
img
| Image | Image object containing:
|
{
"src": "https://static.hubspot.com/final/img/content/email-template-images/placeholder_200x200.png",
"alt": "placeholder_200x200",
"loading": "disabled",
"width": 200,
"height": 200
}
|
link
| Text | Optional link for the image. | |
target
| Boolean | Opens link in a new tab. |
false
|
Supported in pages, blog listings, and blog posts.
Parameter | Type | Description | Default |
---|---|---|---|
slides
| Object | Object containing information for each slide. Object contains:
|
[
{
"show_caption": false,
"open_in_new_tab": false
}
]
|
display_mode
| Choice | Display mode of the Image Gallery. Choices include:
|
standard
|
lightboxRows
| Number | Number of rows in the Lightbox gallery when |
3
|
loop_slides
| Boolean | Enables looping through the slides with next/prev when |
true
|
auto_advance
| Boolean | Automatically advances to the next slide when |
true
|
num_seconds
| Number | Amount of time (seconds) between advancing to the next slide when |
5
|
show_pagination
| Boolean | Show navigation buttons when |
true
|
sizing
| Choice | Sets the height of the slides when
|
static
|
transition
| Choice | Slide transition styles when
|
slide
|
caption_position
| Choice | Position of the slide captions when
|
below
|
Supported in pages, blog posts, and blog listings.
Parameter | Type | Description | Default |
---|---|---|---|
slides
| Object | Object containing information for each slide. Object contains:
|
[
{
"show_caption": false,
"open_in_new_tab": false
}
]
|
display_mode
| Choice | Display mode of the Image Gallery. Choices include:
|
standard
|
lightboxRows
| Number | Number of rows in the Lightbox gallery when |
3
|
loop_slides
| Boolean | Enables looping through the slides with next/prev when |
true
|
auto_advance
| Boolean | Automatically advances to the next slide when |
true
|
num_seconds
| Number | Amount of time (seconds) between advancing to the next slide when |
5
|
show_pagination
| Boolean | Show navigation buttons when |
true
|
sizing
| Choice | Sets the height of the slides when
|
static
|
transition
| Choice | Slide transition styles when
|
slide
|
caption_position
| Choice | Position of the slide captions when
|
below
|
Supported in pages, blog posts, and blog listings.
Parameter | Type | Description | Default |
---|---|---|---|
slides
| Field group | A field group containing the following fields:
| |
slideshow_settings
| Field group | The image slider settings field group. Includes the following field groups:
| |
default_text
| Field group | The module's default text elements, including:
|
Supported in pages.
Parameter | Type | Description | Default |
---|---|---|---|
display_mode
| Choice | The language of the text in the language switcher. Options include:
|
localized
|
Supported in pages, blog listings, and blog posts.
Parameter | Type | Description | Default |
---|---|---|---|
img
| Image | Image object containing:
|
{
"override_inherited_src": false,
"src": null,
"alt": null
}
|
link
| Text | Optional link for the logo. If no URL is specified, your logo will link to the Logo URL set in your brand settings. | |
open_in_new_tab
| Boolean | Opens link in a new tab. |
false
|
suppress_company_name
| Boolean | Hide the company name when an image is not selected. |
true
|
heading_level
| Choice | Choose a heading level when no image is selected and |
h1
|
A customizable grid of containers to display logos uniformly. Supported in pages, blog listings, and blog posts.
Parameter | Type | Description |
---|---|---|
group_logos
| Array | An array containing an object for each logo in the grid. |
logo
| Object | In
|
styles
| Array | An array containing the style fields that affect the grid layout, logo containers, and logo images. This array contains the following style groups:
|
This module provides Google and Facebook login capability to memberships sites. The user must sign-in with an account linked to the email for the contact in the CRM. You can choose which social logins to enable.
Supported in membership login pages.
Facebook requires having a Facebook developer account, and a facebook app created, with basic settings. Once you've done that your app id is what you pass to the module.
Google requires a Google account, and authorization credentials created, once you have that your app's client id is what you pass to the module.
Parameter | Type | Description | Default |
---|---|---|---|
facebook_appid
| String | Your facebook app ID. | |
facebook_enabled
| boolean | Enable the button for Facebook login. |
False
|
google_clientid
| String | Your Google client ID. | |
google_enabled
| Boolean | Enable the button for Google login. |
False
|
Supported in pages, blog posts, and blog listings.
Looking to build your own custom menu? Try our menu() function.Parameter | Type | Description | Default |
---|---|---|---|
id
| Menu | ID of the menu. | |
root_type
| Choice | Advanced menu type. Choices include:
|
site_root
|
max_levels
| Choice | Determines the number of menu tree children that can be expanded in the menu. Choices include |
2
|
flow
| Choice | Orientation of the menu. Choices include:
|
horizontal
|
flyouts
| Boolean | Enabled hover over functionality for child menu items. |
true
|
Supported in pages, blog posts, and blog listings.
Parameter | Type | Description | Default |
---|---|---|---|
submit_button_text
| Text | Text that appears on the submit button. |
"Submit"
|
password_placeholder
| Text | Placeholder text for the password field. |
"Password"
|
bad_password_message
| Rich Text | Message to show when a password is entered incorrectly. |
"Sorry, please try again.
"
|
Supported in pages, blog posts, and blog listings.
Parameter | Type | Description | Default |
---|---|---|---|
payment
| String | To set the module to use a specific payment link, include the ID of the payment link. You can find the ID in the URL while editing the payment link. | |
checkout_location
| String | Set whether the payment form opens in a new tab or in an overlay. Available values are:
|
"new_tab"
|
button_text
| String | Sets the text of the checkout button. |
"Checkout"
|
button_target
| Choice | Whether the button uses a HubSpot payment link or an external link. Choices include:
|
"payment_link"
|
button_link
| Link | When
|
EXTERNAL
|
Displays a product from the account's product library. Supported in pages, blog posts, and blog listings.
Parameter | Type | Description | Default |
---|---|---|---|
product
| Product | The product to display, specified by product ID. | |
group_button
| Field group | By default, the module includes a button that directs users to the product's set URL. To customize the button destination, include this optional field group along with the following fields:
| |
button_override
| Object | In the Includes the following fields:
In the
| |
group_name
| Field group | By default, the module will display the product name at the top of the module as an h3. To customize the name, include this optional field group along with the following fields:
| |
group_description
| Field group | By default, the module will display the product's set description. To customize the description, include this optional field group along with the following fields:
| |
group_image
| Field group | By default, the module will display the product's set image. To customize this image, include this optional field group with the following fields:
|
Supported in quote templates.
Parameter | Type | Description | Default |
---|---|---|---|
button_text
| String | The text displayed on the download button. |
Download
|
download_error
| String | Error message displayed if the download fails. |
There was a problem downloading the quote. Please try again.
|
Supported in quote templates.
Parameter | Type | Description | Default |
---|---|---|---|
heading_text
| String | The heading displayed above the payment section of a quote template. |
Payment
|
heading_tag
| Choice | The type of heading used to display |
h3
|
checkout
| String | The payment button text. |
Pay now
|
needs_signature
| String | Button text when a signature is required. |
Payment can't be made because the quote isn't fully signed.
|
checkout_error
| Rich text | Message that displays when there's an error during checkout. |
There was a problem setting up checkout. Please contact the person who sent you this quote.
|
payment_status_error
| Rich text | Message that displays when there's an error when trying to make a payment. |
There was a problem loading the payment status for this quote. Please try refreshing the page.
|
paid
| String | A successful payment status indicator. |
Paid
|
payment_processing
| String | A payment processing status indicator. |
Payment processing
|
Supported in quote templates.
When a quote requires an e-signature, the following fields are available within an esignature
object:
Parameter | Type | Description | Default |
---|---|---|---|
pretext
| Rich text | E-signature explanation text. |
Before you sign this quote, an email must be sent to you to verify your identity. Find your profile below to request a verification email.
|
verify_button
| String | Text that displays on the verification button. |
Verify to sign
|
failure
| String | Alert text that displays when the signature information can't be retrieved. |
There was a problem retrieving the signature information. Please reload the page.
|
verification_sent
| String | A status indicator that appears when the verification request has been successfully sent to the quote signer. |
Verification sent
|
signed
| String | Text that displays when the quote has been successfully signed. |
Signed
|
When a quote requires a printed signature, the following fields are available within a print_signature
object:
Parameter | Type | Description | Default |
---|---|---|---|
header
| Rich text | Text displayed at the top of the signature section. |
Signature
|
signature
| String | Text that displays next to the signature field. |
Signature
|
date
| String | Text that displays next to the date field. |
Date
|
printed_name
| String | Text that displays next to the printed name field. |
Printed name
|
countersignature
| Object | An object containing content for the countersignature section. This object can contain the following fields:
|
Signed
|
Supported in quote templates. This module also includes the default text used on custom quotes.
Parameter | Type | Description | Default |
---|---|---|---|
title
| Text | The title of the line item column. |
Column description
|
use_additional_product_property
| Boolean | Display checkbox to allow users to select additional line item columns from product properties. |
False
|
additional_product_properties
| Choice | A product property. Choices include:
| |
crm_product_property
| CRM object property | Select any product property to appear as a line item column header. |
Supported in all template types.
Parameter | Type | Description | Default |
---|---|---|---|
html
| Rich Text | HTML block. |
<h2>Something Powerful</h2>\n<h3>Tell The Reader More</h3>\n<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>\n<p>Remember:</p>\n<ul>\n<li>Bullets are great</li>\n<li>For spelling out <a href=\"#\">benefits</a> and</li>\n<li>Turning visitors into leads.</li>\n</ul>
|
Supported in pages, blog listings, and blog posts.
Parameter | Type | Description | Default |
---|---|---|---|
title
| Text | An H3 heading. |
"Test"
|
rss_feed_type
| Choice | Type of RSS feed. Choices include:
|
blog
|
rss_url
| Text | RSS URL to use when | |
content_group_id
| Blog | Id of the blog to use when | |
topic_id
| Tag | (optional) Id of the tag to filter by when | |
number_of_items
| Number | Maximum number of posts to display. |
5
|
include_featured_image
| Boolean | Include the featured image. |
false
|
show_author
| Boolean | Show the author name. |
true
|
attribution_text
| Text | Text that attributes an author to a post. Displayed when |
"by"
|
show_detail
| Boolean | Show post summary text. |
true
|
limit_to_chars
| Number | Limits the length of the summary text when |
200
|
click_through_text
| Text | The text which will be displayed for the clickthrough link at the end of a post summary when |
"Read more"
|
show_date
| Boolean | Show publish date. |
true
|
publish_date_format
| Choice | Format for the publish date when
|
short
|
publish_date_text
| Text | The text that indicates when a post was published when |
"posted at"
|
Supported in pages, blog posts, and blog listings.
Parameter | Type | Description | Default |
---|---|---|---|
field_label
| Text | Search input label text | |
placeholder
| Text | Placeholder text for the input field. |
"Search"
|
include_search_button
| Boolean | Include a search button. |
false
|
content_types
| Object | Which content types to include in search results. Object contains the following keys with boolean values:
|
{ "website_pages": true, "landing_pages": false, "blog_posts": true, "knowledge_articles": false }
|
results
| Object | An object that enables controls for using a custom search results page. Includes the following properties:
|
Supported in pages, blog listings, and blog posts.
Parameter | Type | Description | Default |
---|---|---|---|
header
| Text | Section header content. |
"A clear and bold header"
|
heading_level
| Choice | Heading level for the |
h1
|
subheader
| Text | Subheading paragraph text for the section. |
"A more subdued subheader"
|
Supported in pages, blog listings, and blog posts.
Parameter | Type | Description | Default |
---|---|---|---|
menu_tree
| Simple Menu | Simple menu object. |
[]
|
orientation
| Choice | Orientation of the menu. Choices include:
|
horizontal
|
Add links to your social media profiles, with drag and drop reordering in the content editor. Automatically inserts icons based on the social URL, but icons can be overridden.
Supported in pages, blog listings, and blog posts.
Parameter | Type | Description | Default |
---|---|---|---|
link
| Text | The destination link for the social page added in the editor. | |
open_in_new_window
| Boolean | When set to |
true
|
is_podcast
| Boolean | Set to |
false
|
customize_alt_text
| Boolean | By default, alt-text is automatically generated. When set to |
false
|
aria-label
| String | When |
False
|
customize_icon
| Boolean | By default, icons are auto-populated based on the link URL. When set to |
false
|
custom_icon
| Icon | When |
Supported in pages, blog listings, and blog posts.
Note: The variable social_link_url
in the default column below is the same value as the link
parameter.
Parameter | Type | Description | Default |
---|---|---|---|
link
| Text | This is the destination link that will be shortened for easier sharing on social networks. | |
facebook
| Object | Object containing:
|
{ "enabled": false, "custom_link_format": "http://www.facebook.com/share.php?u={{ social_link_url }}" }
|
twitter
| Object | Object containing:
|
{ "enabled": false, "custom_link_format": "https://twitter.com/intent/tweet?original_referer={{ social_link_url }}&url={{ social_link_url }}&source=tweetbutton&text={{ social_page_title|urlencode }}" }
|
linkedin
| Object | Object containing:
|
{ "enabled": false, "custom_link_format": "http://www.linkedin.com/shareArticle?mini=true&url={{ social_link_url }}" }
|
pinterest
| Object | Object containing:
|
{ "enabled": false, "custom_link_format": "http://pinterest.com/pin/create/button/?url={{ social_link_url }}&media={{ pinterest_media }}", "pinterest_media": { "src": "", "alt": null } }
|
email
| Object | Object containing:
|
{ "enabled": false, "custom_link_format": "mailto:?subject=Check out {{ social_link_url }} &body=Check out {{ social_link_url }}" }
|
Supported in pages, blog listings, and blog posts.
Parameter | Type | Description | Default |
---|---|---|---|
tabs
| Field group | A field group that contains the tab label and text content of each tab. Contains the following fields:
|
"Some additional information in one line"
|
fixed_height
| Boolean | By default, the tabs will be set at a fixed height so that the container height stays the same when switching between tabs. You can set this to |
False
|
Supported in pages, blog listings, and blog posts.
Parameter | Type | Description | Default |
---|---|---|---|
video_type
| Choice | Type of video. Choices include:
|
embed
|
hubspot_video
| Video Player | HubSpot hosted video. Used when | |
embed_field
| Embed | Supports embed types:
| |
oembed_thumbnail
| Image | Override oembed thumbnail image when | |
style_options
| Object | Object containing |
{"oembed_thumbnail_play_button_color":"#ffffff"}
|
placeholder_fields
| Object | Object containing:
|
{"placeholder_title":"No video selected", "placeholder_description":"Select a video type in the sidebar."}
|
Supported in pages.
Parameter | Type | Description | Default |
---|---|---|---|
url
| Text | URL for video. URLs from Vimeo and YouTube are supported. |
"https://www.youtube.com/watch?v=X1Rr5BFO5rg"
|
is_full_width
| Boolean | Sets the video to full width ( |
true
|
max_width
| Number | Max width (px) |
800
|
max_height
| Number | Max height (px) |
450
|
Supported in pages, blog posts, and blog listing pages. Requires a connected WhatsApp channel.
Parameter | Type | Description | Default |
---|---|---|---|
whatsapp_number
| URL | Select from the WhatsApp channels connected to the account. | |
optin_text
| Choice | The opt-in and opt-out text. | |
whatsapp_display
| Choice | Select whether the button displays text, a WhatsApp icon, or both. Choices include:
|
text_and_icon
|
icon_position
| Choice | The position of the icon on the button. Choices include |
left
|
button_text
| String | The button's text. |
Chat on WhatsApp
|
whatsapp_icon_title
| String | The icon text for screen readers. |
WhatsApp Icon
|
Thank you for your feedback, it means a lot to us.
Social follow