Smart Content Swap Pro for HubSpot

About Smart Content Swap Pro

A personalization hero for HubSpot CMS that swaps headline, subhead, hero image / video, CTAs and inline form on the same URL based on UTM parameters, referring domain, country, HubSpot list membership, custom URL parameters or cookies. One module, infinite intent-matched variants — no duplicate pages, no Mutiny / RightMessage subscription. Works on CMS Starter.

How it works

• Default variant — what every visitor sees if no rule matches.
• Personalized variants (repeater, up to 30) — each carries a match rule and an operator.
• Priority-based resolution — when more than one rule matches, the variant with the lowest rule_priority wins.
• Sub-50ms swap — all variants render server-side. JS runs inline at the bottom of the module, evaluates rules, hides the default and reveals the matched one — typically before first paint.
• Session persistence — first match is stored in sessionStorage so the visitor sees the same variant across navigations.
• Analytics built in — pushes scs_variant_match to window.dataLayer with the matched variant name and source.

Layouts

• Centered — text-only hero, max-width centered. (Demo 1, Demo 5, Demo 6)
• Left aligned — text-only, left-anchored. Form goes below CTAs.
• Text + image right / left — split layout, text and a side image. (Demo 3 image-left, Demo 4 image-right)
• Text + video right / left — split layout, text and a side video.
• Text + form right / left — split layout, text on one side and the HubSpot form on the other. (Demo 2)

Brand logo (new)

Each variant has an optional logo image field that renders above the eyebrow. Use it on LP-style heroes (Demo 2, Demo 5) so the page reads as a proper campaign hero instead of a generic content block. The logo height + the gap between the logo and the eyebrow are both editable in the Style tab.

Backgrounds

• None — falls back to the section bg color.
• Solid — flat color with opacity. (Demo 4: warm white sheet, Demo 6: warm sand)
• Gradient — two-stop linear gradient with custom angle. (Demo 1: warm-black, Demo 2: indigo→violet, Demo 3: peach→cream)
• Image — full-bleed image with optional overlay. Note: never sit a form on a bg image — the form panel always lands on a clean surface (gradient or solid). See Demo 2.
• Video — auto-playing, muted, looping MP4 with overlay. (Demo 5)

Typography

Each module instance picks its own heading and body font from the HubSpot font picker. The six demos here are intentionally disjoint — different fonts, different scales, different layouts, different colour worlds — to show the breadth of the same module:

• Demo 1 — Maison Éditoriale. Cormorant Garamond 220 px, light weight 300, gold eyebrow on warm-black gradient, full-bleed 96 vh. Sharp 0 px corners. Couture-grade.
• Demo 2 — Product LP. Manrope 800 at 76 px, indigo→violet gradient (no bg image), brand wordmark logo above the eyebrow, white form panel sat on a tinted surface. 32 px section radius.
• Demo 3 — Newsroom Peach. Fraunces 100 px, soft peach→cream gradient, 4:5 portrait image on the LEFT (the inverse of every other demo here), 40 px section radius. Daylight counterpoint to Demo 1's noir.
• Demo 4 — Magazine Poster. Space Grotesk 800 at 156 px, white sheet, jet-black type, monospaced eyebrow, 1:1 square image on the right, lime-on-black CTA. Sharp 0 px corners.
• Demo 5 — Cinematic LP Hero. Italiana 168 px (a Vogue-grade vertical serif distinct from Demo 1's Cormorant), 4K video background, 50 % vignette, brand wordmark lockup at the top, pill primary + ghost secondary CTA. Full-bleed 92 vh — a real hero, not a banner on top of a video.
• Demo 6 — Inline Sand Banner. DM Serif Display 48 px, H3 tag (so it doesn't compete with the page H1), warm sand surface, 24 px radius, gold pill CTA. Drop into the middle of an article.

Heading tag

Each variant picks its own tag from H1 / H2 / H3 / H4. Use H1 when the module is the page hero.

Style controls (every value editable)

• Container — max width, horizontal padding, full-bleed background toggle.
• Section — min height (auto / px / vh), padding top/bottom, radius (Demo 1 = 0, Demo 2 = 24, Demo 3 = 28, Demo 6 = 32), shadow.
• Colors — every surface configurable. Light + dark variants per text element.
• Typography — heading + body font picker, sizes (clamp-fluid heading), weights, tracking (em), line-heights.
• Spacing — eyebrow→heading, heading→subhead, subhead→CTA, CTA gap, CTA→form, text↔media gap, max widths.
• Buttons — vertical + horizontal padding, radius (Demo 1 = 0, Demo 2 = 999 pill, Demo 3 = 14 rounded, Demo 4 = 0, Demo 5 = 999, Demo 6 = 4), border width, shadow.
• Side media — text column ratio, aspect ratio, radius, shadow.
• Inline form — padding, radius, max width, input radius + padding, shadow.
• Text colour scheme — auto / light text on dark surface / dark text on light surface (per variant).
• Motion — reveal animation toggle, offset, duration, hover transition.
• Responsive — tablet + mobile breakpoints.
• Debug panel — bg, text, label colour, match colour, padding, radius, font size, offset.

Privacy & compliance

• Zero external requests. The rules engine runs entirely client-side.
• No cookies are set by the module.
• GDPR / CCPA: nothing personal is collected.

Append ?scsdebug=1 to any URL

Shows a fixed debug panel in the bottom-right of the page that logs every rule evaluation per module instance — the rule type, operator, expected value, the actual context value the JS read, and whether it matched.