Framework Examples

VibePing works with any web app. Here's how to add it to the most common setups.

Full framework examples

Looking for complete, runnable starter projects instead of copy-paste snippets? The examples/↗ directory in the open-source repo has full working setups for:

Next.js App Router — examples/nextjs-app-router/↗
Next.js Pages Router — examples/nextjs-pages/↗
React + Vite — examples/react-vite/↗
Vanilla HTML — examples/vanilla-js/↗

Each example is MIT-licensed, pinned to @vibeping/sdk@^0.2.0, and runnable in under a minute. Clone the repo, cd into the example you want, drop in your API key, and go. See the SDK License page for details on how the MIT license applies to the examples.

If you just want a snippet to paste into an existing project, keep reading.

Plain HTML

Add the script tag to your <head>:

<!DOCTYPE html>
<html>
<head>
  <title>My App</title>
  <script
    src="https://cdn.jsdelivr.net/npm/@vibeping/sdk@latest/dist/vibeping.umd.js"
    data-id="vp_your_api_key"
  ></script>
</head>
<body>
  <h1>Hello world</h1>
 
  <button onclick="window.__vibeping.track('cta_click')">
    Click me
  </button>
</body>
</html>

Lovable

In your Lovable project, open index.html and add the script tag inside <head>:

<script
  src="https://cdn.jsdelivr.net/npm/@vibeping/sdk@latest/dist/vibeping.umd.js"
  data-id="vp_your_api_key"
></script>

Or just tell Lovable:

"Add this script tag to the head of index.html: <script src="https://cdn.jsdelivr.net/npm/@vibeping/sdk@latest/dist/vibeping.umd.js" data-id="vp_your_api_key"></script>"

That's it. Lovable apps are SPAs, and the SDK auto-detects route changes via history.pushState.

Tracking custom events in Lovable

If you want to track button clicks or other interactions, add this anywhere in your components:

// Works in any component
(window as any).__vibeping?.track('signup_clicked', {
  source: 'hero_section',
});

Bolt.new

Same deal as Lovable. Open your index.html and add to <head>:

<script
  src="https://cdn.jsdelivr.net/npm/@vibeping/sdk@latest/dist/vibeping.umd.js"
  data-id="vp_your_api_key"
></script>

Or tell Bolt:

"Add VibePing analytics to my app. Put this in the head: <script src="https://cdn.jsdelivr.net/npm/@vibeping/sdk@latest/dist/vibeping.umd.js" data-id="vp_your_api_key"></script>"

React (Vite / Create React App)

Option 1: Script tag in `index.html`

Add to index.html in your public/ folder:

<head>
  <script
    src="https://cdn.jsdelivr.net/npm/@vibeping/sdk@latest/dist/vibeping.umd.js"
    data-id="vp_your_api_key"
  ></script>
</head>

Option 2: npm package

npm install @vibeping/sdk

Initialize in your app entry point (main.tsx or App.tsx):

import { init } from '@vibeping/sdk';
 
const vibeping = init({ id: 'vp_your_api_key' });
 
// Track events anywhere
vibeping.track('button_click', { variant: 'primary' });

Or initialize once and use the module-level exports:

// main.tsx
import { init } from '@vibeping/sdk';
init({ id: 'vp_your_api_key' });
 
// any-component.tsx
import { track, identify } from '@vibeping/sdk';
 
function CheckoutButton() {
  return (
    <button onClick={() => track('checkout_started', { items: 3 })}>
      Checkout
    </button>
  );
}

Next.js (App Router)

Option 1: Script component

In your root layout (app/layout.tsx):

import Script from 'next/script';
 
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <body>
        {children}
        <Script
          src="https://cdn.jsdelivr.net/npm/@vibeping/sdk@latest/dist/vibeping.umd.js"
          data-id="vp_your_api_key"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

Option 2: npm package with a client component

// components/vibeping.tsx
'use client';
 
import { useEffect } from 'react';
import { init } from '@vibeping/sdk';
 
export function VibePingProvider() {
  useEffect(() => {
    init({ id: 'vp_your_api_key' });
  }, []);
 
  return null;
}

// app/layout.tsx
import { VibePingProvider } from '@/components/vibeping';
 
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <body>
        {children}
        <VibePingProvider />
      </body>
    </html>
  );
}

Tracking events in Next.js

'use client';
 
import { track } from '@vibeping/sdk';
 
export function PricingButton() {
  return (
    <button onClick={() => track('pricing_viewed', { plan: 'pro' })}>
      View Pricing
    </button>
  );
}

Next.js (Pages Router)

Add to pages/_app.tsx:

import Script from 'next/script';
import type { AppProps } from 'next/app';
 
export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Component {...pageProps} />
      <Script
        src="https://cdn.jsdelivr.net/npm/@vibeping/sdk@latest/dist/vibeping.umd.js"
        data-id="vp_your_api_key"
        strategy="afterInteractive"
      />
    </>
  );
}