HubL Reference

Table of contents
Close

HubL supported modules

This page is a comprehensive reference guide of the syntax and the available parameters for all HubL modules. For an explanation of the module tag syntax and a list of globally supported parameters, check out this article. Each module type below contains a sample of the basic syntax, as well as an example with parameters and code output.

Blog comments

A blog comments module renders the comments embed code on a blog template. This Javascript embed code loads the comments form and comments, based upon your configuration in Content  Settings. 

{% blog_comments "blog_comments" %}


{% blog_comments "default_blog_comments" select_blog='359485112' %}

<script type="text/javascript">        

(function($) {            

var commentsEmbedContext = {                

portalId: 327485,                

collectionId: 359485112,                

contentId: 2684120609,                

target: '#comments-listing.new-comments',                

showComments: true,                

showForm: true,                

commentVerificationText: "Your comment has been received.",                

embedScriptEnv: "prod",                

apiEnv: "prod",                

contentTitle: "Post title",                

contentCreatedAt: "1427849160000",                

contentPermalink: "http:\/\/designers.hubspot.com\/blog\/post-name,                

contentAuthorEmail: "dhunt@hubspot.com",                

contentAuthorName: "David Hunt",                

captchaRequired: true,                

captchaKey: "6Lc3uMsSAAAAAMjk4NIvPQK9_-ZLk2wBokFCo5Qt",                

maxThreadDepth: 3,                

formId: "8d42bb92-241b-4894-b853-1d5f6553daa0"            

};            

function loadComments() {                

if (window.hubspot && typeof window.hubspot.loadCommentsEmbed === 'function') {                     hubspot.loadCommentsEmbed(commentsEmbedContext.embedScriptEnv, function() {                        

if (typeof window.hsEmbedComments === 'function') {                             window.hsEmbedComments(commentsEmbedContext);                        

}                    

});                

} else {                  

setTimeout(loadComments, 50);                

}            

}            

loadComments();        

})(window.hsjQuery || jQuery);

</script>

Parameter nameTypeDescriptionDefault value
select_blog 'default' or blog ID Species which blog is connected to the comments embed. This parameter accepts arguments of either 'default' or a blog ID (available in the URL of the Blog dashboard). If want to use your default blog, this parameter is unecessary. default

Blog content

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

Blog social sharing

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

{% blog_social_sharing "blog_social_sharing" %}


{% blog_social_sharing "blog_social_sharing" select_blog='359485112' %}

<span id="hs_cos_wrapper_blog_social_sharing" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_blog_social_sharing" style="" data-hs-cos-general-type="widget" data-hs-cos-type="blog_social_sharing">

     <div class="hs-blog-social-share">

          <ul class="hs-blog-social-share-list">

               <li class="hs-blog-social-share-item hs-blog-social-share-item-twitter">

                     <a href="https://twitter.com/share" class="twitter-share-button" data-lang="en" data-url="http://designers.hubspot.com/blog" data-size="medium" data-text="">Tweet</a>

               </li>

               <li class="hs-blog-social-share-item hs-blog-social-share-item-linkedin">

                    <script type="IN/Share" data-url="http://designers.hubspot.com/blog" data-showzero="true" data-counter="right"></script>

                </li>

                <li class="hs-blog-social-share-item hs-blog-social-share-item-facebook">

                     <div class="fb-like" data-href="http://designers.hubspot.com/blog" data-layout="button_count" data-action="like" data-show-faces="false" data-share="true" data-width="120"></div>

                </li>

                <li class="hs-blog-social-share-item hs-blog-social-share-item-google-plus">

                      <div class="g-plusone" data-size="medium" data-href="http://designers.hubspot.com/blog"></div>

                </li>

          </ul>

      </div>

</span>

 

Parameter nameTypeDescriptionDefault value
select_blog 'default' or blog ID Species which blog is connected to the share counters. This parameter accepts arguments of either 'default' or a blog ID (available in the URL of the Blog dashboard). If want to use your default blog, this parameter is unecessary. default

Blog subscription

A blog subscription module renders the blog subscriber form for a particular blog. This form is automatically created whenever a blog is created in Content Settings, and there is always one subscription form per blog. Please note that the subscribe form's fields are configured within the Forms editor UI.

{% blog_subscribe "blog_subscribe" %}


{% blog_subscribe "subscribe_designers_blog" select_blog='default', title='Subscribe to the Designers Blog', response_message='
Thanks for Subscribing!
', label='Blog Email Subscription', overrideable=False %}

<span id="hs_cos_wrapper_blog_subscription" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_blog_subscribe" style="" data-hs-cos-general-type="widget" data-hs-cos-type="blog_subscribe">

<h3 id="hs_cos_wrapper_blog_subscription_title" class="hs_cos_wrapper form-title" data-hs-cos-general-type="widget_field" data-hs-cos-type="text">Subscribe to Designers Blog</h3>

<div id="hs_form_target_blog_subscription"></div>

<script charset="utf-8" src="//js.hsforms.net/forms/current.js"></script>

<script>

hbspt.forms.create({ portalId: '327485', formId: 'a8d73dc6-0d3a-486d-8938-b19f28b69c3c', formInstanceId: '60', pageId: 2749976739, pageName: 'Apple, Google & Starbucks: Inside the Web Design Style Guides of 10 Famous Companies', redirectUrl: 'http://designers.hubspot.com/blog/web-design-style-guides-examples?hsFormKey=a56a754bc4c3465015935953363b8ff3#blog_subscription', css: '', target: '#hs_form_target_blog_subscription', formData: { cssClass: 'hs-form stacked' } });

</script>

</span>

Parameters nameTypeDescriptionDefault value
 select_blog  'default' or blog ID Selects which blog subscription form to render. This parameter accepts arguments of either 'default' or a blog ID (available in the URL of the Blog dashboard). If want to use your default blog, this parameter is unecessary.  default
 title  string  Defines text in an h3 tag title above the subscribe form. 'Subscribe Here!'
 no_title  boolean  If True, the h3 tag above the title is removed.  False
 response_message  string Defines the inline thank-you message that is rendered when a user submits a form. Supports HTML. 'Thanks for Subscribing!' 
edit_form_link string This parameter generates a link that allows users to click through to the corresponding Form editor screen. This option will only show in the editor UI, if the modules has the parameter overridable=True.  Here is an example where HubID and form ID would be replaced with the information from the URL of your default blog subscriber form: edit_form_link=' <ul>\n <li><a href="/forms/HubID/FormID/edit/" target="_blank">Default Blog</a></li> \n</ul> '. \n  drops the code onto a new line.  Link to your susbscriber form

Boolean

A boolean module creates a checkbox in the UI that prints "true" or "false." In addition to printing the value, this module is useful for defining conditional template logic, when combined with the parameter export_to_template_context. Learn more about export_to_template_context here.

{% boolean "boolean" %}


{% boolean "nav_toggle" label='Hide navigation', value=False, no_wrapper=True %}
false
Parameters nameTypeDescriptionDefault value
 value  boolean  Determines whether the checkbox is checked or unchecked.  False

Choice

A choice module creates a dropdown in the content editor UI that prints the value selected by the user. Choice modules are great for giving your users a preset set of options, such as printing the type of page as a page header. 

In addition to printing the choice value, this module is useful for defining conditional template logic, when combined with the parameter export_to_template_context. Learn more about export_to_template_context, here.

{% choice "choice" %}


{% choice "type_of_page" label='Choose the type of page', value='About', choices='About, Careers, Contact, Store' %}

<span id="hs_cos_wrapper_type_of_page" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_choice" style="" data-hs-cos-general-type="widget" data-hs-cos-type="choice">

About

</span>

Parameters nameTypeDescriptionDefault value
value  string  The default field value for the dropdown  None
choices  sequence A comma-separated list of values, or list of value-label pairs. The syntax for value label pairs is as follows: choices='[[\"value1\", \"Label 1\"], [\"value2\", \"Label 2\"]]'. The editor will display the label, while it will print the value to the page.  None

Color

The color module generates a color picker in the page editor UI that prints a HEX color value to a template. Please note that this module can only be used in templates, not CSS files.  If using this tag in a <style> or inline CSS, you will want to use the no_wrapper=True parameter to remove the wrapper <span> wrapper.

{% color "color" %}


{% color "my_color_picker" label='Choose a color', color='#000000', no_wrapper=True %}
#000000
Parameters nameTypeDescriptionDefault value
 color  string  A default HEX color value for the color picker  None

CTA

A Call to Action or CTA module allows users to add a HubSpot Call to Action button to a predefined area of a page. 

{% cta "cta" %}


{% cta cta "cta" label='Select a CTA', guid='ccd39b7c-ae18-4c4e-98ee-547069bfbc5b', image_src='https://no-cache.hubspot.com/cta/default/53/c7335b66-a0d4-4d19-82eb-75e1626d02d0.png' %}

<span id="hs_cos_wrapper_" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_cta" style="" data-hs-cos-general-type="widget" data-hs-cos-type="cta"><!--HubSpot Call-to-Action Code --> 

<span class="hs-cta-wrapper" id="hs-cta-wrapper-ccd39b7c-ae18-4c4e-98ee-547069bfbc5b">

<span class="hs-cta-node hs-cta-ccd39b7c-ae18-4c4e-98ee-547069bfbc5b" id="hs-cta-ccd39b7c-ae18-4c4e-98ee-547069bfbc5b" style="visibility: visible;">

<a id="cta_button_158015_19a9097a-8dff-4181-b8f7-955a47f29826" class="cta_button " href="//cta-service-cms2.hubspot.com/ctas/v2/public/cs/c/?cta_guid=19a9097a-8dff-4181-b8f7-955a47f29826&placement_guid=ccd39b7c-ae18-4c4e-98ee-547069bfbc5b&portal_id=158015&redirect_url=APefjpFSOqhysLBE-Yye5WFoP82Swxb2PVWpfI3VxlUjuOCHfiVMcxKic3yM28vuwu9UB8_Jyhk6DGRCEN63hKqQOMtMTGmQZ1UNMK3LtNx0sRrAfQQYna2BfZ9RmgQOs8sKO_PcKOP6G26L5wQ5vdcXXOiMCxFPJxzPzUCcl474iiHKbEo5H8LVtZf6e140VOSGJ37NTpxCcPHLDvH9iFaT6mR0BnKzFReaX0FXBj7Lx2rFLVCZcIC0bdaFEGI1uKOJBMNT9RDtEzeJzUHzFYN0b34uv-ZR4w&hsutk=683eeb5b499fdfdf469646f0014603b4&utm_referrer=http%3A%2F%2Fwww.davidjosephhunt.com%2Fvariables%3Fhs_preview%3D159bC1Cj-2863569740&canon=http%3A%2F%2Fwww.davidjosephhunt.com%2Fvariables" style="" cta_dest_link="http://www.hubspot.com/free-trial" title="Start a HubSpot trial"> Start a HubSpot trial </a>

</span>

<script charset="utf-8" src="//js.hscta.net/cta/current.js"></script>

<script type="text/javascript">         hbspt.cta.load(158015, 'ccd39b7c-ae18-4c4e-98ee-547069bfbc5b');    

</script>

</span>  <!-- end HubSpot Call-to-Action Code -->

</span>

Parameter nameTypeDescriptionDefault value
embed_code  string The embed code for the CTA. \n differentiates line breaks. None 
full_html  string The embed code for the CTA (Same as embed_code). \n differentiates line breaks. None 
image_src  string Image src url that defines the preview image in the content editor. None
image_editor  string Markup for the image editor preview None
guid  string The unique ID number of the CTA. This ID number is available in the URL of the Details screen of a particular CTA. This parameter is used to choose which CTA to display by default. None
image_html  string CTA image HTML without the CTA script.* None 
image_email  string Email-friendly version of the CTA code.* None

*While these parameters are included here for the sake of being comprehensive, the code generated by HubSpot to populate them is very specific. If you need a default CTA selected, rather than trying to develop the CTA parameters from scratch, it is recommended that set up the CTA on a template layout, and then clone to file. You can then copy the HubL CTA module of the CTA with all parameters set correctly for you.

There is also a CTA function that generates a CTA from the ID.

Custom HTML

A custom HTML module allows users to enter raw HTML into the content editor. If you need to add extensive default HTML to the module, you may want to use block syntax


{% raw_html "raw_html" %}
{% raw_html "my_custom_html_module" label="Enter HTML here" value='<div>My HTML Block</div>'' %}


Block Syntax Example:

{% widget_block raw_html "my_custom_html_module" overrideable=True, label='My custom HTML module'  %}
        {% widget_attribute "value" %}
            <div>Default HTML block</div>
        {% end_widget_attribute %}
{% end_widget_block %}

     
    



<span id="hs_cos_wrapper_my_custom_html_module" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_raw_html" style="" data-hs-cos-general-type="widget" data-hs-cos-type="raw_html">
    <div>My HTML block</div>
</span>
   
    
Parameters nameTypeDescriptionDefault value
value string Sets the default content HTML of the module.  None

Custom modules

Custom Modules allow HubSpot designers to create a custom group of editable content objects to be used across templates and pages on HubSpot’s COS, while still allowing marketers to control the specific content appearing within those modules on a page-by-page basis. You can learn more about custom modules and their simplified HubL syntax, here

Custom modules must be built in the Custom Module editor, but they can be included into coded templates and HubL modules. Custom modules require two parameters in order to specify which module to load. See the syntax below:

{% custom_widget "custom_widget" custom_widget_id=2806383512, widget_name='Custom Module Name' %}


{% custom_widget "employee_quote" custom_widget_id=2806383512, widget_name='Employee Quote', label='Employee image and quote section' %}

<span id="hs_cos_wrapper_widget_2806383512" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_custom_widget" style="" data-hs-cos-general-type="widget" data-hs-cos-type="custom_widget">

<style>

@import "//cdn2.hubspotqa.com/qa/hub/126/file-613025667-css/custom_widget_example.css"

</style>

<div>

<img class="persons-photo" src="//cdn2.hubspotqa.com/qa/hub/124/file-1360297556-jpeg/dharmesh.jpeg" alt="dharmesh.jpeg">

<div>

<img class="company-logo with-background" src="//cdn2.hubspotqa.com/qa/hub/124/file-221882251-png/HubSpot_Logo_2x.png" width="60px" height="inherit" alt="HubSpot_Logo_2x.png">

</div>

</div>

<div>

<p class="quote">

<span class="quotation-mark"><b>" </b></span>
The Content Optimization System matches content with context to create a highly personalized, relevant and meaningful customer experience.

<span class="quotation-mark"><b>" </b></span>

</p>

</div>

<div class="name-and-company">

<span><b>Dharmesh Shah,</b></span>

<span>HubSpot</span>

</div>

</span>

Parameters nameTypeDescriptionDefault value
custom_widget_id number Specifies the ID of the custom module that you woud like to render. You can locate this number in the URL of the Design Manager editor screen for particular custom module.  None
widget_name string  Specifies the internal Design Manager name of the custom module that you would like to render. This name must match the name of the module in Design Manager.  None

Email backup unsubscribe

The backup unsubscibe module renders for email recipients, if HubSpot is unable to determine their email address, when that recipient tries to unsubscribe. This module renders a form for the contact to enter his or her email address to unsubsubscribe from email communications. It should be used on an Unsubscribe Backup system template.

{% email_simple_subscription "email_simple_subscription" %}


{% email_simple_subscription "email_simple_subscription" header='Email Unsubscribe', input_help_text='Your email address:', input_placeholder='email@example.com', button_text='Unsubscribe', label='Backup Unsubscribe' %}

<span id="hs_cos_wrapper_email_simple_subscription" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_simple_subscription" style="" data-hs-cos-general-type="widget" data-hs-cos-type="email_simple_subscription">

<div class="page-header">

<h1>Email Unsubscribe </h1>

</div>

<form id="email-prefs-form" method="post" style="position: relative">

<div id="content">

<h3 style="font-weight: normal">Your email address:</h3>

<div style="padding-bottom: 10px">

<input class="email-edit hs-input" type="email" style="padding: 6px; font-size: 15px; width: 507px; margin-left: 0px" placeholder="email@example.com" name="email" value="">
</div>

<input type="submit" class="hs-button primary" id="submitbutton" value="Unsubscribe">

</div>

</form>

</span>

Parameters nameTypeDescriptionDefault value
header  string  Renders text in an h1 tag above the unsubscribe form.  "Email Unsubscribe"
input_help_text  string  Renders help text in an h3 tag above your email unsubscribe form field.  "Your email address:" 
input_placeholder  string  Adds placeholder text within the email address form field.  "email@example.com"
button_text  string  Changes the text of the unsubscribe form submit button.  "Unsubscribe"

Email subscriptions

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

{% email_subscriptions "email_subscriptions" %}


{% email_subscriptions "email_subscriptions" resubscribe_button_text='Yes, resubscribe me!', unsubscribe_single_text='Uncheck the types of emails you do not want to receive:', subheader_text='

\n If this is not your email address, please ignore this page since the email associated with this page was most likely forwarded to you.\n

', unsubscribe_all_unsubbed_text='You are presently unsubscribed from all of our emails. Would you like to receive our emails again?', button_text='Update email preferences', label='Subscription Preferences', header='Communication Preferences', unsubscribe_all_option='Unsubscribe me from all mailing lists.', unsubscribe_all_text='Or check here to never receive any emails:' %}

<span id="hs_cos_wrapper_email_subscriptions" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_subscriptions" style="" data-hs-cos-general-type="widget" data-hs-cos-type="email_subscriptions">

<form id="email-prefs-form" method="post">

<div class="page-header">

<h1>Communication Preferences</h1>

<h2>example@email.com</h2>

<br>

<p>If this is not your email address, please ignore this page since the email associated with this page was most likely forwarded to you.</p>

</div> 

<div id="content" class="email-prefs">

<p class="header">Uncheck the types of emails you do not want to receive:</p>

<input type="hidden" name="email" value="example@email.com">

<input type="hidden" name="unsub_url" value="">

<input type="hidden" name="unsubed_all" value="false">

<input type="hidden" name="subscription_ids" value="">

<div class="item">

<div class="item-inner">

<div class="checkbox-row">

<span class="fakelabel">

<input id="id_0" type="checkbox" name="id_0">

<span>Example Subscription #1</span>

</span>

</div>

<p>Your email type description</p>

</div>

</div>

<div class="item">

<div class="item-inner">

<div class="checkbox-row">

<span class="fakelabel">

<input id="id_0" type="checkbox" name="id_0">

<span>Example Subscription #2</span>

</span>

</div>

<p>Your email type description</p>

</div>

</div>

<div class="subscribe-options" style="margin-right: 0">

<p class="header">Or check here to never receive any emails:</p>

<p>

<label for="globalunsub">

<input name="globalunsub" id="globalunsub" type="checkbox">

<span>

Unsubscribe me from all mailing lists.

</span>

</label>

</p>

</div>

<input type="submit" class="hs-button primary" id="submitbutton" value="Update email preferences">

<div class="clearer"></div>

</div>

</form>

</span>

Parameters nameTypeDescriptionDefault value
resubscribe_button_text string Sets the text of the submit button for when contacts are resubscribing  "Yes, resubscribe me!"
subheader_text string Populates text below the heading above the unsubscribe preferences.  "<p>\n    If this is not your email address, please ignore this page since the email associated with this page was most likely forwarded to you.\n</p>"
unsubscribe_all_unsubbed_text string Populates text within a <p> that renders, if a contact is currently unsubscribed from all emails. "You are presently unsubscribed from all of our emails. Would you like to receive our emails again?" 
unsubscribe_single_text string Renders text in a <p class="header"> above the subscription options  "Uncheck the types of emails you do not want to receive:"
header string  Renders text in an h1 tag above the subscription preferences form.  "Communication Preferences" 
unsubscribe_all_option string   Sets the text next to the unsubscribe from all emails checkbox input "Unsubscribe me from all mailing lists."
unsubscribe_all_text string   Renders text in a <p class="header"> above the unsubscribe from all emails checkbox input "Or check here to never receive any emails:"
 button_text string   Sets the text of the submit button that updates subscription preferences "Update email preferences" 

Email subscriptions confirmation

The email subscriptions update confirmation is a module that can be added to the thank you template for when a recipient updates his or her subscription preferences or unsubscribes. It should be used on a Subscription Update system template.

{% email_subscriptions_confirmation "email_subscriptions_confirmation" %}


{% email_subscriptions_confirmation "email_subscriptions_confirmation" label='Subscriptions Update Confirmation', unsubscribe_all_success='You have successfully unsubscribed from all email communications.', subscription_update_success='You have successfully updated your email preferences.', subheader_text='

\n If this is not your email address, please ignore this page since the email associated with this page was most likely forwarded to you.\n

' %}

<span id="hs_cos_wrapper_email_subscriptions_confirmation" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_subscriptions_confirmation" style="" data-hs-cos-general-type="widget" data-hs-cos-type="email_subscriptions_confirmation">

<div class="page-header">

<h2>example@email.com</h2>

<br>

<p>If this is not your email address, please ignore this page since the email associated with this page was most likely forwarded to you.</p>

</div>

<div id="content" class="success">

You have successfully updated your email preferences.

</div>





</span>

Parameters nameTypeDescriptionDefault value
unsubscribe_all_success  string Sets the text that will display when someone unsubscribes from all email communications.  "You have successfully unsubscribed from all email communications."
subscription_update_success  string  Sets the text when a recipient updates his or her subscription preferences.  "You have successfully updated your email preferences."
 subheader_text  string Populates text above the confirmation message. "<p>\n    If this is not your email address, please ignore this page since the email associated with this page was most likely forwarded to you.\n</p>" 

Flexible column

Flexible columns are vertical columns in a template that allow the end user to insert and remove a variety of modules of their choosing into the template, while editing in the content editor. When coding a flexible column with HubL, you can choose to wrap other HubL modules to make them appear in the flexible column by default. The sample code below shows the basic syntax and an sample flex column with a rich-text and form module contained as default content 


{% widget_container "my_flexible_column" %}
    {% rich_text "my_rich_text" %}
    {% rich_text "second_rich_text" %}
{% end_widget_container %}

     
    
<span id="hs_cos_wrapper_my_flexible_column" class="hs_cos_wrapper hs_cos_wrapper_widget_container hs_cos_wrapper_type_widget_container" style="" data-hs-cos-general-type="widget_container" data-hs-cos-type="widget_container">
    <div id="hs_cos_wrapper_widget_2822416670" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_rich_text" style="" data-hs-cos-general-type="widget" data-hs-cos-type="rich_text"></div>
    <div id="hs_cos_wrapper_widget_2822416675" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_rich_text" style="" data-hs-cos-general-type="widget" data-hs-cos-type="rich_text"></div>
</span>
   
    

Follow me

Follow me modules render icons that link to your various social media profiles. The icons that display are based upon your Social Settings.

{% follow_me "follow_me" %}


{% follow_me "follow_us" title='Follow Us', module_title_tag="h2" %}

<span id="hs_cos_wrapper_module_14162805806361260" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_follow_me" style="" data-hs-cos-general-type="widget" data-hs-cos-type="follow_me">

<h2>Follow Us</h2>

<div style="">

<a target="_blank" class="fm_button fm_googleplus" href="https://plus.google.com/107526491795365072792"><span title="Follow us on Google+"></span></a>

<a target="_blank" class="fm_button fm_facebook" href="http://www.facebook.com/pages/Undersea/237291876465083"><span title="Follow us on Facebook"></span></a>

<a target="_blank" class="fm_button fm_twitter" href="https://twitter.com/underseaband"><span title="Follow us on Twitter"></span>

</div>

</span>

Parameter nameTypeDescriptionDefault value
title string Prints an h3 heading tag above the follow me module  None
module_title_tag string Specifies a heading tag h1-h6 to use for the module title.  h3

Form

Allows users to select a HubSpot form to add to their page.


{% form "form" %}
{% form "my_form" form_to_use='08bd9f0d-3be9-41c2-93b6-231a3a71b143', title='Free Trial' %}


Block Syntax Example:
{% widget_block form "my_form" form_follow_ups_follow_up_type='', response_redirect_id=306590405, form_to_use='08bd9f0d-3be9-41c2-93b6-231a3a71b143', title='Free Trial', notifications_are_overridden=True, sfdc_campaign='', response_message='Thanks for submitting the form.', response_response_type='redirect', response_redirect_url='', overrideable=True, gotowebinar_webinar_key='', response_redirect_name='Homepage (http://www.hubspot.com/)', label='Form', response={message='Thank you for submitting the form.', redirect_url=''}  %}
        {% widget_attribute "notifications_override_email_addresses" is_json=True %}["dhunt@hubspot.com", "support@hubspot.com"]{% end_widget_attribute %}
{% end_widget_block %}


     
    
<div id="hs_cos_wrapper_my_form" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_form" style="" data-hs-cos-general-type="widget" data-hs-cos-type="form"><h3 id="hs_cos_wrapper_module_13885064832664947_title" class="hs_cos_wrapper form-title" data-hs-cos-general-type="widget_field" data-hs-cos-type="text">Free Trial</h3>

<div id="hs_form_target_module_13885064832664947"><form accept-charset="UTF-8" enctype="multipart/form-data" id="hsForm_08bd9f0d-3be9-41c2-93b6-231a3a71b143_6756" class="hs-form stacked hs-custom-form" action="https://forms.hubspot.com/uploads/form/v2/158015/08bd9f0d-3be9-41c2-93b6-231a3a71b143" method="POST" novalidate="novalidate"><div class="hs_lastname field hs-form-field"><label placeholder="Enter your Last Name" for="lastname-08bd9f0d-3be9-41c2-93b6-231a3a71b143_6756">Last Name</label><div class="hs-field-desc" style="display: none;"></div><div class="input"><input class="hs-input" type="text" id="lastname-08bd9f0d-3be9-41c2-93b6-231a3a71b143_6756" name="lastname" value="" placeholder=""></div></div><div class="hs_firstname field hs-form-field"><label placeholder="Enter your First Name" for="firstname-08bd9f0d-3be9-41c2-93b6-231a3a71b143_6756">First Name</label><div class="hs-field-desc" style="display: none;"></div><div class="input"><input class="hs-input" type="text" id="firstname-08bd9f0d-3be9-41c2-93b6-231a3a71b143_6756" name="firstname" value="" placeholder=""></div></div><div class="hs_email field hs-form-field"><label placeholder="Enter your Email" for="email-08bd9f0d-3be9-41c2-93b6-231a3a71b143_6756">Email<span class="hs-form-required"> * </span></label><div class="hs-field-desc" style="display: none;"></div><div class="input"><input class="hs-input" type="email" required="required" id="email-08bd9f0d-3be9-41c2-93b6-231a3a71b143_6756" name="email" value="" placeholder=""></div></div><div class="hs_submit"><div class="hs-field-desc" style="display: none;"></div><div class="actions"><input class="hs-button primary large" type="submit" value="Submit"></div></div></form></div>
<script charset="utf-8" src="//js.hsforms.net/forms/current.js"></script>
<script>
    hbspt.forms.create({
        portalId: '158015',
        formId: '08bd9f0d-3be9-41c2-93b6-231a3a71b143',
        formInstanceId: '6756',
        pageId: 1,
        
        
        
        
        
        redirectUrl: "http:\/\/www.davidjosephhunt.com\/404",
        
        
        deactivateSmartForm: true,
        
        css: '',
        target: '#hs_form_target_module_13885064832664947',
        
        
        
        
        
        contentType: "landing-page",
        
        formData: {
        cssClass: 'hs-form stacked hs-custom-form'
        }
    });
</script></div>


    
Parameter nameTypeDescriptionDefault value
form_follow_ups_follow_up_type enumeration Specifies follow up actions such as enrolling a contact into a workflow or sending a simple follow up email. Possible values include: no_action, simple, and automation.   None
response_response_type enumeration Determines whether to redirect to another page or to display an inline thank you message on submission. The value of this parameter should either be 'redirect' or 'inline'.  inline
response_redirect_id number If redirecting to HubSpot hosted page, this parameter specifies the page ID of that page. The page ID is available in the page editor URL of each page.  None
form_to_use  string Specifies which form to load by default, based on the Form ID. This ID is available in the form editor URL of a each form. None
title string Populates an h3 header tag above the form.  None
notifications_are_overridden boolean If True, the form will send form notifications to specified email addresses selected in the notifications_override_email_addresses 
parameter, instead of the form defaults
False 
sfdc_campaign string Specifies the Salesforce campaign to enroll contacts who submit the form into. This parameter's value should be the SFDC campiagn ID and is only available for portals that are integrated with Salesforce.    None
response_message  string Sets an inline thank you message. This parameter supports HTML.  None
response_redirect_url string If redirecting to an external page, this parameter specifies the URL to redirect to.  None
gotowebinar_webinar_key string Specifies the GoToWebinar webinar to enroll contacts who submit the form into. Only available for portals using the GoToWebinar integration.  None
response_redirect_name string The internal name of the destination page and its URL. None 
response  string Includes inline message or redirect url delimited by "{ }". Alternative to other parameters. None
notifications_override_email_addresses  JSON Block syntax supports a JSON list of email recipients that will be notified upon form submission. These email addresses will override  the email notification settings set in the form. None 
 simple_email_for_live_id number Specifies the ID of the simple follow-up email for the live page  None
 simple_email_for_buffer_id number Specifies the ID of the simple follow-up email for the auto-save version of a page  None
 follow_up_type_simple boolean If true, enables a simple follow-up email. Alternative to form_follow_ups_follow_up_type.  None
 follow_up_type_automation boolean If true, enrolls submissions in a workflow. Alternative to form_follow_ups_follow_up_type.  None
 simple_email_campaign_id number Specifies the ID of the simple follow-up email. Alternative to simple_email_for_live_id.  None
 form_follow_ups_workflow_id number Specifies the ID of the workflow in which to enroll submissions None
 notifications_override_guid_buffer string ID of override settings in auto-save version of page  None
 notifications_override_guid string ID of override settings in live version of page  None

Footer

Renders copyright information with the year and company name specifed in Content Settings (Email > Footer Information).

{% page_footer "page_footer" %}

<span id="hs_cos_wrapper_page_footer" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_page_footer" style="" data-hs-cos-general-type="widget" data-hs-cos-type="page_footer">

<footer>

<span class="hs-footer-company-copyright">© 2015 HubSpot</span>

</footer>

</span>

Global module

Add a predefined global module to coded template or HubL module. Global modules are created using the drag and drop template builder UI. Please note that using a global module tag is different than including an html file or global group, in a template. You can learn about including HTML files and global groups here

The global module is associated with the HubL tag based on its unique name. For example, in the sample code below, a global module called "Facebook Fan Box" in the app, has a unique name "facebook_fan_box".

{% global_widget "global_widget" %}


{% global_widget "facebook_fan_box" overrideable=False, label='Facebook Fan Box' %}
<span id="hs_cos_wrapper_facebook_fan_box" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_raw_html" style="" data-hs-cos-general-type="widget" data-hs-cos-type="raw_html"><div id="fb-root"></div>
&lt;script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));&lt;/script>

<div class="fb-like-box fb_iframe_widget" data-href="https://www.facebook.com/underseaband" data-width="100%" data-height="220" data-colorscheme="light" data-show-faces="true" data-header="false" data-stream="false" data-show-border="false" fb-xfbml-state="rendered" fb-iframe-plugin-query="app_id=&amp;color_scheme=light&amp;container_width=1080&amp;header=false&amp;height=220&amp;href=https%3A%2F%2Fwww.facebook.com%2Funderseaband&amp;locale=en_US&amp;sdk=joey&amp;show_border=false&amp;show_faces=true&amp;stream=false">
<span style="vertical-align: top; width: 0px; height: 0px; overflow: hidden;">
&ltiframe name="f3d8daf634" width="1000px" height="220px" frameborder="0" allowtransparency="true" allowfullscreen="true" scrolling="no" title="fb:like_box Facebook Social Plugin" src="https://www.facebook.com/v2.0/plugins/like_box.php?app_id=&amp;channel=https%3A%2F%2Fs-static.ak.facebook.com%2Fconnect%2Fxd_arbiter%2FKTWTb9MY5lw.js%3Fversion%3D41%23cb%3Df3b1afb71c%26domain%3Dpreview.hs-sites.com%26origin%3Dhttps%253A%252F%252Fpreview.hs-sites.com%252Ffe96ef9a8%26relation%3Dparent.parent&amp;color_scheme=light&amp;container_width=1080&amp;header=false&amp;height=220&amp;href=https%3A%2F%2Fwww.facebook.com%2Funderseaband&amp;locale=en_US&amp;sdk=joey&amp;show_border=false&amp;show_faces=true&amp;stream=false" style="border: none; visibility: visible; width: 0px; height: 0px;">&lt;/iframe>
</span>
</div>
</span>

Google search

This module creates a search field that redirects to a Google page of search results for your site. If you want to redirect to a search results page hosted on your site, you would need to set up a Custom Search Engine with Google or use a third-party search provider like Swiftype.

{% google_search "google_search" %}


{% google_search "my_search_bar" label='Google Search', prefill_input_with_pathname=True, search_field_label='Search this site on Google', search_button_text='Search Google' %}

<span id="hs_cos_wrapper_my_search_bar" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_google_search" style="" data-hs-cos-general-type="widget" data-hs-cos-type="google_search">

<div id="hs-search-module" class="hs-search-module 05942df3-baf2-4820-bd80-23cd2edfeb0d">

<form class="hs-form">

<div class="field">
<label>Search this site on Google</label>
<div class="input">
<input type="text" class="hs-input" value="">
<a class="hs-button primary">Search Google</a>
</div>
</div>

</form>
</div>

&lt;script>
jQuery(function(){
var $ = jQuery;
var url = 'http://google.com/search?q=site:' + location.protocol + '//' + location.hostname + ' ';
var $searchModule = $('.hs-search-module.05942df3-baf2-4820-bd80-23cd2edfeb0d');
var $input = $searchModule.find('input');
var $button = $searchModule.find('.hs-button.primary');
if (true) {
$input.val(decodeURIComponent(location.pathname.split('/').join(' ').split('.').join(' ').split('-').join(' ').split('_').join('')));
}
$button.click(function(){
location.href = url + $input.val();
});
$input.keypress(function(e){
if (e.keyCode !== 13) return;
e.preventDefault();
$button.click();
});
});

&lt;/script>
</span>

Parameter nameTypeDescriptionDefault value
prefill_input_with_pathname boolean Uses the end part of the URL to fill the search query field (common on error pages). This is common for 404 pages, where the field is pre-populated with the URL path that did not exist. True
search_field_label string Populates the label text in the <label> above the search input. "Search this site on Google"
search_button_text string Populates the text of the search submit button <a>. "Search Google"

Header

Generates a header module that will render text as an h1-h6 tag.

{% header "header"  %}


{% header "my_header" header_tag='h1', overrideable=True, value='A clear and bold header', label='Header' %}

<span id="hs_cos_wrapper_my_header" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_header" style="" data-hs-cos-general-type="widget" data-hs-cos-type="header">

<h1>A clear and bold header</h1>

</span>

Parameter nameTypeDescriptionDefault value
value string  Renders default text within the heading module. "A clear bold header"
header_tag  string Select which heading tag to render. Possible values include: h1, h2, h3, h4, h5, h6. h1 

Image

Creates a image module that allows users to select an image from the content editor. If you want the image to be linked to a destination URL, you should use linked_image below.

{% image "image" %}


{% image "executive_image" label='Executive photo', alt='Photo of Brian Halligan', src='//cdn2.hubspot.net/hub/53/file-733888619-jpg/assets/hubspot.com/about/management/brian-home.jpg', width='300' %}

<span id="hs_cos_wrapper_executive_image" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_image" style="" data-hs-cos-general-type="widget" data-hs-cos-type="image">

<img src="//cdn2.hubspot.net/hub/53/file-733888619-jpg/assets/hubspot.com/about/management/brian-home.jpg?width=300" class="hs-image-widget " width="300" alt="Photo of Brian Halligan" title="Photo of Brian Halligan">

</span>

Parameter nameTypeDescriptionDefault value
alt string Sets the default alt text for the image.   None
src string Populates the src attribute of the img tag.  None
width number Sets the width attribute of the img tag.  The width of the image
height number Sets a min-height in a style attribute of the img tag for email templates only.  The height of the image
hspace number Sets the hspace attribute of the img tag.  None
align string Sets the align attribute of the img tag. Possible values include: left, right, & center.  None
style string Adds inline CSS declarations to the img tag. For example style="border:1px solid blue; margin:10px"  None

Image slider

Generates a HubSpot image slider module. This slider module is based on FlexSlider. While you can create a slider module with standard module HubL syntax, If you want to predefine default slides using HubL, you must use block syntax. Both methods are shown below.


{% image_slider "image_slider" %}

<-- Block syntax -->
{% widget_block image_slider "crm_slider" sizing='static', only_thumbnails=False, transition='slide', caption_position='below', with_thumbnail_nav=False, lightbox=False, auto_advance=True, overrideable=True, description_text='', show_pagination=True, label='Image Slider', loop_slides=True, num_seconds=5  %}
                        {% widget_attribute "slides" is_json=True %}[{"caption": "CRM Contacts App", "show_caption": true, "link_url": "http://www.hubspot.com/crm", "alt_text": "Screenshot of CRM Contacts", "img_src": "http://go.hubspot.com/hubfs/Contacts-View-1.png?t=1430860504240", "open_in_new_tab": true}, {"caption": "HubSpot CRM Contact Profile", "show_caption": true, "link_url": "http://www.hubspot.com/", "alt_text": "HubSpot CRM Contact Profile", "img_src": "http://cdn2.hubspot.net/hubfs/53/Contact-Profile.png?t=1430860504240", "open_in_new_tab": true}]{% end_widget_attribute %}
{% end_widget_block %}

     
    
<span id="hs_cos_wrapper_crm_slider" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_image_slider" style="" data-hs-cos-general-type="widget" data-hs-cos-type="image_slider"><div id="hs_cos_flex_slider_crm_slider" class="hs_cos_flex-slider flex-slider-main slider-mode-slider">
  
<div class="hs_cos_flex-viewport" style="overflow: hidden; position: relative;"><ul class="hs_cos_flex-slides hs_cos_flex-slides-main " style="width: 800%; -webkit-transition-duration: 0s; transition-duration: 0s; -webkit-transform: translate3d(-1090px, 0px, 0px);"><li class="hs_cos_flex-slide-main clone" aria-hidden="true" style="width: 1090px; float: left; display: block;">
                        <a href="//www.hubspot.com/" target="_blank"><img src="//cdn2.hubspot.net/hubfs/53/Contact-Profile.png?t=1430860504240&t=1430335520686" alt="HubSpot CRM Contact Profile" draggable="false"></a>
                                                <div class="caption">
                            HubSpot CRM Contact Profile
                        </div>

                    </li>
    
                    <li class="hs_cos_flex-slide-main hs_cos_flex-active-slide" style="width: 1090px; float: left; display: block;">
                        <a href="//www.hubspot.com/crm" target="_blank"><img src="http://go.hubspot.com/hubfs/Contacts-View-1.png?t=1430860504240&t=1430335520686" alt="Screenshot of CRM Contacts" draggable="false"></a>
                                                <div class="caption">
                            CRM Contacts App
                        </div>

                    </li>


                    <li class="hs_cos_flex-slide-main" style="width: 1090px; float: left; display: block;">
                        <a href="//www.hubspot.com/" target="_blank"><img src="//cdn2.hubspot.net/hubfs/53/Contact-Profile.png?t=1430860504240&t=1430335520686" alt="HubSpot CRM Contact Profile" draggable="false"></a>
                                                <div class="caption">
                            HubSpot CRM Contact Profile
                        </div>

                    </li>

  <li class="hs_cos_flex-slide-main clone" aria-hidden="true" style="width: 1090px; float: left; display: block;">
                        <a href="//www.hubspot.com/crm" target="_blank"><img src="http://go.hubspot.com/hubfs/Contacts-View-1.png?t=1430860504240&t=1430335520686" alt="Screenshot of CRM Contacts" draggable="false"></a>
                                                <div class="caption">
                            CRM Contacts App
                        </div>

                    </li></ul></div><ol class="hs_cos_flex-control-nav hs_cos_flex-control-paging"><li><a class="hs_cos_flex-active">1</a></li><li><a class="">2</a></li></ol><ul class="hs_cos_flex-direction-nav"><li><a class="hs_cos_flex-prev" href="#">Previous</a></li><li><a class="hs_cos_flex-next" href="#">Next</a></li></ul></div>
<script>
window.hsSliderConfig = window.hsSliderConfig || {};
window.hsSliderConfig['crm_slider'] = {
    mode: 'slider',
    mainConfig: {"animationLoop":true,"direction":"horizontal","slideshowSpeed":5000.0,"controlNav":true,"smoothHeight":false,"namespace":"hs_cos_flex-","slideshow":true,"selector":".hs_cos_flex-slides > li","animation":"slide"}
};
</script>
</span>
   
    
Parameter nameTypeDescriptionDefault value
sizing enumeration Determines whether the slider changes sizes, based on the height of the slides. Possible values include: "static" or "resize" "static"
only_thumbnails boolean Display images as thumbnails instead of a slider  False
transition enumeration Sets the type of slide transition. Possible values include: "fade" or "slide" "slide"
caption_position enumeration Affects positioning of caption on or below the slide. Possible values include "below" or "superimpose" "below"
with_thumbnail_nav boolean Include thumbnails below slider for navigation (only_thumbnails must be False for this to be True)  False
lightbox boolean Displays thumbnail image in lightbox, when clicked  False
auto_advance boolean Automatically advance slides after the time set in num_seconds  False
show_pagination boolean Provide buttons below slider to randomly navigate among slides  True
label string  A label for this module, visible in the editor only "Image Slider"
loop_slides boolean  When True, continuously loop through slides  True
num_seconds number  Time in seconds to pause between slides  "5"
slides JSON  A JSON list of the default caption, the link url, the alt text, the image src, and whether to open in a new tab. See block syntax above.  None

Image src

An image src module creates a image selector in the content editor, but rather than printing a img tag, it renders the URL of the image. This tag is generally used with no_wrapper=True parameter, so that the image src can be added to inline CSS or other markup. An alternative to using this tag is to use the export_to_template_context parameter.
{% image_src "image_src" %}


{% image_src "executve_image_src" src='//cdn2.hubspot.net/hub/53/file-733888614-jpg/assets/hubspot.com/about/management/dharmesh-home.jpg', no_wrapper=True %}
//cdn2.hubspot.net/hub/53/file-733888614-jpg/assets/hubspot.com/about/management/dharmesh-home.jpg
Parameter nameTypeDescriptionDefault value
src  string  Specifies the default URL image src.  None

Linked image

Creates a user-selectable image that is wrapped in a link. This module has all of the parameters of an image module with two additional parameters that specify the link destination URL and whether the link opens in a new window.
{% linked_image "linked_image" %}


{% linked_image "executive_image" label='Executive photo', link="https://twitter.com/bhalligan", open_in_new_tab=True, alt='Photo of Brian Halligan', src='//cdn2.hubspot.net/hub/53/file-733888619-jpg/assets/hubspot.com/about/management/brian-home.jpg', width='300' %}

<span id="hs_cos_wrapper_executive_image" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_linked_image" style="" data-hs-cos-general-type="widget" data-hs-cos-type="linked_image">

<a href="https://twitter.com/bhalligan" target="_blank" id="hs-link-executive_image" style="border-width:0px;border:0px;">

<img src="//cdn2.hubspot.net/hub/53/file-733888619-jpg/assets/hubspot.com/about/management/brian-home.jpg?width=300" class="hs-image-widget " style="width:300px;border-width:0px;border:0px;" width="300" alt="Photo of Brian Halligan" title="Photo of Brian Halligan">

</a>

</span>

Parameter nameTypeDescriptionDefault value
alt string Sets the default alt text for the image.   None
src string Populates the src attribute of the img tag.  None
width number Sets the width attribute of the img tag.  The width of the image
height number Sets a min-height in a style attribute of the img tag for email templates only  The height of the image
hspace number Sets the hspace attribute of the img tag.  None
align string Sets the align attribute of the img tag. Possible values include: left, right, & center.  None
style string Adds inline CSS declarations to the img tag. For example style="border:1px solid blue; margin:10px"  None
open_in_new_tab boolean Selects whether or not to open the destination URL in another tab.  False
link string Sets the destination URL of the link that wraps the img tag.  None
target string Sets the target attribute of the link tag.  None

Logo

A logo module renders your company's logo image from Content Settings. 

{% logo "logo" %}


{% logo "my_logo" width='200' %}

<span id="hs_cos_wrapper_my_logo" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_logo" style="" data-hs-cos-general-type="widget" data-hs-cos-type="logo">

<a href="//www.hubspot.com" id="hs-link-my_logo">

<img src="//cdn2.hubspot.net/hub/53/file-1237149549-png/assets/hubspot.com/V2-Global/hubspot-logo-dark.png?t=1430948896766&amp;width=200" class="hs-image-widget " width="200" alt="HubSpot logo" title="HubSpo logot">

</a>

</span>

Parameter nameTypeDescriptionDefault value
suppress_company_name boolean Hides company name if an image logo isn't set. False
alt string Sets the default alt text for the image.  Value in Content Settings
src string Populates the src attribute of the img tag. Value in Content Settings
width number Sets the width attribute of the img tag. The width of the image
height number Sets a min-height in a style attribute of the img tag for <strong>email templates only</strong> The height of the image
hspace number Sets the hspace attribute of the img tag. None
align string Sets the align attribute of the img tag. Possible values include: left, right, & center.  None
style string Adds inline CSS declarations to the img tag. For example style="border:1px solid blue; margin:10px"  None
open_in_new_tab boolean Selects whether or not to open the destination URL in another tab.  False
link string Sets the destination URL of the link that wraps the img tag.  None

Menu

Generates an advanced menu based on a menu tree in Content Settings > Advanced Menus.

{% menu "menu" %}


{% menu "my_menu" site_map_name='Default', overrideable=False, root_type='site_root', flyouts='true', max_levels='2', flow='horizontal', label='Advanced Menu' %}

<span id="hs_cos_wrapper_my_menu" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_menu" style="" data-hs-cos-general-type="widget" data-hs-cos-type="menu">

<div id="hs_menu_wrapper_my_menu" class="hs-menu-wrapper active-branch flyouts hs-menu-flow-horizontal" data-sitemap-name="Default">  

<ul>  

<li class="hs-menu-item hs-menu-depth-1"><a href="http://www.underseaband.com/music">Music</a></li>  

<li class="hs-menu-item hs-menu-depth-1"><a href="http://www.underseaband.com/shows">Shows</a></li>  

<li class="hs-menu-item hs-menu-depth-1"><a href="http://www.underseaband.com/blog">Blog</a></li>  

<li class="hs-menu-item hs-menu-depth-1"><a href="http://www.underseaband.com/contact">Contact</a></li>  

</ul>

</div>

</span>

Parameter nameTypeDescriptionDefault value
site_map_name  string  Name of Menu Tree from Advanced Menus in Content Settings  'default'
root_type  enumeration  Specifies the type of advanced menus. Options include: "site_root", "top_parent", "parent", and "breadcrumb". These values correspond to static, dynamic by section, dynamic by page, and   'site_root'
flyouts  string  When true, a class is added to the menu tree to allow child menu items will appear when you hover over the parent. When false, child menu items will always appear.  'true'
max_levels  integer The number of menu tree children that can be expanded in the menu  2
flow  enumeration Orientation of menu items. This adds classes to menu items so that they can be styled accordingly. Possible values include "horizontal", "vertical" or "vertical_flyouts". Horizontal menus display items side-by-side, and vertical menus are top-to-bottom.   'horizontal'

Password prompt

Adds a password prompt to password-protected pages.

{% password_prompt "password_prompt" %}


{% password_prompt "my_password_prompt" submit_button_text='Submit', bad_password_message='
Sorry, please try again.
\n', label='Password Prompt' %}

<span id="hs_cos_wrapper_password_prompt" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_password_prompt" style="" data-hs-cos-general-type="widget" data-hs-cos-type="password_prompt">

<form method="post" action="/_hcms/protected/auth">    

<input name="content_id" type="hidden" value="1">    

<input name="redirect_url" type="hidden" value="https://preview.hs-sites.com/content-rendering/v1/public/_hcms/preview/template/multi">    

<input name="password" type="password" id="hs-pwd-widget-password" style="height: 22px; margin-top: -5px">    

<input type="submit" class="hs-button primary large" value="Submit">

</form>

<script type="text/javascript">     document.getElementById("hs-pwd-widget-password").focus(); </script>

</span>

Parameter nameTypeDescriptionDefault value
submit_button_text  string  Label for button below password entry field  'Submit'
bad_password_message  string  Message displayed if incorrect password entered  'Sorry, please try again. \n'

Post filter

Creates a linked listing of posts by topic, posts by month, or posts by author.

{% post_filter "post_filter" %}


{% post_filter "posts_by_topic" select_blog='default', expand_link_text='see all', overrideable=False, list_title='Posts by Topic', max_links=5, filter_type='topic', label='Posts by Topic' %}

<span id="hs_cos_wrapper_posts_by_topic" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_post_filter" style="" data-hs-cos-general-type="widget" data-hs-cos-type="post_filter">

<div class="block">

<h3>Posts by Topic</h3>

<div class="widget-module">

<ul>

<li><a href="http://www.underseaband.com/blog/topic/pedals">pedals (15)</a></li>


<li><a href="http://www.underseaband.com/blog/topic/music-recommendations">music recommendations (7</a>
</li>

<li>
<a href="http://www.underseaband.com/blog/topic/undersea">Undersea (6)</a>
</li>

<li>
<a href="http://www.underseaband.com/blog/topic/band">band (2)</a>
</li>

<li>
<a href="http://www.underseaband.com/blog/topic/diy-tips">DIY tips (2)</a>
</li>

<li>
<a href="http://www.underseaband.com/blog/topic/visual-artists">Visual artists (1)</a>
</li>

</ul>

</div>

</div>

</span>

Parameter nameTypeDescriptionDefault value
select_blog  string  Name of blog for source of posts  'default'
expand_link_text  string  Text link to display if more posts than max_links number available. Exclude parameter to omit link.  'see all'
list_title  string List title to display   'Posts by Topic'
max_links  number  Maximum number of filter values to display. Excude parameter to show all.  5
filter_type  string  List of values to use for filter links. Possible values include topic, month and author.  'topic'

Post Listing

Adds a listing of most popular or top posts.

{% post_listing "post_listing" %}


{% post_listing "top_posts" select_blog='default', label='Recent Posts', overrideable=False, list_title='Recent Posts', listing_type='recent', max_links=5 %}

<span id="hs_cos_wrapper_top_posts" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_post_listing" style="" data-hs-cos-general-type="widget" data-hs-cos-type="post_listing"><div class="block">  

<h3>Most popular posts</h3>  

<div class="widget-module">    

<ul>             

<li><a href="http://www.underseaband.com/blog/5-emerging-bands-that-you-need-to-hear">5 emerging bands that you need to hear</a></li>             

<li><a href="http://www.underseaband.com/blog/pedal-board-power-supplies">Pedal Board Power Supplies</a></li>             

<li><a href="http://www.underseaband.com/blog/pedal-board-wiring">Pedal Board Wiring</a></li>             

<li><a href="http://www.underseaband.com/blog/pedal-board-layouts">Pedal Board Layouts</a></li>             

<li><a href="http://www.underseaband.com/blog/your-teeth-shake">Your Teeth Shake</a></li>       

</ul>  

</div>

</div>

</span>

Parameter nameTypeDescriptionDefault value
select_blog  string  Name of blog for source of posts. Default will use the current blog when used in a blog template or the primary blog when used elsewhere.  'default'
list_title  string  List title to display  'Recent Posts'
listing_type  string  List the blog posts by most recent or most popular. Possible values include recent and popular.  'recent'
max_links  number  Maximum number of blog posts to list 5
include_featured_image  boolean  Display featured image along with post link False 

Rich text

Creates a WYSIWYG content editor. 


{% rich_text "rich_text" %}
{% rich_text "left_column" label="Enter HTML here" html='<div>My rich text default content</div>'' %}


Block Syntax Example:


{% widget_block rich_text "right_column" overrideable=True, label='Right Column'  %}
    {% widget_attribute "html" %}
            <h2>Something Powerful</h2>
            <h3>Tell The Reader More</h3>
            <p>The headline and subheader tells us what you're offering, 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>
            <p>Remember:</p>
            <ul>
                <li>Bullets are great</li>
                <li>For spelling out <a href="#">benefits</a> and</li>
                <li>Turning visitors into leads.</li>
            </ul>
    {% end_widget_attribute %}
{% end_widget_block %}

     
    

Something Powerful

Tell The Reader More

The headline and subheader tells us what you're offering, 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.

Remember:

  • Bullets are great
  • For spelling out benefits and
  • Turning visitors into leads.
Parameter nameTypeDescriptionDefault value
label string Label for module displayed in content editor 'Rich Text'
html string Default rich text content for module  <h2>Something Powerful</h2> <h3>Tell The Reader More</h3> <p>The headline and subheader tells us what you're offering, 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> <p>Remember:</p> <ul> <li>Bullets are great</li> <li>For spelling out <a href="#">benefits</a> and</li> <li>Turning visitors into leads.</li> </ul>

RSS listing

Loads a list of content from an internal or external RSS feed.

{% rss_listing "rss_listing" %}


{% rss_listing "my_rss_listing" rss_url='', publish_date_text='posted at', feed_source={rss_url='', is_external=False, content_group_id='24732847'}, click_through_text='Read more', show_date=True, include_featured_image=True, overrideable=False, publish_date_format='short', show_detail=True, show_author=True, number_of_items='5', is_external=False, title='', content_group_id='24732847', label='RSS Listing', limit_to_chars='200', attribution_text='by' %}

<span id="hs_cos_wrapper_my_rss_listing" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_rss_listing" style="" data-hs-cos-general-type="widget" data-hs-cos-type="rss_listing">

<h3></h3>

<div class="hs-rss-module feedreader_box">

<div class="hs-rss-item hs-with-featured-image">

<div class="hs-rss-item-text">

<a class="hs-rss-title" href="http://www.underseaband.com/blog/city-where-stars-are-not"><span>City Where Stars Are Not</span></a>

<div class="hs-rss-byline">by <span class="hs-rss-author">Matthew Vincenty</span>

<span class="hs-rss-posted-at">posted at</span> <span class="hs-rss-date">5/1/15 11:02 AM</span>

</div>

<div class="hs-rss-description">

<p>
We are pleased to announce the release of our next single "City Where Stars Are Not"! It will be available Tuesday May 5th and features lead vocals by bassist David Hunt. Thanks to Peter...<a href="http://www.underseaband.com/blog/city-where-stars-are-not">Read more</a>
</p>

</div>

</div>

<div class="hs-rss-item-image-wrapper">

<img class="hs-rss-featured-image" src="http://www.underseaband.com/hubfs/Blog_Images/citywherestarsarenot.png?t=1430835551915">
</div>

</div>

<div class="hs-rss-item hs-with-featured-image">

<div class="hs-rss-item-text">

<a class="hs-rss-title" href="http://www.underseaband.com/blog/loud-louder"><span>New Pedal! ChadderBox Effects Loud Louder</span></a>

<div class="hs-rss-byline">by <span class="hs-rss-author">Corey Wade</span> 

<span class="hs-rss-posted-at">posted at</span> <span class="hs-rss-date">4/27/15 10:30 AM</span>

</div>

<div class="hs-rss-description">

<p>

I have the good fortune to have recently met Chad from ChadderBox Effects. It turns out he works part-time on the same floor in the same building where I also work part-time. When I found out Chad...<a href="http://www.underseaband.com/blog/loud-louder">Read more</a>
</p>
</div>

</div>

<div class="hs-rss-item-image-wrapper">
<img class="hs-rss-featured-image" src="http://www.underseaband.com/hubfs/Blog_Images/10724991_612551458879970_1563949619_n.jpg?t=1430835551915">
</div>

</div>

<div class="hs-rss-item hs-with-featured-image">
<div class="hs-rss-item-text">
<a class="hs-rss-title" href="http://www.underseaband.com/blog/introducing-ariél-torres"><span>Introducing: Ariél Torres</span></a>
<div class="hs-rss-byline">by <span class="hs-rss-author">Corey Wade</span>

<span class="hs-rss-posted-at">posted at</span> <span class="hs-rss-date">4/24/15 10:30 AM</span>

</div>

<div class="hs-rss-description">
<p>
Everyone needs to check out Boston-based visual artist Ariél Torres’ work. He was very nice to let us use one of his pieces for “Your Teeth Shake”, and we couldn’t be more stoked about it. Check out...<a href="http://www.underseaband.com/blog/introducing-ariél-torres">Read more</a>
</p>
</div>

</div>

<div class="hs-rss-item-image-wrapper">
<img class="hs-rss-featured-image" src="http://www.underseaband.com/hubfs/tangledupinblue-449270-edited.jpg?t=1430835551915">
</div>

</div>

<div class="hs-rss-item hs-with-featured-image">
<div class="hs-rss-item-text">
<a class="hs-rss-title" href="http://www.underseaband.com/blog/new-pedal-fuzzrocious-rat-tail"><span>New Pedal! Fuzzrocious Rat Tail</span></a>
<div class="hs-rss-byline">by <span class="hs-rss-author">Matthew Vincenty</span>

<span class="hs-rss-posted-at">posted at</span> <span class="hs-rss-date">4/21/15 4:34 PM</span>

</div>

<div class="hs-rss-description">
<p>
I found myself in the position of needing to put together a new board to fill in on guitar with our friends Glacier.&nbsp;First I needed a distortion pedal that could pull of their heavier bits so I...<a href="http://www.underseaband.com/blog/new-pedal-fuzzrocious-rat-tail">Read more</a>
</p>
</div>

</div>

<div class="hs-rss-item-image-wrapper">
<img class="hs-rss-featured-image" src="http://www.underseaband.com/hubfs/Blog_Images/11023171_476701342477661_420938091_n.jpg?t=1430835551915">
</div>

</div>

<div class="hs-rss-item hs-with-featured-image">
<div class="hs-rss-item-text">
<a class="hs-rss-title" href="http://www.underseaband.com/blog/using-two-amps"><span>Using two amps</span></a>
<div class="hs-rss-byline">by <span class="hs-rss-author">Matthew Vincenty</span>

<span class="hs-rss-posted-at">posted at</span> <span class="hs-rss-date">4/17/15 3:58 PM</span>

</div>

<div class="hs-rss-description">
<p>
Sometimes just one amp isn't enough. Using multiple amps together can yield a sound that is more than the sum of it's parts. Both Corey and myself have split our singal to multiple amps. Currently...<a href="http://www.underseaband.com/blog/using-two-amps">Read more</a>
</p>
</div>

</div>

<div class="hs-rss-item-image-wrapper">
<img class="hs-rss-featured-image" src="http://www.underseaband.com/hubfs/Blog_Images/E719C0A7-6C2A-41FB-9A59-FA8236DED4A5.jpg?t=1430835551915">
</div>

</div>

</div>

</span>

Parameter nameTypeDescriptionDefault value
rss_url  string  The URL where the RSS feed is located  ''
publish_date_text  string  The text which indicates when a post was published  'posted at'
feed_source  string  Set source for RSS feed. When internal, general format is {rss_url='', is_external=False, content_group_id='2502431580'}. When external, general format is {rss_url='http://blog.hubspot.com/marketing/rss.xml', is_external=True}. None 
click_through_text  string  The text which will be displayed for the click through link at the end of a post summary  'Read more'
show_date  boolean  Display post date  True
include_featured_image  boolean  Display featured image with post link  False
publish_date_format  string  Format for the publish date. Possible values include 'short', 'medium' and 'long'. Also accepts custom formats including "MMMM d, yyyy 'at' h:mm a"  'short'
show_detail boolean   Display post summary up to number of characters set by limit_to_chars parameter   True
show_author boolean  Display author name  True
number_of_items number  Maximum number of posts to display 5
is_external boolean RSS feed is from an external blog False
content_group_id string ID for blog when feed source is internal blog  
limit_to_chars number  Maximum number of characters to display in summary  200
attribution_text  string  The text which attributes an author to a post  'by'

Section header

Generates an h1 header and <p> subheader.

{% section_header "section_header" %}


{% section_header "my_section_header" subheader='A more subdued subheader', header='A clear and bold header', label='Section Header' %}

<span id="hs_cos_wrapper_my_section_header" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_section_header" style="" data-hs-cos-general-type="widget" data-hs-cos-type="section_header">

<div class="page-header section-header">

<h1>A clear and bold header</h1>

<p class="secondary-header"><span id="hs_cos_wrapper_subheader" class="section-subheader">A more subdued subheader</span></p>

</div>

</span>

Parameter nameTypeDescriptionDefault value
header string Text to display in header 'A clear and bold header'
subheader string Text to display in subheader 'A more subdued subheader'
label string Module label used in content editor 'Section Header'

Simple menu

Simple menus allow you to create basic navigation menus that can be modified at the page level. Unlike regular menu modules, simple menus are not managed from the Advanced Menus screen in Content Settings, but rather from the template and page editors. You can use block syntax to set up a default menu tree.


{% simple_menu "simple_menu" %}
{% simple_menu "my_simple_menu" orientation='horizontal', label='Simple Menu' %}


Block Syntax Example:


{% widget_block simple_menu "block_simple_menu" overrideable=True, orientation='horizontal', label='Simple Menu'  %}
        {% widget_attribute "menu_tree" is_json=True %}[{"contentType": null, "subCategory": null, "pageLinkName": null, "pageLinkId": null, "isPublished": false, "categoryId": null, "linkParams": null, "linkLabel": "Home", "linkTarget": null, "linkUrl": "http://www.hubspot.com", "children": [], "isDeleted": false}, {"contentType": null, "subCategory": null, "pageLinkName": null, "pageLinkId": null, "isPublished": false, "categoryId": null, "linkParams": null, "linkLabel": "About", "linkTarget": null, "linkUrl": "http://www.hubspot.com/internet-marketing-company", "children": [{"contentType": null, "subCategory": null, "pageLinkName": null, "linkUrl": "http://www.hubspot.com/company/management", "isPublished": false, "children": [], "linkParams": null, "linkLabel": "Our Team", "linkTarget": null, "pageLinkId": null, "categoryId": null, "isDeleted": false}], "isDeleted": false}, {"contentType": null, "subCategory": null, "pageLinkName": null, "pageLinkId": null, "isPublished": false, "categoryId": null, "linkParams": null, "linkLabel": "Pricing", "linkTarget": null, "linkUrl": "http://www.hubspot.com/pricing", "children": [], "isDeleted": false}]{% end_widget_attribute %}
{% end_widget_block %}

     
    
<span id="hs_cos_wrapper_my_simple_menu" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_simple_menu" style="" data-hs-cos-general-type="widget" data-hs-cos-type="simple_menu">
<ul></ul>
</span>


<span id="hs_cos_wrapper_block_simple_menu" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_simple_menu" style="" data-hs-cos-general-type="widget" data-hs-cos-type="simple_menu">
    <div id="hs_menu_wrapper_module_143093417497114626" class="hs-menu-wrapper active-branch flyouts hs-menu-flow-horizontal" data-sitemap-name="">
    <ul>
    <li class="hs-menu-item hs-menu-depth-1"><a href="//www.hubspot.com" target="_self">Home</a></li>
  <li class="hs-menu-item hs-menu-depth-1 hs-item-has-children"><a href="//www.hubspot.com/internet-marketing-company" target="_self">About</a>
   <ul class="hs-menu-children-wrapper">
    <li class="hs-menu-item hs-menu-depth-2"><a href="//www.hubspot.com/company/management" target="_self">Our Team</a></li>
   </ul></li>
  <li class="hs-menu-item hs-menu-depth-1"><a href="//www.hubspot.com/pricing" target="_self">Pricing</a></li>
 </ul>
</div>
</span>
   
    
Parameter nameTypeDescriptionDefault value
orientation enumeration Defines classes of menu markup to allow to style the orientation of menu items on the page. Possible values include 'horizontal' and 'vertical'. 'horizontal'
menu_tree JSON Menu structure including page link names and target URLs []
is_json boolean Flag to indicate menu_tree is in JSON format True
label string Module label used in content editor 'Simple Menu'

Social sharing

Social sharing modules generate social media icons that can be used to share a particular page. This module can be used with block syntax to customize the icon images and more.


{% social_sharing "social_sharing" %}
{% social_sharing "my_social_sharing" use_page_url=True %}

Block Syntax Example:


{% widget_block social_sharing "my_social_sharing" label='Social Sharing', use_page_url=True, overrideable=True  %}
        {% widget_attribute "pinterest" is_json=True %}{"custom_link_format": "", "pinterest_media": "http://cdn1.hubspot.com/hub/158015/305390_10100548508246879_837195_59275782_6882128_n.jpg", "enabled": true, "network": "pinterest", "img_src": "https://static.hubspot.com/final/img/common/icons/social/pinterest-24x24.png"}{% end_widget_attribute %}
        {% widget_attribute "twitter" is_json=True %}{"custom_link_format": "", "enabled": true, "network": "twitter", "img_src": "https://static.hubspot.com/final/img/common/icons/social/twitter-24x24.png"}{% end_widget_attribute %}
        {% widget_attribute "google_plus" is_json=True %}{"custom_link_format": "", "enabled": true, "network": "google_plus", "img_src": "https://static.hubspot.com/final/img/common/icons/social/googleplus-24x24.png"}{% end_widget_attribute %}
        {% widget_attribute "linkedin" is_json=True %}{"custom_link_format": "", "enabled": true, "network": "linkedin", "img_src": "https://static.hubspot.com/final/img/common/icons/social/linkedin-24x24.png"}{% end_widget_attribute %}
        {% widget_attribute "facebook" is_json=True %}{"custom_link_format": "", "enabled": true, "network": "facebook", "img_src": "https://static.hubspot.com/final/img/common/icons/social/facebook-24x24.png"}{% end_widget_attribute %}
        {% widget_attribute "email" is_json=True %}{"custom_link_format": "", "enabled": true, "network": "email", "img_src": "https://static.hubspot.com/final/img/common/icons/social/email-24x24.png"}{% end_widget_attribute %}
{% end_widget_block %}

     
    
<span id="hs_cos_wrapper_social_sharing" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_social_sharing" style="" data-hs-cos-general-type="widget" data-hs-cos-type="social_sharing">
<a href="http://www.facebook.com/share.php?u=http%3A%2F%2Fexample.com%2Fmy-page%3Futm_medium%3Dsocial%26utm_source%3Dfacebook" target="_blank" style="width:24px;border-width:0px;border:0px;">
<img src="//static.hubspot.com/final/img/common/icons/social/facebook-24x24.png?width=24" class="hs-image-widget hs-image-social-sharing-24" style="max-height:24px;max-width:24px;border-width:0px;border:0px;" width="24" hspace="0" alt="Share on Facebook">
</a> 
<a href="http://www.linkedin.com/shareArticle?mini=true&url=http%3A%2F%2Fexample.com%2Fmy-page%3Futm_medium%3Dsocial%26utm_source%3Dlinkedin" target="_blank" style="width:24px;border-width:0px;border:0px;">
<img src="//static.hubspot.com/final/img/common/icons/social/linkedin-24x24.png?width=24" class="hs-image-widget hs-image-social-sharing-24" style="max-height:24px;max-width:24px;border-width:0px;border:0px;" width="24" hspace="0" alt="Share on LinkedIn">
</a> 
<a href="https://twitter.com/intent/tweet?original_referer=http%3A%2F%2Fexample.com%2Fmy-page%3Futm_medium%3Dsocial%26utm_source%3Dtwitter&url=http%3A%2F%2Fexample.com%2Fmy-page%3Futm_medium%3Dsocial%26utm_source%3Dtwitter&source=tweetbutton&text=" target="_blank" style="width:24px;border-width:0px;border:0px;">
<img src="//static.hubspot.com/final/img/common/icons/social/twitter-24x24.png?width=24" class="hs-image-widget hs-image-social-sharing-24" style="max-height:24px;max-width:24px;border-width:0px;border:0px;" width="24" hspace="0" alt="Share on Twitter">
</a> 
<a href="https://plus.google.com/share?url=http%3A%2F%2Fexample.com%2Fmy-page%3Futm_medium%3Dsocial%26utm_source%3Dgoogle_plus" target="_blank" style="width:24px;border-width:0px;border:0px;">
<img src="//static.hubspot.com/final/img/common/icons/social/googleplus-24x24.png?width=24" class="hs-image-widget hs-image-social-sharing-24" style="max-height:24px;max-width:24px;border-width:0px;border:0px;" width="24" hspace="0" alt="Share on Google+">
</a> <a href="http://pinterest.com/pin/create/button/?url=http%3A%2F%2Fexample.com%2Fmy-page%3Futm_medium%3Dsocial%26utm_source%3Dpinterest&media=http%3A%2F%2Fcdn1.hubspot.com%2Fhub%2F158015%2F305390_10100548508246879_837195_59275782_6882128_n.jpg" target="_blank" style="width:24px;border-width:0px;border:0px;">
<img src="//static.hubspot.com/final/img/common/icons/social/pinterest-24x24.png?width=24" class="hs-image-widget hs-image-social-sharing-24" style="max-height:24px;max-width:24px;border-width:0px;border:0px;" width="24" hspace="0" alt="Share on Pinterest"></a> 
<a href="mailto:?subject=Check out http%3A%2F%2Fexample.com%2Fmy-page%3Futm_medium%3Dsocial%26utm_source%3Demail &body=Check out http%3A%2F%2Fexample.com%2Fmy-page%3Futm_medium%3Dsocial%26utm_source%3Demail" target="_blank" style="width:24px;border-width:0px;border:0px;">
<img src="//static.hubspot.com/final/img/common/icons/social/email-24x24.png?width=24" class="hs-image-widget hs-image-social-sharing-24" style="max-height:24px;max-width:24px;border-width:0px;border:0px;" width="24" hspace="0" alt="Share on Email">
</a>
</span>
   
    
Parameter nameTypeDescriptionDefault value
use_page_url boolean If true, the module shares the URL of the page by default. True
pinterest JSON Parameters for Pinterest link format and icon image source   {"network": "Pinterest", "default": true, "secondary_fields": [{"default": "", "type": "image", "name": "pinterest_media"}], "enabled": false, "link_format": "http://pinterest.com/pin/create/button/?url={{contact.social_link_url}}&media={{contact.pinterest_media}}", "img_src": "https://static.hubspot.com/final/img/common/icons/social/pinterest-24x24.png"}
twitter JSON  Parameters for Twitter link format and icon image source   {"default": true, "link_format": "https://twitter.com/intent/tweet?original_referer={{contact.social_link_url}}&url={{contact.social_link_url}}&source=tweetbutton&text={{contact.social_page_title}}", "enabled": false, "network": "Twitter", "img_src": "https://static.hubspot.com/final/img/common/icons/social/twitter-24x24.png"}
google_plus  JSON Parameters for Google+ link format and icon image source   {"default": true, "link_format": "https://plus.google.com/share?url={{contact.social_link_url}}", "enabled": false, "network": "Google+", "img_src": "https://static.hubspot.com/final/img/common/icons/social/googleplus-24x24.png"}
linked_in  JSON Parameters for LinkedIn link format and icon image source   {"default": true, "link_format": "http://www.linkedin.com/shareArticle?mini=true&url={{contact.social_link_url}}", "enabled": false, "network": "LinkedIn", "img_src": "https://static.hubspot.com/final/img/common/icons/social/linkedin-24x24.png"}
facebook  JSON  Parameters for Facebook link format and icon image source  {"default": true, "link_format": "http://www.facebook.com/share.php?u={{contact.social_link_url}}", "enabled": false, "network": "Facebook", "img_src": "https://static.hubspot.com/final/img/common/icons/social/facebook-24x24.png"}
email  JSON  Parameters for email sharing link format and icon image source  {"default": true, "link_format": "mailto:?subject=Check out {{contact.social_link_url}} &body=Check out {{contact.social_link_url}}", "enabled": false, "network": "Email", "img_src": "https://static.hubspot.com/final/img/common/icons/social/email-24x24.png"}

Spacer

A spacer module generates an empty span tag. This tag can be styled to act as a spacer. In drag and drop layouts, the spacer module is wrapped in a container with a class of span1-span12 to determine how much space the module should take up in the twelve column responsive grid. 

{% space "space" %}


{% space "spacer" label='Horizontal Spacer' %}

<span id="hs_cos_wrapper_module_spacer" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_space" style="" data-hs-cos-general-type="widget" data-hs-cos-type="space"></span>

Text

Creates a single line of text. This module can be useful to be mixed into your markup, when used in conjunction with the no_wrapper=True parameter. For example, if you wanted your end users to be able to define a destination of a predefined anchor, you could populate the href with a text module with no_wrapper=True.

{% text "text" %}


{% text "simple_text_field" label="Enter text here", value="This is the default value for this text field" %}
<span id="hs_cos_wrapper_simple_text_field" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_text" style="" data-hs-cos-general-type="widget" data-hs-cos-type="text">This is the default value for this text field</span>
Parameter nameTypeDescriptionDefault value
value string Sets the default text of the single line text field. None