JavaScript SDK | Veribenim Geliştirici Belgeleri

Not: SDK'yı iki farklı amaçla kullanabilirsiniz. Sadece banner'ı göstermek istiyorsanız script tag yeterli — SDK kurulumu gerekmez. Form rızası takibi, DSAR veya tercih API'si gibi ek işlemler yapacaksanız SDK'yı kurun.

Basit Yöntem: Script Tag

Veribenim panelinden bundle URL'nizi kopyalayın (Siteniz → Entegrasyon) ve HTML'e yapıştırın. Başka bir şey gerekmez.

html

<!-- <head> veya </body> öncesine ekleyin -->
<script src="https://bundles.veribenim.com/pariettecom.js" async></script>

<!-- Bundle URL'niz panelde Siteniz → Entegrasyon altında yazar. -->

Gelişmiş Yöntem: SDK

Form rızası kaydetmek, DSAR başvurusu almak veya ziyaretçi tercihlerini programatik olarak okumak/yazmak istiyorsanız SDK'yı kurun. Token'ınızı Veribenim panelinden alın: Siteniz → Entegrasyon → Token.

Kurulum

bash

npm install @veribenim/core

import { init } from '@veribenim/core';

const veribenim = init({
  token: 'BURAYA_TOKEN_YAPISTIRIN',
  lang: 'tr', // 'tr' | 'en'
});

Konfigürasyon

Parametre	Tip	Açıklama
`token`	string	Zorunlu. Panelden alınan environment token.
`lang`	'tr' \| 'en'	Banner dili. Varsayılan: 'tr'
`debug`	boolean	Console log. Varsayılan: false

Form Rızası Takibi

İletişim formu, üyelik, bülten gibi kendi formlarınızdaki KVKK onay kutucuğunu kayıt altına alın. Şema zorunluluğu yoktur.

await veribenim.logFormConsent({
  form_name: 'contact',           // Formun adı (serbest)
  consented: true,                // Kullanıcı işaretledi mi?
  consent_text: 'KVKK kapsamında verilerimin işlenmesini onaylıyorum.',
  metadata: {                     // İsteğe bağlı ek veri
    page: '/iletisim',
    email: 'user@example.com',
  },
});

DSAR Başvurusu

Ziyaretçilerin veri haklarını kullanabilmesi için başvuru oluşturun. 30 günlük yasal süre otomatik hesaplanır.

const result = await veribenim.submitDsar({
  request_type: 'erasure',
  full_name: 'Ahmet Yılmaz',
  email: 'ahmet@example.com',
  description: 'Tüm verilerimin silinmesini talep ediyorum.',
});

// result.deadline → 30 günlük yasal sürenin bitiş tarihi

// Desteklenen tipler:
// 'access' | 'rectification' | 'erasure' | 'restriction'
// 'portability' | 'objection' | 'automated'

Tercih API'si

// Ziyaretçinin mevcut tercihlerini oku
const prefs = await veribenim.getPreferences(sessionId);

// Tercihleri güncelle
await veribenim.savePreferences({
  necessary: true,
  analytics: true,
  marketing: false,
  preferences: true,
}, sessionId);

Framework Entegrasyonları

Paket	Açıklama
`@veribenim/react`	VeribenimProvider, ConsentBanner, useVeribenim hook'u
`@veribenim/nextjs`	App Router & Pages Router desteği
`@veribenim/vue`	Vue 3 plugin ve useVeribenim composable
`@veribenim/nuxt`	Nuxt 3 modülü — otomatik useVeribenim import

React

bash

npm install @veribenim/react

tsx

import { VeribenimProvider, useVeribenim } from '@veribenim/react';

// Kök bileşen
export default function App() {
  return (
    <VeribenimProvider config={{ token: 'BURAYA_TOKEN_YAPISTIRIN' }}>
      <YourApp />
    </VeribenimProvider>
  );
}

// Herhangi bir bileşende
function MyComponent() {
  const client = useVeribenimClient();

  const handleSubmit = async (e) => {
    await client.logFormConsent({
      form_name: 'contact',
      consented: e.target.kvkk.checked,
    });
  };
}

Next.js (App Router)

bash

npm install @veribenim/nextjs

tsx

// app/layout.tsx
import { VeribenimProvider } from '@veribenim/nextjs';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <VeribenimProvider config={{ token: process.env.NEXT_PUBLIC_VERIBENIM_TOKEN }}>
          {children}
        </VeribenimProvider>
      </body>
    </html>
  );
}

Vue 3

bash

npm install @veribenim/vue

// main.ts
import { VeribenimPlugin } from '@veribenim/vue';
app.use(VeribenimPlugin, { token: 'BURAYA_TOKEN_YAPISTIRIN' });

// Herhangi bir component'te
const { logFormConsent, submitDsar } = useVeribenim();

Nuxt 3

bash

npm install @veribenim/nuxt

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@veribenim/nuxt'],
  veribenim: { token: process.env.NUXT_PUBLIC_VERIBENIM_TOKEN },
});

// Otomatik import — herhangi bir sayfada:
const { logFormConsent } = useVeribenim();