SDK

JavaScript SDK that shows feedback.tools surveys (CSAT, NPS, CES, and general text feedback) on any website or web app.

The SDK is one script tag. It already contains the survey UI, so there is no npm package to install, and you don't need react-feedback-surveys either: that library is the same UI for apps that keep responses in their own backend.

Quick start

1. Create a survey in the feedback.tools dashboard.
2. Open the survey's Settings → Embed tab, choose Popup, then HTML, and copy the snippet. It already holds the script URL, the survey ID and the publishable key.
3. Paste the snippet into your site's HTML, in <head> or before </body>.
4. Open your site. Without a trigger, the popup appears as soon as the page loads.
5. In Settings → Triggers, choose when and where the survey shows: after a delay, after a scroll depth, on specific pages, or only from your code.

The snippet looks like this:

<script>
  (function(w,d,n,s,k,e,p){
    w[k]=w[k]||function(){(w[k].q=w[k].q||[]).push(arguments)};
    e=d.createElement(n),p=d.getElementsByTagName(n)[0];
    e.async=!0;e.src=s;p.parentNode.insertBefore(e,p);
  })(window,document,'script','__SDK_URL__','ftools');

  ftools('init', {
    surveyId: '__SURVEY_ID__',
    publishableKey: '__PUBLISHABLE_KEY__'
  });
</script>

How it works

Integration has two independent phases:

1. Load the script. The snippet creates a command queue (window.ftools.q) and loads the SDK script asynchronously. Commands called before the script loads wait in the queue and run once it's ready.
2. Initialize surveys. ftools('init', { surveyId, publishableKey }) sets up a survey. Call it in the same <script> as the loader, or later from your app code. Both work because of the queue.

In a component framework (React, Next.js, Vue, Nuxt), load the script once in the page layout and call init() from the component that shows the survey. There you can set callbacks and clean up on unmount:

'use client';

import { useEffect } from 'react';

export function FeedbackSurvey() {
  useEffect(() => {
    window.ftools('init', {
      surveyId: '__SURVEY_ID__',
      publishableKey: '__PUBLISHABLE_KEY__',
      root: '#feedback'
    });
    window.ftools('on', '__SURVEY_ID__', {
      onSubmit: ({ score }) => console.log(score)
    });

    return () => {
      window.ftools('destroy', '__SURVEY_ID__');
    };
  }, []);

  return <div id="feedback" />;
}

React Strict Mode runs the effect twice in development. The SDK handles that: destroy() cancels the first init(), and the second one renders the survey. For window.ftools types, see TypeScript.

TypeScript

The SDK doesn't ship type definitions. Declare window.ftools once in your project:

declare global {
  interface Window {
    ftools: (...args: unknown[]) => void;
  }
}

export {};

Next steps

• Showing surveys: popup and embed modes, when a popup shows, single-page apps
• Users and metadata: identify the respondent and attach your own data to a response
• Initialization: every init() option, and the survey language
• Events: onRender, onSubmit and onClose with on()
• Methods: open(), close(), destroy(), destroyAll()
• Screenshots: the optional screenshot a respondent can attach
• Styling: dark mode, ready-made styles from the catalog, and your own CSS
• Privacy and security: what the SDK stores and sends, CSP, browser support
• Troubleshooting: what to check when a survey doesn't show
• Changelog: what changed in each SDK release