Integration Guide

Complete guide for integrating the TestiFlow testimonial widget into your website

Quick Start

Add this single line before </body> in your HTML:

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

What you get:

"Give Testimonial" button appears automatically
Users can submit testimonials
All configuration done in dashboard

Complete Example (Button + Display)

Complete working example with button and testimonials display:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Website</title>
    
    <!-- CSP: Add this if your site uses Content Security Policy -->
    <meta http-equiv="Content-Security-Policy" 
          content="script-src 'self' 'unsafe-inline' https://testiflow.site; 
                   connect-src 'self' https://testiflow.site;">
    
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        #testimonials-container {
            margin: 40px 0;
        }
    </style>
</head>
<body>
    <h1>Welcome to Our Website</h1>
    
    <!-- Testimonials will display here -->
    <h2>What Our Customers Say</h2>
    <div id="testimonials-container"></div>
    
    <!-- Load Testimonial Script -->
    <script 
        src="https://testiflow.site/script.js" 
        data-site-id="your-site-id-here">
    </script>
    
    <!-- Display Testimonials -->
    <script>
        let widgetInstance = null;
        let isDisplaying = false;
        
        async function displayTestimonials() {
            if (isDisplaying) return;
            isDisplaying = true;
            
            try {
                await new Promise(resolve => setTimeout(resolve, 2000));
                
                if (!window.TestimonialWidget) {
                    setTimeout(displayTestimonials, 2000);
                    isDisplaying = false;
                    return;
                }
                
                const container = document.getElementById('testimonials-container');
                if (container) container.innerHTML = '';
                
                if (!widgetInstance) {
                    widgetInstance = new window.TestimonialWidget(
                        'your-site-id-here',
                        'https://testiflow.site'
                    );
                }
                
                await widgetInstance.displayTestimonials('testimonials-container', {
                    layout: 'grid',      // 'grid', 'list', or 'carousel'
                    limit: 6,            // Number to show
                    showRating: true,    // Show ratings
                    showAuthor: true     // Show author info
                });
            } catch (error) {
                console.error('Error displaying testimonials:', error);
            } finally {
                isDisplaying = false;
            }
        }
        
        window.addEventListener('load', displayTestimonials, { once: true });
    </script>
</body>
</html>

Button Only Setup

If you only want the submission button (no display):

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>My Website</title>
    
    <!-- CSP: Only if your site uses CSP -->
    <meta http-equiv="Content-Security-Policy" 
          content="script-src 'self' 'unsafe-inline' https://testiflow.site; 
                   connect-src 'self' https://testiflow.site;">
</head>
<body>
    <h1>Welcome</h1>
    <p>Click the button to leave a testimonial!</p>
    
    <!-- Just add the script tag - button appears automatically -->
    <script 
        src="https://testiflow.site/script.js" 
        data-site-id="your-site-id-here">
    </script>
</body>
</html>

Display Testimonials Options

Grid Layout (Default)

await widgetInstance.displayTestimonials('container-id', {
    layout: 'grid',
    limit: 6,
    showRating: true,
    showAuthor: true
});

List Layout

await widgetInstance.displayTestimonials('container-id', {
    layout: 'list',
    limit: 10,
    showRating: true,
    showAuthor: true
});

Carousel Layout

await widgetInstance.displayTestimonials('container-id', {
    layout: 'carousel',
    limit: 5,
    showRating: true,
    showAuthor: true
});

Configuration

All customization is done in your Dashboard, not in code:

•Button: Position, color, text, size, shape
•Form: Fields, layout, styling
•Theme: Colors, fonts, border radius
•Display: Component style, grid/list/carousel settings

Visit your dashboard to customize!

Troubleshooting

Script blocked by CSP?

If you see "blocked:csp" error, add this meta tag to your <head>:

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

Button not appearing?

Check dashboard: Is button enabled?
Check browser console (F12) for errors
Verify script loaded in Network tab

Testimonials not showing?

Publish testimonials in dashboard first
Check container ID matches in HTML
Wait a few seconds after page load
Check browser console for errors

Duplicate testimonials?

Make sure to:

Clear container before displaying: container.innerHTML = '';
Use isDisplaying flag to prevent multiple calls
Use { once: true } on event listeners