Integration Guide

HTML/CSS Export

Export your testimonials as standalone HTML and CSS files. Perfect for static sites, offline use, or when you need complete control over the markup.

Why Export?

Full Control

Modify every line of HTML and CSS to match your exact needs.

Zero Dependencies

No JavaScript required. Pure HTML and CSS that works everywhere.

SEO Friendly

Static content is fully indexable by search engines.

Offline Compatible

Works without an internet connection once embedded.

How to Export

Open your widget

Navigate to the widget you want to export from your dashboard.

Click Export

In the widget settings, click the "Export as HTML/CSS" button.

Export as HTML/CSS

Configure options

Choose your export preferences before downloading.

Download & integrate

Download the ZIP file containing all HTML, CSS, and assets. Unzip and add to your project.

Export Options

Option	Description
Include images	Download avatar images locally or use CDN links
Minify CSS	Compress CSS for smaller file size
Inline styles	Embed CSS directly in HTML (single file)
Custom class prefix	Add prefix to avoid CSS conflicts (e.g., pl-card)
Responsive breakpoints	Include media queries for mobile/tablet

File Structure

The exported ZIP contains:

prooflayer-export/

index.html- Main testimonial markup

styles.css- Widget styles

images/- Avatar images (if included)

avatar-1.jpg

avatar-2.jpg

...

Sample Output

index.html

<div class="pl-testimonials">
  <div class="pl-card">
    <div class="pl-rating">
      <span class="pl-star">★</span>
      <span class="pl-star">★</span>
      <span class="pl-star">★</span>
      <span class="pl-star">★</span>
      <span class="pl-star">★</span>
    </div>
    <p class="pl-quote">
      "This product completely transformed our workflow.
      Highly recommend to any team looking to scale."
    </p>
    <div class="pl-author">
      <img src="images/avatar-1.jpg" class="pl-avatar" alt="">
      <div class="pl-info">
        <span class="pl-name">Sarah Johnson</span>
        <span class="pl-title">CEO at TechCorp</span>
      </div>
    </div>
  </div>
  <!-- More testimonials... -->
</div>

styles.css

.pl-testimonials {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

.pl-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}

.pl-rating {
  color: #f59e0b;
  margin-bottom: 0.75rem;
}

.pl-quote {
  color: #374151;
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1rem;
}

/* ... more styles */

Customization Tips

CSS Variables

The exported CSS uses CSS custom properties for colors. Change --pl-primary to update the accent color throughout.

BEM Naming

Classes follow BEM methodology (Block__Element--Modifier) making them easy to override without specificity wars.

Responsive by Default

The grid layout automatically adjusts columns based on container width. Customize breakpoints in the media queries.

Dark Mode Ready

Add a .dark class to the parent container to enable dark mode styles (included in export).