Modules

Table of contents
Close

Module reference

To view these modules in more detail along with code samples of usage, please visit the HubL Supported Tags page.

General changes

  • Modules now have an immutable numerical ID. This allows module builders to change the name of a module without having to change references to the module in template code.
  • Modules are designed to be self-contained and include all CSS text, JS text, and file asset references.
  • v2 Modules are wrapped in divs, unlike v1 modules which are wrapped in spans.
  • widget has been renamed to module in HubL for consistency with the UI. Both terms will continue to work, but module will be used in all documentation.
  • CSS should now be written into the module CSS in the code editor or linked via the Linked files section of the Inspector.

Additions to existing field types

Field New Attributes
Choice
  • Display as: 'select' (default, pulldown style) or 'radio'
  • Choices: An array with items that are either [ value, label ] or, for categories, [ categoryLabel, listOfChoices ]. All values must be unique. Choice labels can contain HTML but should be sanitized of any JS. Both HTML labels and choice categories are only valid when display type is 'select'.
  • Placeholder: A string that will be displayed as the placeholder in the dropdown menu if display is set to select. If not set to anything, the placeholder defaults to "Search" which is the default for UISelect.
Text
  • Regex field validation: When the value of this field passes the defined regex, the field is considered valid. The regex must be in the simple form, not wrapped with /. The regex must match the entire string (not a subset) and is run case-sensitively.
Image
  • Hide size controls: A boolean that determines whether or not the image can be resized (or really whether or not to show sizing controls), defaults to true

New field types

 

Field Description Attributes
Number field A spinner style text field that only supports decimal or integer values.
  • Type: 'number'
  • Min: min value, no default
  • Max: max value, no default
  • Step: increment or decrement when clicking the spinner arrows. default 1
  • Default number: default integer value, or optionally an array of values to be used when occurrence > 1
  • Display as: 'text' (default) or 'slider' for a sliding selector display
Date field Selects a date. The value is stored as milliseconds since the epoch at midnight UTC on that date.
  • Type: 'date'
  • Default date: default date to be used
Date and Time field Selects a date and optional time. The value is stored as milliseconds since the epoch in UTC.
  • Type: 'datetime'
  • Default date and time: default date and time to be used
  • Time interval: increment in minutes for the time selection dropdown to use (default is 30)
CTA field Selects a CTA. Required for CTA module.
  • Type: 'cta'
  • Default CTA: CTA selector for choosing a default CTA
Blog field Selects a blog from the portal's list of blogs. Required for Blog Email Subscription, Post Listing, and RSS Listing modules.
  • Type: 'blog'
  • Default blog: Blog selector for choosing a default blog to use
  • Placeholder: A string that will be displayed as the placeholder in the dropdown menu if display is set to select. If not set to anything, the placeholder defaults to "Search" which is the default for UISelect.
Tag field Selects a blog tag from the portal. Required for RSS Listing module.
  • Type: 'tag'
  • Default Tag: Tag selector for choosing a default tag to use.
  • Select a value to return type: Select what type of value the tag selector returns. Choices are "Name" or "Id" of the tag.
Form field Selects a HubSpot form. Required for Form module.
  • Type: 'form'
  • Default Form: Form selector for choosing a default form to use. 
  • What will a visitor see after submitting your form?: Allows you either redirect the user to another page or show an inline thank you message upon submission of the form.
Color field Picks a color.
  • Type: 'color'
  • Default color: Color selector for choosing a default color (either via hex value input or using the color picker) and alpha (opacity) value.
Page field Selects a published website or landing page. Required for form module.
  • Type: 'page'
  • Default page: Page selector for choosing a default page. 
  • Placeholder: Placeholder value for when no page is selected (this will replace the default 'Select a page' text in the dropdown).
Workflow field Selects a HubSpot workflow. Required for form module.
  • Type: 'workflow'
  • Default workflow: Workflow selector for choosing a default workflow along with a button to create a new workflow. 
  • Placeholder: Placeholder value for when no workflow is selected (this will replace the default 'Select a workflow' text in the dropdown).
Followup email field Selects a follow-up email.
  • Type: 'followupemail'
  • Default followup email: Followup email selector for choosing a default followup email.
  • Placeholder: Placeholder value for when no followup email is selected (this will replace the default 'Select a follow-up email' text in the dropdown).
Font field Selects a Google font.
  • Type: 'font'
  • Font: Contains a dropdown selector for choosing a google font along with font size, color, style, and unit options.  
  • Default setting:  { color: "#000", font: "helvetica", size: 12, size_unit: "px", styles: {font-weight: "bold", font-style: "italic", text-decoration: "underline"} }
Email address field Autofills with email addresses from portal users, but also allows any other valid email address. The value is a list of strings.
  • Type: 'email'
  • Default email address: Contains a dropdown selector for choosing email addresses of users in your portal. You also have the ability to manually enter an email address. 
  • Placeholder: Placeholder value for when no email address is selected (this will replace the default 'Choose email address...' text in the dropdown).
File field Similar to the image selector, but allows selection of other file types from File Manager. Useful for picking a PDF or image to link to. The picker attribute allows selecting files of certain types.
  • Type: 'file'
  • File Type: 'file" (default; any file), 'image' or 'document' (any non-image file)
  • Default File: File picker that allows you to choose a default file for the module field.
HubDB table field Selects a published HubDB table to associate with this module.
  • Type: 'hubdbtable'
  • Default HubDB table: Contains a dropdown selector for choosing a default HubDB table.
  • Placeholder: Placeholder value for when no HubDB table is selected (this will replace the default 'Select a HubDB Table' text in the dropdown).
Simple menu field Allows creation of a local simple menu.
  • Type: 'simplemenu'
  • Default simple menu: Edit Menu button will allow you to create a simple menu using HubSpot's menu building interface.
Menu field Selects a menu from the portal's menu.
  • Type: 'menu'
  • Default menu: Contains a dropdown selector for choosing a default menu.
  • Placeholder: Placeholder value for when no menu is selected (this will replace the default 'Select a menu' text in the dropdown).
Meetings field Selects a meeting from the portal's meetings
  • Type: 'meeting'
  • Default meeting: Contains a dropdown selector for choosing a default meeting link.
  • Placeholder: Placeholder value for when no meeting is selected (this will replace the default 'Select a meeting' text in the dropdown).
Logo field Allows selection of a logo
  • Type: 'logo'
  • Override default logo: Toggle that lets you choose to override the logo for that particular page.
  • Default logo: Site logo taken from the global default logo in content settings.
  • Show company name when logo isn't set: Toggle to show the company name from content settings when the logo is not set.
Icon field Allows selection of an icon
  • Type: 'icon'
  • Default icon: Contains a dropdown selector for choosing an icon.
  • Note: Icons are based on FontAwesome Icon Library.
URL field Allows selection or input of a URL that points to an external page, HubSpot content, a HubSpot-hosted file, an email address, or a HubSpot blog.
  • Type: 'url'
  • Default URL
    • Link to: Contains a dropdown selector for choosing if the link will be an external link, content link (HubSpot page), File (HubSpot File Manager), Email Address, or Blog (Main blog listing)    
  • Supported URL Types: Choose the type of URLs that are supported for entry.
Link field Allows selection or input of a URL that points to an external page, HubSpot content, a HubSpot-hosted file, an email address, or a HubSpot blog. Also includes booleans for "Open link in new window" and "Tell search engines not to follow this link."
  • Type: 'link'
  • Default URL
    • Link to: Contains a dropdown selector for choosing if the link will be an external link, content link (HubSpot page), File (HubSpot File Manager), Email Address, or Blog (Main blog listing)    
  • Open link in new window: Toggle that adds target='_blank' to the link attribute allowing it to open in a new window.
  • Tell search engines not to follow this link: Toggle that adds rel='nofollow' to the link attribute.
  • Supported URL Types: Choose the type of URLs that are supported for entry.

 

Restricted HubL

To keep module rendering simple, the new module framework does not allow complex HubL such as nested modules and includes in the custom module source.

The following tags are not available:

  • custom_module
  • extends
  • import
  • include
  • module
  • raw_jinja
  • raw_html
  • widget_container

These functions are not available:

  • get_public_template_url
  • get_public_template_url_by_id
  • footer_js
  • head_css
  • head_js
  • include_attached_css
  • include_default_custom_css
  • include_css
  • include_javascript
  • include_targeted_definitions
  • js_integration_head
  • js_integration_body_start
  • js_integration_body_end
  • require_attached_css
  • require_default_custom_css

New modules created with these tags or functions will fail to publish.

There's relaxed HubL validation for modules created in the old design manager. Any of the following tags or functions will generate validation warnings and recommendations, but can still be published in a v1 module:

    • Import
    • Include
    • get_public_template_url
    • Punctuation in field
    • Boolean as a string
    • Same value in Choice fields
    • Duplicate field name

Modules are allowed to contain supported HubL tags which render static versions of modules. However, the overrideable attribute is always considered False, even if specified as True in a module, as sub-modules generated by tags will not be editable in the content editors. Likewise the export_to_template_context parameter is not available inside of custom modules.

Module Variables

Several updates and additions have been made to module variables.

Existing variables that are no longer supported:

  • custom_widget_name
  • parent_custom_widget_name

New variables:

  • portal_id
  • is_live
  • module (also available as widget for backwards compatibility)
  • name (formerly parent_custom_widget_name)
  • module_id
  • language
  • request
  • messages
  • js_assets
  • css_assets
  • other_assets