Install guide · Electron

Add the Quackback widget to Electron

The Quackback widget runs in Electron's renderer like any web page. Two things differ from a website: links should open in the user's browser, and the signing secret must never ship inside the app.

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 trial Read the install docs

The widget your customers see inside your app.

Your team’s viewYour customers’ view

Feedback

Review

Status

Board

Install the widget in Electron

First, in Quackback, open Settings, then Widget, and turn on Show on your website. Until it's on, the snippet loads but the launcher stays hidden. Every snippet uses your-workspace.quackback.io as a placeholder. Swap in your workspace URL, or your custom domain, from Settings, under Widget, then Install.

Read the full install docs

Install the package

Add @quackback/widget to the project your renderer is bundled from.

Terminal

npm install @quackback/widget

Init in the renderer

Call init from your renderer entry, or with the React hooks if your renderer uses React.

src/renderer.ts

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

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

document.querySelector("#feedback")?.addEventListener("click", () => {
  Quackback.open({ view: "new-post" });
});

Open links in the system browser

Links in the widget open in a new tab, which Electron would turn into a new app window. Send them to the user's browser instead.

src/main.ts

import { BrowserWindow, shell } from "electron";

const win = new BrowserWindow({ /* ... */ });

win.webContents.setWindowOpenHandler(({ url }) => {
  // Only web links: never hand other schemes to the operating system.
  if (url.startsWith("https://") || url.startsWith("http://")) {
    shell.openExternal(url);
  }
  return { action: "deny" };
});

Identify signed-in users

A desktop app is client code, so anyone can unpack it. Sign the token on your own API, where the user already authenticates, and pass it to identify in the renderer.

How identify works

Sign the token on your API

Copy the signing secret from Settings, under Widget, then Install, into your API server's environment, never into the app. Return { ssoToken } for the authenticated user.

api/widget-sso.ts

import { SignJWT } from "jose";

const secret = new TextEncoder().encode(process.env.WIDGET_SIGNING_SECRET);

app.get("/widget-sso", requireAuth, async (req, res) => {
  const user = req.user; // from your API's auth
  const ssoToken = await new SignJWT({
    sub: String(user.id), // stable user id, never the email
    email: user.email,
    name: user.name,
  })
    .setProtectedHeader({ alg: "HS256" })
    .setExpirationTime("5m")
    .sign(secret);

  res.json({ ssoToken });
});

Identify from the renderer

Call it after sign-in, and when the app starts with a saved session. Call Quackback.logout() when the user signs out.

src/renderer.ts

const res = await fetch("https://api.example.com/widget-sso", {
  headers: { Authorization: `Bearer ${accessToken}` },
});
if (res.ok) {
  const { ssoToken } = await res.json();
  Quackback.identify({ ssoToken });
}

Good to know on Electron

Widget events and methods

Never bundle the secretAn Electron app's code is readable by anyone who installs it. A secret in the bundle would let anyone sign a token as any user.

Content Security PolicyIf your renderer sets a CSP, allow your workspace URL in frame-src and connect-src. The launcher injects a small style element, so style-src must allow inline styles.

Small windowsUnder 640 pixels wide, the widget opens full screen, as it does on phones. Give it room, or open it from a menu item.

Common questions

Can I use the widget in Tauri or other webview apps?

The widget is plain web code, so it runs in any webview that allows iframes and your workspace URL. The same rules apply: keep the secret on a server and route external links to the system browser.

Is there a native mobile SDK?

Native iOS and Android SDKs are not released yet. The widget works in a mobile browser, where it opens full screen.

Do visitors have to sign in to use the widget?

No. Once Show on your website is on in your widget settings, the launcher appears for every visitor after init. Anonymous visitors can still post, vote and chat, and can leave an email inline. When you identify them later, what they did before signing in moves onto their account.

Is the Quackback 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.

Put feedback inside your Electron app

Start free trial All install guides