Svelte / SvelteKit

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

import Swake from '@swake/web';
import '@swake/web/ui';
import App from './App.svelte';

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

const app = new App({ target: document.getElementById('app')! });
export default 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 Swake from '@swake/web';

async function initSwake() {
  await import('@swake/web/ui');

  Swake.init({
    apiKey: import.meta.env.PUBLIC_SWAKE_API_KEY,
    appVersion: import.meta.env.PUBLIC_APP_VERSION || '1.0.0',
    surveys: {
      enabled: true,
      autoShow: true,
      delay: 3000,
      cooldown: 86_400_000,
    },
    breadcrumbs: {
      captureNavigation: true,
      captureNetwork: true,
      captureConsole: true,
      captureClicks: true,
    },
    trigger: { position: 'bottom-right' },
  });
}

initSwake();

<script lang="ts">
  import { page } from '$app/stores';
  import Swake from '@swake/web';

  $: if ($page.data.user) {
    Swake.identify({
      userId: $page.data.user.id,
      email: $page.data.user.email,
      name: $page.data.user.name,
    });
  } else {
    Swake.clearIdentity();
  }
</script>

<slot />

import { writable, readonly } from 'svelte/store';
import Swake from '@swake/web';

const _userId = writable<string | null>(null);
const _unreadCount = writable(0);
let pollTimer: ReturnType<typeof setInterval> | null = null;

async function refreshUnread() {
  let uid: string | null = null;
  _userId.subscribe((v) => (uid = v))();
  if (!uid) return;
  try {
    const count = await Swake.getUnreadCount();
    _unreadCount.set(count);
  } catch { /* non-fatal */ }
}

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

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

export const userId = readonly(_userId);
export const unreadCount = readonly(_unreadCount);

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

export function clearIdentity() {
  Swake.clearIdentity();
  _userId.set(null);
  _unreadCount.set(0);
  stopPolling();
}

<script lang="ts">
  import Swake from '@swake/web';
  import { userId, unreadCount, clearIdentity } from '$lib/stores/swake';
</script>

<header>
  {#if $userId}
    <span>Notifications: {$unreadCount}</span>
    <button on:click={() => Swake.showFeedbackForm()}>Feedback</button>
    <button on:click={clearIdentity}>Log out</button>
  {/if}
</header>

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',
  },
});

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

<button on:click={openBugReport}>Report a Bug</button>
<button on:click={openFeatureRequest}>Request a Feature</button>

<!-- 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 lang="ts">
  import Swake from '@swake/web';

  let title = '';
  let description = '';
  let file: File | null = null;
  let submitting = false;

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

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

<form on:submit|preventDefault={onSubmit}>
  <input bind:value={title} placeholder="What went wrong?" required />
  <textarea bind:value={description} placeholder="Steps to reproduce..." />
  <input type="file" accept="image/*,.pdf" on:change={onFileChange} />
  <button type="submit" disabled={submitting}>Submit Bug Report</button>
</form>

// 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();

<script lang="ts">
  import { page } from '$app/stores';
  import Swake from '@swake/web';

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

  $: {
    const hide = hiddenRoutes.some((r) => $page.url.pathname.startsWith(r));
    Swake.setTriggerVisible(!hide);
  }
</script>

<slot />

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 Swake from '@swake/web';

// Register survey event listeners alongside init
Swake.onSurveyCompleted((event) => {
  // Send to your analytics provider
  analytics.track('survey_completed', {
    surveyId: event.survey.id,
    surveyType: event.survey.type,
    answerCount: event.response.answers.length,
  });
});

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

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 lang="ts">
  import { onMount } from 'svelte';
  import Swake from '@swake/web';

  let items: any[] = [];

  onMount(async () => {
    const result = await Swake.getBoardItems('public-roadmap', { sort: 'votes' });
    items = 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++;
    }
    items = items; // trigger reactivity
  }
</script>

{#each items as item (item.id)}
  <div class="roadmap-item">
    <button on:click={() => toggleVote(item)}>
      {item.hasVoted ? 'Voted' : 'Vote'} ({item.voteCount})
    </button>
    <h3>{item.title}</h3>
    <span>{item.status}</span>
  </div>
{/each}

// 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 lang="ts">
  import { onMount, onDestroy } from 'svelte';
  import Swake from '@swake/web';

  let count = 0;
  let timer: ReturnType<typeof setInterval> | null = null;

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

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

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

{#if count > 0}
  <span class="badge">{count}</span>
{/if}

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();

<script lang="ts">
  import { afterNavigate } from '$app/navigation';
  import Swake from '@swake/web';

  afterNavigate(({ to }) => {
    if (to?.url) {
      Swake.addBreadcrumb({
        category: 'navigation',
        message: `Navigated to ${to.url.pathname}`,
      });
    }
  });
</script>

<slot />

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 Svelte 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=svelte". Determine whether this is SvelteKit or plain Svelte + Vite and say which you found — the entry point and the env prefix both differ.
2. ASK BEFORE DECIDING ANYTHING (AskUserQuestion): (a) integration mode — DIRECT, meaning the ep_live_ key ships in the browser via PUBLIC_SWAKE_API_KEY for SvelteKit or VITE_SWAKE_API_KEY for plain Vite (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 AT THE CLIENT ENTRY — add @swake/web. In SvelteKit put the wiring in src/hooks.client.ts, which only ever runs in the browser; in plain Svelte + Vite put it in src/main.ts. Read config from $env/static/public (SvelteKit) or import.meta.env (Vite). Load the widgets with await import('@swake/web/ui') so they stay out of the initial bundle, and never import them from a module that also runs on the server.
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 a SvelteKit endpoint you add at src/routes/api/swake/[...path]/+server.ts, which forwards method, path, query and body to the Swake API, 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. Drive it from a store subscription or a reactive statement on the session in +layout.svelte, so a session restored during hydration identifies as well as 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. Confirm it against a real build (vite build && vite preview), not just dev, so any server-side evaluation of the widget layer surfaces.