Default modules
The HubSpot CMS includes a number of default modules that developers can add to templates and that content creators can add to pages. Below, learn about HubSpot's default modules and how to use them.
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.
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!
|
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 } }
|
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
|
Supported in emails.
Parameter | Type | Description | Default |
---|---|---|---|
html
| Rich Text | Default content for the email body. HTML supported. |
<p>Hi {{contact.firstname}},</p> <p>Describe what you have to offer the customer. Why should they read? What did you promise them in the subject line? Tell them something cool. Make them laugh. Make them cry. Well, maybe don't do that...</p> <p>Use a list to:</p> <ul> <li>Explain the value of your offer</li> <li>Remind the reader what they’ll get out of taking action</li> <li>Show off your skill with bullet points</li> <li>Make your content easy to scan</li> </ul> <p><a href="http://hubspot.com">LINK TO A LANDING PAGE ON YOUR SITE</a> (This is the really important part.)</p> <p>Now wrap it all up with a pithy little reminder of how much you love them.</p> <p>Aw. You silver-tongued devil, you.</p> <p>Sincerely,</p> <p>Your name</p>
|
Supported in emails.
Parameter | Type | Description | Default |
---|---|---|---|
html
| Rich Text | Populates required CAN-SPAM information for emails including business address and unsubscribe/preferences links. |
<p id="footer" style="font-family: Geneva, Verdana, Arial, Helvetica, sans-serif; text-align: center; font-size: 12px; line-height: 1.34em; color: {{ secondary_font_color }}; display: block;">{{ site_settings.company_name }} {{ site_settings.company_street_address_1 }} {{ site_settings.company_street_address_2 }} {{ site_settings.company_city }} {{ site_settings.company_state }} {{ site_settings.company_zip }} {{ site_settings.company_country }} <br><br> You received this email because you are subscribed to {{ subscription_name }} from {{ site_settings.company_name }} . <br><br> Update your <a target="_blank" href="{{ unsubscribe_link }}" style="text-decoration: underline; whitespace: nowrap; color: {{ secondary_font_color }};" data-unsubscribe="true">email preferences</a> to choose the types of emails you receive. <br><br> <a target="_blank" href="{{ unsubscribe_link_all }}" style="text-decoration: underline; whitespace: nowrap; color: {{ secondary_font_color }};" data-unsubscribe="true">Unsubscribe from all future emails</a> </p>
|
Supported in pages, blog posts, and blog listings.
Parameter | Type | Description | Default |
---|---|---|---|
header
| Text | H1 heading. |
"Email Unsubscribe"
|
input_help_text
| Text | H3 heading for help text. |
"Your email address:"
|
input_placeholder
| Text | Placeholder content for the input field. |
"email@example.com"
|
button_text
| Text | Text to display on the unsubscribe button. |
"Unsubscribe"
|
Supported in emails.
Parameter | Type | Description | Default |
---|---|---|---|
header
| Text | H1 heading. |
header
|
subheader_text
| Rich Text | Supplemental text for your H1 heading. |
"If this is not your email address, please ignore this page since the email associated with this page was most likely forwarded to you."
|
unsubscribe_single_text
| Text | Preference selection help text. |
"Uncheck the types of emails you do not want to receive:"
|
unsubscribe_all_text
| Text | Unsubscribe all help text. |
"Or check here to never receive any emails:"
|
unsubscribe_all_unsubbed_text
| Text | Unsubscribe all help text for a currently unsubbed user. |
"You are presently unsubscribed from all of our emails. Would you like to receive our emails again?"
|
unsubscribe_all_option
| Text | Label for unsubscribe all option. |
"Unsubscribe me from all mailing lists."
|
button_text
| Text | Update preferences button text. |
"Update email preferences"
|
resubscribe_button_text
| Text | Resubscribe button text. |
"Yes, resubscribe me!"
|
Supported in emails.
Parameter | Type | Description | Default |
---|---|---|---|
header
| Text | H1 heading. | |
subheader_text
| Rich Text | Supplemental text for your H1 heading. |
"If this is not your email address, please ignore this page since the email associated with this page was most likely forwarded to you."
|
unsubscribe_all_success
| Text | Message on unsubscribe. |
"You have successfully unsubscribed from all email communications."
|
subscription_update_success
| Text | Message on subscription update. |
"You have successfully updated your email preferences."
|
Supported in emails.
Parameter | Type | Description | Default |
---|---|---|---|
html
| Rich Text | View as webpage text. |
"<div style="padding-top: 15px; font-family: Geneva, Verdana, Arial, Helvetica, sans-serif; text-align: right; font-size: 9px; line-height: 1.34em; color: {{ secondary_font_color }};">Not rendering correctly? View this email as a web page <a target="_blank" href="{{ view_as_page_url }}" style="color: {{ secondary_font_color }}; text-decoration: underline; white-space: nowrap;" data-viewaswebpage="true">here</a>.</div>"
|
Supported in pages, blog listings, blog posts, and emails. Uses the follow_me_links function to return the social media account links set in account settings
Parameter | Type | Description | Default |
---|---|---|---|
title
| Text | H3 heading. | |
links
| Boolean | Open links in new window. |
true
|
Supported in pages, blog listings, and blog posts.
Parameter | Type | Description | Default |
---|---|---|---|
social
| Object | Social network selection. Options include:
|
[ { "network": "facebook" } ]
|
display
| Choice | Display options for showing social networks. Choices include:
|
icon
|
scale
| Number | Size of the icon (px). |
25
|
spacing
| Number | Left and Right Padding (px) for items. |
5
|
alignment
| Choice | The alignment of the items on the page. Choice include:
|
center
|
color_scheme
| Choice | Color scheme to use for icons. Choices include:
|
color
|
custom_color
| Color | Custom color to use when |
#000000
|
icon_shape
| Choice | Shape of the social icons. Choices include:
|
circle
|
font_style
| Object | Font object for social network text. Available when Font object contains:
|
{ "size": { "value": 14, "units": "px" }, "color": "#2696be", "styles": { "bold": false, "italic": false, "underline": false }, "font": "helvetica" }
|
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, blog posts, and emails.
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, blog posts, and emails.
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 emails.
Parameter | Type | Description | Default |
---|---|---|---|
img
| Image | Image to be used for the email. | |
link
| Text | Optional link for the image. | |
alignment
| Choice | Alignment of the image. Choice include:
|
center
|
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.
Parameter | Type | Description | Default |
---|---|---|---|
display_mode
| Choice | The language of the text in the language switcher. Options include:
|
localized
|
Supported in pages, blog listings, blog posts, and emails.
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 your primary domain. | |
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
|
This module is part of a developer beta learn more.
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
|
Supported in pages, blog listings, blog posts, and emails.
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, blog posts, and emails.
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 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 pages, blog listings, blog posts, and emails.
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, blog posts, and emails.
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
|
Supported in pages, blog listings, blog posts, and emails.
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 |
---|---|---|---|
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 emails.
Parameter | Type | Description | Default |
---|---|---|---|
video_type
| Choice | Type of video. Choices include:
|
embed
|
hubspot_video
| Video Player | HubSpot hosted video. Used when | |
embed
| Object | Object containing |
{ "source_type": "oembed" }
|
oembed_thumbnail
| Image | Override oembed thumbnail image when |
{"size_type": "exact"}
|
style_options
| Object | Object containing:
|
{ {"play_button_color":{ "color":"#2f4254", "opacity":100},"play_button_scale" : 30} }
|
alignment
| Choice | Alignment of video. Choices include:
|
center
|
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
|
Thank you for your feedback, it means a lot to us.
Social Sharing