Table of contents

Module reference

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
  • display: '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.
  • validation_regex: When this 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.
  • resizable: 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 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: default integer value, or optionally an array of values to be used when occurrence > 1
  • display: 'text' (default) or 'slider' for a sliding selector display
Date Selects a date. The value is stored as milliseconds since the epoch at midnight UTC on that date.
  • type: 'date'
Date and Time Selects a date and optional time. The value is stored as millseconds since the epoch in UTC.
  • type: 'datetime'
  • step: increment in minutes for the time selection dropdown to use (30 if null)
CTA selector Selects a CTA. Required for CTA module.
  • type: 'cta'
  • default: CTA guid
Blog selector 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 id, or optionally an array of blog ids to be used when occurrence > 1
Tag selector Selects a blog tag from the portal. Required for RSS Listing module.
  • type: 'tag'
  • default: tag id, or optionally an array of tag ids to be used when occurrence > 1
Form selector Selects a HubSpot form. Required for Form module.
  • type: 'form'
  • default: form id, or optionally an array of form ids to be used when occurrence > 1
Color selector Picks a color.
  • type: 'color'
  • default: hex color, or optionally an array of hex colors to be used when occurrence > 1
Page selector Selects a published website or landing page. Required for form module.
  • type: 'page'
Workflow selector Selects a HubSpot workflow. Required for form module.
  • type: 'workflow'
  • default: workflow id, or optionally an array of workflow ids to be used when occurrence > 1
Follow-up email selector Selects a follow-up email.
  • type: 'followupemail'
  • default: email id, or optionally an array of email ids to be used when occurrence > 1
Font field Selects a Google font.
  • type: 'font'
  • default:  { color: "#000", font: "helvetica", size: 12, size_unit: "px", styles: {font-weight: "bold", font-style: "italic", text-decoration: "underline"} }
Email address selector 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: none
File selector 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'
  • picker: 'file" (default; any file), 'image' or 'document' (any non-image file)
  • default: File URL
HubDB Table selector Selects a published HubDB table to associate with this module.
  • type: 'hubdbtable'
Simple Menu Allows creation of a local simple menu.
  • type: 'simplemenu'
  • default: Array of objects containing menu data
Menu selector Selects a menu from the portal's menu.
  • type: 'menu'
  • default: Menu ID
Meetings selector Selects a meeting from the portal's meetings
  • type: 'meeting'
  • default: Meeting's link
Logo Selector Allows selection of a logo
  • type: 'logo'
  • default: Site logo
Icon Selector Allows selection of an icon
  • type: 'icon'
  • Name: Icon Name
  • Unicode: unicode string
URL 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: 'external', 'content', 'file', 'email address', or 'blog'
  • content_id: `id`
  • href: 'href`
Link 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."
  • url: url field attributes
  • open_in_new_tab: 'true', 'false'
  • no_follow: 'true', 'false'

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.

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