Creating Display Widgets
Transform your testimonials into beautiful, conversion-driving website widgets
Widgets are the primary way to display your testimonials on your website. They automatically pull approved testimonials from your workspace and present them in beautiful, customizable layouts that match your brand. This guide covers everything from choosing the right widget type to advanced customization and embedding.
Understanding ProofLayer Widgets
A widget is a self-contained component that displays testimonials from your workspace. Widgets are:
Dynamic
Automatically updates when you approve new testimonials. No need to manually update your website.
Customizable
Control layout, colors, spacing, borders, shadows, and more to match your site's design perfectly.
Responsive
Automatically adapts to mobile, tablet, and desktop screens. Looks great on all devices.
Fast-Loading
Optimized code and CDN delivery ensure widgets load quickly without slowing down your site.
Widget Types: Choosing the Right Option
ProofLayer offers three widget types, each optimized for different use cases and user experiences:
Embed Widgets
Traditional embedded sections within your page content
Best For:
- Homepage testimonial sections
- Dedicated testimonials pages
- Landing page social proof
- About or case study pages
Advantages:
- Seamlessly integrated into page flow
- Always visible (not hidden behind click)
- Best for SEO (content in page)
- Full customization control
Popup Widgets
Click-triggered overlays that showcase testimonials
Best For:
- Long-form content pages
- Blog posts and articles
- Product pages with limited space
- Checkout process social proof
Advantages:
- Doesn't interrupt page layout
- Shows more testimonials at once
- Creates focused viewing experience
- Great for mobile optimization
Customization Options: Button text, button style, popup size, animation type, close behavior
Floating Widgets
Persistent buttons that stay visible as users scroll
Best For:
- SaaS product pages
- Long sales pages
- Documentation sites
- Multi-page funnels
Advantages:
- Always accessible while scrolling
- Non-intrusive presence
- High visibility without space cost
- Can follow user through journey
Position Options: Bottom right, bottom left, top right, top left, custom offset
Layout Options: Displaying Your Testimonials
Choose how testimonials are arranged within your widget. Each layout creates a different visual impact:
Grid Layout
- Style: Clean rows and columns
- Best For: Equal-importance testimonials
- Columns: 1-4 columns (responsive)
- Good For: Traditional layouts, easy scanning
Marquee Layout
- Style: Smooth horizontal scroll
- Best For: Showcasing many testimonials
- Options: Speed, direction, pause on hover
- Good For: Modern sites, lots of content
Masonry Layout
- Style: Pinterest-style staggered cards
- Best For: Varying testimonial lengths
- Advantage: No empty space, organic feel
- Good For: Text testimonials of different sizes
Spotlight Layout
- Style: Single testimonial with navigation
- Best For: Highlighting top testimonials
- Controls: Arrows, dots, auto-advance
- Good For: Limited space, video testimonials
Step-by-Step: Creating Your Widget
Navigate to Widget Creator
From your ProofLayer dashboard:
- Click "Widgets" in the main navigation
- Click "Create New Widget" button
- Select the workspace you want to pull testimonials from
You'll enter the interactive widget configurator with live preview.
Name Your Widget
Give your widget a descriptive name for internal organization:
- "Homepage Hero Section Widget"
- "Pricing Page Social Proof"
- "Product A Landing Page Testimonials"
- "Blog Sidebar Widget"
This name is only visible to you in the dashboard, not to site visitors.
Select Widget Type and Layout
Choose your widget type (Embed, Popup, or Floating) and layout (Grid, Marquee, Masonry, or Spotlight).
Popular Combinations:
- Embed + Grid: Classic, professional testimonials section
- Embed + Marquee: Dynamic, eye-catching social proof strip
- Popup + Masonry: Show many testimonials without cluttering page
- Floating + Spotlight: Persistent highlight of best testimonials
Filter and Select Testimonials
Control which testimonials appear in this widget:
By Status:
Only approved testimonials will be shown. Pending and rejected are excluded.
By Type:
Mix types for variety or focus on one type (e.g., video-only widget for maximum impact).
By Rating:
Show only high-rated testimonials for maximum social proof impact.
By Form:
Pull testimonials from specific forms only (useful if you have product-specific forms).
Manual Selection:
Hand-pick specific testimonials to feature (overrides automatic filters).
Great for curating your absolute best testimonials on critical pages.
Customize Appearance
Make the widget match your website's design. All changes preview in real-time.
Color Customization (Pro/Agency Plans):
Widget background
Testimonial text
Stars, borders, buttons
Individual card backgrounds
Spacing & Sizing:
Gap between testimonial cards (0-48px)
Internal card padding (8-48px)
Maximum widget width in pixels
Border & Shadow:
Typography:
Configure Display Options
Fine-tune how testimonials are displayed:
Display 1-5 star ratings on testimonial cards
Display profile images if uploaded by customers
Include company/organization with customer name
Display when testimonial was submitted (e.g., "2 months ago")
"Powered by ProofLayer" badge (required on Trial/Solo, removable on Pro/Agency)
Set Behavior Options
Control interactive behavior based on layout:
For Marquee Layout:
For Spotlight Layout:
Preview and Generate Embed Code
Use the live preview to see exactly how your widget will look. Once satisfied:
- Click "Generate Embed Code"
- Copy the provided HTML/JavaScript snippet
- Save your widget configuration
For detailed embedding instructions across different platforms, see our Widget Embedding Guide.
Widget Best Practices
Do's:
- ✓Test widgets on mobile devices before going live
- ✓Keep 5-10 testimonials minimum for best display
- ✓Match widget colors to your site's design system
- ✓Feature 5-star testimonials on critical pages
- ✓Update testimonials regularly to keep content fresh
Don'ts:
- ✗Don't show only 1-2 testimonials (looks sparse)
- ✗Don't use clashing colors that hurt readability
- ✗Don't auto-play video testimonials (annoying)
- ✗Don't slow marquee speed too much (boring)
- ✗Don't embed too many widgets on one page
Ready to Add Social Proof to Your Site?
Create beautiful, conversion-optimized testimonial widgets in minutes. No coding skills required!