Embedding Testimonials on Your Website: Developer's Guide

You've collected testimonials. Now you need to display them on your website. This guide covers everything from simple embeds to advanced customization across all major platforms.

Quick Start: Universal Embed Code

GetProofz provides a simple script tag that works everywhere:

That's it. The widget automatically:

Loads your approved testimonials

Displays them in a responsive layout

Handles pagination/infinite scroll

Works on mobile and desktop

Customization via data attributes:

Let's go deeper. ---

Platform-Specific Guides

1. WordPress

#### Method A: Widget Plugin (Easiest)

Install "Custom HTML" widget

Go to Appearance → Widgets

Add "Custom HTML" widget to your sidebar/footer

Paste embed code:

Done! Widget appears on all pages where sidebar is visible. #### Method B: Shortcode (Flexible) Create custom shortcode in functions.php:

function getproofz_widget_shortcode($atts) {
    $atts = shortcode_atts(array(
        'project' => '',
        'layout' => 'carousel',
        'limit' => '5',
    ), $atts);

    return '
    

    
    ';
}
add_shortcode('getproofz', 'getproofz_widget_shortcode');

Usage in posts/pages:

[getproofz project="your-slug" layout="grid" limit="6"]

#### Method C: Gutenberg Block (Advanced) Create custom Gutenberg block:

// src/getproofz-block.js
import { registerBlockType } from '@wordpress/blocks';

registerBlockType('getproofz/testimonials', {
    title: 'GetProofz Testimonials',
    icon: 'star-filled',
    category: 'widgets',
    attributes: {
        projectSlug: { type: 'string' },
        layout: { type: 'string', default: 'carousel' },
    },
    edit: (props) => {
        return (
            

                 props.setAttributes({ projectSlug: e.target.value })}
                />
                {/* Layout selector */}
            
        );
    },
    save: (props) => {
        return (
            

        );
    },
});

Advantages:

Visual editor integration

Easy for non-technical users

Reusable across pages

---

2. Webflow

#### Embed Widget

Drag Embed element onto canvas

Paste code:

Publish

Styling in Webflow: Wrap in a div with Webflow class:

Then style .testimonials-section in Webflow designer. Note: Webflow doesn't allow external script in normal embeds. Use Page Settings → Custom Code (in ) for the script tag. ---

3. Shopify

#### Add to Theme Option A: Theme Editor

Go to Online Store → Themes → Customize

Add Custom HTML section

Paste embed code

Option B: Edit theme files (more control)

Online Store → Themes → Actions → Edit Code

Open template file (e.g., templates/page.liquid)

Paste where you want testimonials:

{% comment %} GetProofz Testimonials {% endcomment %}


{% comment %} Load script once per page {% endcomment %}
{% unless content_for_header contains 'proof.js' %}
  
{% endunless %}

Add setting to theme settings: In config/settings_schema.json:

{
  "name": "GetProofz",
  "settings": [
    {
      "type": "text",
      "id": "getproofz_project_slug",
      "label": "Project Slug",
      "info": "Your GetProofz project slug"
    }
  ]
}

Now theme users can configure project slug in theme settings. ---

4. Squarespace

Edit page where you want testimonials

Add Code Block

Paste embed code:

Styling: Squarespace auto-styles based on site theme. To override:

---

5. React / Next.js

#### React Component

// components/TestimonialsWidget.tsx
'use client' // Next.js 13+ App Router

import { useEffect } from 'react'

interface Props {
  projectSlug: string
  layout?: 'carousel' | 'grid' | 'list'
  limit?: number
  theme?: 'light' | 'dark'
}

export function TestimonialsWidget({
  projectSlug,
  layout = 'carousel',
  limit = 5,
  theme = 'light'
}: Props) {
  useEffect(() => {
    // Load script if not already loaded
    if (!document.getElementById('getproofz-script')) {
      const script = document.createElement('script')
      script.id = 'getproofz-script'
      script.src = 'https://getproofz.com/widget/v1/proof.js'
      script.defer = true
      document.body.appendChild(script)
    }

    // Reinitialize widget when props change
    if (window.GetProofz) {
      window.GetProofz.init()
    }
  }, [projectSlug, layout, limit])

  return (
    

  )
}

Usage:

// app/page.tsx
import { TestimonialsWidget } from '@/components/TestimonialsWidget'

export default function HomePage() {
  return (
    

      
Customer Testimonials
      
    
  )
}

#### SSR Considerations Widget loads client-side (requires window object). For Next.js:

import dynamic from 'next/dynamic'

const TestimonialsWidget = dynamic(
  () => import('@/components/TestimonialsWidget'),
  { ssr: false }
)

---

6. Vue.js / Nuxt

#### Vue Component

Usage:

---

Advanced Customization

Layout Options

GetProofz supports 3 layouts: #### 1. Carousel (Default)

Auto-scrolling slider

Prev/Next arrows

Pagination dots

Touch/swipe support

Best for: Homepage hero, landing pages #### 2. Grid

Responsive grid (3 cols desktop, 2 tablet, 1 mobile)

Optional infinite scroll

Masonry layout option

Best for: Testimonials page, case studies #### 3. List

Vertical stack

Alternating photo positions

Quote icons

Best for: Long-form content, blog posts

Filtering & Sorting

#### Filter by Rating

Show only 4-5 star testimonials. #### Filter by Tag

Show testimonials with specific tags. #### Sort Order

Theming

#### Built-in Themes

#### Custom CSS Override widget styles:

/* Target widget container */
#getproofz-widget {
  --testimonial-bg: #f9f9f9;
  --testimonial-text: #333;
  --testimonial-border: #ddd;
  --testimonial-radius: 8px;
}

/* Individual testimonial cards */
.getproofz-testimonial {
  background: var(--testimonial-bg);
  color: var(--testimonial-text);
  border: 1px solid var(--testimonial-border);
  border-radius: var(--testimonial-radius);
  padding: 24px;
}

/* Customer photos */
.getproofz-photo {
  width: 64px;
  height: 64px;
  border-radius: 50%;
}

/* Customer name */
.getproofz-name {
  font-weight: 600;
  font-size: 16px;
}

/* Company/title */
.getproofz-company {
  font-size: 14px;
  color: #666;
}

/* Star rating */
.getproofz-rating {
  color: #ffb800; /* Star color */
}

JavaScript API

For advanced control:

// Initialize widget programmatically
GetProofz.init({
  container: '#getproofz-widget',
  project: 'your-slug',
  layout: 'grid',
  limit: 6,
  onLoad: (testimonials) => {
    console.log('Loaded testimonials:', testimonials)
  },
  onError: (error) => {
    console.error('Widget error:', error)
  }
})

// Refresh widget (fetch new testimonials)
GetProofz.refresh()

// Destroy widget
GetProofz.destroy()

---

Performance Optimization

Lazy Loading

Widget automatically lazy-loads by default, but you can control it:

Caching

Testimonials are cached in browser for 1 hour. To force refresh:

Image Optimization

Photos are automatically:

Resized to correct dimensions

Converted to WebP (with fallback)

Lazy-loaded

Served via CDN

Manual optimization:

Lower quality = faster load, but slightly worse photos. ---

Troubleshooting

Widget Not Showing

Check:

Project slug is correct: data-project="YOUR_PROJECT_SLUG"

Script is loaded: Check Network tab in browser DevTools

Container has ID: Must be id="getproofz-widget"

JavaScript enabled: Widget requires JS

No console errors: Check browser console

Debug mode:

Logs widget initialization to console.

Styling Issues

Common fixes:

/* Widget too wide */
#getproofz-widget {
  max-width: 1200px;
  margin: 0 auto;
}

/* Widget overlapping other content */
#getproofz-widget {
  position: relative;
  z-index: 1;
}

/* Photos not loading */
.getproofz-photo {
  object-fit: cover; /* Ensure photos fill circle */
}

Performance Issues

If widget loads slowly:

Reduce limit: data-limit="3" instead of data-limit="20"

Enable lazy load: data-lazy="true"

Lower image quality: data-image-quality="medium"

Check network: Widget requires external API call

---

Security Best Practices

Content Security Policy (CSP)

If using CSP headers, allow GetProofz:

Content-Security-Policy:
  script-src 'self' https://getproofz.com;
  img-src 'self' https://getproofz.com https://cdn.getproofz.com;
  connect-src 'self' https://api.getproofz.com;

HTTPS

Widget requires HTTPS in production. Local development (localhost) works with HTTP.

Sanitization

All testimonial content is sanitized server-side to prevent XSS. No client-side sanitization needed. ---

Conclusion

Embedding GetProofz testimonials is simple: Basic embed:

Platform-specific:

WordPress: Use shortcode or widget

Webflow: Embed element + custom code

Shopify: Edit theme files

React/Next.js: Use component with useEffect

Vue/Nuxt: Use component with onMounted

Customization:

3 layouts: carousel, grid, list

Filtering by rating, tags, custom logic

Theming: light, dark, minimal, or custom CSS

JavaScript API for advanced control

Performance:

Lazy loading by default

Auto-optimized images

CDN delivery

Browser caching

--- Need help? GetProofz documentation has full API reference and video tutorials. [View docs →](https://getproofz.com/docs)