Detaylı Kurulum Rehberi

Widget Kurulum Rehberi

Web sitenize chatbot widget'ı eklemek sadece 2 dakika sürer. Platform seçin, kodu kopyalayın, yapıştırın!

Kuruluma Başla Dashboard'a Git

Hızlı Başlangıç (2 Dakika)

Hesap Oluşturun

Ücretsiz hesap açın ve dashboard'a giriş yapın

Kodu Kopyalayın

Dashboard > Widget Ayarları'ndan embed kodunu alın

Sitenize Ekleyin

Kodu </body> etiketinden önce yapıştırın

Temel Embed Kodu

<script src="https://yapay-zeka-chatbot-widget.vercel.app/widget.js" data-yz-tenant-id="YOUR_TENANT_ID" async></script>

YOUR_TENANT_ID yerine Dashboard'dan aldığınız gerçek tenant ID'nizi yazın.

Platform Bazlı Kurulum

Kullandığınız platforma göre detaylı kurulum adımlarını takip edin

HTML / Statik Site

Kurulum rehberine git

WordPress

Kurulum rehberine git

Shopify

Kurulum rehberine git

Wix

Kurulum rehberine git

React / Next.js

Kurulum rehberine git

Özel Entegrasyon

Kurulum rehberine git

HTML / Statik Site Kurulumu

En basit kurulum yöntemi

1HTML dosyanızı açın

Web sitenizin ana HTML dosyasını (genellikle index.html) bir metin editörü ile açın.

2Embed kodunu yapıştırın

Kodu </body> etiketinden hemen önce yapıştırın:

<!DOCTYPE html>
<html>
<head>
  <title>Siteniz</title>
</head>
<body>
  <!-- Sayfa içeriğiniz -->
  
  <!-- YapayZekaChatbot Widget -->
  <script src="https://yapay-zeka-chatbot-widget.vercel.app/widget.js" data-yz-tenant-id="YOUR_TENANT_ID" async></script>
</body>
</html>

Tamamlandı!

Dosyayı kaydedin ve sayfayı yenileyin. Widget sağ alt köşede görünecektir.

WordPress Kurulumu

Eklenti ile kolay kurulum

Önerilen: "Insert Headers and Footers" veya "WPCode" eklentisi kullanın

1Eklenti yükleyin

WordPress yönetim panelinden Eklentiler → Yeni Ekle bölümüne gidin. "Insert Headers and Footers" veya "WPCode" eklentisini arayın ve yükleyin.

2Eklenti ayarlarına gidin

Ayarlar → Insert Headers and Footers veya Code Snippets menüsüne gidin.

3Kodu Footer bölümüne yapıştırın

"Scripts in Footer" veya "Footer" alanına embed kodunu yapıştırın ve kaydedin.

Alternatif: Tema Dosyasına Manuel Ekleme

Görünüm → Tema Dosya Düzenleyicisi → footer.php dosyasında </body> etiketinden önce kodu yapıştırın.

Tema güncellemelerinde kod silinebilir. Child tema kullanmanız önerilir.

Shopify Kurulumu

E-ticaret mağazanıza entegrasyon

1Shopify yönetim paneline girin

Shopify mağazanızın yönetim paneline giriş yapın.

2Tema ayarlarına gidin

Online Store → Themes bölümüne gidin. Aktif temanızda Actions → Edit code seçeneğine tıklayın.

3theme.liquid dosyasını bulun

Layout klasöründe theme.liquid dosyasını açın.

4Kodu yapıştırın ve kaydedin

</body> etiketinden hemen önce embed kodunu yapıştırın ve Save butonuna tıklayın.

Wix Kurulumu

Wix sitenize entegrasyon

1Wix Dashboard'a girin

Wix hesabınıza giriş yapın ve sitenizi seçin.

2Ayarlar menüsüne gidin

Settings → Custom Code veya Settings → Advanced → Custom Code bölümüne gidin.

3Yeni kod ekleyin

+ Add Code butonuna tıklayın. Embed kodunu yapıştırın ve şu ayarları seçin:

Place Code in: Body - end
Add Code to Pages: All pages

4Kaydedin ve yayınlayın

Apply butonuna tıklayın ve sitenizi yeniden yayınlayın.

React / Next.js Kurulumu

Modern framework entegrasyonu

Yöntem 1: Script Tag (Önerilen)

Next.js için next/script kullanın:

// app/layout.tsx veya pages/_app.tsx
import Script from 'next/script'

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Script
          src="https://yapay-zeka-chatbot-widget.vercel.app/widget.js"
          data-yz-tenant-id="YOUR_TENANT_ID"
          strategy="lazyOnload"
        />
      </body>
    </html>
  )
}

Yöntem 2: Programatik Kontrol

Widget'ı JavaScript ile kontrol edin:

// Widget'ı programatik olarak kontrol etme
useEffect(() => {
  // Widget yüklendikten sonra
  if (window.YZChatWidget) {
    // Widget'ı aç
    window.YZChatWidget.open()
    
    // Widget'ı kapat
    window.YZChatWidget.close()
    
    // Tema değiştir
    window.YZChatWidget.setTheme('dark')
  }
}, [])

TypeScript Tip Tanımları

// types/global.d.ts
declare global {
  interface Window {
    YZChatWidget: {
      init: (config: WidgetConfig) => void
      open: () => void
      close: () => void
      toggle: () => void
      setTheme: (theme: 'light' | 'dark') => void
      destroy: () => void
    }
  }
}

Özel Entegrasyon & API

Gelişmiş yapılandırma seçenekleri

Manuel Başlatma

Widget'ı otomatik başlatma yerine manuel olarak başlatın:

<script src="https://yapay-zeka-chatbot-widget.vercel.app/widget.js"></script>
<script>
  // Sayfa yüklendikten sonra manuel başlat
  document.addEventListener('DOMContentLoaded', function() {
    window.YZChatWidget.init({
      tenantId: 'YOUR_TENANT_ID',
      position: 'bottom-right',
      theme: 'auto',
      primaryColor: '#6366f1',
      accentColor: '#8b5cf6',
      welcomeMessage: 'Merhaba! Size nasıl yardımcı olabilirim?',
      autoOpen: false,
      showBranding: true
    });
  });
</script>

Event Listeners

Widget olaylarını dinleyin:

// Widget açıldığında
window.YZChatWidget.on('open', () => {
  console.log('Widget açıldı');
  // Analytics event gönder
});

// Widget kapandığında
window.YZChatWidget.on('close', () => {
  console.log('Widget kapandı');
});

// Mesaj gönderildiğinde
window.YZChatWidget.on('message', (data) => {
  console.log('Mesaj:', data);
});

Yapılandırma Seçenekleri

Parametre	Zorunlu	Açıklama	Örnek
`data-yz-tenant-id`	Evet	Benzersiz tenant kimliğiniz (Dashboard'dan alınır)	`abc123`
`data-yz-api-url`	Hayır	API sunucu adresi (varsayılan kullanılır)	`https://api.yapayzekachatbot.com`
`data-yz-position`	Hayır	Widget pozisyonu	`bottom-right \| bottom-left`
`data-yz-theme`	Hayır	Renk teması	`light \| dark \| auto`
`data-yz-primary-color`	Hayır	Ana renk (HEX)	`#6366f1`
`data-yz-accent-color`	Hayır	Vurgu rengi (HEX)	`#8b5cf6`
`data-yz-company-name`	Hayır	Firma adı	`Şirketim`
`data-yz-company-logo`	Hayır	Logo URL'i	`https://...`
`data-yz-welcome-message`	Hayır	Karşılama mesajı	`Merhaba! Size nasıl yardımcı olabilirim?`
`data-yz-auto-open`	Hayır	Otomatik açılma	`true \| false`
`data-yz-show-branding`	Hayır	YZ markası göster	`true \| false`

Özelleştirme

Dashboard'dan Özelleştirme

Renk ve tema seçimi
Karşılama mesajı
Hızlı yanıtlar
Buton stili
Pozisyon ayarı
Ses bildirimleri

Dashboard'a Git

Mobil Uyumluluk

Tam ekran mobil görünüm
Touch-friendly arayüz
Responsive tasarım
Hızlı yükleme (15KB)
PWA desteği
Sesli sohbet

Sorun Giderme

Widget görünmüyor

• Tenant ID'nin doğru olduğundan emin olun
• Kodun </body> etiketinden önce olduğunu kontrol edin
• Tarayıcı konsolunda hata olup olmadığını kontrol edin (F12)
• Ad blocker eklentilerini devre dışı bırakın

Widget yavaş yükleniyor

• async attribute'ünün ekli olduğundan emin olun
• CDN bağlantısını kontrol edin
• Sayfa performansını etkileyen diğer scriptleri kontrol edin

Stil çakışmaları

• Widget kendi shadow DOM'unu kullanır, çakışma olmamalı
• Global CSS reset'leri kontrol edin
• z-index değerlerini kontrol edin

Sıkça Sorulan Sorular

Widget kurulumu ne kadar sürer?

Temel kurulum sadece 2 dakika sürer. Embed kodunu kopyalayıp sitenize yapıştırmanız yeterli.

Teknik bilgi gerekiyor mu?

Hayır, kod bilgisi gerektirmez. Kopyala-yapıştır ile kurulum yapabilirsiniz. WordPress ve Shopify için eklenti desteği de mevcuttur.

Widget mobilde nasıl görünüyor?

Widget tamamen responsive tasarıma sahip. Mobilde tam ekran açılır ve kullanıcı dostu bir deneyim sunar.

Birden fazla siteye kurabilir miyim?

Evet, aynı tenant ID ile birden fazla siteye kurulum yapabilirsiniz. Her site için ayrı özelleştirme de mümkün.

Widget performansı etkiler mi?

Hayır, widget asenkron yüklenir ve sayfa performansını etkilemez. Sadece 15KB boyutundadır.

Özelleştirme seçenekleri neler?

Renk, tema, pozisyon, karşılama mesajı, hızlı yanıtlar, ses bildirimi ve daha fazlasını dashboard'dan özelleştirebilirsiniz.

Kuruluma Hazır mısınız?

Ücretsiz hesap oluşturun ve 2 dakikada chatbot'unuzu sitenize ekleyin.

Ücretsiz Başlayın Destek Alın