Default modules

Last updated:

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.

design-manager-default-modules

Blog Comments

Supported in blog posts and blog listings.

{% module "blog_comments" path="@hubspot/blog_comments" %}

Blog Email Subscription

Supported in pages, blog posts, and blog listings.

{% module "blog_subscribe" path="@hubspot/blog_subscribe" %}
Use this table to describe parameters / fields
ParameterTypeDescription 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!

Button

Supported in pages, blog posts, and blog listings.

{% module "button" path="@hubspot/button" %}
Use this table to describe parameters / fields
ParameterTypeDescription 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 (Boolean)
  • button_font (Font)
  • button_color (Color)
  • text_hover_color (Color)
  • button_hover_color (Color)
{ "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 } }

Call-to-Action

Supported in pages, blog listings, blog posts, and emails.

{% module "cta" path="@hubspot/cta" %}
Use this table to describe parameters / fields
ParameterTypeDescription Default
guid
String

Globally Unique Identifier of the CTA. 

Divider

Supported in pages. There's a new version of this module available in accounts created after August 25th, 2022. Learn more about this change.

{% module "divider" path="@hubspot/divider" %}
Use this table to describe parameters / fields
ParameterTypeDescription 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
  • dotted
  • dashed
solid
alignment
Choice

Horizontal alignment of divider line. Choices include:

  • left
  • center
  • right
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 show_padding equals true.

5

Main Email Body

Supported in emails.

{% module "email_body" path="@hubspot/email_body" %}
Use this table to describe parameters / fields
ParameterTypeDescription Default
html
Rich Text

Default content for the email body. HTML supported.

<p>Hi&nbsp;{{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>

Office Location Information

Supported in emails.

{% module "email_can_spam" path="@hubspot/email_can_spam" %}
Use this table to describe parameters / fields
ParameterTypeDescription 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 }} &nbsp;&nbsp;{{ site_settings.company_street_address_1 }} &nbsp;{{ site_settings.company_street_address_2 }} &nbsp;{{ site_settings.company_city }} &nbsp;{{ site_settings.company_state }} &nbsp;&nbsp;{{ site_settings.company_zip }} &nbsp;&nbsp;{{ 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> &nbsp;<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> &nbsp;</p>

Backup Unsubscribe

Supported in pages, blog posts, and blog listings.

{% module "email_simple_subscription" path="@hubspot/email_simple_subscription" %}
Use this table to describe parameters / fields
ParameterTypeDescription 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"

Subscription Preferences

Supported in emails.

{% module "email_subscriptions" path="@hubspot/email_subscriptions" %}
Use this table to describe parameters / fields
ParameterTypeDescription 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!"

Subscriptions Confirmation Message

Supported in emails.

{% module "email_subscriptions_confirmation" path="@hubspot/email_subscriptions_confirmation" %}
Use this table to describe parameters / fields
ParameterTypeDescription 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."

View As Web Page

Supported in emails.

{% module "email_view_as_web_page" path="@hubspot/email_view_as_web_page" %}
Use this table to describe parameters / fields
ParameterTypeDescription 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>"

Follow Me

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

{% module "follow_me" path="@hubspot/follow_me" %}
Use this table to describe parameters / fields
ParameterTypeDescription Default
title
Text

H3 heading.

links
Boolean

Open links in new window.

true

Follow Me - LP

Supported in pages, blog listings, and blog posts.

{% module "follow_me_lp" path="@hubspot/follow_me_lp" %}
Use this table to describe parameters / fields
ParameterTypeDescription Default
social
Object

Social network selection. Options include:

  • network (Choice)
  • link (Link)
  • network_image (Image)
  • supporting_text (Text)

 

[ { "network": "facebook" } ]
display
Choice

Display options for showing social networks. Choices include:

  • icon
  • icon_text
  • text_only
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:

  • left
  • center
  • right
center
color_scheme
Choice

Color scheme to use for icons. Choices include:

  • color
  • black (black and white)
  • grey
  • white
  • custom
color
custom_color
Color

Custom color to use when color_scheme equals custom.

#000000
icon_shape
Choice

Shape of the social icons. Choices include:

  • circle
  • square
  • original
circle
font_style
Object

Font object for social network text. Available when display does not equal icon.

Font object contains: 

  • size
    • value: number
    • units: unit of Measure
  • color: hex value
  • styles
    • bold: boolean
    • italic: boolean
    • underline: boolean
  • font: text
{ "size": { "value": 14, "units": "px" }, "color": "#2696be", "styles": { "bold": false, "italic": false, "underline": false }, "font": "helvetica" }

Form

Supported in pages, blog posts, and blog listings.

{% module "form" path="@hubspot/form" form={ "form_id": "9e633e9f-0634-498e-917c-f01e355e83c6", "response_type": "redirect", "message": "Thanks for submitting the form.", "redirect_id": null, "redirect_url": "http://www.google.com" } %}
Use this table to describe parameters / fields
ParameterTypeDescription Default
title
Text

H3 heading

form
Object

Form object including:

  • form_id: ID for form to use
  • response_type: what the visitor will see after submitting the form:
    • inline
    • redirect
  • message: inline message if response_type is set to inline
  • redirect_id: ID of page to be redirected to if response_type is set to redirect.
  • redirect_url: URL to be redirected to if response_type is set to redirect

 

{ "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
Email

Comma-separated list of emails to send to when notifications_are_overridden equals true.

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 follow_up_type_simple equals true.

sfdc_campaign
Salesforcecampaign

When Salesforce integration is active, the campaign ID.

Supported in pages, blog listings, blog posts, and emails.

{% module "header" path="@hubspot/header" %}
Use this table to describe parameters / fields
ParameterTypeDescription Default
value
Text

Text for the heading.

"A clear and bold header"
header_tag
Choice

Choose a heading level. Choice include h1 through h6.

h1

Horizontal Spacer

Supported in pages, blog listings, blog posts, and emails.

{% module "horizontal_spacer" path="@hubspot/horizontal_spacer" %}

Icon

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.

{% module "icon" path="@hubspot/icon" %}
Use this table to describe parameters / fields
ParameterTypeDescription 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: ignored by the screen reader.
  • semantic: read by the screen reader.
"decorative"
title
String

An accessibility option that assigns the icon a title.

style
StringThe type of icon. Can be one of solid, regular, light, thin, or duotone. "solid"
unicode
String

The icon's unicode value.

f3b2

Image

Supported in pages, blog listings, blog posts, and emails.

{% module "linked_image" path="@hubspot/linked_image" %}
Use this table to describe parameters / fields
ParameterTypeDescription Default
img
Image

Image object containing:

  • src: image url
  • alt: alt text for image
  • loading: lazy loading options include:
    • disabled
    • lazy
  • width: px value
  • height: px value
{ "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

Image (email)

Supported in emails.

{% module "image_email" path="@hubspot/image_email" %}
Use this table to describe parameters / fields
ParameterTypeDescription 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:

  • left
  • center
  • right
center

Image Grid

Supported in pages, blog listings, and blog posts.

{% module "image_grid" path="@hubspot/image_grid", label="image_grid.module" %}
Use this table to describe parameters / fields
ParameterTypeDescription Default
slides
Object

Object containing information for each slide. Object contains:

  • img: image URL.
  • link_url: URL where the slide should link.
  • hover_messages: text that overlays on the image on hover.
[ { "show_caption": false, "open_in_new_tab": false } ]
display_mode
Choice

Display mode of the Image Gallery. Choices include:

  • standard: standard slider.
  • thumbnail: thumbnail navigator.
  • lightbox: lightbox gallery.
standard
lightboxRows
Number

Number of rows in the Lightbox gallery when display_mode equals lightbox.

3
loop_slides
Boolean

Enables looping through the slides with next/prev when display_mode equals standard or thumbnail.

true
auto_advance
Boolean

Automatically advances to the next slide when display_mode equals standard or thumbnail.

true
num_seconds
Number

Amount of time (seconds) between advancing to the next slide when display_mode equals standard or thumbnail.

5
show_pagination
Boolean

Show navigation buttons when  display_mode equals standard or thumbnail.

true
sizing
Choice

Sets the height of the slides when display_mode equals standard or thumbnail. Choices include:

  • static: fixed height.
  • resize: variable height.
static
transition
Choice

Slide transition styles when display_mode equals standard or thumbnail. Choices include:

  • slide: slide transition.
  • fade: fade transition.
slide
caption_position
Choice

Position of the slide captions when display_mode equals standard or thumbnail. Choices include:

  • below: always keep captions below the image.
  • superimpose: superimpose captions on top of images.
below

Supported in pages, blog posts, and blog listings.

{% module "gallery" path="@hubspot/gallery" %}
Use this table to describe parameters / fields
ParameterTypeDescription Default
slides
Object

Object containing information for each slide. Object contains:

  • img: image URL.
  • show_caption: boolean to show slide caption.
  • caption: rich text for caption.
  • link_url: URL where the slide should link.
  • open_in_new_tab: boolean to direct if the link should open in a new tab.
[ { "show_caption": false, "open_in_new_tab": false } ]
display_mode
Choice

Display mode of the Image Gallery. Choices include:

  • standard: standard slider.
  • thumbnail: thumbnail navigator.
  • lightbox: lightbox gallery.
standard
lightboxRows
Number

Number of rows in the Lightbox gallery when display_mode equals lightbox.

3
loop_slides
Boolean

Enables looping through the slides with next/prev when display_mode equals standard or thumbnail.

true
auto_advance
Boolean

Automatically advances to the next slide when display_mode equals standard or thumbnail.

true
num_seconds
Number

Amount of time (seconds) between advancing to the next slide when display_mode equals standard or thumbnail.

5
show_pagination
Boolean

Show navigation buttons when  display_mode equals standard or thumbnail.

true
sizing
Choice

Sets the height of the slides when display_mode equals standard or thumbnail. Choices include:

  • static: fixed height.
  • resize: variable height.
static
transition
Choice

Slide transition styles when display_mode equals standard or thumbnail. Choices include:

  • slide: slide transition.
  • fade: fade transition.
slide
caption_position
Choice

Position of the slide captions when display_mode equals standard or thumbnail. Choices include:

  • below: always keep captions below the image.
  • superimpose: superimpose captions on top of images.
below

Language Switcher

Supported in pages.

{% module "language_switcher" path="@hubspot/language_switcher" %}
Use this table to describe parameters / fields
ParameterTypeDescription Default
display_mode
Choice

The language of the text in the language switcher. Options include:

  • pagelang: the names of languages will display in the language of the page the switcher is on.
  • localized: the name of each language will display in that language.
  • hybrid: a combination of the two.
localized

Logo 

Supported in pages, blog listings, blog posts, and emails.

{% module "logo" path="@hubspot/logo" %}
Use this table to describe parameters / fields
ParameterTypeDescription Default
img
Image

Image object containing:

  • override_inherited_src: override the default logo from settings
  • src: image url
  • alt: alt-text for logo
{ "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 suppress_company_name equals false. Choices include h1 through h6.

h1

Meetings

Supported in pages, blog posts, and blog listings.

{% module "meetings" path="@hubspot/meetings" %}
Use this table to describe parameters / fields
ParameterTypeDescription Default
meeting
Meeting

Select a meeting link.

Membership Social Logins

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.

{% module "social" path="@hubspot/membership_social_logins", clientid="" appid="" facebook_enabled=true google_enabled=true %}

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.

Membership social logins parameters
ParameterTypeDescription Default
facebook_appid
String

Your facebook app ID.

facebook_enabled
boolean

Enable the button for Facebook login. facebook_appid is required.

False
google_clientid
String

Your Google client ID.

google_enabled
Boolean

Enable the button for Google login. google_clientid is required.

False

Supported in pages, blog posts, and blog listings.

Looking to build your own custom menu? Try our menu() function.
{% module "menu" path="@hubspot/menu" %}
Use this table to describe parameters / fields
ParameterTypeDescription Default
id
Menu

ID of the menu.

root_type
Choice

Advanced menu type. Choices include:

  • site_root: always show top-level pages in menu.
  • top_parent: show pages in menu that are related to section being viewed.
  • parent: show pages in menu that are related to page being viewed.
  • breadcrumb: breadcrumb style path menu (uses horizontal flow).
site_root
max_levels
Choice

Determines the number of menu tree children that can be expanded in the menu. Choices include 1 through 10

2
flow
Choice

Orientation of the menu. Choices include:

  • horizontal
  • vertical
horizontal
flyouts
Boolean

Enabled hover over functionality for child menu items.

true

Supported in pages, blog listings, and blog posts.

{% module "page_footer" path="@hubspot/page_footer" %}

Password Prompt

Supported in pages, blog posts, and blog listings.

{% module "password_prompt" path="@hubspot/password_prompt" %}
Use this table to describe parameters / fields
ParameterTypeDescription 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. "

Payments

Supported in pages, blog posts, and blog listings.

{% module "payments" path="@hubspot/payments" %}
Use this table to describe parameters / fields
ParameterTypeDescription 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: opens the payment form in a new tab.
  • overlay: opens the payment form in a sliding overlay.
"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
  • custom_link
"payment_link"
button_link
Link

When button_target is set to custom_link, sets the destination of the external link. Supported link types include:

  • EXTERNAL
  • CONTENT
EXTERNAL

Post Filter

Supported in pages, blog listings, blog posts, and emails.

{% module "post_filter" path="@hubspot/post_filter" %}
Use this table to describe parameters / fields
ParameterTypeDescription 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
  • month
  • author
tag
order_by
Choice

Ordering for the values of filter links. Choices include:

  • post_count
  • name
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 max_links value to display are available. 

"See all"

Post Listing

Supported in pages, blog listings, blog posts, and emails.

{% module "post_listing" path="@hubspot/post_listing" %}
Use this table to describe parameters / fields
ParameterTypeDescription 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: most recent.
  • popular_all_time: most popular of all time.
  • popular_past_year: most popular the past year.
  • popular_past_six_months: most popular the past six months.
  • popular_past_month: most popular the past month.
recent
list_title
Text

An H3 heading. 

"Recent Posts"
max_links
Number

Maximum number of posts to display. 

5

HTML - email

Supported in emails.

{% module "raw_html_email" path="@hubspot/raw_html_email" %}
Use this table to describe parameters / fields
ParameterTypeDescription Default
html
HTML

HTML block.

<p>\n Add custom HTML to your email.\n</p>

Quote download

Supported in quote templates.

{% module "download" path="@hubspot/quote_download" %}
Use this table to describe parameters / fields
ParameterTypeDescription 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.

Quote payment

Supported in quote templates.

{% module "payment" path="@hubspot/quote_payment" %}
Use this table to describe parameters / fields
ParameterTypeDescription 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 heading_text. Values include h1, h2, h3, h4, h5, h6.

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

Quote signature

Supported in quote templates.

{% module "signature" path="@hubspot/quote_signature" %}

When a quote requires an e-signature, the following fields are available within an esignature object:

Use this table to describe parameters / fields
ParameterTypeDescription 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:

Use this table to describe parameters / fields
ParameterTypeDescription 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:

  • header: text that displays at the top of the countersignature section.
  • countersignature: Text that displays next to the countersignature field.
  • date: text that displays next to the date field.
  • printed_name: text that displays next to the printed name field.
Signed

Line items

Supported in quote templates. This module also includes the default text used on custom quotes. 

{% module "module_165350106057652" path="@hubspot/line_items", label="line_items.module" %}
Use this table to describe parameters / fields
ParameterTypeDescription 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: 

  • price: price of line item. 
  • item_description: description of line item. 
  • quantity: number of line items. 
  • amount: total cost of line items. 
  • hs_recurring_billing_start_date: billing start date for recurring line items. 
  • discount: discount amount applies to the line item. 
crm_product_property
CRM object property

Select any product property to appear as a line item column header. 

Rich Text

Supported in pages, blog listings, blog posts, and emails.

{% module "rich_text" path="@hubspot/rich_text" %}
Use this table to describe parameters / fields
ParameterTypeDescription 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>

RSS Listing

Supported in pages, blog listings, and blog posts.

{% module "rss_listing" path="@hubspot/rss_listing" %}
Use this table to describe parameters / fields
ParameterTypeDescription Default
title
Text

An H3 heading.

"Test"
rss_feed_type
Choice

Type of RSS feed. Choices include:

  • blog - HubSpot hosted blog.
  • external - An external RSS feed.
blog
rss_url
Text

RSS URL to use when rss_feed_type equals external.

content_group_id
Blog

Id of the blog to use when rss_feed_type equals blog.

topic_id
Tag

(optional) Id of the tag to filter by when rss_feed_type equals blog.

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 show_author equals true.

"by"
show_detail
Boolean

Show post summary text.

true
limit_to_chars
Number

Limits the length of the summary text when show_detail equals true.

200
click_through_text
Text

The text which will be displayed for the clickthrough link at the end of a post summary when show_detail equals true.

"Read more"
show_date
Boolean

Show publish date.

true
publish_date_format
Choice

Format for the publish date when show_date equals true. Choices include:

  • short (ex: 06/11/06 12:00PM)
  • medium (ex: Jun 6, 2006 12:00:00 pm)
  • long (ex: June 6, 2017 12:00:00 pm EDT)
  • MMMM d, yyyy 'at' h:mm a (ex: June 6, 2006 at 12:00 pm)
  • h:mm a 'on' MMMM d, yyyy (ex: 12:00 pm on June 6, 2006)
short
publish_date_text
Text

The text that indicates when a post was published when show_date equals true.

"posted at"

Site Search Input

Supported in pages, blog posts, and blog listings.

{% module "search_input" path="./local-search_input" placeholder="Search" include_search_button=true results={ "use_custom_search_results_template": "true", "path_id": "77977569400" } %}
Use this table to describe parameters / fields
ParameterTypeDescription 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
  • landing_pages
  • blog_posts
  • knowledge_articles
{ "website_pages": true, "landing_pages": false, "blog_posts": true, "knowledge_articles": false }
results
ObjectAn object that enables controls for using a custom search results page. Includes the following properties:
  • use_custom_search_results_template (boolean): when set to true, users can select a custom search results page. Default is false.
  • path_id (string): the ID of the page that will be used for search results. The referenced page must contain the search results module.

Search Results

Supported in pages, blog posts, and blog listings.

{% module "search_results" path="@hubspot/search_results" %}
Use this table to describe parameters / fields
ParameterTypeDescription Default
display_featured_images
Boolean

Display featured images for items.

false

Section Header

Supported in pages, blog listings, blog posts, and emails.

{% module "section_header" path="@hubspot/section_header" %}
Use this table to describe parameters / fields
ParameterTypeDescription Default
header
Text

Section header content.

"A clear and bold header"
heading_level
Choice

Heading level for the header. Choices include h1 through h6.

h1
subheader
Text

Subheading paragraph text for the section.

"A more subdued subheader"

Simple Menu

Supported in pages, blog listings, and blog posts.

{% module "simple_menu" path="@hubspot/simple_menu" %}
Use this table to describe parameters / fields
ParameterTypeDescription Default
menu_tree
Simple Menu

Simple menu object.

[]
orientation
Choice

Orientation of the menu. Choices include:

  • horizontal
  • vertical
horizontal

Social Sharing

Supported in pages, blog listings, blog posts, and emails.

{% module "social_sharing" path="@hubspot/social_sharing" %}

Note: The variable social_link_url in the default column below is the same value as the link parameter.

ParameterTypeDescription Default
link
Text

This is the destination link that will be shortened for easier sharing on social networks.

facebook
Object

Object containing:

  • enabled: boolean to enable social item
  • custom_link_format: custom URL for socials sharer URL
{ "enabled": false, "custom_link_format": "http://www.facebook.com/share.php?u={{ social_link_url }}" }
twitter
Object

Object containing:

  • enabled: boolean to enable social item
  • custom_link_format: custom URL for socials sharer URL
{ "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: boolean to enable social item
  • custom_link_format: custom URL for socials sharer URL
{ "enabled": false, "custom_link_format": "http://www.linkedin.com/shareArticle?mini=true&url={{ social_link_url }}" }
pinterest
Object

Object containing:

  • enabled: boolean to enable social item.
  • custom_link_format: custom URL for socials sharer URL.
  • pinterest_media: image object including:
    • src: image URL.
    • alt: alt-text for the image.
{ "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: boolean to enable social item
  • custom_link_format: custom URL for socials sharer URL
{ "enabled": false, "custom_link_format": "mailto:?subject=Check out {{ social_link_url }} &body=Check out {{ social_link_url }}" }

One Line of Text

Supported in pages, blog listings, blog posts, and emails.

{% module "text" path="@hubspot/text" %}
Use this table to describe parameters / fields
ParameterTypeDescription Default
value
Text

Add your text to this parameter.

"Some additional information in one line"

Video

Supported in pages, blog listings, and blog posts.

{% module "video" path="@hubspot/video" %}
Use this table to describe parameters / fields
ParameterTypeDescription Default
video_type
Choice

Type of video. Choices include:

  • embed: embed code from an external source.
  • hubspot_video: HubSpot hosted video.
embed
hubspot_video
Video Player

HubSpot hosted video. Used when video_type equals hubspot_video.

embed_field
Embed

Supports embed types:

  • oembed
    • video: URL for video.
  • html: embed code for video.
oembed_thumbnail
Image

Override oembed thumbnail image when video_type equals embed and embed_field equals oembed.

style_options
Object

Object containing oembed_thumbnail_play_button_color - Color field.

{"oembed_thumbnail_play_button_color":"#ffffff"}
placeholder_fields
Object

Object containing:

  • placeholder_title: text field.
  • placeholder_description: text field.
{"placeholder_title":"No video selected", "placeholder_description":"Select a video type in the sidebar."}

Video Email

Supported in emails.

{% module "video_email" path="@hubspot/video_email" %}
Use this table to describe parameters / fields
ParameterTypeDescription Default
video_type
Choice

Type of video. Choices include:

  • embed: embed code from an external source.
  • hubspot_video: HubSpot hosted video.
embed
hubspot_video
Video Player

HubSpot hosted video. Used when video_type equals hubspot_video.

embed
Object

Object containing source_type. Only value of oembed is available. 

{ "source_type": "oembed" }
oembed_thumbnail
Image

Override oembed thumbnail image when video_type equals embed and embed_field equals oembed.

{"size_type": "exact"}
style_options
Object

Object containing:

  • play_button_color: color hex code.
  • play_button_scale: number 0-100
{ {"play_button_color":{ "color":"#2f4254", "opacity":100},"play_button_scale" : 30} }
alignment
Choice

Alignment of video. Choices include:

  • left
  • center
  • right
center

Video Embed Lp

Supported in pages.

{% module "video_embed_lp" path="@hubspot/video_embed_lp" %}
Use this table to describe parameters / fields
ParameterTypeDescription 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) or manually set width and height (false).

true
max_width
Number

Max width (px)

800
max_height
Number

Max height (px)

450

Was this article helpful?
This form is used for documentation feedback only. Learn how to get help with HubSpot.