Every SaaS company with more than a handful of integrations eventually builds an integrations page. The result is almost always the same: a static grid of partner logos dropped into a rich text module, maybe organized under a few headings, linking out to external documentation or nowhere at all. No search. No filtering. No way for a visitor to find the one integration they care about without scrolling through 40 logos arranged in alphabetical order.
When a company hits 25 or 50 or 120 integrations, that static grid becomes a liability. Visitors bounce. Sales teams get support tickets asking whether a specific integration exists. The page that should be closing deals is instead generating confusion.
Integration Showcase Pro is a HubSpot CMS module built to replace that static grid with a proper integration directory. It gives visitors live search, category filtering, detail modals, and featured pins. It gives marketers a repeater-based editor where every integration is a structured entry with its own logo, description, category, badge, and modal content. No code, no external dependencies, no iframes.
Three layouts for different content volumes
Not every integrations page has the same density problem. A company with 12 integrations needs a different layout than a company with 150. Integration Showcase Pro ships with three layout options: grid, list, and compact.
The grid layout displays integration cards in a responsive column grid. Each card shows the integration logo, name, short description, category label, and an optional badge. Cards are uniform in height with content truncation, so the grid stays clean even when description lengths vary. This is the default and works well for directories between 10 and 60 entries.
The list layout stacks integrations vertically with the logo on the left and description text on the right. It gives more room for longer descriptions and works well when the integration details matter more than visual scanning. Companies with 15 to 30 integrations that want to emphasize what each connection actually does will prefer this one.
The compact layout reduces each entry to a logo and name in a tight grid, fitting more integrations above the fold. It is designed for companies with 80 or more integrations where the primary goal is letting visitors scan and search, then click into a detail modal for specifics. All three layouts are fully responsive and collapse to a single column on mobile.
Detail modals that keep visitors on the page
The worst thing an integrations page can do is send visitors away. Every outbound link to a partner docs site or a Zapier listing is a chance for that visitor to never come back. Integration Showcase Pro solves this with built-in detail modals.
Each integration entry has an optional modal that opens on card click. The modal supports rich text content, so marketers can include setup instructions, feature lists, screenshots, or embedded videos without ever sending the visitor to another tab. The modal content is managed per integration inside the repeater, right next to the logo and description fields.
The modals are built with accessibility as a baseline. Focus is trapped inside the open modal so keyboard users do not tab into background content. Scroll lock prevents the page body from scrolling behind the overlay. Pressing Escape closes the modal. Clicking the backdrop closes the modal. These are not extras. They are requirements for any overlay pattern, and they are handled automatically.
For integrations that do need an external link, each entry has an optional URL field. When a URL is set and the modal is disabled, the card links out directly. When both are set, the modal includes a call-to-action button pointing to the external URL. Marketers control the behavior per integration without touching code.
Search and category tabs
A directory without search is just a long page. Integration Showcase Pro includes a live search input that filters integrations as the visitor types. Search matches against the integration name, description, and category fields simultaneously, so typing "email" surfaces integrations named "Mailchimp" if the description mentions email marketing. There is no submit button and no page reload. Results update on every keystroke with a 200ms debounce to keep rendering smooth.
Category tabs sit above the integration grid and let visitors filter by type. Categories are managed through a separate repeater, not auto-generated from integration entries. This means marketers control tab order, tab labels, and which categories appear as tabs independently of the integration data. A company with 8 categories might only surface 5 as tabs and group the rest under an "All" default.
Search and category filtering work together. Selecting a category tab narrows the visible set, and typing in the search field filters within that narrowed set. Selecting "All" resets the category filter but preserves the search query. The active tab state updates visually so visitors always know which filter is applied. When a search or filter returns zero results, the module displays a configurable empty-state message instead of a blank space.
Featured pins and badge labels
Some integrations matter more than others. A company might have 60 integrations but only 5 that sales teams actually reference in demos. Integration Showcase Pro handles this with featured pins and badge labels.
The featured pin is a boolean toggle on each integration entry. Pinned integrations sort to the top of the directory regardless of the active category or search query. If a visitor selects the "Analytics" tab, pinned analytics integrations appear first, followed by unpinned ones. This is useful for surfacing flagship partnerships like Salesforce, HubSpot, or Slack above the long tail of niche connectors.
Badge labels add a visual tag to individual integration cards. The module ships with 3 badge presets: Popular, New, and Premium. Each preset has its own default color scheme that can be overridden in the style controls. Badges appear as small labels on the card, giving visitors a quick signal about which integrations are trending, recently added, or part of a paid tier. Marketers assign badges per integration with a single dropdown selection.
Pins and badges are independent controls. An integration can be pinned without a badge, badged without being pinned, or both. The combination of pinning a Salesforce integration and tagging it as "Popular" creates a clear visual hierarchy at the top of the directory without requiring any custom code or manual sorting.
87 style controls and zero dependencies
Integration Showcase Pro includes 87 style controls organized across 6 groups: card styles, modal styles, toolbar and search styles, badge styles, category tab styles, and global layout settings. Every visible element has granular controls for colors, fonts, spacing, borders, and border radius.
Card controls cover background color, border, border radius, shadow, hover shadow, padding, logo size, title font, description font, and description line clamp. Modal controls cover overlay color, modal background, max width, padding, close button color, heading font, body font, and CTA button styles. Toolbar controls cover search input background, border, placeholder color, icon color, and input font. Badge controls cover background color, text color, font size, border radius, and padding for each of the 3 presets independently.
Category tab controls let marketers set the default tab style, active tab style, tab font, tab spacing, and tab alignment. Global layout settings control the column count at each breakpoint, card gap, section max width, and section padding.
The module has zero external dependencies. No JavaScript libraries. No CSS frameworks. No CDN calls. The JavaScript that powers search, filtering, modals, and keyboard navigation is vanilla ES6 bundled into the module. The CSS uses custom properties tied to the HubSpot theme settings system. Page weight contribution is under 18KB combined for the CSS and JavaScript.
Get Integration Showcase Pro
Integration Showcase Pro is available on the HubSpot Marketplace for $14.99 as a one-time purchase. It works with any HubSpot CMS theme, requires no developer setup, and installs in under 2 minutes through the standard marketplace flow.
For a full walkthrough of every feature, layout option, and style control, read the Integration Showcase Pro deep dive on the Studio Nope product page.