Documentation

Purpose

The Accordion Module is designed to help content creators on the HubSpot CMS organize and present information in a clean, structured, and interactive format. This module includes an optional featured image and a configurable accordion with dynamic content sections. The primary use cases include:

• Organizing large amounts of text into collapsible sections.

• Highlighting a featured image to enhance visual appeal.

• Creating a responsive and accessible layout that adapts to user input and device size.

This module is highly flexible and suitable for use on product pages, FAQs, service descriptions, or any page requiring a streamlined presentation of information.

How to Use It

1. Adding the Module to a Page

• Navigate to the Design Manager in HubSpot.

• Drag and drop the Accordion Module into your page template or custom section.

2. Configuring the Featured Image (Optional)

• In the module settings:

  • Upload an image or provide the URL for the Featured Image.

  • Configure the image dimensions:

    • Auto: Retains the image's original dimensions.

    • Auto with Custom Max: Limits the image size using custom max-width and max-height values.

  • Enable or disable lazy loading for the image (default is enabled for performance optimization).

3. Adding Accordion Items

• Navigate to the Accordion Items section in the module settings:

  • Add multiple items by clicking "Add Item."

  • For each item:

    • Provide a title in the Accordion Title field.

    • Add detailed content in the Accordion Content field. This can include text, images, or rich content.

4. Customizing the Accordion

• Accordion Main Title: Add a title to appear above the accordion container.

• Line Numbers: Enable line numbers in the settings to show numbered indices for each accordion item.

• Style the accordion using CSS classes: accordion-wrapper, featured-image, and full for layout and appearance adjustments.

5. Testing the Module

• Preview the page to ensure:

  • The featured image displays correctly.

  • The accordion items expand and collapse as expected.

  • Styling aligns with your design requirements.

6. Publishing

• Once satisfied with the configuration, publish the page, and the Accordion Module will be live on your site.

Purpose

This module provides a dual function to improve blog post usability and content sharing:

1. Anchor Links: Generates anchor links for quick navigation within a blog post.
2. Social Media Share Buttons: Allows users to share the current page on popular social media platforms.

Use cases:

• Pages with multiple sections requiring a table of contents for navigation.
• Encouraging users to share the page on platforms like Facebook, Twitter, or LinkedIn.

How to Use It

Adding the Module

1. The module should already be on the blog post page.

Configuring the Module

• Anchor List:

  1. Add a Heading (optional) for the anchor section via the Heading field.
  2. Populate the Anchors repeater field:
     • For each item, specify the anchor text (e.g., "Introduction," "FAQ").
     • Each anchor will generate a link to the corresponding section on the page.
     • For a visual presentation, refer to this video.

• Social Share Buttons:

  • By default, three social media icons (Facebook, Twitter, LinkedIn) are included. In a future update, the content editor will be able to add/remove social links themselves.

Purpose

This module is designed to dynamically display a list of blog posts with their essential details. It helps create an engaging and visually appealing layout for blog content.

Key features:

• Displays featured images, topics, titles, and links for blog posts.
• Fully responsive and designed for customization.
• Automatically pulls data from the HubSpot content system.

Use cases:

• Blog listing pages.
• Highlighting featured or recent blog posts on a homepage or landing page.

How to Use It

Adding the Module

1. Drag and drop the module onto your HubSpot page or template.

Configuring the Module

• Module Title:

  • Add a title to the blog listing section using the Title field.
  • This title will be displayed at the top of the module.

• Posts:

  • The module automatically pulls blog post data from the HubSpot content system.
  • Each post includes:
    • Featured Image: Resized to 370px width for uniformity.
    • Topics: Rendered as tags or labels.
    • Title: Displayed prominently in an <h4> element.
    • Link: Clicking the icon navigates to the blog post.

Purpose

The Blog Subscribe Module enables users to easily subscribe to a blog by providing their email address. It includes customizable text content, a subscription form, and optional icons for enhanced visual appeal.

Use cases:

• Blog Subscription Pages: Collect user email addresses for blog updates.
• CTA Sections: Encourage users to subscribe while browsing blog posts or pages.

How to Use It

Adding the Module

1. Add the module to a HubSpot page or template using the drag-and-drop editor.

Configuring the Module

1. Background Color:

   • Customize the background color using the Style > Background Colour field.
   • The background color can be set dynamically through the module.style.background_colour.color field.

2. Rich Text Content:

   • Add a custom message or description in the Rich Text Editor field.
   • Example: “Subscribe to our blog for the latest industry updates!”

3. Icon:

   • Add an optional image/icon to enhance the module’s appearance.
   • Configure icon size options:
     • Auto: Maintains original proportions.
     • Auto Custom Max: Set a maximum width and height for responsive design.
   • Ensure Alt Text is added for accessibility.

4. Subscription Form:

   • Form ID: Choose a HubSpot form from the dropdown.
   • Configure the form’s response behavior:
     • Response Type: Display a message or redirect to a URL after submission.
     • Redirect URL: Provide a URL for post-submission redirection.
     • GoToWebinar Key: Optionally, integrate GoToWebinar for webinar registrations.

5. Form Submit Icon:

   • The submit button uses a custom icon defined by module.form_submit_icon.src.
   • The icon appears within the email input field for better visual design.

Purpose

The Cards Grid Module is a flexible and visually appealing component for showcasing a grid of cards. Each card can feature text, icons, background images, and links. Additionally, you can highlight specific cards as "featured" with distinct styling.

How to Use It

Adding the Module

1. Drag and drop the module into a page or template in the HubSpot editor.

Configuring the Module

1. Card List:

   • Populate the Cards field with individual items.
   • For each card, configure the following:
     • Title: Main heading of the card.
     • Subtext: Description or supporting text.

2. Icons (Optional):

   • Add an icon to non-featured cards using the Icon field.
   • Configure the icon's size:
     • Auto: Maintains original proportions.
     • Auto Custom Max: Allows setting a maximum width and height for responsive rendering.
   • Ensure you provide Alt Text for accessibility.
   • Icons will not display on featured cards.

3. Featured Cards:

   • Mark specific cards as featured by enabling the Is Featured Card toggle.
   • For featured cards:
     • Background Image: Add a background image that appears behind the content.
     • The background-image is applied inline to the card using the style attribute.

4. Links:

   • Add a URL for each card using the URL field.
   • Customize the behavior:
     • Open in New Tab: Enable to open the link in a new browser tab.
     • Rel Attribute: Define the rel attribute (e.g., nofollow, noopener) for SEO or security purposes.
     • Email Links: If the URL type is an email address, the link will automatically be formatted as mailto:.

Purpose

The Contact Block Module is designed to showcase company information or contact details in a structured and visually appealing format. It supports text content and icons, making it ideal for displaying addresses, phone numbers, emails, or other key information.

How to Use It

Adding the Module

1. Drag and drop the module into a page or template in the HubSpot editor.

Configuring the Module

1. Text Editor:

   • Use the Text Editor field to add introductory content. This could include a heading, a description, or a call-to-action for the contact information.

2. Company Information (Repeater Field):

   • Populate the Company Information section with individual rows of contact details.
   • Each row consists of:
     • Icon (Optional):
       • Add an image icon to visually represent the information (e.g., phone, email, location).
       • Configure the icon size:
         • Auto: Maintains original proportions.
         • Auto Custom Max: Allows setting a maximum width and height for responsive rendering.
       • Ensure you provide Alt Text for accessibility.
     • Text Editor: Add the contact information or other details (e.g., address, phone number).

Purpose

The Two-Column Content Module is designed to display structured content using two distinct columns, with an optional header. It’s ideal for sections requiring comparison, complementary content, or segmented layouts.

How to Use It

Adding the Module

1. Drag and drop the module into a HubSpot page or template.

Configuring the Module

1. Header Content:

   • Use the Header Content field to include a title, introduction, or any content that introduces the two columns.
   • This content is wrapped within a <header> tag for semantic clarity.

2. First Column Content:

   • Add the primary content for the first column using the First Column Content field. This could be text, images, or other rich media.

3. Second Column Content:

   • Add the complementary or secondary content for the second column using the Second Column Content field. This column can mirror or contrast with the first column's content.

Purpose

The Call-to-Action Module is designed to highlight a specific action or offer, combining rich text content, a customizable link, and an optional featured image. It’s versatile for driving user engagement, such as directing traffic to a product, service, or additional resource.

How to Use It

Adding the Module

1. Insert the module into a HubSpot page or template.
2. Customize the settings in the module editor.

Configuring the Module

1. Rich Text Content:

   • Use the Rich Text field to add descriptive content or a compelling call to action.
   • This content will be displayed prominently in the CTA.

2. Link:

   • Add a URL to direct users to the desired destination.
   • Email Address: If the link type is set to an email, the mailto: protocol is automatically appended.
   • Customize the link behavior:
     • Open in New Tab: Enable or disable this option.
     • Rel Attribute: Specify rel attributes for SEO or security purposes (e.g., nofollow, noopener).

3. Background Style:

   • Use the Background Color picker to customize the background of the CTA.
   • The module supports a "no background" option by toggling Show Background.

4. Featured Image (Optional):

   • Upload an image to visually enhance the CTA.
   • Configure the image size:
     • Auto: Default size.
     • Auto with Custom Max Dimensions: Scale the image while maintaining proportions.
   • Add alt text for accessibility and SEO.

Purpose

The Footer Social Links Module is designed to provide quick access to social media profiles and other important links in the website footer. This module is visually compact and aligns with the footer’s overall design, supporting icons for popular platforms and email links.

Placement

• Location: This module is exclusively found in the footer section of the website.
• Its position ensures consistent visibility across all pages, enhancing accessibility to external platforms.

How to Use It

Adding the Module

• Add this module to the footer of the website template.
• Configure it via the module editor to customize links and icons.

Configuring the Module

1. Social Links:

   • Add a list of social links using the Social Links field.
   • For each link:
     • Specify the URL.
     • Select the link behavior:
       • Open in New Tab: Enable or disable this option.
       • Rel Attribute: Configure for SEO or security (e.g., nofollow, noopener).

2. Icons:

   • Add icons to represent the platform or service.
   • Configure the icon size:
     • Auto: Default size.
     • Auto with Custom Max Dimensions: Adjust dimensions while maintaining proportions.
   • Include descriptive Alt Text for accessibility.

Purpose

The Four-Columns Cards Grid Module is designed to display a grid of cards in a four-column layout. Each card contains an icon, a title, a subtitle, and a link. This module is ideal for showcasing multiple items with interactivity through hover effects and clickable links, often used for feature highlights or service categories.

Layout & Structure

• Columns: The grid displays cards in four columns.
• Responsive Design: The layout adapts to different screen sizes and will adjust the number of columns accordingly on smaller screens.

How to Use It

Adding the Module

• Add the module to your page where you want the four-column layout to appear.

Configuration Options:

• Cards Configuration: Each card can be configured with the following options:
  • Icon (Static & Hover): Add two icons for each card—one for the default view (static) and one for when the user hovers over the card.
  • Title and Subtitle: Enter the title and subtitle for each card.
  • Link: Add a clickable link (can be an email or URL) associated with each card.

Configuring the Module

1. Icons:

   • Static Icon: An icon shown by default.
   • Hover Icon: An icon that replaces the static icon when the user hovers over the card. These icons are customizable in size and loading behavior.

2. Title & Subtitle:

   • Title: Text displayed as the card's main title.
   • Subtitle: A brief description or subtitle beneath the title.

3. Link:

   • Link URL: A clickable link that can be set to an external URL or email address. Supports opening the link in a new tab.
   • Link Icon: An arrow icon is displayed in the link section to indicate further action.

Purpose

The Map Embed Module allows you to embed a Google Map into your webpage. It uses an iframe to display a map with customizable content, typically for displaying locations or other map-based information.

Layout & Structure

• The map is embedded inside a container and displayed on the page as an interactive element.
• This module requires the use of Google Map's embed code to be inserted.

How to Use It

Adding the Module

• Insert this module wherever you want to display the map on your page.

Configuration Options:

• Google Map Embed Code: This is the main configuration. You will need to add the embed code from Google Maps to display the map.

Configuring the Module

1. Google Map Embed Code:
   • Copy the embed code from Google Maps.
   • Paste the embed code into the google_map_embed_code field of this module.

Purpose

The Header Banner Module is used to display a customizable banner section at the top of a webpage. This module supports dynamic background images, rich text content, and multiple Call-To-Action (CTA) buttons. It is designed to be responsive, with different background images for mobile devices.

Layout & Structure

• Background Image: The banner has a customizable background image that can change based on screen size (desktop vs. mobile).
• Rich Text Editor: You can add any rich content (text, links, etc.) inside the banner.
• CTAs: Optionally, you can add two Call-to-Action buttons with configurable labels and links.
• Banner Image: A secondary image is supported, which can be displayed in addition to the background image.

How to Use It

Adding the Module

This module should be added to any section where you want a prominent header with customizable background images and call-to-action buttons.

Configuration Options:

• Background Image: Set the background image for the header banner.
• Mobile Background Image: Optionally configure a different background image for mobile screens.
• Text Editor: Add content to the banner using the rich text editor.
• Call to Action (CTA) Buttons: You can configure up to two CTA buttons. Each button has a label, link, and option to open in a new tab.
• Banner Image: An optional image that can be displayed inside the header, typically used for visual emphasis.

Configuring the Module

1. Background Image:

   • Configure the background_image property for the main background image.
   • Configure mobile_background_image for mobile-specific background.

2. Text Content:

   • Use the rich_text_editor field to add text, headings, or other HTML content for the banner.

3. Call to Action (CTA):

   • You can configure two CTAs with labels (cta_one_label and cta_two_label) and links (cta_one_link and cta_two_link).
   • If a CTA is linked to an email address, it will automatically be prefixed with mailto:.
   • Optionally set the link to open in a new tab with the open_in_new_tab option.

4. Banner Image:

   • If an additional banner image is provided (banner_image), it will be displayed below the content.

Purpose

The Image-Text Module is designed to display a section with an image and text content. It supports a configurable layout where the image and text can be presented either side-by-side or with the image placed above or below the text. The module also allows the addition of Call-To-Action (CTA) buttons and social links to enhance user engagement.

Layout & Structure

• Image Placement: The image can be positioned on the left or right of the text content, based on the layout configuration.
• Text Content: You can add rich text content using the rich text editor, which can include headings, paragraphs, links, and other HTML elements.
• CTA Button: Optionally, you can include a Call-To-Action button, which can be styled and linked to an external URL or email.
• Social Links: Optionally, social media icons can be displayed, linking to various platforms or email addresses.

How to Use It

Adding the Module

This module should be added to any section where you need an image alongside text, with optional CTAs and social media links. It is particularly useful for product or service promotions, team introductions, or informational sections.

Configuration Options:

• Image: Set the featured_image to display an image. You can control its size and loading behavior.
• Text: Use the rich_text_editor field to add textual content such as descriptions, headings, or additional HTML.
• CTA Button: Optionally, set up a CTA with a label and link (email or URL).
• Social Links: If needed, configure social links with icons, URLs, and open-in-new-tab settings.

Configuring the Module

1. Image:

   • Configure the featured_image property for the image. You can define the size, maximum width, and loading behavior (e.g., lazy loading).

2. Text Content:

   • Add text content in the rich_text_editor field. This content can include HTML formatting and rich text features like headings, paragraphs, and links.

3. Call to Action (CTA):

   • Configure the CTA button by setting the cta_label and cta_link. Optionally, control whether the link opens in a new tab.
   • The link can either open an external URL or trigger an email with the mailto: prefix.

4. Social Links:

   • Optionally, configure social media links in the socials field. Each link can have its own icon and link to the respective platform or email address.
   • Icons are customizable with a specific icon_set and can be displayed using the icon helper.

Purpose

The Interactive Office Map Module is designed to visually represent a map with interactive pins placed at specific locations, each containing information about different office locations. The module also includes a mobile-friendly slider that displays the office details in a swipeable format.

Layout & Structure

• Map Container: The main map area contains interactive pins placed dynamically using x and y coordinates. These pins represent office locations.
• Pin Content: Each pin contains an image (location image) and address/content information. When the user hovers or clicks on a pin, the content related to that location appears.
• Mobile Slider: For mobile devices, a slider is provided as an alternative view to the interactive map. It lists each office location in a swipeable format.

Configuration Options:

You can configure the following elements for the module:

• Heading: Optionally, a heading for the map can be added using the module.heading field.
• Pins: You can add multiple pins, each with the following configuration:
  • Pin Position: pin_x_position and pin_y_position are used to set the coordinates of each pin on the map.
  • Location Image: You can upload an image for each office location and define its size and loading behavior.
  • Location Content: The textual content for the pin (typically address information) is added in the content field.
• Mobile Slider: A mobile slider is shown on small screens that displays the same pin content but in a swipeable format.

Purpose

The Landing Page Form Module is designed to allow you to easily integrate a form on a landing page. It includes options to display a featured image, custom rich text content, and configure form submission behaviors like success messages, redirects, and GoToWebinar integration.

How to Use It

1. Add a Featured Image:

   • Use this section to display a featured image at the top of the form.
   • The image is automatically responsive and can be customized to scale based on the width, height, and type of resizing behavior.

   Settings:

   • module.featured_image.src: Set the source URL of the image.
   • module.featured_image.width: Set the width of the image (in pixels).
   • module.featured_image.height: Set the height of the image (in pixels).
   • module.featured_image.size_type: Choose from:
     • auto: The image will scale proportionally.
     • auto_custom_max: The image will scale within a maximum width and height.
   • module.featured_image.max_width: Maximum width of the image (for auto_custom_max).
   • module.featured_image.max_height: Maximum height of the image (for auto_custom_max).
   • module.featured_image.loading: Enable or disable lazy loading (enabled or disabled).

2. Add Rich Text Content:

   • Use the Rich Text Editor to add any content you'd like above the form, such as an introduction, instructions, or other relevant information.

   Settings:

   • module.rich_text: The rich text content that will appear above the form.

3. Configure the Form Submission:

   • The form can be set to submit and display either a success/error message or perform a redirect after submission.
   • If you want to integrate GoToWebinar registrations, provide the webinar key in the module settings.

   Settings:

   • module.form.form_id: Select the form ID to use.
   • module.form.response_type: Choose how the form will respond after submission:
     • message: Displays a custom success/error message.
     • redirect: Redirects the user to a specified URL or page after submission.
   • module.form.message: The message displayed after a successful or failed form submission (only for message response type).
   • module.form.redirect_id: The ID of the page to redirect to (only for redirect response type).
   • module.form.redirect_url: The URL to redirect to after form submission (only for redirect response type).
   • module.form.gotowebinar_webinar_key: The key to integrate GoToWebinar functionality with the form for webinar registrations.

Purpose

The Landing Page Icon Text Module is designed to display a series of columns containing icons and associated text. This is typically used for feature highlights, service descriptions, or key benefits. The icons can be customized in size and behavior, and the text content can be formatted using the rich text editor.

How to Use It

1. Add Columns:

   • This module allows you to add multiple columns, each containing an icon and rich text. You can have as many columns as needed for your landing page.

   Settings:

   • module.columns: The list of columns to be displayed. Each column contains:
     • item.icon.src: The source URL of the icon image.
     • item.icon.width: The width of the icon (in pixels).
     • item.icon.height: The height of the icon (in pixels).
     • item.icon.size_type: The size behavior for the icon:
       • auto: The icon scales proportionally to the set width and height.
       • auto_custom_max: The icon scales within the provided maximum width and height.
     • item.icon.max_width: Maximum width for the icon (for auto_custom_max).
     • item.icon.max_height: Maximum height for the icon (for auto_custom_max).
     • item.icon.loading: Enable or disable lazy loading (enabled or disabled).

2. Add Icon to Column:

   • Within each column, you can add an icon by uploading an image. The icon will be responsive and scale according to the set dimensions.

   Settings:

   • item.icon.src: The image source URL for the icon.
   • item.icon.alt: The alt text for the icon image (important for accessibility).

   Responsive Behavior:

   • Icons are automatically responsive, with custom handling for different sizes and scaling.
   • item.icon.size_type adjusts how the icon behaves on different screen sizes.

3. Add Rich Text Content:

   • You can add rich text content in each column. This could be used to describe a feature, service, or benefit.

   Settings:

   • item.rich_text: The rich text content that will appear next to or below the icon. This content can include headings, paragraphs, and other HTML elements, allowing for flexibility in design.

4. Customize Icon Size and Loading Behavior:

   • Each icon can have custom dimensions, and you can also configure lazy loading for better performance. Lazy loading ensures that the icon is only loaded when it comes into view.

   Settings:

   • item.icon.loading: Set to "disabled" to prevent lazy loading or leave it enabled to load icons as they come into the user's viewport.

Purpose

The Latest Blogs Module is designed to display the most recent blog posts from a specified blog group. It includes each blog's featured image, title, and tags, as well as a link to the full blog post. This module is ideal for displaying a blog feed or recent content on a landing page, allowing users to quickly explore the latest posts.

How to Use It

1. Module Title:

   • Optionally, you can display a title above the latest blog posts.

   Settings:

   • module.title: The title text to display above the blog posts. If no title is provided, this section will be omitted.

2. Recent Blog Posts:

   • The module fetches the latest blog posts from a specific blog group.

   Settings:

   • module.blog_id: The ID of the blog group from which to pull the recent posts.
   • blog_recent_posts(module.blog_id, 3): This function retrieves the three most recent blog posts from the specified blog group. You can adjust the number of posts by changing the 3 to any other number.

3. Post Layout:

   • For each blog post, the module displays the following:
     • Featured Image: A small image that represents the blog post. It is fetched from the blog post's featured_image attribute.
     • Title: The blog post's title. This is clickable and leads to the full post.
     • Tags: If the post has tags, they are displayed as clickable links. Clicking on a tag will lead to a page listing all posts with that tag.
     • Read More Icon: A link (styled as an icon) that directs the user to the full blog post. It’s represented as an SVG icon.

4. Blog Post Details:

   • Each post is wrapped in a <div> with the class post, containing:
     • featured-image: Displays the blog's featured image.
     • content: Contains the tags and title for the post.
     • inner-container: Wraps the tags and title to align them properly.

   Settings:

   • post.absolute_url: The URL that links to the full blog post.
   • post.featured_image: The source URL for the featured image of the post.
   • post.name: The title of the blog post.
   • post.tag_list: The list of tags associated with the blog post. Each tag is linked to its tag page.

5. SVG Icon:

   • Below the post title, an SVG icon (styled as a chevron) is displayed. Clicking this icon also redirects the user to the full post.