Widget Kurulumu

Web Widget Kurulumu

Yanıtly web widget'ını sitenize ekleyerek müşterilerinize AI destekli canlı destek sunun. Tek satır kodla kurulum, tam özelleştirme.

Hızlı Kurulum

Aşağıdaki kodu sitenizin </body> etiketinden hemen önce yapıştırın:

Minimum Kurulumhtml
<!-- Yanıtly Web Widget -->
<script
  src="https://yanitly.com/widget/embed.js"
  data-tenant-id="YOUR_TENANT_ID"
  async
></script>
Bu kadar! Widget otomatik olarak sayfanın sağ alt köşesinde görünecektir.

Tenant ID'nizi Yanıtly paneli → Ayarlar → Widget bölümünden alabilirsiniz.

Özelleştirme

Widget'ı markanıza uygun hale getirmek için YanitlyConfig nesnesini kullanın:

Tam Yapılandırmahtml
<script>
  window.YanitlyConfig = {
    tenantId: 'YOUR_TENANT_ID',

    // Pozisyon
    position: 'bottom-right', // bottom-right | bottom-left

    // Dil
    language: 'tr', // tr | en

    // Tema
    theme: {
      primaryColor: '#6C3AED',
      headerTitle: 'Size Nasıl Yardımcı Olabiliriz?',
      headerSubtitle: 'Genellikle birkaç dakika içinde yanıt veririz',
      welcomeMessage: 'Merhaba! 👋 Size nasıl yardımcı olabiliriz?',
      placeholder: 'Mesajınızı yazın...',
      poweredByText: 'Yanıtly ile güçlendirilmiştir',
    },

    // Davranış
    behavior: {
      autoOpen: false,           // Otomatik açılsın mı?
      autoOpenDelay: 5000,       // Otomatik açılma gecikmesi (ms)
      soundEnabled: true,        // Bildirim sesi
      showUnreadBadge: true,     // Okunmamış mesaj rozeti
      persistConversation: true, // Konuşmayı kaydet
    },

    // Başlatıcı buton
    launcher: {
      icon: 'chat',    // chat | support | help
      tooltip: 'Bize yazın!',
      size: 'medium',  // small | medium | large
    },
  };
</script>
<script src="https://yanitly.com/widget/embed.js" async></script>

Özel CSS

Widget'ın görünümünü CSS ile daha da özelleştirebilirsiniz:

Özel CSS Değişkenlericss
/* Widget CSS değişkenleri */
:root {
  --yanitly-primary: #6C3AED;
  --yanitly-primary-hover: #5B21B6;
  --yanitly-bg: #ffffff;
  --yanitly-text: #1f2937;
  --yanitly-border-radius: 16px;
  --yanitly-font-family: 'Inter', sans-serif;
  --yanitly-launcher-size: 56px;
  --yanitly-z-index: 9999;
}

JavaScript API

Widget'ı programatik olarak kontrol etmek için JavaScript API'sini kullanın:

YanitlyWidget.open()Widget'ı aç
YanitlyWidget.close()Widget'ı kapat
YanitlyWidget.toggle()Aç/kapat
YanitlyWidget.isOpen()Açık mı kontrol et (boolean)
YanitlyWidget.setUser(user)Kullanıcı bilgisi ayarla
YanitlyWidget.clearUser()Kullanıcı bilgisini temizle
YanitlyWidget.sendMessage(text)Programatik mesaj gönder
YanitlyWidget.on(event, callback)Olay dinleyicisi ekle
YanitlyWidget.destroy()Widget'ı kaldır
Kullanım Örneklerijavascript
// Özel butona tıklandığında widget'ı aç
document.getElementById('support-btn').addEventListener('click', () => {
  window.YanitlyWidget.open();
});

// Belirli bir sayfada otomatik aç
if (window.location.pathname === '/checkout') {
  window.YanitlyWidget.open();
}

// Olayları dinle
window.YanitlyWidget.on('open', () => {
  console.log('Widget açıldı');
  analytics.track('support_widget_opened');
});

window.YanitlyWidget.on('messageSent', (message) => {
  console.log('Mesaj gönderildi:', message.text);
});

Kullanıcı Tanımlama

Giriş yapmış kullanıcıların bilgilerini widget'a aktararak kişiselleştirilmiş destek sunun:

Kullanıcı Bilgisi Aktarımıjavascript
window.YanitlyConfig = {
  tenantId: 'YOUR_TENANT_ID',
  user: {
    // Zorunlu alanlar
    externalId: 'user_12345',     // Sisteminizdeki kullanıcı ID
    email: 'ahmet\u0040example.com',

    // Opsiyonel alanlar
    name: 'Ahmet Yılmaz',
    phone: '+905551234567',
    avatar: 'https://example.com/avatar.jpg',

    // Özel metadata
    metadata: {
      plan: 'professional',
      company: 'Acme Inc.',
      signupDate: '2025-01-15',
      orderId: 'ORD-789',
    },
  },
};
Kullanıcı bilgileri operatör panelinde görüntülenir. Böylece operatörler müşteri hakkında daha fazla bağlam elde eder.

Platform Rehberleri

🔌 WordPress

  1. 1. Görünüm → Tema Düzenleyici → footer.php dosyasını açın
  2. 2. </body> etiketinden önce widget kodunu yapıştırın
  3. 3. Dosyayı kaydedin

Alternatif: "Insert Headers and Footers" eklentisini kullanabilirsiniz.

🛒 Shopify

  1. 1. Online Mağaza → Temalar → Düzenle butonuna tıklayın
  2. 2. theme.liquid dosyasını açın
  3. 3. </body> etiketinden önce widget kodunu ekleyin
Shopify — Müşteri Bilgisi Aktarımıhtml
{% if customer %}
<script>
  window.YanitlyConfig = {
    tenantId: 'YOUR_TENANT_ID',
    user: {
      externalId: '{{ customer.id }}',
      email: '{{ customer.email }}',
      name: '{{ customer.name }}',
    }
  };
</script>
{% endif %}
<script src="https://yanitly.com/widget/embed.js" async></script>

⚛️ React / Next.js

React Bileşenitsx
// components/YanitlyWidget.tsx
'use client';
import { useEffect } from 'react';

interface YanitlyWidgetProps {
  tenantId: string;
  user?: { name: string; email: string };
}

export default function YanitlyWidget({ tenantId, user }: YanitlyWidgetProps) {
  useEffect(() => {
    // Config ayarla
    (window as any).YanitlyConfig = {
      tenantId,
      ...(user && { user }),
    };

    // Script yükle
    const script = document.createElement('script');
    script.src = 'https://yanitly.com/widget/embed.js';
    script.async = true;
    document.body.appendChild(script);

    return () => {
      script.remove();
      (window as any).YanitlyWidget?.destroy();
    };
  }, [tenantId, user]);

  return null;
}

// Kullanım (layout.tsx veya page.tsx)
<YanitlyWidget
  tenantId="YOUR_TENANT_ID"
  user={{ name: 'Ahmet', email: 'ahmet\u0040example.com' }}
/>

Widget Olayları

openWidget açıldığında
closeWidget kapandığında
messageSentKullanıcı mesaj gönderdiğinde
messageReceivedYanıt alındığında
readyWidget yüklenip hazır olduğunda
errorBir hata oluştuğunda
unreadCountOkunmamış mesaj sayısı değiştiğinde

Mobil Uyumluluk

Widget otomatik olarak mobil cihazlarda tam ekran modunda açılır. Ek yapılandırma gerekmez.

Dokunmatik optimize arayüz
Tam ekran mobil mod
Klavye uyumlu giriş alanı
Hızlı yükleme (~45KB gzip)

İlgili Kaynaklar

Widget Entegrasyonu API Referansı