Integration Guide

Everything TestiFlow provides and how to embed it on your website.

Features included

Collect

Video & text testimonials
Modal, drawer, or page flow
Shareable /collect link
Custom form & branding

Display

Wall of Love (public SEO URL)
8 layouts & 8 themes
Declarative data-testiflow-wall
Iframe auto-resize embeds

Developer

embed.js / script.js
@testiflow/react SDK
Public REST API
Analytics events

1. Collect testimonials

Paste before </body>. Button, modal/drawer, and form are configured in the dashboard.

<script src="https://testiflow.site/embed.js" data-site-id="your-site-id-here" async></script>

Collect link: https://testiflow.site/collect/your-site-id-here

2. Display — Wall of Love (declarative)

Recommended. Auto-renders published testimonials. Publish them in the dashboard first.

<div
  data-testiflow-wall="your-site-id-here"
  data-layout="grid"
  data-theme="saas"
  data-limit="12"
>
</div>
<script src="https://testiflow.site/embed.js" async></script>

Layouts

grid, carousel, marquee, list, bento, masonry, floating, columns

Themes

minimal, glass, bold, saas, dark, warm, ocean, sunset

3. Display — Iframe (WordPress, Webflow)

Auto-resizing iframe. Also available in dashboard → Embed Studio.

<script src="https://cdn.jsdelivr.net/npm/iframe-resizer@4.3.9/js/iframeResizer.min.js"></script>
<iframe
  id="testiflow-wall"
  src="https://testiflow.site/embed/w/your-site-id-here?theme=saas&layout=grid"
  title="TestiFlow Wall of Love"
  style="width:100%;border:0;min-height:400px"
  loading="lazy"
></iframe>
<script>iFrameResize({ log: false, checkOrigin: false }, '#testiflow-wall');</script>

Public SEO page: https://testiflow.site/w/your-public-slug

4. React / Next.js

Package: @testiflow/react (see packages/react in repo)

import { TestiflowWall } from '@testiflow/react';

export default function Page() {
  return <TestiflowWall siteId="your-site-id-here" layout="bento" theme="saas" limit={12} />;
}

Next.js integration page

Dashboard configuration

Customize in the app — not in embed code:

• Embed Studio — copy all snippet types
• Configuration — button, flow type, Wall of Love slug & layout
• Theme — colors, fonts, border radius
• Builder — form fields & display component
• Testimonials — approve & publish before they appear on site
• Analytics — views, clicks, submissions, wall views

API endpoints

GET /api/public/walls/{slug} — public wall JSON

GET /api/testimonials?siteId= — published testimonials

GET /api/config/{siteId} — widget config

POST /api/analytics/events — track wall_view, button_click, etc.

POST /api/ai/enrich — AI summary & tags (auth required)

Troubleshooting

CSP blocked?

<meta http-equiv="Content-Security-Policy" 
      content="script-src 'self' 'unsafe-inline' https://testiflow.site https://cdn.jsdelivr.net; 
               connect-src 'self' https://testiflow.site; 
               frame-src https://testiflow.site;">

Testimonials not showing?

Publish testimonials in dashboard (not draft)
Check site ID matches your account
Use embed.js (not only legacy script.js)

Iframe height wrong?

Use iframe-resizer snippet from Embed Studio — avoid fixed 800px height.