How to Embed a Feedspace Widget in Next.js

Overview

Adding a Feedspace widget to a Next.js project requires a small adjustment compared to plain HTML. Because Next.js renders pages on the server by default, the Feedspace embed script needs to run in a client component so it has access to the browser DOM. The steps below walk you through copying your embed code from Feedspace and creating a client component that loads the widget correctly in any Next.js app directory or pages directory project.

How to Embed Your Feedspace Widget in Next.js

Step 1: Copy Your Widget Embed Code from Feedspace

Log in to your Feedspace account and go to Widgets. Open the widget you want to embed, click the Share tab, and select the Next.js framework tab. Copy the embed code shown.

Step 2: Create a Client Component File

In your Next.js project, create a new file for the widget component, for example components/FeedspaceWidget.jsx. At the very top of the file, add the 'use client' directive. This tells Next.js to render this component entirely in the browser, giving the Feedspace script access to the DOM it needs to initialise the widget.

'use client'

import { useEffect } from 'react'

export default function FeedspaceWidget() {
  useEffect(() => {
    const script = document.createElement('script')
    script.src = 'https://js.feedspace.io/v1/embed/embed.min.js'
    script.type = 'text/javascript'
    script.async = true
    document.body.appendChild(script)
    return () => {
      document.body.removeChild(script)
    }
  }, [])

  return (
    <div
      className="feedspace-embed"
      data-id="YOUR_WIDGET_ID"
    />
  )
}

Replace YOUR_WIDGET_ID with the data-id value from the embed code you copied in Step 1.

Step 3: Add the Component to Your Page

Import and use the FeedspaceWidget component on any page where you want the widget to appear. Because the component is marked 'use client', it can be safely imported into both server and client pages.

import FeedspaceWidget from '@/components/FeedspaceWidget'

export default function HomePage() {
  return (
    <main>
      <h1>What Our Customers Say</h1>
      <FeedspaceWidget />
    </main>
  )
}

Step 4: Run Your Development Server and Verify

Start your Next.js development server with npm run dev and open the page in your browser. The Feedspace widget should appear and display your reviews. If the widget area is blank, check that the data-id value matches exactly what is shown in your Feedspace Share tab embed code.

Step 5: Deploy Your Project

Deploy your Next.js project as normal using your preferred host (Vercel, Netlify, or any Node.js-compatible platform). The widget loads client-side after hydration, so it works correctly in both static export and server-rendered deployments.

What You Can Do Next

• Customise the widget’s design, colors, and font in the Feedspace Design tab before embedding to ensure it matches your Next.js site’s visual style.
• Add the FeedspaceWidget component to multiple pages in your Next.js project, such as your homepage and pricing page, to maximise the reach of your social proof.
• Use the Feedspace widget preview in the Share tab to check desktop and mobile appearance before deploying to production.
• Track impressions and click rate for the embedded widget directly from your Feedspace Widgets dashboard to measure engagement after going live.