COS Documentation

Search HubSpot Designers Site

Supported Modules

All Module Types

About Modules

Modules are dynamic components that you can drop into a template. The end-user will then get a chance to configure the component for each page that they user creates. Some of our modules include: "text", "image", "rich_text", "form", and "menu":

A module is added to a page like so:


{% module_type "a_unique_name" label="Label that shows up in the editor", attr="val" %}

You can learn the basics of using modules here.

Parameters available for all modules

Every module in our system supports these parameters as key="value" attributes, in addition to the custom parameters for each module type

Parameter NameTypeVisible in Content Editor
export_to_template_context If True, instead of rendering the HTML in place, the data from this widget will be available in the template context, via {{ widget_data.((widget_name)).((param_name)) }} False
label   False
no_wrapper Module output to the page is always wrapped in a <div> with special classes. This is used for the live previewing and for styling. Setting no_wrapper=True cancels this behavior. We do not recommened using this setting if you can possibly avoid it, as it can break style manager and live content previews. False
overrideable If True, the end user will be able to configure this module when creating a specific page or email, otherwise, if False, the template default will always be used. False
extra_classes Additional CSS classes to add to the module wrapper div. False

 

Module Types

Blog Post Filter post_filter

Include a list of links to filter blog posts. Filter posts by topic, month, or author.
This module can only be used in templates for: Blog Post

Example usages:

{% post_filter "my_post_filter" %}
{% post_filter "my_post_filter" label="My Post Filter", expand_link_text="see all", filter_type="topic", list_title="Lists by Topic", max_links=5, order_by="post_count", select_blog="default" %}

Available parameters:

Parameter NameTypeVisible in Content Editor
expand_link_text   True
filter_type   True
list_title   True
max_links   True
order_by   True
select_blog Default will use the current blog when used in a blog template or the primary blog when used elsewhere. True

 

Blog Post Listing post_listing

Include a listing of links to blog posts. Order posts by date or popularity.
This module can only be used in templates for: Blog Post

Example usages:

{% post_listing "my_post_listing" %}
{% post_listing "my_post_listing" label="My Post Listing", list_title="Recent Posts", listing_type="recent", max_links=5, select_blog="default" %}

Available parameters:

Parameter NameTypeVisible in Content Editor
list_title   True
listing_type   True
max_links   True
select_blog Default will use the current blog when used in a blog template or the primary blog when used elsewhere. True

Call-to-Action cta

A base widget

Example usages:

{% cta "my_cta" %}
{% cta "my_cta" label="My Cta", embed_code="", guid="", image_html="", image_src="" %}

Available parameters:

Parameter NameTypeVisible in Content Editor
embed_code   True
guid   True
image_html   True
image_src   True

Color color

A color picker

Example usages:

{% color "my_color" %}
{% color "my_color" label="My Color", color="#F78989" %}

Available parameters:

Parameter NameTypeVisible in Content Editor
color The hex value of the color True

Custom HTML raw_html

Insert custom HTML markup

Example usages:

{% raw_html "my_raw_html" %}
{% raw_html "my_raw_html" label="My Raw Html", value="" %}

Available parameters:

Parameter NameTypeVisible in Content Editor
value The value to be output True

Email Subscription blog_subscribe

Subscribe By Email
This module can only be used in templates for: Blog Post

Example usages:

{% blog_subscribe "my_blog_subscribe" %}
{% blog_subscribe "my_blog_subscribe" label="My Blog Subscribe", custom_form_html=None, no_title=False, title="" %}

Available parameters:

Parameter NameTypeVisible in Content Editor
no_title Include a h3 title above the form True
title The title to show above the form True

Forms form

Insert one of the forms created in the Form Manager

Example usages:

{% form "my_form" %}
{% form "my_form" label="My Form", custom_form_html=None, no_title=False, title="" %}

Available parameters:

Parameter NameTypeVisible in Content Editor
no_title Include a h3 title above the form True
title The title to show above the form True
Allow visitors to search your site on Google

Example usages:

{% google_search "my_google_search" %}
{% google_search "my_google_search" label="My Google Search", prefill_input_with_pathname=False, search_button_text="Search Google", search_field_label="Search this site on Google" %}

Available parameters:

Parameter NameTypeVisible in Content Editor
prefill_input_with_pathname   True
search_button_text   True
search_field_label   True

Header header

One line of text to be displayed in a large font size

Example usages:

{% header "my_header" %}
{% header "my_header" label="My Header", header_tag="h1", value="" %}

Available parameters:

Parameter NameTypeVisible in Content Editor
header_tag The HTML tag to wrap the header in (h1, h2, etc.) True
value The text of the header True

Horizontal Spacer space

Used to add an empty module for spacing to the left or right of another module in a row.

Example usages:

{% space "my_space" %}
{% space "my_space" label="My Space" %}

Image linked_image

Insert an image from you library.

Example usages:

{% linked_image "my_linked_image" %}
{% linked_image "my_linked_image" label="My Linked Image", align="left", alt="Click the button", height=240, hspace="3", link="", src="http://mycdn.com/images/my-image.png", style="border: 1px solid red;", width=400 %}

Available parameters:

Parameter NameTypeVisible in Content Editor
align The align attribute of the image False
alt The alt text of the image True
height The height of the image True
hspace The hspace attribute of the image False
link The url the image links to True
src The URL of the image src True
style CSS style for the image False
width The width of the image True
Insert an image from you library.

Example usages:

{% logo "my_logo" %}
{% logo "my_logo" label="My Logo", align="left", alt=None, height=240, hspace="3", link=None, src=None, style="border: 1px solid red;", suppress_company_name=False, width=400 %}

Available parameters:

Parameter NameTypeVisible in Content Editor
align The align attribute of the imgage False
alt The alt text of the image True
height The height of the image True
hspace The hspace attribute of the image False
link The url the image links to True
src The URL of the image src True
style CSS style for the image False
suppress_company_name Do not show company name when no logo is chosen. True
width The width of the image True

Menu menu

A menu
This module can only be used in templates for: Landing Page, Blog Post

Example usages:

{% menu "my_menu" %}
{% menu "my_menu" label="My Menu", flow="horizontal", flyouts="true", max_levels=4, root_key=None, root_type="site_root", site_map_name="default" %}

Available parameters:

Parameter NameTypeVisible in Content Editor
flow   False
flyouts   False
max_levels   False
root_key   False
root_type   False
site_map_name   False

One line of text text

A single line of text with no formatting

Example usages:

{% text "my_text" %}
{% text "my_text" label="My Text", value="" %}

Available parameters:

Parameter NameTypeVisible in Content Editor
value The value to be output True

Option Selector choice

A list of options

Example usages:

{% choice "my_choice" %}
{% choice "my_choice" label="My Choice", choices="Good, Better, Best" %}
{% choice "my_choice" label="My Choice", choices="[[\"1\", \"Good\"], [\"2\", \"Better\"],[\"3\", \"Best\"]]" %}

Available parameters:

Parameter NameTypeVisible in Content Editor
choices Available choices True

Password Prompt password_prompt

Requests a password to access a landing page.

Example usages:

{% password_prompt "my_password_prompt" %}
{% password_prompt "my_password_prompt" label="My Password Prompt", bad_password_message="<p>Sorry, please try again.</p>", submit_button_text="Submit" %}

Available parameters:

Parameter NameTypeVisible in Content Editor
bad_password_message Text to display if an incorrect password is entered. True
submit_button_text Submit button label True

RSS Feed rss_listing

A base widget

Example usages:

{% rss_listing "my_rss_listing" %}
{% rss_listing "my_rss_listing" label="My Rss Listing", attribution_text="by", click_through_text="Read more", content_group_id=0, is_external=False, limit_to_chars=200, number_of_items=5, publish_date_format="", publish_date_text="posted at", rss_url="", show_author=True, show_date=True, include_featured_image=True, show_detail=True, show_title=True, title="" %}

Available parameters:

Parameter NameTypeVisible in Content Editor
attribution_text   True
click_through_text   True
content_group_id   True
is_external   True
limit_to_chars   True
module_title_tag   True
number_of_items   True
publish_date_format   True
publish_date_text   True
rss_url   True
show_author   True
show_date   True
show_detail   True
show_title   False
title   True
item_title_tag The tag to use in wrapping the title of each RSS item, defaults to span. True
include_featured_image   True
select_blog When the value is "default" the default COS blog will be selected. No content_group_id is necessary when this is used. False

Rich Text rich_text

A block of text and content that can be styled with the editor.

Example usages:

{% rich_text "my_rich_text" %}
{% rich_text "my_rich_text" label="My Rich Text", html="<h1>Lorem ipsum dolor sit amet</h1>Consectetur <em>adipisicing</em> elit, sed do eiusmod tempor incididunt ut labore et dolore magna" %}

Available parameters:

Parameter NameTypeVisible in Content Editor
html The HTML True

Section Header section_header

An extra large, centered, header to denote an entire section

Example usages:

{% section_header "my_section_header" %}
{% section_header "my_section_header" label="My Section Header", header="", subheader="" %}

Available parameters:

Parameter NameTypeVisible in Content Editor
header   True
subheader   True

Social Sharing social_sharing

Allow visitors to share your page on social networks

Example usages:

{% social_sharing "my_social_sharing" %}
{% social_sharing "my_social_sharing" label="My Social Sharing" %}