Modules BETA

Table of contents

Module reference

Critical known issues

  • Many v1 modules reference external CSS with techniques like require_css(get_public_template_url(). The get_public_template_url() function is no longer supported (see Restricted HubL section below). CSS should now be written into the module CSS in the code editor or linked via the Linked files section of the Inspector.

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.

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
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 selector Allows creation of a local simple menu.
  • type: 'simplemenu'
  • default: Array of objects containing menu data
Meetings selector Selects a meeting from the portal's meetings
  • type: 'meeting'
  • default: Meeting's link
Logo Allows selection of a logo
  • type: 'logo'
  • default: Site logo

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
  • script_embed

Modules with these tags or functions will fail to publish.

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.