Kurulum Yöntemleri

Widget'ı sitenize CDN (script etiketi) veya npm paketiyle ekleyebilirsiniz. En basit haliyle tek satır yeter; aşağıda her ortam için örnekler var.

Kurulum

npm kullanıyorsanız önce paketi ekleyin:

yarn add webfon-client

Sonra widget'ı ortamınıza göre mount edin:

CDN

<!-- Statik site, WordPress veya herhangi bir HTML sayfası -->
<script src="https://assets.webfon.io/sdk.js" data-provider-id="PROVIDER_ID" async></script>

Vue

<script setup>
import { onMounted, onUnmounted } from 'vue';
import { initWebfon } from 'webfon-client';

let widget;
onMounted(() => { widget = initWebfon({ providerId: 'PROVIDER_ID' }); });
onUnmounted(() => widget?.destroy());
</script>

React

import { useEffect } from 'react';
import { initWebfon } from 'webfon-client';

export function WebfonWidget() {
  useEffect(() => {
    const widget = initWebfon({ providerId: 'PROVIDER_ID' });
    return () => widget?.destroy();          // unmount'ta temizle
  }, []);

  return null; // widget kendi host elemanını Shadow DOM'a ekler
}

Svelte

<script>
  import { onMount, onDestroy } from 'svelte';
  import { initWebfon } from 'webfon-client';

  let widget;
  onMount(() => { widget = initWebfon({ providerId: 'PROVIDER_ID' }); });
  onDestroy(() => widget?.destroy());
</script>

CDN bundle, DOM hazır olduğunda bir providerId bulursa widget'ı otomatik mount eder. npm'de initWebfon(config) bir örnek (instance) döndürür — tüm metodlar için bkz. Metod Referansı. Widget kendi Shadow DOM host'unu oluşturur; host Vue/React/Svelte uygulamanızdan bağımsızdır.

CDN data-* öznitelikleri

data-* yalnızca metin (string) taşıyabilir:

Öznitelik	Zorunlu	Açıklama
data-provider-id	✅	Sağlayıcı kimliği
data-api-url	—	API kök adresini ezer (varsayılan: https://api.webfon.io)

getToken gibi fonksiyon taşıyan ayarlar data-* ile verilemez; bunun için script'ten öncewindow.WebfonConfig tanımlayın (aşağıdaki tam örneğe bakın). Manuel kontrol (otomatik mount yerine) için window.Webfon.init() kullanılabilir.

Tam örnek

Üye girişi (getToken), kendi "Sohbet" butonunuz, olay callback'i ve temizleme ile eksiksiz kurulum. getToken, widget'ın bağlantı anahtarı parmak izini (jkt) alır ve backend'inize iletir; backend soket token'ını imzalar (bkz. Kimlik Doğrulama).

CDN

<script>
  window.WebfonConfig = {
    providerId: 'PROVIDER_ID',
    apiUrl: 'https://api.webfon.io',            // opsiyonel (varsayılan bu)
    getToken: async ({ jkt }) => {              // üye değilse null → ziyaretçi
      const res = await fetch('/api/webfon-token', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        credentials: 'include',
        body: JSON.stringify({ jkt }),
      });
      return res.ok ? (await res.json()).token : null;
    },
    onMessage: (m) => console.log('yeni mesaj', m),
  };
</script>
<script src="https://assets.webfon.io/sdk.js" async></script>
<button onclick="window.Webfon.open()">Canlı Destek</button>

Vue

<script setup>
import { onMounted, onUnmounted } from 'vue';
import { initWebfon, toggleApp } from 'webfon-client';

let widget;
onMounted(() => {
  widget = initWebfon({
    providerId: 'PROVIDER_ID',
    getToken: async ({ jkt }) => {              // üye değilse null → ziyaretçi
      const res = await fetch('/api/webfon-token', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        credentials: 'include',
        body: JSON.stringify({ jkt }),
      });
      return res.ok ? (await res.json()).token : null;
    },
    onMessage: (m) => console.log('yeni mesaj', m),
  });
});
onUnmounted(() => widget?.destroy());
</script>

<template>
  <button @click="toggleApp(true)">Canlı Destek</button>
</template>

React

import { useEffect } from 'react';
import { initWebfon, toggleApp } from 'webfon-client';

export function WebfonWidget() {
  useEffect(() => {
    const widget = initWebfon({
      providerId: 'PROVIDER_ID',
      getToken: async ({ jkt }) => {            // üye değilse null → ziyaretçi
        const res = await fetch('/api/webfon-token', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          credentials: 'include',
          body: JSON.stringify({ jkt }),
        });
        return res.ok ? (await res.json()).token : null;
      },
      onMessage: (m) => console.log('yeni mesaj', m),
    });
    return () => widget?.destroy();
  }, []);

  return <button onClick={() => toggleApp(true)}>Canlı Destek</button>;
}

Svelte

<script>
  import { onMount, onDestroy } from 'svelte';
  import { initWebfon, toggleApp } from 'webfon-client';

  let widget;
  onMount(() => {
    widget = initWebfon({
      providerId: 'PROVIDER_ID',
      getToken: async ({ jkt }) => {            // üye değilse null → ziyaretçi
        const res = await fetch('/api/webfon-token', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          credentials: 'include',
          body: JSON.stringify({ jkt }),
        });
        return res.ok ? (await res.json()).token : null;
      },
      onMessage: (m) => console.log('yeni mesaj', m),
    });
  });
  onDestroy(() => widget?.destroy());
</script>

<button on:click={() => toggleApp(true)}>Canlı Destek</button>

TIP

Verilebilecek tüm parametreler için Yapılandırma, üye girişi ve token imzalama örnekleri için Kimlik Doğrulama sayfasına bakın.