Embed Raylove

Drop a live wall of customer love onto your site.

Three formats, one snippet each. Paste the iframe wherever you can put HTML — Framer, Webflow, plain HTML, React. The widget pulls fresh quotes from Raylove, anonymized, every load. No SDK, no auth, no extra request from your team.

Band

100% × 280px

Single hero quote with subtle pagination. Auto-rotates every 10s.

Drop into a marketing-page section as a featured testimonial slot.

In Framer, add a new layer and choose Insert → Embed.
Paste the snippet below into the Embed component's HTML field.
Resize the Framer layer to roughly 100% × 280px (or set it to fill the parent — the iframe scales).

<iframe
  src="https://raylove.raylu.ai/embed?format=band"
  width="100%"
  height="280"
  style="border: 0; max-width: 100%; background: #fff;"
  loading="lazy"
  title="Raylu — what our clients say"
></iframe>

Grid

100% × 480px

Two-row carousel of cards. Drifts left automatically; drag to scrub.

Use as a full-width social-proof section.

In Framer, add a new layer and choose Insert → Embed.
Paste the snippet below into the Embed component's HTML field.
Resize the Framer layer to roughly 100% × 480px (or set it to fill the parent — the iframe scales).

<iframe
  src="https://raylove.raylu.ai/embed?format=grid"
  width="100%"
  height="480"
  style="border: 0; max-width: 100%; background: #fff;"
  loading="lazy"
  title="Raylu — what our clients say"
></iframe>

Card

420px × 200px

A single anonymized testimonial card — quiet, focused.

Place inline in copy, in a sidebar, or inside a column.

In Framer, add a new layer and choose Insert → Embed.
Paste the snippet below into the Embed component's HTML field.
Resize the Framer layer to roughly 420px × 200px (or set it to fill the parent — the iframe scales).

<iframe
  src="https://raylove.raylu.ai/embed?format=card"
  width="420px"
  height="200"
  style="border: 0; max-width: 100%; background: #fff;"
  loading="lazy"
  title="Raylu — what our clients say"
></iframe>

URL parameters

Append these to the embed URL (e.g. ?format=grid&strategy=vc) to pre-filter or restyle.

Param	Values	Effect
`format`	band · grid · card	Which widget to render. Defaults to band.
`theme`	paper · navy	Light (default) or dark surface for embedding on dark pages.
`limit`	1 – 50 (default 12)	How many quotes to pull. Grid always uses the full pool.
`strategy`	vc · growth_equity · pe	Pre-filter to one fund strategy.
`region`	us · europe · asia	Pre-filter to one region. Hidden when only one region exists.

Speed up first paint

Two one-line tweaks worth doing on any page that hosts an embed:

Add a preconnect hint in your <head> so the browser starts the DNS + TLS handshake to raylove.raylu.ai in parallel with the rest of the page (~150–300ms saved on cold connections).
The snippets above already set an explicit height + white background on the iframe — keep them. That reserves layout space (no CLS) and prevents a brief see-through flash before the widget paints.

<link rel="preconnect" href="https://raylove.raylu.ai">
<link rel="dns-prefetch" href="https://raylove.raylu.ai">

Auto-resize (optional)

The widget posts its rendered height up to the parent window via postMessage. If you want the iframe to size itself, listen for the message and resize accordingly. Most users don't need this — just pick a reasonable height per format and you're done.

// On the parent page (HTML)
<iframe id="raylove" src="https://raylove.raylu.ai/embed?format=grid" style="border:0;width:100%"></iframe>
<script>
  window.addEventListener('message', (e) => {
    if (e.origin !== 'https://raylove.raylu.ai') return;
    if (e.data && e.data.type === 'raylove:height') {
      document.getElementById('raylove').style.height = e.data.height + 'px';
    }
  });
</script>