QuickBit Iris Widget 🤖

The official AI Assistant & User Feedback Collector for QuickBit.
Drop-in widget with 0 dependencies, native React/Next.js support, 60fps animations, and zero-config setup.

⚡ Installation

npm install quickbit-widget
# or
yarn add quickbit-widget
# or
pnpm add quickbit-widget

🚀 Quickstart

1. Next.js / React (App Router & Pages Router)

Just drop the component into your root layout (app/layout.tsx or pages/_app.tsx). It handles server-side rendering (SSR), mounting, and unmounting automatically:

import { QuickBitWidget } from 'quickbit-widget';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <QuickBitWidget apiKey="qb_live_your_key_here" />
      </body>
    </html>
  );
}

Or using the React hook:

import { useQuickBit } from 'quickbit-widget';

export function FeedbackButton() {
  const { show, track } = useQuickBit();

  const handleHelpClick = () => {
    track('button', 'click', 'open_help');
    show();
  };

  return <button onClick={handleHelpClick}>Need help?</button>;
}

2. Vue 3 / Nuxt 3

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script setup>
import { onMounted, onUnmounted } from 'vue';
import { init, destroy } from 'quickbit-widget';

onMounted(() => {
  init({ apiKey: 'qb_live_your_key_here' });
});

onUnmounted(() => {
  destroy();
});
</script>

3. Svelte / SvelteKit

<script>
  import { onMount, onDestroy } from 'svelte';
  import { init, destroy } from 'quickbit-widget';

  onMount(() => {
    init({ apiKey: 'qb_live_your_key_here' });
  });

  onDestroy(() => {
    destroy();
  });
</script>

<slot />

4. HTML / Shopify / WordPress / Webflow / Framer (Script Tag)

Paste this single line before the closing </body> tag:

<script 
  src="https://unpkg.com/quickbit-widget/dist/widget.js" 
  data-api-key="qb_live_your_key_here" 
  async
></script>

Self-hosted backend? Just point the src to your own API:

<script 
  src="https://api.yourdomain.com/widget.js" 
  data-api-key="qb_live_your_key_here" 
  async
></script>

🛠️ Programmatic API

You can control the widget anywhere in your frontend code:

import { QuickBit } from 'quickbit-widget';

// Initialize
await QuickBit.init({
  apiKey: 'qb_live_your_key_here',
  position: 'right', // 'left' | 'right'
  theme: 'dark',     // 'dark' | 'light'
});

// Show / Open Iris
QuickBit.show();

// Hide / Minimize
QuickBit.hide();

// Track custom user actions or funnels
QuickBit.track('checkout', 'submit_payment', 'success', { amount: 49.00 });

// Clean up
QuickBit.destroy();

⚙️ Configuration Options

| Option | Type | Default | Description | | :--- | :--- | :--- | :--- | | apiKey | string | Required | Your project API key (project-scoped). | | apiUrl | string | Auto-detected | Base URL of the QuickBit API. Defaults to your self-hosted host or cloud endpoint. | | position | 'left' \| 'right' | 'right' | Screen corner placement. | | theme | 'dark' \| 'light' | 'dark' | Visual theme mode. | | primaryColor | string | Auto-detected | Brand accent color hex (e.g., '#8a6cff'). | | anonymousId | string | Auto-generated | Custom user session ID for tracking. |

🔒 Performance & Privacy

• 0 Dependencies: Pure, ultra-lightweight JavaScript bundle (~57KB).
• SSR-Safe: Never throws window is not defined in Next.js, Nuxt, or Remix.
• Async & Deferred: Zero impact on First Contentful Paint (FCP) and Lighthouse scores.
• Privacy-First: No cookies, no third-party tracker scripts.

📄 License

MIT © QuickBit