3 Dakika

HTML/JavaScript Kurulumu

Herhangi bir web sitesine JavaScript kodu ile chatbot entegrasyonu yapın.

Bu Yöntem Kimler İçin?

Özel HTML/CSS/JavaScript siteleri
React, Vue, Angular gibi modern framework'ler
Statik site oluşturucular (Next.js, Gatsby, Hugo)
Eklenti desteği olmayan platformlar

Adım 1: Tenant ID'nizi Alın

İlk olarak, YapayZekaChatbot dashboard'undan Tenant ID'nizi almanız gerekiyor.

1
Dashboard'a giriş yapın
yapayzekachatbot.com/giris-yap adresinden giriş yapın.
2
Kurulum sayfasına gidin
Sol menüden "Kurulum" seçeneğine tıklayın.
3
HTML/JavaScript kodunu kopyalayın
HTML/JavaScript kartındaki kodu kopyalayın.

Adım 2: Kodu Sitenize Ekleyin

Kopyaladığınız kodu HTML dosyanızın </body> etiketinden hemen önce yapıştırın.

HTML

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <title>Örnek Site</title>
</head>
<body>
  <!-- Sitenizin içeriği -->
  <h1>Merhaba Dünya</h1>
  
  <!-- YapayZekaChatbot Widget Kodu -->
  <script>
    (function() {
      window.YZChatbotConfig = {
        tenantId: 'YOUR_TENANT_ID', // Buraya kendi Tenant ID'nizi yazın
        position: 'bottom-right',
        theme: 'light'
      };
      
      var script = document.createElement('script');
      script.src = 'https://widget.yapayzekachatbot.com/widget.js';
      script.async = true;
      document.body.appendChild(script);
    })();
  </script>
</body>
</html>

Önemli: YOUR_TENANT_ID yerine kendi Tenant ID'nizi yazmayı unutmayın!

Yapılandırma Seçenekleri

YZChatbotConfig objesi ile widget'ın davranışını özelleştirebilirsiniz:

JavaScript

window.YZChatbotConfig = {
  // Zorunlu
  tenantId: 'YOUR_TENANT_ID',
  
  // Opsiyonel
  position: 'bottom-right',  // 'bottom-right', 'bottom-left', 'top-right', 'top-left'
  theme: 'light',            // 'light', 'dark', 'auto'
  primaryColor: '#10b981',   // Ana renk (hex)
  language: 'tr',            // 'tr', 'en', 'de', 'fr', 'es'
  
  // Launcher ayarları
  launcher: {
    type: 'bubble',          // 'bubble', 'button', 'tab'
    label: 'Yardım',         // Launcher metni
    icon: 'chat'             // 'chat', 'support', 'robot'
  },
  
  // Hoş geldin mesajı
  welcomeMessage: 'Merhaba! Size nasıl yardımcı olabilirim?',
  
  // Otomatik açılma
  autoOpen: false,           // Sayfa yüklendiğinde otomatik aç
  autoOpenDelay: 3000,       // Otomatik açılma gecikmesi (ms)
  
  // Mobil ayarları
  mobile: {
    fullScreen: true,        // Mobilde tam ekran
    position: 'bottom'       // Mobilde pozisyon
  }
};

Framework Entegrasyonları

React

React uygulamanızda useEffect hook'u ile widget'ı yükleyin:

React (TypeScript)

import { useEffect } from 'react';

function App() {
  useEffect(() => {
    // Widget yapılandırması
    window.YZChatbotConfig = {
      tenantId: 'YOUR_TENANT_ID',
      position: 'bottom-right',
      theme: 'light'
    };
    
    // Widget script'ini yükle
    const script = document.createElement('script');
    script.src = 'https://widget.yapayzekachatbot.com/widget.js';
    script.async = true;
    document.body.appendChild(script);
    
    // Cleanup
    return () => {
      document.body.removeChild(script);
    };
  }, []);
  
  return (
    <div className="App">
      <h1>Merhaba Dünya</h1>
    </div>
  );
}

export default App;

Next.js

Next.js'de _app.tsx veya layout.tsx dosyasında widget'ı yükleyin:

Next.js (App Router)

// app/layout.tsx
import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html lang="tr">
      <body>
        {children}
        
        <Script id="yz-chatbot-config" strategy="beforeInteractive">
          {`
            window.YZChatbotConfig = {
              tenantId: 'YOUR_TENANT_ID',
              position: 'bottom-right',
              theme: 'light'
            };
          `}
        </Script>
        
        <Script
          src="https://widget.yapayzekachatbot.com/widget.js"
          strategy="lazyOnload"
        />
      </body>
    </html>
  );
}

Vue.js

Vue uygulamanızda mounted lifecycle hook'u ile widget'ı yükleyin:

Vue.js

<template>
  <div id="app">
    <h1>Merhaba Dünya</h1>
  </div>
</template>

<script>
export default {
  name: 'App',
  mounted() {
    // Widget yapılandırması
    window.YZChatbotConfig = {
      tenantId: 'YOUR_TENANT_ID',
      position: 'bottom-right',
      theme: 'light'
    };
    
    // Widget script'ini yükle
    const script = document.createElement('script');
    script.src = 'https://widget.yapayzekachatbot.com/widget.js';
    script.async = true;
    document.body.appendChild(script);
  }
}
</script>

Programatik Kontrol

Widget yüklendikten sonra JavaScript API ile kontrol edebilirsiniz:

JavaScript API

// Widget'ı aç
window.YZChatbot.open();

// Widget'ı kapat
window.YZChatbot.close();

// Widget'ı toggle et
window.YZChatbot.toggle();

// Mesaj gönder
window.YZChatbot.sendMessage('Merhaba!');

// Event listener ekle
window.YZChatbot.on('message', (data) => {
  console.log('Yeni mesaj:', data);
});

window.YZChatbot.on('open', () => {
  console.log('Widget açıldı');
});

window.YZChatbot.on('close', () => {
  console.log('Widget kapandı');
});

Sorun Giderme

Tenant ID'nin doğru olduğundan emin olun
Tarayıcı konsolunda hata mesajı var mı kontrol edin
Script'in </body> etiketinden önce olduğundan emin olun
Ad blocker veya güvenlik eklentileri script'i engelliyor olabilir

Content Security Policy (CSP) Hataları

Eğer CSP kullanıyorsanız, aşağıdaki direktifleri ekleyin:

Content-Security-Policy:
  script-src 'self' https://widget.yapayzekachatbot.com;
  connect-src 'self' https://api.yapayzekachatbot.com wss://api.yapayzekachatbot.com;
  style-src 'self' 'unsafe-inline' https://widget.yapayzekachatbot.com;
  img-src 'self' data: https://widget.yapayzekachatbot.com;