Install guide · Vue

Add the Quackback widget to Vue

Vue apps call the Quackback widget directly. There's no adapter to learn. You init it when your root component mounts, and every page gets the launcher.

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 Vue

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 with your package manager.

Terminal

npm install @quackback/widget

Init when App.vue mounts

onMounted runs in the browser, which is what the widget needs. Destroy it on unmount so hot reloads don't stack launchers.

src/App.vue

<script setup lang="ts">
import { onMounted, onUnmounted } from "vue";
import { Quackback } from "@quackback/widget";

onMounted(() => {
  Quackback.init({ instanceUrl: import.meta.env.VITE_QUACKBACK_URL });
});

onUnmounted(() => Quackback.destroy());
</script>

<template>
  <RouterView />
</template>

<!-- .env: VITE_QUACKBACK_URL=https://your-workspace.quackback.io -->

Open it from your own button

Call Quackback.open from any component, straight to a new post, the changelog, a help search or a chat.

src/components/FeedbackButton.vue

<script setup lang="ts">
import { Quackback } from "@quackback/widget";
</script>

<template>
  <button @click="Quackback.open({ view: 'new-post' })">
    Send feedback
  </button>
</template>

Identify signed-in users

Your backend signs a five-minute token for the signed-in user. The app fetches it once and passes it to identify.

How identify works

Sign a token on your server

Copy the signing secret from Settings, under Widget, then Install, into a server-only env variable. Return { ssoToken } for the current session, and 401 when nobody is signed in.

server/widget-sso.ts

import { SignJWT } from "jose";

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

app.get("/api/widget-sso", async (req, res) => {
  const user = req.user; // from your auth middleware
  if (!user) return res.status(401).end();

  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 after sign-in

Call it when the app loads with a session, and right after sign-in. Call Quackback.logout() on sign-out.

src/auth.ts

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

export async function identifyWidgetUser() {
  const res = await fetch("/api/widget-sso");
  if (!res.ok) return; // not signed in: stay anonymous
  const { ssoToken } = await res.json();
  Quackback.identify({ ssoToken });
}

export function onSignOut() {
  Quackback.logout();
}

Good to know on Vue

Widget events and methods

Once per sessionIdentify when you first know who's signed in, not in a router guard that runs on every navigation. The widget keeps its own session after that.

VITE_ variables are publicOnly the workspace URL belongs in a VITE_ variable. The signing secret stays in your backend's environment.

Server renderingIf you render Vue on the server, onMounted only runs in the browser, so the code above is already safe. On Nuxt, use a client plugin instead.

Common questions

Is there a Vue plugin or composable?

Not yet. Vue apps import Quackback from @quackback/widget and call it directly, which is a few lines. Wrap it in your own composable if you like.

Can I use the script tag instead?

Yes. Paste the snippet from Settings into index.html and call Quackback("open") or Quackback("identify") from your components. Pick one approach, not both.

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 Vue app

Start free trial All install guides