Ultimate Fiidbakk Next.js Integration: Quick Setup Guide
Embed Fiidbakk’s feedback widget in Next.js — widget ID, env variable usage, testing steps, and dashboard configuration.
⚡ Next.js Implementation Guides
In-depth Next.js guides covering App Router, RSC, ISR, and deployment. Get code examples, optimization checklists, and prompts to accelerate development.
Related Posts:
When you hand off a website to a client for review, you need a way to capture their feedback without asking them to juggle emails, spreadsheets, or separate tools. I recently integrated Fiidbakk into a Next.js project and realized how much friction it removes from the feedback collection process. This guide walks you through the exact technical setup.
The Problem
Traditionally, collecting client feedback requires multiple touchpoints: email exchanges, phone calls, or asking clients to document issues in a shared document. Each method introduces friction and context switching. You need a solution that lives directly on the website, captures feedback in one place, and requires zero effort from the client to use.
Fiidbakk solves this with a lightweight, embeddable widget that appears on your site and feeds feedback into a centralized dashboard.
Getting Your Widget ID
Before you can embed anything, you need a Fiidbakk account and your unique widget ID.
- Sign up at fiidbakk.com
- Create a new feedback widget from your dashboard
- You'll receive a Widget ID that looks like
6918592c8d7731387f43f14c - Save this ID—you'll use it in every implementation
Step 1: Create a Fiidbakk Component
The cleanest approach is to isolate the Fiidbakk logic in its own React component. This keeps your setup modular and makes it easy to enable or disable the widget across your entire application.
Create a new file in your components directory:
// File: src/components/fiidbakk-widget.tsx
"use client";
import { useEffect } from "react";
export function FiidbakkWidget() {
useEffect(() => {
// Create feedback widget element
const widgetEl = document.createElement("feedback-widget");
widgetEl.setAttribute("widgetid", "6918592c8d7731387f43f14c");
// Create and configure script
const scriptEl = document.createElement("script");
scriptEl.type = "module";
scriptEl.src = "https://widget.fiidbakk.com/main.js";
// Append to document
document.body.appendChild(widgetEl);
document.body.appendChild(scriptEl);
}, []);
return null;
}
The 'use client' directive tells Next.js this component runs in the browser—necessary because we're manipulating the DOM directly. The useEffect hook runs once when the component mounts, creating two elements: the feedback widget itself and the script that powers it.
The widget ID in the setAttribute call is what ties this widget back to your Fiidbakk dashboard. Replace 6918592c8d7731387f43f14c with your actual widget ID.
The component returns null because the Fiidbakk widget renders itself directly to the DOM—there's no JSX output needed.
Step 2: Add the Component to Your Root Layout
For the feedback widget to appear on every page, you need to add it to your root layout file. This ensures the Fiidbakk script loads once and persists across navigation.
Open your main layout file:
// File: src/app/layout.tsx
import type { Metadata } from "next";
import "./globals.css";
import { Navbar } from "@/components/navbar";
import { Footer } from "@/components/footer";
import { FiidbakkWidget } from "@/components/fiidbakk-widget";
import { Analytics } from "@vercel/analytics/next"
export const metadata: Metadata = {
title: "Your Site Title",
description: "Your site description",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body>
<Navbar />
{children}
<Footer />
<Analytics />
<FiidbakkWidget />
</body>
</html>
);
}
The key point here is placement. Put <FiidbakkWidget /> after your main content components but alongside other global utilities like <Analytics />. This ensures the widget loads after your page is interactive but doesn't block rendering.
Step 3: Replace Your Widget ID
The example above uses a placeholder widget ID. You must replace it with your actual ID from Fiidbakk:
// In src/components/fiidbakk-widget.tsx
widgetEl.setAttribute("widgetid", "YOUR_ACTUAL_WIDGET_ID_HERE");
Each widget ID corresponds to a specific feedback form in your Fiidbakk dashboard. If you have multiple projects or sites, each will have its own widget ID.
Step 4: Test the Widget
Deploy your changes or run your development server:
npm run dev
Navigate to your site in the browser. You should see a small feedback button (usually in the bottom-right corner by default—this is configurable in Fiidbakk settings). Click it to open the feedback form and verify it's working.
Test by submitting a piece of feedback yourself. Log into your Fiidbakk dashboard and confirm the feedback appears in your inbox. This validates that the widget is properly connected to your account.
Optional: Environment Variables
If you want to avoid hardcoding the widget ID, you can use environment variables:
// File: src/components/fiidbakk-widget.tsx
"use client";
import { useEffect } from "react";
export function FiidbakkWidget() {
useEffect(() => {
const widgetId = process.env.NEXT_PUBLIC_FIIDBAKK_WIDGET_ID;
if (!widgetId) {
console.warn("Fiidbakk widget ID not configured");
return;
}
const widgetEl = document.createElement("feedback-widget");
widgetEl.setAttribute("widgetid", widgetId);
const scriptEl = document.createElement("script");
scriptEl.type = "module";
scriptEl.src = "https://widget.fiidbakk.com/main.js";
document.body.appendChild(widgetEl);
document.body.appendChild(scriptEl);
}, []);
return null;
}
Then add to your .env.local file:
NEXT_PUBLIC_FIIDBAKK_WIDGET_ID=6918592c8d7731387f43f14c
The NEXT_PUBLIC_ prefix tells Next.js to make this variable available in the browser (required since Fiidbakk needs it client-side). Without this prefix, environment variables stay server-only.
Step 5: Configure Widget Behavior (Optional)
Fiidbakk allows customization through your dashboard settings. You can:
- Change the button position (corner, side, etc.)
- Customize button appearance and label
- Set up custom form fields beyond the default feedback text
- Configure where feedback gets routed
These settings live in your Fiidbakk dashboard and don't require code changes. The widget automatically respects your dashboard configuration once deployed.
Verification Checklist
Before considering the setup complete:
- Fiidbakk account created and widget ID obtained
-
FiidbakkWidgetcomponent created with your widget ID - Component imported and added to root layout
- Development server runs without errors
- Widget button visible on the site
- Test feedback submitted and appears in Fiidbakk dashboard
- Widget persists across page navigation (if using Next.js routing)
That's It
The Fiidbakk widget is now live on your site. Your clients can click the feedback button and submit thoughts, bugs, or suggestions directly to you without leaving the page. All feedback centralizes in your Fiidbakk dashboard instead of scattered across emails.
The setup is intentionally minimal because Fiidbakk handles the heavy lifting. Once the widget is embedded, the rest is configuration through their dashboard—no additional code needed.
Let me know in the comments if you have questions, and subscribe for more practical development guides.
Thanks, Matija
