Tellback
Book Demo

Installing the Widget

Integrate the TellBack widget into your web application to collect user feedback, screen recordings, and debugger context.

Last updated:

To begin collecting feedback, you need to embed the TellBack client script on your website. Once installed, the widget handles user interaction, screenshots, and background telemetry recording automatically.

For most websites and web apps, placing a standard asynchronous script tag immediately before the closing </body> tag is the easiest and most performant approach.

html
<!-- Place immediately before </body> -->
<script
  async
  src="https://tellback.io/widget.js"
  data-tellback-site="YOUR_PUBLIC_KEY"
></script>

Replace YOUR_PUBLIC_KEY with the public key of the target Site from your TellBack dashboard (Settings > Sites).

Framework Integration Examples

If you are building a React or Next.js application, you can easily load the script using standard React lifecycle hooks or next/script components.

No NPM Packages Required: TellBack does not require installing any heavy NPM package dependencies. It loads asynchronously via our CDN, keeping your initial client bundle size clean.

Next.js App Router

For Next.js 13+ App Router, load the script inside your root layout component using Next's built-in <Script> tag with afterInteractive loading strategy:

tsx
// apps/web/src/app/layout.tsx
import Script from "next/script";
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        {children}
        
        {/* Load TellBack Script */}
        <Script
          src="https://tellback.io/widget.js"
          data-tellback-site="YOUR_PUBLIC_KEY"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

React SPA (Vite / CRA)

For React Single Page Applications, you can load the script dynamically in a root level useEffect hook to ensure clean cleanup when the app unmounts:

tsx
// src/App.tsx
import { useEffect } from "react";
 
export default function App() {
  useEffect(() => {
    const script = document.createElement("script");
    script.src = "https://tellback.io/widget.js";
    script.setAttribute("data-tellback-site", "YOUR_PUBLIC_KEY");
    script.async = true;
    document.body.appendChild(script);
 
    return () => {
      // Clean up script when unmounting
      document.body.removeChild(script);
    };
  }, []);
 
  return (
    <div>
      <h1>My Application</h1>
    </div>
  );
}

Verifying the Installation

After embedding the script tag, refresh your website in the browser and verify the installation:

  1. Open your browser's Developer Tools Console (F12 or Cmd+Option+I).
  2. Go to the Network tab and filter by widget.js. You should see a successful 200 OK load from https://tellback.io/widget.js.
  3. If Allowed Origins are configured correctly, the floating feedback widget will appear on the bottom-right corner of your page.

Widget Not Showing?
If the widget script loads but the feedback tab does not appear, check your console logs. You may see a 403 Forbidden error indicating that your current domain has not been added to your Site's Allowed Origins.

Privacy Notice Requirement

Privacy Responsibility
Site owners are responsible for providing appropriate visitor notices and obtaining any required consent for feedback collection, pageview tracking, session context, replay, audio, screenshots, and AI processing.