React

1. Get your wall ID

Open the wall builder in your Laudica dashboard. Click the Embed Code tab — your wall ID is displayed at the top.

2. Create the embed component

Create a reusable component that wraps the Laudica iframe. It listens for laudica-resize events so the iframe automatically matches its content height:

import { useEffect, useRef } from "react";

interface LaudicaWallProps {
  wallId: string;
  className?: string;
}

export function LaudicaWall({ wallId, className }: LaudicaWallProps) {
  const ref = useRef<HTMLIFrameElement>(null);

  useEffect(() => {
    function onMsg(e: MessageEvent) {
      if (e.data?.type === "laudica-resize" && ref.current) {
        ref.current.style.height = e.data.height + "px";
      }
    }
    window.addEventListener("message", onMsg);
    return () => window.removeEventListener("message", onMsg);
  }, []);

  return (
    <iframe
      ref={ref}
      src={`https://app.laudica.com/embed/${wallId}`}
      style={{ width: "100%", border: "none", minHeight: 100, margin: "2rem 0" }}
      scrolling="no"
      loading="lazy"
      title="Laudica testimonials"
      className={className}
    />
  );
}

3. Use it in your app

Import and render the component anywhere in your app:

import { LaudicaWall } from "./laudica-wall";

export default function TestimonialsPage() {
  return (
    <section>
      <h2>What our customers say</h2>
      <LaudicaWall wallId="YOUR_WALL_ID" />
    </section>
  );
}

Tips

• Dynamic wall IDs — pass different wall IDs as props to show different walls on different pages.
• Next.js / SSR — the iframe renders on the server as an empty frame and hydrates on the client. No special SSR handling needed.
• Domain allowlisting — add localhost to your allowed domains during development.