Install the testimonial widget on your site

Installing the KudosWall widget takes one step: paste a <script> tag into your site. The exact method depends on your platform. Follow the guide for your setup below.

Replace YOUR_WIDGET_ID with the actual ID from your widget’s Embed Code tab. The ID looks like a UUID: 88f80210-7c57-4b9b-bb8f-d5e18804320f.

HTML
React / Next.js
Webflow
Shopify

Paste the script tag directly into your HTML file at the location where you want the widget to appear. Placing it just before the closing </body> tag is a common convention, but you can put it anywhere in <body> — the widget renders inline at that position.

<!-- Paste before </body> or in your page content -->
<script
  src="https://kudoswall.org/widget.js"
  data-id="YOUR_WIDGET_ID"
  async
></script>

Next.js — Use the built-in <Script> component from next/script. The lazyOnload strategy loads the widget after the page is interactive, keeping your Core Web Vitals unaffected.

// Next.js (using next/script)
import Script from 'next/script'

export default function TestimonialsSection() {
  return (
    <section>
      <h2>What our customers say</h2>
      <Script
        src="https://kudoswall.org/widget.js"
        data-id="YOUR_WIDGET_ID"
        strategy="lazyOnload"
      />
    </section>
  )
}

React (without Next.js) — Use a useEffect hook to append the script to the document after the component mounts.

// React (vanilla, using useEffect)
import { useEffect, useRef } from 'react'

export default function TestimonialsSection() {
  const containerRef = useRef<HTMLDivElement>(null)

  useEffect(() => {
    const script = document.createElement('script')
    script.src = 'https://kudoswall.org/widget.js'
    script.dataset.id = 'YOUR_WIDGET_ID'
    script.async = true
    containerRef.current?.appendChild(script)
  }, [])

  return (
    <section>
      <h2>What our customers say</h2>
      <div ref={containerRef} />
    </section>
  )
}

Webflow lets you add custom code to individual pages through Page Settings.

Open your Webflow project

Go to Pages and open Page Settings

Click Pages in the left panel, hover over the page you want to update, and click the settings gear icon to open Page Settings.

Find the Custom Code section

Scroll down to the Custom Code section, then find the Before </body> tag field.

Paste the script tag

Paste your KudosWall script tag into the field:

<script
  src="https://kudoswall.org/widget.js"
  data-id="YOUR_WIDGET_ID"
  async
></script>

Publish your site

Click Save in Page Settings, then publish your site. The widget will appear at the location where the script tag is injected.

To control exactly where on the page the widget appears in Webflow, add an Embed element (from the Add panel) to your canvas and paste the script tag inside it. This lets you position the widget precisely within your layout.

The most reliable way to add the widget to a Shopify store is to edit theme.liquid directly.

Go to your theme code editor

In your Shopify admin, go to Online Store > Themes. Next to your active theme, click the three-dot menu and select Edit code.

Open theme.liquid

In the file list on the left, find and click theme.liquid under the Layout folder.

Find the closing body tag

Use your browser’s find function (Ctrl+F or Cmd+F) to search for </body> near the bottom of the file.

Paste the script tag

Paste the KudosWall script tag just before </body>:

<script
  src="https://kudoswall.org/widget.js"
  data-id="YOUR_WIDGET_ID"
  async
></script>
</body>

Save the file

Click Save. The widget is now active on all pages that use this layout. To show it on a specific page only, add the script to that page’s template file instead.

After installing

Once the script is on your page, all future widget updates — layout changes, new testimonials, filter adjustments — happen automatically from your KudosWall dashboard. You don’t need to touch your site’s code again.

Widget Settings

Customize your widget’s layout, theme, and filters.

Embed Troubleshooting

Fix common issues with widget display and placement.

Get Started

Account and projects

Core Concepts

Collecting Testimonials

Managing Testimonials

Embedding Widgets

Account & Billing

Install the testimonial widget on your site

After installing

Widget Settings

Embed Troubleshooting

Get Started

Account and projects

Core Concepts

Collecting Testimonials

Managing Testimonials

Embedding Widgets

Account & Billing

Documentation Index

​After installing

Widget Settings

Embed Troubleshooting

After installing