--- title: Smart Content Swap Pro — Personalize Any Landing Page on HubSpot CMS description: Swap headline, subhead, hero image, CTA copy and inline form on a single HubSpot landing page based on UTM parameters, referring domain, country, or HubSpot list membership. Replace Mutiny / RightMessage at the segment level. No HubDB. Works on CMS Starter. --- # Smart Content Swap Pro for HubSpot One landing page. Infinite intent-matched variants. Swap headline, subhead, hero image, CTAs and inline form by UTM parameters, referring domain, country, or HubSpot list — without duplicating pages. Try the personalization — append any of these to the URL [**?utm\_source=**google](https://www.nopethemes.com/?utm_source=google&hsLang=en) [**?utm\_source=**linkedin](https://www.nopethemes.com/?utm_source=linkedin&hsLang=en) [**?utm\_source=**facebook](https://www.nopethemes.com/?utm_source=facebook&hsLang=en) [**?utm\_campaign=**enterprise](https://www.nopethemes.com/?utm_campaign=enterprise&hsLang=en) [**?utm\_campaign=**smb](https://www.nopethemes.com/?utm_campaign=smb&hsLang=en) [**?industry=**saas](https://www.nopethemes.com/?industry=saas&hsLang=en) [**?industry=**ecom](https://www.nopethemes.com/?industry=ecom&hsLang=en) [**?utm\_source=**g2](https://www.nopethemes.com/?utm_source=g2&utm_medium=referral&hsLang=en) [**?scsdebug=**1 (show debug panel)](https://www.nopethemes.com/?scsdebug=1&hsLang=en) [Reset](https://www.nopethemes.com/?hsLang=en) Each click reloads this page with a different URL parameter. Each demo evaluates its own rules against that parameter and swaps content live. Append `&scsdebug=1` to any URL to see the rule-evaluation panel. --- Demo 1 · Maison Éditoriale · Cormorant Garamond 220 px italic · Gold on warm-black · Full bleed ## Couture-grade serif at 220 px display Atelier-Noire-grade luxury. Italic Cormorant at 220 px display, weight 300, near-zero leading. Gold capitalised eyebrow letter-tracked at 0.32 em. Solid gold pill CTAs on warm-black. Edge-to-edge cinematic stage. Three UTM-driven variants flip the headline. Maison Numérique · Édition 04 · MMXXVI ## One landing page. Infinite variants. Swap headline, subhead, hero image, CTAs and the inline form on the same URL — by UTM, referrer, country, or HubSpot list. Without ever duplicating a page. [Discover the module](https://www.nopethemes.com/smart-content-swap-pro-for-hubspot#features) [Read the docs](https://www.nopethemes.com/smart-content-swap-pro-for-hubspot#docs) Édition Google · MMXXVI ## Stop wasting Google clicks on a generic page. Personalize the headline by keyword group, ad group, or campaign. Watch CPL drop and quality score climb. [See pricing](https://www.nopethemes.com/smart-content-swap-pro-for-hubspot#features) [Read the docs](https://www.nopethemes.com/smart-content-swap-pro-for-hubspot#docs) Édition LinkedIn · ABM ## Twelve landing pages from a single URL. For B2B teams running paid LinkedIn or ABM. Match by industry, persona, country, or list. [Book a demo](https://www.nopethemes.com/smart-content-swap-pro-for-hubspot#features) [Read the docs](https://www.nopethemes.com/smart-content-swap-pro-for-hubspot#docs) Édition Meta · Audience ## Match the page to the audience. Stop optimizing creative against a static page. Drop the module, define your rules, ship. [Get the module — $79](https://www.nopethemes.com/smart-content-swap-pro-for-hubspot#features) [Read the docs](https://www.nopethemes.com/smart-content-swap-pro-for-hubspot#docs) --- Demo 2 · Product LP · Indigo→violet gradient · Brand wordmark logo · Form on right · No bg image ## SaaS landing page with branded gradient and form A clean SaaS LP — no bg image, no clipping. A brand wordmark sits above the eyebrow so the page reads as a real product hero. Saturated indigo→violet gradient, Manrope 800 at 76 px. The white form panel sits on a tinted gradient surface (never on top of an image — that's the rule). **?utm\_campaign=enterprise** / **=smb** swaps heading + form pitch. ![Smartswap](data:image/svg+xml;utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20240%2036'%20fill='none'%3E%3Crect%20x='2'%20y='4'%20width='28'%20height='28'%20rx='8'%20fill='%23ffffff'/%3E%3Crect%20x='8'%20y='10'%20width='10'%20height='10'%20rx='2'%20fill='%234c1d95'/%3E%3Crect%20x='14'%20y='16'%20width='10'%20height='10'%20rx='2'%20fill='%23a78bfa'/%3E%3Ctext%20x='42'%20y='25'%20font-family='-apple-system,BlinkMacSystemFont,Segoe%20UI,Roboto,sans-serif'%20font-weight='800'%20font-size='20'%20letter-spacing='-0.6'%20fill='%23ffffff'%3ESmartswap%3C/text%3E%3C/svg%3E) Free 30-day trial · No card required ## Personalize landing pages without duplicating them. Tell us a bit about your team. We'll spin up a tailored workspace in your HubSpot portal in under 24 hours — no card required. #### Spin up your trial Tell us your stack. We'll show you how it would feel. ![Smartswap](data:image/svg+xml;utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20240%2036'%20fill='none'%3E%3Crect%20x='2'%20y='4'%20width='28'%20height='28'%20rx='8'%20fill='%23ffffff'/%3E%3Crect%20x='8'%20y='10'%20width='10'%20height='10'%20rx='2'%20fill='%234c1d95'/%3E%3Crect%20x='14'%20y='16'%20width='10'%20height='10'%20rx='2'%20fill='%23a78bfa'/%3E%3Ctext%20x='42'%20y='25'%20font-family='-apple-system,BlinkMacSystemFont,Segoe%20UI,Roboto,sans-serif'%20font-weight='800'%20font-size='20'%20letter-spacing='-0.6'%20fill='%23ffffff'%3ESmartswap%3C/text%3E%3C/svg%3E) Built for ABM · SOC 2 Type II ## ABM-ready personalization on HubSpot Enterprise. SOC 2 Type II. SSO. List-based targeting. Replace $24k/yr Mutiny with a $79 module. #### Talk to a solutions engineer We'll walk through the ABM rule builder and SOC 2 compliance. ![Smartswap](data:image/svg+xml;utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20240%2036'%20fill='none'%3E%3Crect%20x='2'%20y='4'%20width='28'%20height='28'%20rx='8'%20fill='%23ffffff'/%3E%3Crect%20x='8'%20y='10'%20width='10'%20height='10'%20rx='2'%20fill='%234c1d95'/%3E%3Crect%20x='14'%20y='16'%20width='10'%20height='10'%20rx='2'%20fill='%23a78bfa'/%3E%3Ctext%20x='42'%20y='25'%20font-family='-apple-system,BlinkMacSystemFont,Segoe%20UI,Roboto,sans-serif'%20font-weight='800'%20font-size='20'%20letter-spacing='-0.6'%20fill='%23ffffff'%3ESmartswap%3C/text%3E%3C/svg%3E) Done in a weekend · $79 one-time ## From $79. Up and running this weekend. One-time payment. Lifetime updates. No per-visitor fees, no monthly subscription. #### Get the module — $79 Drop your email. We send the module + a 5-minute setup video. --- Demo 3 · Apple Newsroom peach · Fraunces 100 px italic · Image left · 40 px section radius · Country rule ## Soft warm-cream editorial — image left, italic serif right A daylight counterpoint to Demo 1's noir. Soft peach→cream gradient surface, large 4:5 portrait image on the LEFT (the inverse of every other demo here), Fraunces 100 px regular italic with optical-size adjusted, generous 40 px section radius. Country-driven variants for DE / RO / FR. Trusted by 1,200+ HubSpot teams ## Personalization that pays back in one campaign. Brex saw a 29% conversion lift from industry-personalized homepages. Intent-matched landing pages convert at 11.6% vs 3.8% for generic. [See ROI calculator](https://www.nopethemes.com/smart-content-swap-pro-for-hubspot#roi) [Talk to sales](https://www.nopethemes.com/smart-content-swap-pro-for-hubspot#sales) ![Soft warm-toned interior with morning light](https://images.unsplash.com/photo-1604014237800-1c9102c219da?w=1400&q=85&auto=format&fit=crop) Vertraut von 200+ DACH-Teams ## Personalisierung, die sich amortisiert. DSGVO-konform. Keine externen Tracker, keine Cookies, kein Datenexport. [ROI-Rechner ansehen](https://www.nopethemes.com/smart-content-swap-pro-for-hubspot#roi) [Demo buchen](https://www.nopethemes.com/smart-content-swap-pro-for-hubspot#sales) ![Soft warm-toned interior with morning light](https://images.unsplash.com/photo-1604014237800-1c9102c219da?w=1400&q=85&auto=format&fit=crop) Folosit de 50+ echipe din România ## Personalizare amortizată din prima campanie. O pagină. Variante infinite. Plătit o dată — fără abonamente lunare. [Vezi calculatorul ROI](https://www.nopethemes.com/smart-content-swap-pro-for-hubspot#roi) [Talk to sales](https://www.nopethemes.com/smart-content-swap-pro-for-hubspot#sales) ![Soft warm-toned interior with morning light](https://images.unsplash.com/photo-1604014237800-1c9102c219da?w=1400&q=85&auto=format&fit=crop) Adopté par 150+ équipes en France ## Personnalisation rentable, dès la première campagne. Une page. Variantes infinies par UTM, référent, pays ou liste. Paiement unique. [Voir le calculateur ROI](https://www.nopethemes.com/smart-content-swap-pro-for-hubspot#roi) [Talk to sales](https://www.nopethemes.com/smart-content-swap-pro-for-hubspot#sales) ![Soft warm-toned interior with morning light](https://images.unsplash.com/photo-1604014237800-1c9102c219da?w=1400&q=85&auto=format&fit=crop) --- Demo 4 · Poster · Space Grotesk 800 at 156 px · White surface, lime accent · Square image right · Sharp 0 px corners ## Magazine-poster scale on a white sheet A bold typographic poster — white sheet, jet-black Space Grotesk 800 at 156 px, monospaced eyebrow, square image cropped to 1:1 on the right, lime-on-black CTA. Sharp 0 px corners on the section AND the image. Two referrer-driven variants for G2 — open with `g2.com` referrer or fake with **?utm\_source=g2&utm\_medium=referral**. ISSUE №04 / 60-SECOND DEMO ## Stop shipping twelve duplicate landing pages. Drop the module on any HubSpot page, define your rules in the sidebar, watch the headline change — without a dev ticket and without HubDB. [Watch the demo](https://www.nopethemes.com/smart-content-swap-pro-for-hubspot#demo) [See pricing](https://www.nopethemes.com/smart-content-swap-pro-for-hubspot#pricing) ![Marketing dashboard with charts and metrics](https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=1600&q=85&auto=format&fit=crop) REFERRED BY G2 / WELCOME BACK ## You've seen the reviews. Now see the price. $79 one-time. Lifetime updates. Works on CMS Starter and up. [Buy now — $79](https://www.nopethemes.com/smart-content-swap-pro-for-hubspot#demo) [Read the reviews](https://www.nopethemes.com/smart-content-swap-pro-for-hubspot#pricing) ![Marketing dashboard with charts and metrics](https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=1600&q=85&auto=format&fit=crop) REFERRED BY G2 / WELCOME BACK ## You've seen the reviews. Now see the price. $79 one-time. Lifetime updates. Works on CMS Starter and up. [Buy now — $79](https://www.nopethemes.com/smart-content-swap-pro-for-hubspot#demo) [Read the reviews](https://www.nopethemes.com/smart-content-swap-pro-for-hubspot#pricing) ![Marketing dashboard with charts and metrics](https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=1600&q=85&auto=format&fit=crop) --- Demo 5 · Cinematic LP hero · Italiana 168 px (Vogue-grade vertical serif) · Video bg · Logo lockup · Two CTAs · Full bleed · 92 vh ## A real LP hero — not a banner on a video Full-bleed 92 vh stage, auto-playing 4K video, vignette overlay (50%), brand wordmark at the top so it reads as a real campaign hero, Italiana 168 px (a vertical Vogue-grade serif distinct from Demo 1's Cormorant), pill primary CTA + ghost secondary CTA. **?industry=saas** / **=ecom** swaps the campaign. ![Smartswap](data:image/svg+xml;utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20280%2036'%3E%3Ctext%20x='0'%20y='25'%20font-family='Georgia,%20serif'%20font-style='italic'%20font-weight='400'%20font-size='22'%20letter-spacing='2.4'%20fill='%23ffffff'%3ES%20M%20A%20R%20T%20S%20W%20A%20P%3C/text%3E%3Cline%20x1='0'%20y1='32'%20x2='280'%20y2='32'%20stroke='%23ffffff'%20stroke-opacity='0.5'%20stroke-width='0.5'/%3E%3C/svg%3E) Issue №05 · Spring Campaign ## The personalization layer your HubSpot was missing. Replace Mutiny / RightMessage at the segment level. One landing page, infinite intent-matched variants — no HubDB, no per-visitor fees, no monthly subscription. [See it in 60 seconds](https://www.nopethemes.com/smart-content-swap-pro-for-hubspot#demo) [Buy now — $79](https://www.nopethemes.com/smart-content-swap-pro-for-hubspot#buy) ![Smartswap](data:image/svg+xml;utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20280%2036'%3E%3Ctext%20x='0'%20y='25'%20font-family='Georgia,%20serif'%20font-style='italic'%20font-weight='400'%20font-size='22'%20letter-spacing='2.4'%20fill='%23ffffff'%3ES%20M%20A%20R%20T%20S%20W%20A%20P%3C/text%3E%3Cline%20x1='0'%20y1='32'%20x2='280'%20y2='32'%20stroke='%23ffffff'%20stroke-opacity='0.5'%20stroke-width='0.5'/%3E%3C/svg%3E) For SaaS marketers · ABM ## ABM-grade personalization for B2B SaaS. Match by industry, persona, account list, or campaign. SOC 2 Type II. SSO. Sub-50 ms server-side swap — no flicker, no cumulative-layout-shift hit. [Watch the SaaS demo](https://www.nopethemes.com/smart-content-swap-pro-for-hubspot#demo) [Talk to a SE](https://www.nopethemes.com/smart-content-swap-pro-for-hubspot#buy) ![Smartswap](data:image/svg+xml;utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20280%2036'%3E%3Ctext%20x='0'%20y='25'%20font-family='Georgia,%20serif'%20font-style='italic'%20font-weight='400'%20font-size='22'%20letter-spacing='2.4'%20fill='%23ffffff'%3ES%20M%20A%20R%20T%20S%20W%20A%20P%3C/text%3E%3Cline%20x1='0'%20y1='32'%20x2='280'%20y2='32'%20stroke='%23ffffff'%20stroke-opacity='0.5'%20stroke-width='0.5'/%3E%3C/svg%3E) For DTC marketers · Conversion ## Cart-abandon, Klaviyo, paid-social — all on one URL. Eight product-page personalization plays. Klaviyo integration patterns. Cart-abandon hooks. Lifetime updates, $79 one-time. [Watch the DTC demo](https://www.nopethemes.com/smart-content-swap-pro-for-hubspot#demo) [Buy now — $79](https://www.nopethemes.com/smart-content-swap-pro-for-hubspot#buy) --- Demo 6 · Inline sand banner · DM Serif Display 48 px · H3 tag · 24 px radius · Refined gold-pill CTA ## Drop-in inline banner — refined sand, smaller scale Not every personalised module is a hero. Drop this contained 48 px serif banner into the middle of an article or pillar — H3 tag (so it doesn't compete with your real H1), 24 px section radius, warm sand surface, gold pill CTA on hover. **?industry=saas** / **?industry=ecom** swaps the offer. While you're reading ### Take this guide with you, as a PDF. 14 personalization tools, side-by-side, in one inbox-ready PDF. [Send me the PDF](https://www.nopethemes.com/smart-content-swap-pro-for-hubspot#pdf) For SaaS marketers ### The SaaS-only edition of this guide. Stripped of e-commerce examples. SaaS landing pages, MQL-to-SQL data, six ABM playbooks. [Get the SaaS PDF](https://www.nopethemes.com/smart-content-swap-pro-for-hubspot#pdf) For DTC marketers ### The e-commerce edition of this guide. Cart-abandonment hooks, Klaviyo integration patterns, eight product-page personalization plays. [Get the DTC PDF](https://www.nopethemes.com/smart-content-swap-pro-for-hubspot#pdf) --- ## 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. Smart Content Swap Pro by Studio Nope