Vue 3

npm install @swake/web-swake-sdk
# or
yarn add @swake/web-swake-sdk
# or
pnpm add @swake/web-swake-sdk

import { createApp } from 'vue';
import Swake from '@swake/web';
import '@swake/web/ui';
import App from './App.vue';

Swake.init({
  apiKey: import.meta.env.VITE_SWAKE_API_KEY,
  appVersion: import.meta.env.VITE_APP_VERSION || '1.0.0',
});

createApp(App).mount('#app');

Swake.init({
  apiKey: import.meta.env.VITE_SWAKE_API_KEY, // required
  baseUrl: 'https://api.swake.io',       // optional — override for self-hosted or a proxy
  debug: false,                          // enable verbose console logs
  appVersion: '1.0.0',                   // shown in the portal per submission
  autoCapture: {
    browserInfo: true,                   // attach browser/OS info to submissions
  },
  surveys: {
    enabled: true,                       // fetch & show eligible surveys
    autoShow: true,                      // auto-show after identify()
    delay: 3000,                         // ms before auto-show
    cooldown: 86_400_000,                // ms between surveys (default: 24h)
  },
  breadcrumbs: {
    enabled: true,                       // attach breadcrumb trail to submissions
    maxEntries: 50,                      // ring buffer size (max 100)
    captureNavigation: true,             // History API pushState/popstate
    captureNetwork: true,                // fetch() and XMLHttpRequest
    captureConsole: true,                // console.warn / console.error
    captureClicks: true,                 // element click events
  },
  trigger: {
    position: 'bottom-right',            // 'bottom-left' | 'top-right' | 'top-left'
    icon: 'chat',                        // 'feedback' | 'bug' | 'idea'
    label: 'Feedback',                   // tooltip text
    hidden: false,                       // start hidden, show later
    zIndex: 999999,
    style: {
      backgroundColor: '#059669',
      size: 56,                          // px
      borderRadius: 28,                  // px
      shadow: true,
    },
  },
  theme: { /* see Theme Customization section */ },
  onLimitReachedMode: 'default_ui',      // 'silent' | 'callback_only'
  onLimitReached: (event) => {
    console.warn(event.limitKey, event.message);
  },
});

import { ref, onMounted, onUnmounted, readonly } from 'vue';
import Swake from '@swake/web';
import type { SwakeWebTheme } from '@swake/web';

const userId = ref<string | null>(null);
const unreadCount = ref(0);
let pollTimer: ReturnType<typeof setInterval> | null = null;

async function refreshUnread() {
  if (!userId.value) return;
  try {
    unreadCount.value = await Swake.getUnreadCount();
  } catch { /* non-fatal */ }
}

function startPolling() {
  stopPolling();
  void refreshUnread();
  pollTimer = setInterval(() => void refreshUnread(), 60_000);
}

function stopPolling() {
  if (pollTimer) {
    clearInterval(pollTimer);
    pollTimer = null;
  }
}

export function useSwake() {
  async function identify(
    uid: string,
    email?: string,
    name?: string,
    metadata?: Record<string, string>,
  ) {
    await Swake.identify({ userId: uid, email, name, metadata });
    userId.value = uid;
    startPolling();
  }

  function clearIdentity() {
    Swake.clearIdentity();
    userId.value = null;
    unreadCount.value = 0;
    stopPolling();
  }

  return {
    userId: readonly(userId),
    unreadCount: readonly(unreadCount),
    identify,
    clearIdentity,
    refreshUnread,
  };
}

<script setup lang="ts">
import { watch } from 'vue';
import { useAuthStore } from '@/stores/auth';
import { useSwake } from '@/composables/useSwake';

const auth = useAuthStore();
const { identify, clearIdentity, unreadCount } = useSwake();

// Auto-identify when auth state changes
watch(
  () => auth.user,
  async (user) => {
    if (user) {
      await identify(user.id, user.email, user.name);
    } else {
      clearIdentity();
    }
  },
  { immediate: true },
);
</script>

<template>
  <RouterView />
</template>

<script setup lang="ts">
import Swake from '@swake/web';
import { useSwake } from '@/composables/useSwake';

const { userId, unreadCount, clearIdentity } = useSwake();
</script>

<template>
  <header>
    <template v-if="userId">
      <span>Notifications: {{ unreadCount }}</span>
      <button @click="Swake.showFeedbackForm()">Feedback</button>
      <button @click="clearIdentity()">Log out</button>
    </template>
  </header>
</template>

await Swake.identify({
  userId: 'user_123',         // required — your app's user ID
  email: 'jane@example.com',  // optional
  name: 'Jane Smith',         // optional
  metadata: {                 // optional — arbitrary key-value pairs
    plan: 'pro',
    company: 'Acme Corp',
  },
});

import { defineStore } from 'pinia';
import Swake from '@swake/web';

export const useAuthStore = defineStore('auth', {
  state: () => ({
    user: null as { id: string; email: string; name: string } | null,
  }),
  actions: {
    async login(credentials: { email: string; password: string }) {
      const user = await api.login(credentials);
      this.user = user;
      await Swake.identify({
        userId: user.id,
        email: user.email,
        name: user.name,
      });
    },
    logout() {
      this.user = null;
      Swake.clearIdentity();
    },
  },
});

Swake.clearIdentity();

import Swake from '@swake/web';

// Default form
Swake.showFeedbackForm();

// With options
Swake.showFeedbackForm({
  defaultType: 'feature',           // pre-select type: 'bug' | 'feature' | 'question'
  showTypeSelector: true,           // show/hide the Bug/Idea/Help toggle (default: true)
  title: "What's on your mind?",    // header text
  placeholder: 'Tell us more...',   // textarea placeholder
  theme: { primaryColor: '#8B5CF6' }, // per-call theme override
});

<script setup lang="ts">
import Swake from '@swake/web';

function openBugReport() {
  Swake.showFeedbackForm({ defaultType: 'bug' });
}

function openFeatureRequest() {
  Swake.showFeedbackForm({
    defaultType: 'feature',
    title: 'What would you like to see?',
    placeholder: 'Describe the feature...',
  });
}
</script>

<template>
  <button @click="openBugReport">Report a Bug</button>
  <button @click="openFeatureRequest">Request a Feature</button>
</template>

<!-- In your init config, hide the built-in trigger: -->
<!-- trigger: { hidden: true } -->

import Swake from '@swake/web';

const submission = await Swake.submitFeedback({
  type: 'bug',                                      // 'bug' | 'feature' | 'question'
  title: 'Search returns no results',                // required
  description: 'Reproducible on Safari + macOS 14.', // optional
  attachments: [                                      // optional — File objects
    { file: screenshotFile },
  ],
});

console.log('Created:', submission.id);

<script setup lang="ts">
import { ref } from 'vue';
import Swake from '@swake/web';

const title = ref('');
const description = ref('');
const file = ref<File | null>(null);
const submitting = ref(false);

function onFileChange(event: Event) {
  const input = event.target as HTMLInputElement;
  file.value = input.files?.[0] ?? null;
}

async function onSubmit() {
  submitting.value = true;
  try {
    await Swake.submitFeedback({
      type: 'bug',
      title: title.value,
      description: description.value,
      attachments: file.value ? [{ file: file.value }] : undefined,
    });
    title.value = '';
    description.value = '';
    file.value = null;
  } finally {
    submitting.value = false;
  }
}
</script>

<template>
  <form @submit.prevent="onSubmit">
    <input v-model="title" placeholder="What went wrong?" required />
    <textarea v-model="description" placeholder="Steps to reproduce..." />
    <input type="file" accept="image/*,.pdf" @change="onFileChange" />
    <button type="submit" :disabled="submitting">Submit Bug Report</button>
  </form>
</template>

// Open the feedback history panel
Swake.showFeedbackHistory();

// Lightweight list (id, title, status, type, createdAt)
const { submissions, hasMore, cursor } = await Swake.getHistory({ limit: 20 });

// Full submission detail with comments + attachments
const submission = await Swake.getSubmission('submission_id');

// Paginated submission list with more fields
const result = await Swake.listSubmissions({ limit: 10 });

Swake.init({
  apiKey: 'ep_live_...',
  trigger: {
    position: 'bottom-right',     // 'bottom-left' | 'top-right' | 'top-left'
    icon: 'chat',                 // 'feedback' | 'bug' | 'idea'
    label: 'Feedback',            // tooltip text
    hidden: false,                // start hidden
    zIndex: 999999,               // container z-index
    style: {
      backgroundColor: '#059669', // FAB background color
      size: 56,                   // diameter in px
      borderRadius: 28,           // px
      shadow: true,               // drop shadow
    },
  },
});

// Hide the FAB (e.g. during checkout)
Swake.setTriggerVisible(false);

// Show it again
Swake.setTriggerVisible(true);

// Open the feedback form
Swake.open();

// Close any open widget (form, history, survey)
Swake.close();

import { createRouter, createWebHistory } from 'vue-router';
import Swake from '@swake/web';

const router = createRouter({
  history: createWebHistory(),
  routes: [/* ... */],
});

const hiddenRoutes = ['/checkout', '/onboarding'];

router.afterEach((to) => {
  const hide = hiddenRoutes.some((r) => to.path.startsWith(r));
  Swake.setTriggerVisible(!hide);
});

export default router;

Swake.init({
  apiKey: 'ep_live_...',
  surveys: {
    enabled: true,        // fetch eligible surveys (default: true)
    autoShow: true,       // auto-show after identify() (default: true)
    delay: 3000,          // ms before auto-show (default: 3000)
    cooldown: 86_400_000, // ms between surveys (default: 24h)
  },
});

// Re-check eligibility and show the first match
await Swake.checkSurveys();

// Show a specific survey by ID (ignores cooldown)
await Swake.showSurvey('survey_abc123');

Swake.onSurveyShown((event) => {
  console.log('Survey shown:', event.id, event.type);
});

Swake.onSurveyCompleted((event) => {
  console.log('Completed:', event.survey.id, 'answers:', event.response.answers);
});

Swake.onSurveyDismissed((event) => {
  console.log('Dismissed:', event.id);
});

import { onMounted } from 'vue';
import Swake from '@swake/web';

export function useSurveyAnalytics() {
  onMounted(() => {
    Swake.onSurveyCompleted((event) => {
      // Send to your analytics provider
      trackEvent('survey_completed', {
        surveyId: event.survey.id,
        surveyType: event.survey.type,
        answerCount: event.response.answers.length,
      });
    });

    Swake.onSurveyDismissed((event) => {
      trackEvent('survey_dismissed', { surveyId: event.id });
    });
  });
}

function trackEvent(name: string, props: Record<string, unknown>) {
  // Your analytics implementation
}

import Swake from '@swake/web';

// Fetch board items
const { items, hasMore } = await Swake.getBoardItems('public-roadmap', {
  sort: 'votes',      // 'votes' | 'recent'
  status: 'open',     // 'open' | 'in_progress' | 'resolved' | 'closed'
  page: 1,            // 1-based pagination
});

// Cast a vote (requires identify)
const { status, voteCount } = await Swake.vote('public-roadmap', 'item_id');
// status: 'voted' | 'already_voted' | 'error'

// Remove a vote
const result = await Swake.removeVote('public-roadmap', 'item_id');
// result.status: 'removed' | 'not_voted' | 'error'

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import Swake from '@swake/web';

const items = ref<any[]>([]);

onMounted(async () => {
  const result = await Swake.getBoardItems('public-roadmap', { sort: 'votes' });
  items.value = result.items;
});

async function toggleVote(item: any) {
  if (item.hasVoted) {
    await Swake.removeVote('public-roadmap', item.id);
    item.hasVoted = false;
    item.voteCount--;
  } else {
    await Swake.vote('public-roadmap', item.id);
    item.hasVoted = true;
    item.voteCount++;
  }
}
</script>

<template>
  <div v-for="item in items" :key="item.id" class="roadmap-item">
    <button @click="toggleVote(item)">
      {{ item.hasVoted ? 'Voted' : 'Vote' }} ({{ item.voteCount }})
    </button>
    <h3>{{ item.title }}</h3>
    <span>{{ item.status }}</span>
  </div>
</template>

// Get unread count
const count = await Swake.getUnreadCount();

// List notifications
const { notifications, pagination } = await Swake.listNotifications({
  unreadOnly: true,  // only unread (default: false)
  limit: 20,
  cursor: undefined, // for pagination
});

// Mark as read
await Swake.markNotificationRead('notification_id');

// Mark all as read
await Swake.markAllNotificationsRead();

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
import Swake from '@swake/web';

const count = ref(0);
let timer: ReturnType<typeof setInterval> | null = null;

async function poll() {
  try {
    count.value = await Swake.getUnreadCount();
  } catch { /* non-fatal */ }
}

onMounted(() => {
  void poll();
  timer = setInterval(() => void poll(), 60_000);
});

onUnmounted(() => {
  if (timer) clearInterval(timer);
});
</script>

<template>
  <span v-if="count > 0" class="badge">{{ count }}</span>
</template>

Swake.init({
  apiKey: import.meta.env.VITE_SWAKE_API_KEY,
  theme: {
    primaryColor: '#8B5CF6',       // buttons, active states, FAB
    successColor: '#10B981',       // success states
    dangerColor: '#EF4444',        // error states, destructive actions
    backgroundColor: '#FFFFFF',    // panel backgrounds
    surfaceColor: '#F8FAFC',       // cards, input backgrounds
    overlayColor: 'rgba(15,23,42,0.4)', // backdrop
    textColor: '#0F172A',          // primary text
    textSecondary: '#64748B',      // muted text, labels
    borderColor: '#E2E8F0',        // input borders, dividers
    borderRadius: 12,              // px — applied to panels, inputs, buttons
    fontFamily: 'Inter, sans-serif',
  },
});

Swake.showFeedbackForm({
  theme: { primaryColor: '#0EA5E9' },
});

// Add a custom breadcrumb
Swake.addBreadcrumb({
  category: 'custom',
  message: 'User upgraded to Pro plan',
  data: { plan: 'pro', via: 'settings' },
});

// Read the current trail
const trail = Swake.getBreadcrumbs();

// Clear the buffer
Swake.clearBreadcrumbs();

import { createRouter, createWebHistory } from 'vue-router';
import Swake from '@swake/web';

const router = createRouter({
  history: createWebHistory(),
  routes: [/* ... */],
});

router.afterEach((to, from) => {
  Swake.addBreadcrumb({
    category: 'navigation',
    message: `Navigated to ${to.fullPath}`,
    data: { from: from.fullPath },
  });
});

export default router;

import { offlineQueue } from '@swake/web';

// Check queue size (e.g. show a badge)
const pending = offlineQueue.size();

// Force a flush attempt
await offlineQueue.flush();

Fully integrate the Swake feedback SDK (feedback forms, bug reports, surveys/NPS, in-app notifications, voting boards) into this Vue 3 + Vite app. Treat it as additive: a Swake or network failure must NEVER break boot or any existing behavior. Never invent or fake an API that is not in the docs.

1. READ THE DOCS FIRST — they are the source of truth for the package, init/identify, the widget layer and every option. Fetch with a browser User-Agent (a plain fetch returns 403): curl -sL -A "Mozilla/5.0" "https://swake.io/docs/sdk?framework=vue". Confirm this is a plain Vue 3 app and not Nuxt — if you find Nuxt, STOP and use the Nuxt guide instead, because the setup differs.
2. ASK BEFORE DECIDING ANYTHING (AskUserQuestion): (a) integration mode — DIRECT, meaning the ep_live_ key ships in the browser via VITE_SWAKE_API_KEY (fine for a static or SPA-only app), or PROXY, meaning the key stays server-side in a backend you control (recommended whenever a backend exists — see step 4); (b) the API key or proxy path, an optional baseUrl, and a voting-board slug if they want the board. Write PLACEHOLDERS ONLY into env files (and the .example alongside) — never commit a real key. ASK again before installing any package.
3. INSTALL — add @swake/web. The visual widgets (trigger FAB, feedback form, history panel, survey modals) live behind the separate side-effect import '@swake/web/ui'; load it with await import('@swake/web/ui') before init so it stays out of the initial bundle.
4. INIT EXACTLY ONCE, IDEMPOTENTLY — keep a module-level "let initPromise: Promise<void> | null" and have every caller await the SAME promise. This is required, not stylistic: the SDK exposes no isInitialized(), every method throws "[Swake] SDK not initialized" before init(), and a second init() starts a second offline-queue flush interval without clearing the first. Swake.init() itself is synchronous. PROXY mode: pass any non-empty placeholder as apiKey, point baseUrl at your backend, e.g. /api/swake, and set credentials: 'include'. That backend attaches the real X-API-Key server-side, overrides any client-supplied externalUserId with the session user so identity cannot be spoofed, and must allow X-API-Key and Idempotency-Key through CORS. Set trigger: { hidden: true } if the app will open feedback from its own button instead of the floating one.
5. IDENTITY — after init resolves, call Swake.identify({ userId, email, name, metadata }) on EVERY load that has a session, not just on the login event: identity is held in memory only, so a page refresh loses it. userId must be your stable internal id, and every metadata value must be a string. On logout call Swake.clearIdentity() inside a try/catch — it throws if init never ran. Put this in a useSwake() composable that watches the auth store (Pinia or otherwise) with { immediate: true }, so a restored session identifies on load rather than only on a fresh login.
6. POLISH — drive Swake.setTheme() from the app's light/dark toggle (widgets otherwise keep the theme captured at init); gate init/identify by route so an auto-shown survey can never land on login, signup, or onboarding; add Swake.addBreadcrumb() at meaningful domain events so bug reports arrive with context.
7. VERIFY & REPORT — funnel every SDK call through one wrapper with try/catch, then prove it end to end: the trigger opens the form, a real submission appears in the Swake dashboard, and no survey shows on an auth or onboarding route. Report the files you changed, any manual steps left for me, and every assumption you made.