> ## Documentation Index
> Fetch the complete documentation index at: https://kudoswall.org/llms.txt
> Use this file to discover all available pages before exploring further.

# Install the testimonial widget on your site

> Step-by-step instructions for adding the KudosWall widget script tag to HTML pages, React and Next.js apps, Webflow projects, and Shopify themes.

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.

<Note>
  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`.
</Note>

<Tabs>
  <Tab title="HTML">
    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.

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

  <Tab title="React / Next.js">
    **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.

    ```tsx theme={null}
    // 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.

    ```tsx theme={null}
    // 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>
      )
    }
    ```
  </Tab>

  <Tab title="Webflow">
    Webflow lets you add custom code to individual pages through Page Settings.

    <Steps>
      <Step title="Open your Webflow project">
        Log in to Webflow and open the project where you want to show testimonials.
      </Step>

      <Step title="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.
      </Step>

      <Step title="Find the Custom Code section">
        Scroll down to the **Custom Code** section, then find the **Before `</body>` tag** field.
      </Step>

      <Step title="Paste the script tag">
        Paste your KudosWall script tag into the field:

        ```html theme={null}
        <script
          src="https://kudoswall.org/widget.js"
          data-id="YOUR_WIDGET_ID"
          async
        ></script>
        ```
      </Step>

      <Step title="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.
      </Step>
    </Steps>

    <Tip>
      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.
    </Tip>
  </Tab>

  <Tab title="Shopify">
    The most reliable way to add the widget to a Shopify store is to edit `theme.liquid` directly.

    <Steps>
      <Step title="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**.
      </Step>

      <Step title="Open theme.liquid">
        In the file list on the left, find and click **`theme.liquid`** under the **Layout** folder.
      </Step>

      <Step title="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.
      </Step>

      <Step title="Paste the script tag">
        Paste the KudosWall script tag just before `</body>`:

        ```html theme={null}
        <script
          src="https://kudoswall.org/widget.js"
          data-id="YOUR_WIDGET_ID"
          async
        ></script>
        </body>
        ```
      </Step>

      <Step title="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.
      </Step>
    </Steps>
  </Tab>
</Tabs>

## 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.

<CardGroup cols={2}>
  <Card title="Widget Settings" icon="sliders" href="/widgets/widget-settings">
    Customize your widget's layout, theme, and filters.
  </Card>

  <Card title="Embed Troubleshooting" icon="circle-question" href="/reference/embed-troubleshooting">
    Fix common issues with widget display and placement.
  </Card>
</CardGroup>
