Integration Guide

JavaScript Embed

Add beautiful testimonial widgets to any website with just a few lines of code. Works with all modern frameworks, CMSs, and static sites.

Quick Start

Get your Widget ID

Navigate to your dashboard, create or select a widget, and copy the Widget ID from the embed settings.

Go to Widgets

Add the container

Place a div element where you want the testimonials to appear.

HTML

<!-- Add this where you want testimonials -->
<div id="prooflayer-widget"></div>

Add the script

Include the ProofLayer script and initialize it with your Widget ID. Place this before the closing </body> tag.

JavaScript

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

Configuration Options

Option	Type	Default	Description
widgetId	string	required	Your unique widget identifier
container	string	'#prooflayer-widget'	CSS selector for the container element
theme	string	'light'	'light', 'dark', or 'auto' (system preference)
layout	string	'grid'	'grid', 'carousel', 'masonry', or 'list'
maxItems	number	12	Maximum number of testimonials to display
showRatings	boolean	true	Whether to display star ratings
showAvatars	boolean	true	Whether to display user avatars

Full Example

Complete Integration

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Website</title>
</head>
<body>
  <!-- Your website content -->

  <section id="testimonials">
    <h2>What Our Customers Say</h2>
    <div id="prooflayer-widget"></div>
  </section>

  <!-- ProofLayer Widget -->
  <script src="https://cdn.prooflayer.app/widget.js"></script>
  <script>
    ProofLayer.init({
      widgetId: 'wgt_abc123xyz',
      container: '#prooflayer-widget',
      theme: 'light',
      layout: 'masonry',
      maxItems: 9,
      showRatings: true,
      showAvatars: true
    });
  </script>
</body>
</html>

Framework-Specific Guides

React / Next.js

Use useEffect or dynamic import

Vue.js

Mount in onMounted lifecycle

WordPress

Add to theme footer or use plugin

Webflow

Use custom code embed block

Security Note

Your Widget ID is safe to use in client-side code. It only allows reading approved testimonials from your widget. No sensitive data can be accessed or modified using this ID.