Social Proof Pro for HubSpot

Trust badges, animated counters, and live notification popups — three toggleable sections in one module. Zero dependencies, full style control.

Demo 1 — Stats Cards + Badge Grid

E-Commerce — Dark

Stat cards with icon on the left, number and label on the right. Badge grid cards below. Animated counters, hover lift, tinted icon circles.

Demo 2 — Stats Centered + Compact Badges

Law Firm — Navy & Gold

Large serif numbers with vertical dividers. Compact pill badges for credentials. Classic centered layout, no animation.

Demo 3 — Stats Inline + Row Badges

Real Estate — Warm & Light

Inline pill stats wrapping naturally, row badges with icon on the left. 7 stats, 4 badges. Warm ivory palette.

Demo 4 — Persistent Stacked Notifications

Notifications — Stacked (No Auto-Dismiss)

Toast notifications that stack up and stay visible until manually dismissed. Duration set to 0 — each toast slides in with a short delay, building a stack. Close them individually with the × button.

Demo 5 — Stats Cards

SaaS — Card Layout

2-column stat cards with shadow and hover lift. Green accent, light background, animated counters with icon backgrounds.

Demo 6 — Full Module (All 3 Sections)

Everything Together

Badges (grid) and stats (centered with dot separators) — both sections enabled simultaneously. Dark indigo theme with purple accents.

Setup & Configuration

Social Proof Pro has three independently toggleable sections. Enable any combination — disabled sections render zero HTML.

Trust Badges

Three display layouts: Card Grid (2-6 column bordered cards with hover effects), Inline Row (flexible wrap with optional borders), and Compact Pills (small inline tags). Each badge supports FontAwesome icons, images, or label-only. Optional heading, per-badge links, and grayscale-to-color hover.

Customer Count Tickers

Three display layouts: Cards (icon on the left in a tinted circle, number + label on the right, bordered cards with hover lift), Centered (classic stacked with optional dividers), and Inline Pills (compact horizontal pills). Animated count-up from zero via IntersectionObserver. Supports dot, pipe, and dash separators. Up to 12 counters per instance.

Live Notification Popups

Fixed-position toast notifications cycling through recent activity — purchases, sign-ups, or any custom action. Supports manual entries (1-20) and HubDB tables.

  • Position — bottom-left, bottom-right, top-left, top-right
  • Display duration — seconds each toast stays visible, or 0 for persistent (stays until manually dismissed)
  • Stacking — when persistent, toasts stack with a gap between them
  • Timing — initial delay, delay between toasts, max per session
  • Close button — toggle, with optional sessionStorage memory (remembers dismissal)
  • Avatars — custom images or automatic initial-based fallback with color rotation
  • Verified badge — optional green checkmark
  • Display order — sequential or random
  • Mobile — toggle visibility on small screens

Style System

Every visual property is a style field — colors, fonts, sizes, spacing, gaps, padding, borders, shadows, and border-radius. Two independent Google Font pickers. Per-section backgrounds. Responsive breakpoint controls. Zero hardcoded CSS values.

Badges Style

  • Section — background, padding top/bottom, container width, container padding
  • Cards — background, border toggle, border color, radius, padding, shadow (none/sm/md/lg), gap
  • Icons — size, color (renders inside a tinted background circle)
  • Labels — color, size
  • Heading — color, size, gap below heading

Tickers Style

  • Section — background, padding, container width
  • Numbers — color, size, weight
  • Labels — color, size
  • Icons — color, size (tinted circle background in cards mode)
  • Cards — background, border color, radius, padding, shadow (none/sm/md/lg)
  • Dividers — color, separator style (dot/pipe/dash/none)

Notification Style

  • Toast — background, border, radius, shadow, width, padding, gap
  • Typography — name size, action size, time size, colors for each
  • Avatar — size, radius, fallback background, initial color
  • Position — offset from edges, close button size

Production Ready

  • Zero dependencies — vanilla JavaScript, no jQuery, no external subscriptions
  • Instance isolation — multiple modules per page, zero CSS or JS conflicts
  • Accessible — semantic HTML, ARIA live regions, keyboard navigation, prefers-reduced-motion
  • Any template — website pages, landing pages, blog posts, no theme required
  • HubDB support — dynamic notification data from HubDB tables (Content Hub Pro/Enterprise)
Social Proof Pro by Studio Nope