ProofLayer - Get Your First Users & Build Social Proof

Once you've created your perfect widget, it's time to embed it on your website. This comprehensive guide covers everything from basic HTML embedding to platform-specific integrations including WordPress, Webflow, React, and more. Whether you're a developer or non-technical user, we've got you covered.

Understanding the Embed Code

ProofLayer widgets use a simple two-part embed system that works on any website:

Container DIV

A placeholder element where the widget will be inserted. The ID must be unique on your page.

Initialization Script

Loads the widget library and tells it which widget to display and where to put it.

Performance Note: The widget script is lightweight (~15KB) and loads asynchronously, so it won't block your page load or affect Core Web Vitals scores.

Method 1: Basic HTML/JavaScript Embedding

This method works for any website where you can add custom HTML/JavaScript code.

Copy Your Embed Code

From your ProofLayer dashboard:

Go to Widgets
Find the widget you want to embed
Click "Get Embed Code"
Click "Copy to Clipboard"

Paste Into Your HTML

Open your website's HTML file or page editor and paste the code where you want the widget to appear:

Code

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
</head>
<body>
  <header>
    <!-- Your header content -->
  </header>

  <main>
    <h1>What Our Customers Say</h1>

    <!-- PASTE PROOFLAYER WIDGET CODE HERE -->
    <div id="prooflayer-widget-abc123"></div>
    <script src="https://cdn.prooflayer.com/widget.js"></script>
    <script>
      ProofLayer.init({
        widgetId: 'abc123',
        container: '#prooflayer-widget-abc123'
      });
    </script>
    <!-- END WIDGET CODE -->

  </main>

  <footer>
    <!-- Your footer content -->
  </footer>
</body>
</html>

Save and Test

Save your HTML file and load it in a browser. The widget should appear immediately with your testimonials.

Troubleshooting:

Widget not appearing? Check browser console for JavaScript errors
Layout broken? Ensure the container div has enough space
Testimonials not loading? Verify you have approved testimonials in that workspace

Method 2: WordPress Integration

WordPress users have multiple ways to embed ProofLayer widgets, from simple copy-paste to shortcode integration.

Using the Custom HTML Block (Easiest)

WordPress's block editor makes embedding widgets incredibly simple:

Edit your page or post in WordPress
Click the "+" button to add a new block where you want the widget
Search for "Custom HTML" and select it
Paste your ProofLayer embed code into the HTML block
Click "Preview" to see the widget in action
Publish or Update your page

Screenshot description: The WordPress block editor showing a Custom HTML block with ProofLayer embed code pasted inside, followed by a preview of the rendered testimonial widget.

Using Theme Customizer (Site-Wide Widget)

To add a widget to your footer, sidebar, or other site-wide location:

Go to Appearance → Customize
Navigate to Widgets
Select the widget area (e.g., "Footer," "Sidebar")
Add a Custom HTML widget
Paste your ProofLayer embed code
Click Publish

Using Theme Header/Footer Hooks

For developers or advanced users using themes with hook support:

Go to Appearance → Theme File Editor (or use FTP)
Open functions.php
Add the following code:

Code

<?php
// Add ProofLayer widget to footer
function prooflayer_add_widget_to_footer() {
  ?>
  <div id="prooflayer-widget-abc123"></div>
  <script src="https://cdn.prooflayer.com/widget.js"></script>
  <script>
    ProofLayer.init({
      widgetId: 'abc123',
      container: '#prooflayer-widget-abc123'
    });
  </script>
  <?php
}
add_action('wp_footer', 'prooflayer_add_widget_to_footer');
?>

Page Builders (Elementor, Divi, Beaver Builder)

Most page builders have HTML or code modules:

Elementor:

Add an HTML widget, paste your ProofLayer code, and style the container with Elementor's visual editor.

Divi Builder:

Use the Code module, paste your embed code, and customize the section background/padding.

Beaver Builder:

Add an HTML module to your layout and paste the ProofLayer widget code.

Avoid pasting the embed code directly into the WordPress visual editor (WYSIWYG). Always use the "Custom HTML" block or "Text" mode to preserve the code structure.

Method 3: Webflow Integration

Webflow's visual builder makes widget embedding straightforward with its Embed element.

Add an Embed Element

Open your Webflow project and navigate to the page
From the Add Panel, drag an Embed element onto your page
Place it where you want the testimonials to appear

Paste Your Widget Code

Double-click the Embed element to open the code editor
Paste your complete ProofLayer embed code
Click "Save & Close"

Style the Container (Optional)

You can add custom styling to the Embed wrapper:

Add padding or margin around the widget
Set a maximum width for the widget container
Add background colors or borders to the section

Name your Embed element "ProofLayer Testimonials" for easy identification in your Webflow Navigator panel.

Publish Your Site

Click Publish in the top right. The widget will be live on your published site immediately.

Note: The widget preview may not work perfectly in Webflow Designer mode, but it will function correctly on the published site.

Method 4: React Integration

For React applications, you'll need to load the widget script and initialize it after component mount.

Create a ProofLayer Component

Create a reusable React component for your testimonials widget:

Code

// components/ProofLayerWidget.jsx
import { useEffect } from 'react';

export default function ProofLayerWidget({ widgetId }) {
  useEffect(() => {
    // Load ProofLayer script
    const script = document.createElement('script');
    script.src = 'https://cdn.prooflayer.com/widget.js';
    script.async = true;

    script.onload = () => {
      // Initialize widget after script loads
      if (window.ProofLayer) {
        window.ProofLayer.init({
          widgetId: widgetId,
          container: `#prooflayer-widget-${widgetId}`
        });
      }
    };

    document.body.appendChild(script);

    // Cleanup function
    return () => {
      document.body.removeChild(script);
    };
  }, [widgetId]);

  return (
    <div
      id={`prooflayer-widget-${widgetId}`}
      className="prooflayer-container"
    />
  );
}

Use the Component in Your App

Import and use the ProofLayer component anywhere in your React app:

Code

// pages/Home.jsx
import ProofLayerWidget from '../components/ProofLayerWidget';

export default function Home() {
  return (
    <div>
      <header>
        <h1>Welcome to Our Product</h1>
      </header>

      <main>
        <section className="testimonials-section">
          <h2>What Our Customers Say</h2>
          <ProofLayerWidget widgetId="abc123" />
        </section>
      </main>

      <footer>
        {/* Footer content */}
      </footer>
    </div>
  );
}

Advanced: Multiple Widgets

If you need multiple widgets on the same page, load the script once and initialize multiple instances:

Code

// components/ProofLayerWidget.jsx (optimized version)
import { useEffect, useRef } from 'react';

// Track if script is already loaded
let scriptLoaded = false;
const loadingPromise = null;

function loadScript() {
  if (scriptLoaded) return Promise.resolve();
  if (loadingPromise) return loadingPromise;

  loadingPromise = new Promise((resolve) => {
    const script = document.createElement('script');
    script.src = 'https://cdn.prooflayer.com/widget.js';
    script.async = true;
    script.onload = () => {
      scriptLoaded = true;
      resolve();
    };
    document.body.appendChild(script);
  });

  return loadingPromise;
}

export default function ProofLayerWidget({ widgetId, className = '' }) {
  const containerRef = useRef(null);

  useEffect(() => {
    loadScript().then(() => {
      if (window.ProofLayer && containerRef.current) {
        window.ProofLayer.init({
          widgetId: widgetId,
          container: `#prooflayer-widget-${widgetId}`
        });
      }
    });
  }, [widgetId]);

  return (
    <div
      ref={containerRef}
      id={`prooflayer-widget-${widgetId}`}
      className={`prooflayer-container ${className}`}
    />
  );
}

Next.js Users: This component works perfectly in Next.js. Just ensure you're importing it only on the client side if using server-side rendering (SSR).

Method 5: Shopify Integration

Add testimonials to your Shopify store to build trust and increase conversions.

Edit Your Theme

From your Shopify admin, go to Online Store → Themes
Click Customize on your active theme
Navigate to the page where you want to add testimonials

Add Custom HTML Section

Click "Add section"
Select "Custom HTML" or "Custom Liquid"
Paste your ProofLayer embed code
Click Save

Alternative: Theme Code Editor

For more control, edit your theme files directly:

Go to Online Store → Themes → Actions → Edit Code
Find the template file (e.g., sections/footer.liquid)
Add your ProofLayer embed code
Click Save

Code

<!-- sections/testimonials.liquid -->
<div class="testimonials-section">
  <h2>{{ section.settings.heading }}</h2>

  <div id="prooflayer-widget-abc123"></div>
  <script src="https://cdn.prooflayer.com/widget.js"></script>
  <script>
    ProofLayer.init({
      widgetId: 'abc123',
      container: '#prooflayer-widget-abc123'
    });
  </script>
</div>

{% schema %}
{
  "name": "Customer Testimonials",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Section Heading",
      "default": "What Our Customers Say"
    }
  ]
}
{% endschema %}

Method 6: Squarespace Integration

Add Code Block

Edit the page where you want testimonials
Click an insert point and choose Code from the block menu
Paste your ProofLayer embed code
Click Apply

Adjust Block Settings

Click the code block to access settings
Ensure "Display Source" is OFF
Adjust spacing/padding as needed

Method 7: Wix Integration

Add HTML Embed Element

In Wix Editor, click Add (+)
Navigate to Embed → HTML iframe
Drag the HTML element to your page
Click "Enter Code"
Paste your ProofLayer embed code
Click Update

Wix's iframe embedding may have height limitations. If your widget appears cut off, increase the iframe height in the Wix element settings.

Troubleshooting Common Issues

Widget doesn't appear at all

Possible causes:

JavaScript blocked by browser or ad blocker - check console for errors
Incorrect widget ID - verify the ID matches your widget in ProofLayer dashboard
Container ID mismatch - ensure container div ID matches initialization script
No approved testimonials - check that you have testimonials approved in your workspace

Widget appears but testimonials don't load

Solutions:

Verify you have approved testimonials in your workspace
Check widget filter settings (you may have filtered out all testimonials)
Ensure your widget status is "Active" in the dashboard
Try hard refreshing your browser (Ctrl+Shift+R or Cmd+Shift+R)

Widget layout is broken or overlapping

Solutions:

Ensure the container div has enough width (at least 300px recommended)
Check for CSS conflicts from your site's styles
Add clear: both; to the widget container to fix float issues
Inspect the element in browser dev tools to identify conflicting styles

Multiple widgets on one page conflict

Solutions:

Ensure each widget has a unique container ID
Only include the ProofLayer script once per page (not once per widget)
Initialize each widget separately with unique container selectors

Code

<!-- Load script once -->
<script src="https://cdn.prooflayer.com/widget.js"></script>

<!-- Initialize multiple widgets -->
<div id="widget-1"></div>
<div id="widget-2"></div>

<script>
  ProofLayer.init({ widgetId: 'abc123', container: '#widget-1' });
  ProofLayer.init({ widgetId: 'def456', container: '#widget-2' });
</script>

Widget slows down my page

Solutions:

ProofLayer widgets are designed to be lightweight (~15KB)
Scripts load asynchronously and shouldn't block rendering
If issues persist, use lazy loading: only load widget when scrolled into view
Contact support if you suspect a performance issue

Widget doesn't update with new testimonials

Solutions:

Widgets update automatically - no code changes needed
Clear your browser cache or hard refresh (Ctrl+Shift+R)
Check that new testimonials are "Approved" status
Ensure testimonials match your widget's filter criteria

Advanced Embedding Techniques

Lazy Loading for Performance

Load widgets only when they're scrolled into view to improve initial page load:

Code

<div id="prooflayer-widget-abc123" class="lazy-widget"></div>

<script>
  // Intersection Observer for lazy loading
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        // Load ProofLayer when widget comes into view
        const script = document.createElement('script');
        script.src = 'https://cdn.prooflayer.com/widget.js';
        script.onload = () => {
          ProofLayer.init({
            widgetId: 'abc123',
            container: '#prooflayer-widget-abc123'
          });
        };
        document.body.appendChild(script);
        observer.disconnect();
      }
    });
  });

  observer.observe(document.getElementById('prooflayer-widget-abc123'));
</script>

Dynamic Widget Switching

Switch between different widgets based on user actions or page state:

Code

<div id="prooflayer-widget-container"></div>

<button onclick="showWidget('abc123')">Product A Testimonials</button>
<button onclick="showWidget('def456')">Product B Testimonials</button>

<script src="https://cdn.prooflayer.com/widget.js"></script>
<script>
  function showWidget(widgetId) {
    // Clear existing widget
    document.getElementById('prooflayer-widget-container').innerHTML = '';

    // Initialize new widget
    ProofLayer.init({
      widgetId: widgetId,
      container: '#prooflayer-widget-container'
    });
  }

  // Load default widget
  showWidget('abc123');
</script>

Custom Styling with CSS

Add custom CSS to further style the widget container:

Code

<style>
  #prooflayer-widget-abc123 {
    max-width: 1200px;
    margin: 60px auto;
    padding: 0 20px;
  }

  /* Add section background */
  .testimonials-section {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 80px 0;
  }

  /* Responsive adjustments */
  @media (max-width: 768px) {
    #prooflayer-widget-abc123 {
      margin: 30px auto;
      padding: 0 15px;
    }
  }
</style>

<section class="testimonials-section">
  <h2 style="text-align: center; color: white; margin-bottom: 40px;">
    What Our Customers Say
  </h2>
  <div id="prooflayer-widget-abc123"></div>
</section>

<script src="https://cdn.prooflayer.com/widget.js"></script>
<script>
  ProofLayer.init({
    widgetId: 'abc123',
    container: '#prooflayer-widget-abc123'
  });
</script>

Need Help With Embedding?

Our support team can help you integrate ProofLayer widgets on any platform, or even custom-code a solution for your specific needs.

Contact Support Back to Widget Creation

Embedding Widgets on Your Website

Understanding the Embed Code

Container DIV

Initialization Script

Method 1: Basic HTML/JavaScript Embedding

Copy Your Embed Code

Paste Into Your HTML

Save and Test

Method 2: WordPress Integration

Using the Custom HTML Block (Easiest)

Using Theme Customizer (Site-Wide Widget)

Using Theme Header/Footer Hooks

Page Builders (Elementor, Divi, Beaver Builder)

Method 3: Webflow Integration

Add an Embed Element

Paste Your Widget Code

Style the Container (Optional)

Publish Your Site

Method 4: React Integration

Create a ProofLayer Component

Use the Component in Your App

Advanced: Multiple Widgets

Method 5: Shopify Integration

Edit Your Theme

Add Custom HTML Section

Alternative: Theme Code Editor

Method 6: Squarespace Integration

Add Code Block

Adjust Block Settings

Method 7: Wix Integration

Add HTML Embed Element

Troubleshooting Common Issues

Advanced Embedding Techniques

Lazy Loading for Performance

Dynamic Widget Switching

Custom Styling with CSS

Need Help With Embedding?