E EndorseKit

Integration Guides

Drop a single script tag into any site. Here's how for the most popular platforms.

</>

HTML / Static

Any site where you can edit the HTML directly — Squarespace code blocks, Carrd, hand-coded sites.

◆

Webflow

Add via Embed element or site-wide custom code. No Webflow apps needed.

W

WordPress

Works with Classic Editor, Gutenberg blocks, and page builders like Elementor.

△

Next.js / React

Load the widget with next/script or a useEffect hook. SSR-safe.

</> HTML / Static Sites

1

Copy your embed code

Go to your EndorseKit dashboard, open your project, and click the Embed tab. Pick your layout, theme, and options, then copy the code.

2

Paste it into your page

Add the script tag wherever you want testimonials to appear — in a section, below a heading, or at the bottom of your landing page.

<!-- Testimonials -->
<section id="testimonials">
  <h2>What our customers say</h2>
  <script src="https://endorsekit.com/widget.js"
    data-project="your-project-slug"
    data-layout="grid"
    data-theme="light"
    data-columns="3">
  </script>
</section>
3

You're done

The widget loads asynchronously, renders inside a Shadow DOM (so it won't clash with your styles), and lazy-loads for zero performance impact until it scrolls into view.

Tip: You can add multiple widgets on the same page — each one gets its own isolated instance. Just use a different <script> tag for each.

◆ Webflow

1

Add an Embed element

In the Webflow Designer, drag an Embed element (under Components) to where you want testimonials.

2

Paste your embed code

Copy your code from the EndorseKit dashboard and paste it into the Embed's HTML field.

<script src="https://endorsekit.com/widget.js"
  data-project="your-project-slug"
  data-layout="carousel"
  data-theme="light"
  data-autoscroll="smooth"
  data-speed="slow">
</script>
3

Publish

Hit Publish. The widget won't render in the Designer preview (Webflow sandboxes scripts), but it will work perfectly on your published site.

Tip: For site-wide testimonials (like a footer section), go to Project Settings → Custom Code → Footer Code and paste the script there instead.

W WordPress

1

Open the page or post editor

Navigate to the page where you want testimonials.

2

Add a Custom HTML block

In Gutenberg, add a Custom HTML block. In Classic Editor, switch to the Text tab. In Elementor, use an HTML widget.

<script src="https://endorsekit.com/widget.js"
  data-project="your-project-slug"
  data-layout="grid"
  data-theme="light"
  data-max="6">
</script>
3

Preview & Publish

Click Preview to verify it looks right, then Publish. The widget runs entirely client-side — no PHP plugins or database changes needed.

Tip: If your caching plugin (WP Super Cache, W3 Total Cache, etc.) is aggressive, the widget still works because it lazy-loads at render time — nothing to purge.

△ Next.js / React

1

Use next/script (App Router)

In your page or layout component, import Script from next/script and add it where you want testimonials.

import Script from 'next/script'

export default function TestimonialsSection() {
  return (
    <section>
      <h2>What our customers say</h2>
      <Script
        src="https://endorsekit.com/widget.js"
        data-project="your-project-slug"
        data-layout="grid"
        data-theme="light"
        data-columns="3"
        strategy="lazyOnload"
      />
    </section>
  )
}
2

Alternative: useEffect hook

For more control, or if you're using plain React (CRA, Vite, Remix), load the script manually.

import { useEffect, useRef } from 'react'

export function Testimonials({ project = 'your-project-slug' }) {
  const ref = useRef(null)

  useEffect(() => {
    const script = document.createElement('script')
    script.src = 'https://endorsekit.com/widget.js'
    script.setAttribute('data-project', project)
    script.setAttribute('data-layout', 'grid')
    script.setAttribute('data-theme', 'light')
    ref.current?.appendChild(script)
    return () => script.remove()
  }, [project])

  return <div ref={ref} />
}
3

Dark mode sync

If your app toggles dark mode, just set data-theme="dark" dynamically to match.

Tip: The widget renders inside a Shadow DOM, so your app's Tailwind or CSS modules won't interfere with it — and vice versa.

Ready to embed?

500 Founder Licenses at $69 — one payment, Pro features forever.

Grab a Founder License → See layouts →