@bliptarjs/sdk

Micro-feedback that users actually respond to.

Website · Documentation

Users abandon your app, churn from your service, and leave features unused – without ever telling you why. Traditional surveys are too long. Pop-ups are annoying. You're left guessing.

Bliptar captures real-time user sentiment with nano feedback forms – quick 1-2 question surveys that appear at exactly the right moment.

One question. Two seconds. Real insights.

Features

• Thumbs up/down · Emoji scales · Star ratings · NPS · Single choice · Text input
• Smart triggers – Page view, scroll depth, time on page, exit intent, custom events
• Dashboard controlled – No code changes to update campaigns
• Lightweight – ~8KB gzipped, zero dependencies
• Privacy first – No cookies, GDPR friendly

Works With

Installation

npm install @bliptarjs/sdk

Quick Start

import { createBliptar } from '@bliptarjs/sdk';

const bliptar = createBliptar({
  apiKey: 'your-api-key',
});

bliptar.init();

That's it! The SDK automatically fetches your campaigns and sets up triggers.

How It Works

1. Create campaigns in the Bliptar Dashboard
2. Configure triggers – page view, scroll depth, time on page, exit intent, or custom events
3. Add the SDK to your app with your API key
4. Done – forms appear automatically based on your campaign rules

Core API

| Method | Description | |--------|-------------| | init() | Initialize SDK and fetch campaigns | | identify(userId, attributes?) | Associate feedback with a user | | track(event, data?) | Trigger custom events | | destroy() | Cleanup listeners and timers |

// Identify user when they log in
bliptar.identify('user-123', { plan: 'pro' });

// Track custom events
bliptar.track('checkout_complete', { total: 99.99 });

For the full API reference, see the Documentation.

Framework Examples

import { useEffect } from 'react';
import { createBliptar } from '@bliptarjs/sdk';

const bliptar = createBliptar({
  apiKey: process.env.REACT_APP_BLIPTAR_KEY,
});

function App() {
  useEffect(() => {
    bliptar.init();
    return () => bliptar.destroy();
  }, []);

  return <div>Your app</div>;
}

// app/providers.js
'use client';
import { useEffect } from 'react';
import { createBliptar } from '@bliptarjs/sdk';

const bliptar = typeof window !== 'undefined'
  ? createBliptar({ apiKey: process.env.NEXT_PUBLIC_BLIPTAR_KEY })
  : null;

export function BliptarProvider({ children }) {
  useEffect(() => {
    bliptar?.init();
    return () => bliptar?.destroy();
  }, []);
  return children;
}

<script setup>
import { onMounted, onUnmounted } from 'vue';
import { createBliptar } from '@bliptarjs/sdk';

const bliptar = createBliptar({
  apiKey: import.meta.env.VITE_BLIPTAR_KEY,
});

onMounted(() => bliptar.init());
onUnmounted(() => bliptar.destroy());
</script>

// bliptar.service.ts
import { Injectable, OnDestroy } from '@angular/core';
import { createBliptar, BliptarInstance } from '@bliptarjs/sdk';

@Injectable({ providedIn: 'root' })
export class BliptarService implements OnDestroy {
  private bliptar: BliptarInstance;

  constructor() {
    this.bliptar = createBliptar({ apiKey: environment.bliptarKey });
    this.bliptar.init();
  }

  ngOnDestroy() {
    this.bliptar.destroy();
  }
}

TypeScript

Full TypeScript support included.

import { createBliptar, BliptarConfig, BliptarInstance } from '@bliptarjs/sdk';

Links

• Website
• Documentation
• npm

License

MIT