HubSpot Modules Documentation
This page provides detailed information about various custom modules we have designed for the HubSpot CMS. Each module has been tested for responsiveness, customization flexibility, and seamless integration with the HubSpot Marketplace.
Events Listing (Pro module)
Overview
The Events Module is a dynamic and fully customizable module designed for HubSpot CMS. It allows users to showcase upcoming events with structured details, including the event's date, time, type, and location. The module offers customization options for background styling, spacing, and colors to align with brand aesthetics. It also supports a "More Events" button, linking to additional event details.
Features
-
Display multiple events with date, time, and location
-
Supports both online and offline events
-
Customizable heading, colors, and spacing
-
Background gradient support
-
Optional icons for time and location
-
"More Events" button with customizable link
-
Responsive design for desktop and mobile
Module Fields and Configuration
1. Style Group
These settings control the appearance of the module, including spacing, colors, and background settings.
| Field Name | Label | Type | Description |
|---|---|---|---|
desktop_spacing |
Desktop Spacing | Spacing | Adjusts the spacing for desktop views |
mobile_spacing |
Mobile Spacing | Spacing | Adjusts the spacing for mobile views |
background_color |
Background Color | Gradient | Sets a gradient background with configurable colors and direction |
heading_color |
Heading Color | Color | Defines the color of the heading text |
time_icon |
Time Icon | Image | Upload an image for the time icon representation |
location_icon |
Location Icon | Image | Upload an image for the location icon representation |
box_color_even_ |
Box Color (Even) | Color | Background color for even-numbered event boxes |
box_color_odd_ |
Box Color (Odd) | Color | Background color for odd-numbered event boxes |
2. Content Group
This section allows users to define the event details, including name, date, time, location, and event type.
Heading
| Field Name | Label | Type | Description |
heading |
Heading | Richtext | Displays the main heading for the event section (default: "Upcoming Events") |
Event Details
Each event has structured fields to capture all necessary information.
| Field Name | Label | Type | Description |
date.month |
Month | Text | Specifies the month of the event (e.g., "March") |
date.date |
Date | Text | Specifies the date or date range of the event (e.g., "22-25") |
event_name |
Event Name | Richtext | Name of the event, displayed prominently |
time |
Time | Text | Event timing, formatted as "HH:MM - HH:MM" |
event_type |
Event Type | Choice | Dropdown to select either "Online" or "Offline" event |
location.location |
Location | Text | Physical location of the offline event |
location.location_link |
Location Link | Link | Optional link for the event location (Google Maps, venue website, etc.) |
link |
Link | Link | External link for more event details |
link_text |
Link Text | Text | Custom label for the event details link (e.g., "More Info") |
3. Button Settings
Users can configure an optional button for redirecting visitors to a dedicated events page or external event registration.
| Field Name | Label | Type | Description |
button_required |
Button Required | Boolean | Toggle to show/hide the "More Events" button |
button_link |
Button Link | Link | URL for the button action (visible if button_required is enabled) |
button_text |
Button Text | Text | Custom text for the button label (default: "More Events") |
How to Use
-
Add the module to a HubSpot CMS page.
-
Customize the event details by adding or modifying event entries.
-
Adjust styling options such as colors, spacing, and background.
-
Configure the optional "More Events" button as needed.
-
Save and publish the page to make the event list live.
Notes
-
The location field is only visible if "Offline" is selected as the event type.
-
Background gradients can be adjusted with multiple colors and direction settings.
-
Ensure the date and time formats are used consistently for a professional display.
-
The module is mobile-responsive and adapts to different screen sizes.
Compatibility
-
HubSpot CMS Hub
-
Fully responsive on all devices
Submission Details
This module is designed for HubSpot CMS and follows HubSpot Marketplace guidelines. It offers flexibility for businesses to showcase upcoming events efficiently
plans-and-pricing (Pro module)
Overview
The Plans and Pricing Module is a flexible and fully customizable module for HubSpot CMS, designed to showcase different pricing plans with structured details. It allows users to display multiple pricing tiers, including plan names, costs, features, and call-to-action buttons. The module offers customization options for background styling, spacing, and colors to align with brand aesthetics. Additionally, it supports a toggle switch for monthly and yearly pricing options, enhancing user experience.
Features
-
Flexible pricing for individuals, businesses, and enterprises
-
Choose from Basic, Pro, or Enterprise plans
-
Customizable features, including branding and styling options
-
Support for multiple pricing tiers with different feature sets
-
Optional add-ons for additional functionality
-
Easy upgrade or downgrade options
-
100% responsive design for all devices
Module Fields and Configuration
1. Style Group
These settings control the appearance of the module, including spacing, colors, and background settings.
also, we can update all the contents and button text and links to what we want.
How to Use
-
Add the module to a HubSpot CMS page.
-
Customize the pricing details by adding or modifying plan entries.
-
Adjust styling options such as colors, spacing, and background.
-
Configure the optional "Subscribe Now" or "Get Started" button as needed.
-
Save and publish the page to make the pricing details live.
Notes
-
Each plan includes customizable pricing, features, and CTA buttons.
-
Background gradients can be adjusted with multiple colors and direction settings.
-
Ensure pricing and feature details are updated accurately for customer clarity.
-
The module is mobile-responsive and adapts to different screen sizes.
Compatibility
-
HubSpot CMS Hub
-
Fully responsive on all devices
Submission Details
This module is designed for HubSpot CMS and follows HubSpot Marketplace guidelines. It offers flexibility for businesses to showcase pricing plans effectively.
Flip Box (Pro module)
Overview
The Flip Box Module is a flexible and fully customizable module for HubSpot CMS, creates a basic flip card that is relatively straightforward. The usual method is to place the front and back card faces in a parent container, and absolutely position the back face so it can match the size of the front face.
Features
Fully customizable styling – adjust background gradients, text alignment, spacing, and color schemes.
Three-dimensional flip effect – smooth transitions for a modern UI.
Responsive design – works seamlessly across all devices.
Flexible layouts – choose between Two, Three, or Four card layouts.
Content repetition support – easily repeat structured items inside flip cards.
Custom CTA buttons and links – editable for each card.
Brand-matching options – design that fits your visual identity.
Module Fields and Configuration
Style Group
Controls the module’s appearance:
Color options
Padding and spacing
Background gradient and direction
Text alignment
Add custom titles, icons/images, and text for both front and back sides
Option to display a button with editable text and links
How to Use
Add the Flip-Box Module to your HubSpot CMS page.
Customize content including front/back card text, CTA buttons, and icons.
Choose your layout (2, 3, or 4 cards).
Adjust style settings to match your brand (colors, spacing, alignment).
Save and publish your page.
Notes
All cards support both front and back content blocks.
You can duplicate cards easily with the repeatable item structure.
Gradients support multiple colors and angles.
Cards flip on hover or tap (mobile).
Responsive across all screen sizes.
Compatibility
Platform: HubSpot CMS Hub
Devices: Fully responsive on all screen sizes
Submission Details
This module adheres to HubSpot Marketplace guidelines and is optimized for performance, customization, and responsiveness. It's perfect for product/service highlights, team member profiles, feature cards, and more.
Countdown Timer by wx
Overview
The Countdown Timer is built to create excitement and urgency, keeping your audience engaged as they track the time remaining until a key event or deadline. Ideal for promotions, product launches, or important occasions, this module helps drive engagement and conversions by emphasizing time sensitivity. With a fully customizable design, it seamlessly blends into any website, aligning perfectly with your brand’s look and feel.
Features
End-of-time notification text – Automatically displays a custom message when the countdown ends.
Background gradient color option – Easily match your site’s theme and visual identity.
Customizable end date/time – Select any future date and time, and the module instantly starts the countdown.
Responsive design – Seamlessly adjusts to mobile, tablet, and desktop devices.
Modern typography and layout – Ensures visual clarity and elegance.
Live countdown timer – Accurate and auto-updating in real time.
Optimized performance – Lightweight and fast-loading for high engagement.
Module Fields and Configuration
Style Group
Controls the module’s appearance:
Color options
Padding and spacing
Background gradient and direction
Content Options
Add custom titles, images, and text for timer.
Pick the date and time you want the countdown to end.
How to Use
Add the Countdown timer by wx to your HubSpot CMS page.
Customize content including text, image, and background color.
Simply select any date and time, and the module will automatically generate the countdown.
When the selected date and time are reached, the module automatically changes to display a message notifying that the time is up.
You can customize the end-of-time notification message.
Save and publish your page.
Notes
Please add a unique ID if you’re using the module multiple times.
Easy Date and Time Setup
Gradients support multiple colors and angles.
Responsive across all screen sizes.
Compatibility
Platform: HubSpot CMS Hub
Devices: Fully responsive on all screen sizes
Submission Details
This module adheres to HubSpot Marketplace guidelines and is optimized for performance, customization, and responsiveness. It's perfect for product/service highlights, team member profiles, feature cards, and more.