React Embed Guide

Integrate PraiseLane testimonials into your React application with a custom hook or component.

Setup Steps

Create a PraiseLane component

Create a component that loads the embed script dynamically using useEffect.

import { useEffect, useRef } from 'react';

function PraiseLaneWidget({ projectSlug, mode = 'popup' }) {
  const containerRef = useRef(null);

  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://yourapp.com/embed.min.js';
    script.setAttribute('data-project', projectSlug);
    script.setAttribute('data-mode', mode);
    script.defer = true;

    if (mode === 'inline' && containerRef.current) {
      script.setAttribute(
        'data-inline-target',
        '#praiselane-inline'
      );
    }

    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    };
  }, [projectSlug, mode]);

  if (mode === 'inline') {
    return <div id="praiselane-inline" ref={containerRef} />;
  }

  return null;
}

export default PraiseLaneWidget;

Use the component

Import and use the component in your page.

import PraiseLaneWidget from './PraiseLaneWidget';

function ProductPage() {
  return (
    <div>
      <h1>Our Product</h1>
      {/* Popup notifications */}
      <PraiseLaneWidget projectSlug="my-project" />

      {/* Inline testimonial feed */}
      <PraiseLaneWidget
        projectSlug="my-project"
        mode="inline"
      />
    </div>
  );
}

Collection form component

Create a similar component for the collection widget.

import { useEffect } from 'react';

function PraiseLaneCollectForm({ projectSlug, mode = 'inline' }) {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://yourapp.com/collect-embed.js';
    script.setAttribute('data-project', projectSlug);
    script.setAttribute('data-mode', mode);

    document.body.appendChild(script);
    return () => {
      document.body.removeChild(script);
    };
  }, [projectSlug, mode]);

  return null;
}

export default PraiseLaneCollectForm;

Configure allowed domains

Add your React app domain to the allowed domains in PraiseLane project settings.

For local development, add localhost:3000 (or your dev server port).

Is My Embed Working?

Run through this checklist to verify your embed is set up correctly:

Component mounts only once per page
Script cleanup runs on unmount
Domain is in allowed domains
data-project slug is correct
At least one approved testimonial exists
No duplicate script tags in the DOM

Troubleshooting

Widget loads multiple times on navigation

The useEffect cleanup function should remove the script. Make sure the component unmounts properly on route changes.

Hydration mismatch (SSR)

If using SSR (Next.js, Remix), load the script only on the client side. See the Next.js guide for details.

Widget not updating when projectSlug prop changes

The useEffect dependency array includes projectSlug, so it will re-run. However, you may need to call window.PraiseLaneProof.trigger("reload") to refresh the data.

Other Platform Guides

Back to Embed Documentation