Quackback
GitHub349Sign inStart free trial

Install guides

Add the feedback widget to your stack

The Quackback widget brings feedback, live chat, help and your changelog into your product. Pick your framework or site builder for the exact code and where it goes, including how to identify signed-in users.

Get your widget snippet

  • 14-day Pro trial, no card needed
  • Your workspace URL and snippet, ready to copy
  • The widget is on every plan, including Free
Start free trialRead the install docs

JavaScript frameworks

Install @quackback/widget from npm and init it once in your app shell. React apps get hooks.

React

Hooks from @quackback/widget/react. No provider needed.

Next.js

A client component in the root layout, plus a route handler for identify.

Vue

Import Quackback and call it from App.vue.

Nuxt

A .client plugin, runtime config and a server route for identify.

SvelteKit

onMount in the root layout, and a +server.ts endpoint for identify.

Angular

afterNextRender in your root component keeps SSR safe.

Remix

Root loader for config, the React hooks, a resource route for identify.

Electron

Init in the renderer, send links to the system browser.

Site builders and CMSs

Paste the script-tag snippet where your platform takes custom code, then publish.

WordPress

A header and footer plugin, or wp_footer in a child theme.

Webflow

Site settings, Custom code, Footer code, then publish.

Shopify

theme.liquid in the theme code editor, before </body>.

Framer

Site Settings, Custom Code, End of <body>, then publish.

Any other site

If your platform isn't listed, one of these works. Swap the placeholder for your workspace URL.

Read the full install docs

Paste the snippet

Put it before the closing body tag on every page. Settings, under Widget, then Install, shows it with your workspace URL filled in.

index.html
<script>
  (function(w,d){if(w.Quackback)return;w.Quackback=function(){
  (w.Quackback.q=w.Quackback.q||[]).push(arguments)};
  var s=d.createElement("script");s.async=true;
  s.src="https://your-workspace.quackback.io/api/widget/sdk.js";
  d.head.appendChild(s)})(window,document);
  Quackback("init");
</script>

Or install from npm

In an app you bundle, import Quackback and call init once. Then identify signed-in users with a token your server signs.

Identify signed-in users
app.ts
npm install @quackback/widget

import { Quackback } from "@quackback/widget";

Quackback.init({
  instanceUrl: "https://your-workspace.quackback.io",
});

Common questions

How do I add the Quackback widget to my site?

Paste the script-tag snippet from Settings, under Widget, then Install, before the closing body tag. Or add the @quackback/widget package from npm and call init with your workspace URL. Then turn on Show on your website in the same settings, and the launcher appears for every visitor.

Should I use the npm package or the script tag?

Use the npm package in an app you build with a bundler, such as React, Next.js, Vue or Angular. It is typed and includes React hooks. Use the script tag on site builders such as WordPress, Webflow, Shopify and Framer, where you paste code instead of importing it.

What is the signing secret for?

Identifying signed-in users. Your server signs a short-lived token with it, and the widget passes the token to identify. The secret stays on your server. The browser never sees it, so nobody can pose as another user.

My platform isn't listed. Will the widget work?

Almost certainly. Any site that lets you add a script before the closing body tag can run the snippet, and any JavaScript app can import the npm package. The package is MIT licensed, so you can ship it in closed-source apps.

Is the widget free?

Yes. The widget is on every plan, including Free, with feedback, live chat, help articles and your changelog inside it. Every signup starts with a 14-day Pro trial.

Have another question? Talk to the team.

Get your widget snippet and go live today

Start free trialSee the widget