React sohbet botu: React uygulamanıza yapay zekâ sohbet botu ekleyin (Vite, CRA, SPA)

Koda dokunmadan önce iki şeye ihtiyacınız var:

• Bir Nexoply hesabı ve sohbet botu anahtarınız. Ücretsiz kaydolun (Ücretsiz plan ayda 50 konuşma içerir, kart gerekmez), ardından paneldeki Sohbet botu sayfasını açın. Oradaki kurulum kodu anahtarınızı zaten içerir. Anahtar herkese açıktır: gizli değildir ve hesaba erişim sağlamaz, bu yüzden istemci tarafı kodda bulunmasında sakınca yoktur.
• Asistanın yanıt verirken kullanacağı işletme bilgileri: hizmetler ve fiyatlar, SSS'ler, politikalar, çalışma saatleri ve hizmet bölgeleri. En hızlı yol, web sitesi adresini girip Nexoply'nin herkese açık sayfaları içe aktarmasına izin vermektir; JavaScript ile oluşturulan sayfalar da buna dahildir, yani bir React sitesi de sorunsuz çalışır. Onaylanmadan hiçbir şey eklenmez.

src/components/Chatbot.tsx dosyasını oluşturun. Bileşen kendisi hiçbir şey çizmez: Nexoply betiğini sayfaya bir kez ekler, sohbet düğmesini ve penceresini widget çizer.

// src/components/Chatbot.tsx
import { useEffect } from "react";

type ChatbotProps = { chatbotKey: string };

export function Chatbot({ chatbotKey }: ChatbotProps) {
  useEffect(() => {
    // Anahtar yok veya betik zaten sayfada: yapılacak bir şey yok.
    if (!chatbotKey || document.querySelector("script[data-chatbot]")) return;
    const s = document.createElement("script");
    s.src = "https://nexoply.com/widget.js";
    s.async = true;
    s.dataset.chatbot = chatbotKey;
    document.body.appendChild(s);
  }, [chatbotKey]);

  return null;
}

Bileşeni, ziyaret boyunca bağlı kalan bileşende (genellikle App) bir kez çizin. Vite'ta VITE_NEXOPLY_KEY=YOUR-KEY satırını bir .env dosyasına yazın:

// src/App.tsx
import { Chatbot } from "./components/Chatbot";

export default function App() {
  return (
    <>
      {/* düzeniniz ve rotalarınız */}
      <Chatbot chatbotKey={import.meta.env.VITE_NEXOPLY_KEY} />
    </>
  );
}

Bileşen, Vite veya Create React App kullanan bir TypeScript projesinde olduğu gibi çalışır. Düz JavaScript için dosyayı Chatbot.jsx olarak adlandırın ve ChatbotProps tipini kaldırın. Create React App'te import.meta.env yoktur: bunun yerine process.env.REACT_APP_NEXOPLY_KEY değerini aktarın. Sıradan bir bileşen olduğu için onu koşullu olarak da çizebilirsiniz; örneğin {hasConsent && <Chatbot chatbotKey={key} />} ile sohbeti yalnızca ziyaretçi çerez bildiriminizi kabul ettikten sonra yükleyebilirsiniz.

• Neden temizlik fonksiyonu yok. Widget yüklendikten sonra onu kaldıracak bir API yoktur ve React ağacınızın dışında yaşar; bu yüzden bileşen kaldırıldığında geri alınacak bir şey yoktur.
• StrictMode neden sorun değil. Geliştirme ortamında React StrictMode efektleri iki kez çalıştırır. querySelector kontrolü ikinci çalışmayı atlar; betik iki kez eklense bile widget her sohbet botu anahtarı için yalnızca bir kez yerleşir. Sıcak yeniden yükleme (hot reload) de aynı nedenle güvenlidir.
• Özniteliği koruyun. Widget ayarlarını kendi script etiketinden okur; bu yüzden etiketin data-chatbot özniteliğini ve widget.js içeren bir src değerini koruması gerekir. s.dataset.chatbot ataması bu özniteliği oluşturur.

Yüklemeyi koddan kontrol etmeniz gerekmiyorsa bileşeni atlayın. Her React SPA'nın bir HTML kabuğu vardır: Vite'ta proje kökündeki index.html, Create React App'te public/index.html. Kodu kapanış </body> etiketinin hemen öncesine yapıştırın:

<body>
  <div id="root"></div>
  <script type="module" src="/src/main.tsx"></script>

  <!-- Nexoply yapay zekâ sohbet botu -->
  <script src="https://nexoply.com/widget.js" data-chatbot="YOUR-KEY" async></script>
</body>

YOUR-KEY yerine Sohbet botu sayfasındaki anahtarı yazın. Betik eşzamansız yüklenir, bu yüzden uygulamanızın çizilmesini asla engellemez. Sohbet penceresinin sayfa yüklenince açılmasını istiyorsanız etikete data-open="true" ekleyin. Kurulumun tamamı bu kadar: yeniden derleyin, yayınlayın; düğme her rotada görünür.

React sohbet botu araması iki tür araç getirir ve bunlar farklı sorunları çözer:

• Bir sohbet botu arayüz kütüphanesi size sohbetin kendisi için React bileşenleri verir: mesaj listesi, giriş alanı, baloncuklar, bazen senaryolu konuşma adımları. Arayüzün arkasındaki her şeyi siz kurarsınız: sabit senaryolar ya da kendi API anahtarınızla bir yapay zekâ modelini çağıran bir arka uç; buna ek olarak yanıtların dayandığı içerik, konuşmaların saklanması ve kötüye kullanıma karşı koruma. Sohbet ürününüzün bir parçasıysa uygundur; örneğin kullanıcılarınızın kendi verileriyle çalışan bir asistan.
• Nexoply gibi barındırılan bir yapay zekâ sohbet botu arayüzü, yapay zekâyı ve arka ucu bir arada sunar. Ziyaretçilerin sorularını yalnızca eklediğiniz veya içe aktardığınız işletme bilgilerinden (hizmetler ve fiyatlar, SSS'ler, politikalar, çalışma saatleri) yanıtlar ve bilmediğinde bunu söyler. Yapay zekâ anahtarı ve sunucu kodu yoktur; konuşmalar, yanıtlanamayan sorular ve spam koruması panelde yönetilir. İşletmeyle ilgili soruları yanıtlaması gereken, müşterilere açık bir web sitesi için uygundur.

Arayüz ve model üzerinde tam kontrol istiyorsanız bir kütüphaneyle başlayın. Amaç, bir arka uç kurmadan veya işletmeden ziyaretçilerin sorularını yanıtlamaksa barındırılan widget daha az iş çıkarır. Nexoply'nin işletme bilgilerinizden nasıl yanıt verdiğine bakın.

• React ağacınızın dışında kalır. Widget, #root öğenizin dışında, document.body üzerine yerleşir; bu yüzden yeniden çizimler ve rota değişiklikleri onu asla kaldırmaz veya stilini değiştirmez.
• İki yönlü Shadow DOM. CSS'iniz (Tailwind, CSS modülleri, genel sıfırlamalar) sohbete sızmaz, onun CSS'i de uygulamanıza sızmaz.
• Rota değişiklikleri sorunsuz çalışır. React Router veya geçmiş (history) tabanlı herhangi bir yönlendiriciyle ziyaretçiler gezinirken konuşmalarını korur ve URL değiştiğinde sayfa kuralları (örneğin yalnızca /pricing sayfasındaki bir yan sekme) yeniden kontrol edilir. Ek kod gerekmez.
• Çerez yok. Anonim bir ziyaretçi kimliğini localStorage'da, geçerli konuşmayı ise sessionStorage'da saklar.

Hero bölümünüzde veya fiyatlandırma sayfanızda "Bize yazın" düğmesi mi istiyorsunuz? window üzerinde nexoply:open-chat olayını tetikleyin:

export function ChatButton() {
  return (
    <button onClick={() => window.dispatchEvent(new Event("nexoply:open-chat"))}>
      Bize yazın
    </button>
  );
}

Herhangi bir import gerekmez: widget bu olayı window üzerinde dinler. Yalnızca kendi düğmenizi göstermek isterseniz panelde bir sayfa kuralıyla mesaj düğmesini "Düğme yok" olarak ayarlayın.

Yayınlamadan önce şu üç ayarı kontrol edin:

• İzin verilen web siteleri. Yalnızca bu web sitelerinde izin ver alanını doldurduysanız (panel → Sohbet botu), geliştirme sunucunuzu portuyla birlikte ekleyin (Vite için localhost:5173, Create React App için localhost:3000 gibi) ya da test ederken listeyi boş bırakın.
• Content-Security-Policy. Uygulamanız bir CSP başlığı veya meta etiketi gönderiyorsa script-src, connect-src ve img-src için https://nexoply.com adresine izin verin.
• Baştan sona kontrol edin. Uygulamayı çalıştırın, sohbet düğmesine tıklayın, gerçek bir soru sorun ve onu paneldeki Konuşmalar bölümünde arayın.

Düğme hâlâ görünmüyorsa:

• Boş anahtar. Bileşen anahtar olmadan hiçbir şey yüklemez. import.meta.env.VITE_NEXOPLY_KEY değerini konsola yazdırın: Vite yalnızca VITE_ ile başlayan değişkenleri açığa çıkarır ve .env dosyasını düzenledikten sonra geliştirme sunucusunu yeniden başlatmanız gerekir.
• Engellenen istek. Tarayıcı konsolunda ve Network sekmesinde CSP hatalarına veya engellenmiş bir widget.js isteğine bakın.
• Sohbet botu kapalı. Sohbet botu etkin anahtarının açık olduğunu kontrol edin.
• Reklam engelleyiciler. Nadiren bir tarayıcı eklentisi sohbet widget'larını engeller. Eklentilerin olmadığı gizli bir pencerede deneyin.

Betik bir kez eklendikten sonra koda bir daha dokunmanız gerekmez: panelde yaptığınız değişiklikler yaklaşık bir dakika içinde siteye yansır. Sohbet botu → Özelleştir altında mesaj düğmesinin stilini belirleyebilir (simge veya kendi görseliniz ya da SVG'niz, metin etiketi, şekil, boyut, renkler, konum) ya da bunun yerine ekranın kenarında bir yan sekme kullanabilirsiniz. Telefonlarda farklı bir görünüm ayarlayın ve seçtiğiniz rotalarda (örneğin /pricing veya /services/*) görünümü değiştirmek için sayfa kurallarını kullanın. Sohbet penceresi yazı tiplerinizi, renklerinizi ve logonuzu alır; başlangıç ekranı da Randevu, Arama veya WhatsApp gibi düğmeler sunabilir.

Başka bir framework mü kullanıyorsunuz? next/script ile Next.js'e sohbet botu eklemeye veya Vue ve Nuxt sohbet botu rehberine bakın; WordPress ile kurulmuş bir tanıtım sitesi için WordPress rehberine göz atın. Resmin tamamı için asistanın işletmenizi nasıl öğrendiğini okuyun veya planları ve konuşma limitlerini karşılaştırın.