Vue sohbet botu: Vue 3 veya Nuxt uygulamasına yapay zekâ sohbet botu ekleyin

Bir Nexoply hesabına ve sohbet botunuzun anahtarına ihtiyacınız var. Ücretsiz kaydolun (Ücretsiz plan ayda 50 konuşma içerir, kart gerekmez), işletmenin bilgilerini ekleyin veya web sitesinden içe aktarın, ardından panelde Sohbet botu sayfasını açıp kurulum kodunu kopyalayın. Kod şöyle görünür:

<script src="https://nexoply.com/widget.js" data-chatbot="YOUR-KEY" async></script>

data-chatbot değeri anahtarınızdır. Herkese açıktır, gizli değildir: yalnızca widget'a hangi işletmeye ait olduğunu söyler; bu yüzden istemci tarafı kodda ve deponuzda bulunmasında sakınca yoktur. Öznitelik adını ve widget.js içeren src değerini tam olarak gösterildiği gibi koruyun, çünkü widget ayarlarını kendi script etiketinden okur.

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

<!-- src/components/Chatbot.vue -->
<script setup lang="ts">
import { onMounted } from "vue";

const props = defineProps<{ chatbotKey: string }>();

onMounted(() => {
  // Anahtar yok veya betik zaten sayfada: yapılacak bir şey yok.
  if (!props.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 = props.chatbotKey;
  document.body.appendChild(s);
});
</script>

<template><slot /></template>

Bileşeni, ziyaret boyunca bağlı kalan App.vue içinde bir kez çizin. Anahtarı .env dosyasına VITE_NEXOPLY_KEY=YOUR-KEY olarak yazın:

<!-- src/App.vue -->
<script setup lang="ts">
import Chatbot from "./components/Chatbot.vue";

const nexoplyKey = import.meta.env.VITE_NEXOPLY_KEY;
</script>

<template>
  <!-- düzeniniz ve rotalarınız -->
  <Chatbot :chatbot-key="nexoplyKey" />
</template>

Bir JavaScript projesinde lang="ts" kısmını kaldırın ve tip argümanı yerine defineProps({ chatbotKey: String }) yazın. Sıradan bir bileşen olduğu için onu v-if ile de çizebilirsiniz; örneğin v-if="hasConsent" ile sohbeti yalnızca ziyaretçi onay bildiriminizi kabul ettikten sonra yükleyebilirsiniz.

Bileşen istemiyor musunuz? En basit kurulum, etiketi projenizin kökündeki index.html dosyasına, </body> öncesine yapıştırmaktır. Eşzamansız yüklenir ve çizimi asla engellemez:

<body>
  <div id="app"></div>
  <script type="module" src="/src/main.ts"></script>
  <script src="https://nexoply.com/widget.js" data-chatbot="YOUR-KEY" async></script>
</body>

Nuxt'ta bileşene gerek yoktur: betiği site genelinde nuxt.config.ts dosyasına ekleyin. tagPosition: "bodyClose" onu </body> öncesine yerleştirir:

export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          src: "https://nexoply.com/widget.js",
          async: true,
          "data-chatbot": "YOUR-KEY",
          tagPosition: "bodyClose",
        },
      ],
    },
  },
});

Ya da app.vue içinde useHead ile ekleyin. Anahtarı bir ortam değişkeninde tutmak isterseniz nuxt.config.ts içinde runtimeConfig: { public: { nexoplyKey: "" } } tanımlayın ve NUXT_PUBLIC_NEXOPLY_KEY değerini ayarlayın; aksi hâlde anahtarı doğrudan yazın:

<script setup lang="ts">
useHead({
  script: [
    {
      src: "https://nexoply.com/widget.js",
      async: true,
      "data-chatbot": useRuntimeConfig().public.nexoplyKey,
      tagPosition: "bodyClose",
    },
  ],
});
</script>

Sunucu tarafı çizim sorun değildir: Nuxt etiketi HTML içinde çizer, widget ise yalnızca tarayıcıda çalışır. Uygulamanızın işaretlemesine dokunmadığı için hydration uyuşmazlıkları oluşmaz.

Vue 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 Vue 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.

• Uygulamanızın dışında. #app öğesinin (veya Nuxt kökünün) dışında, document.body üzerine yerleşir; bu yüzden yeniden çizimler, düzen değişiklikleri ve rota değişiklikleri onu asla kaldırmaz.
• Vue Router gezinmesi. Ziyaretçiler istemci tarafında sayfalar arasında gezinirken konuşma devam eder ve URL değiştiğinde sayfa kuralları (örneğin yalnızca /pricing sayfasındaki bir yan sekme) ek kod gerektirmeden yeniden kontrol edilir.
• Shadow DOM. CSS'iniz, Tailwind sınıflarınız veya arayüz kütüphaneniz sohbete sızmaz, onun stilleri de uygulamanıza sızmaz.
• Hafif iz. Eşzamansız yüklenir, çerez kullanmaz ve yalnızca anonim bir ziyaretçi kimliğini localStorage'da, geçerli konuşmayı ise sessionStorage'da saklar.

Hero bölümünüzde veya fiyat tablonuzda "Sorunuz mu var? Bize sorun" düğmesi mi istiyorsunuz? Bir tıklama işleyicisinden nexoply:open-chat olayını tetikleyin:

<script setup lang="ts">
function openChat() {
  window.dispatchEvent(new Event("nexoply:open-chat"));
}
</script>

<template>
  <button type="button" @click="openChat">Bize soru sorun</button>
</template>

Sohbetin sayfa yüklenir yüklenmez açılması için script etiketine data-open="true" ekleyin (Nuxt'ta "data-open": "true").

• İzin verilen web siteleri. Sohbet botu sayfasında Yalnızca bu web sitelerinde izin ver alanını doldurduysanız geliştirme sunucunuzu da portuyla birlikte ekleyin: Vite için localhost:5173, Nuxt için localhost:3000. Ya da test ederken listeyi boş bırakın.
• Content-Security-Policy. Uygulamanız bir CSP başlığı gönderiyorsa script-src, connect-src ve img-src için https://nexoply.com adresine izin verin.
• Test edin. Geliştirme sunucusunu çalıştırın, uygulamayı açın, gerçek bir soru sorun ve konuşmanın paneldeki Konuşmalar bölümünde göründüğünü kontrol edin.

Düğme görünmüyorsa:

• Etiketi kontrol edin. Tarayıcınızın geliştirici araçlarında data-chatbot öznitelikli ve src değeri widget.js içeren bir script arayın. Yoksa anahtar boş olabilir: VITE_NEXOPLY_KEY veya NUXT_PUBLIC_NEXOPLY_KEY değerinin ayarlı olduğunu kontrol edin ve .env dosyasını düzenledikten sonra geliştirme sunucusunu yeniden başlatın.
• Konsolu ve Network sekmesini kontrol edin. Bir CSP hatası, nexoply.com adresine henüz izin verilmediği anlamına gelir; engellenen bir istek bir reklam engelleyiciden de kaynaklanabilir, bu yüzden eklentilerin olmadığı gizli bir pencerede deneyin.
• Paneli kontrol edin. Sohbet botu etkin anahtarının açık olduğundan ve bir liste kullanıyorsanız alan adınızın (veya portuyla birlikte localhost'un) izin verilenler listesinde bulunduğundan emin olun.
• Bilerek mi gizlendi? "Düğme yok" olarak ayarlanmış bir sayfa kuralı onu eşleşen sayfalarda gizler.

Etiket eklendikten sonra geri kalan her şey panelde olur ve değişiklikler yeniden yayınlamaya gerek kalmadan 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, etiket, ş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 sayfalarda (örneğin /blog/*) düğmeyi değiştirmek veya gizlemek için sayfa kurallarını kullanın. Sohbet penceresini markaya uygun biçimde tasarlayın ve Randevu, Arama veya WhatsApp gibi başlangıç ekranı düğmeleri ekleyin.

Asistanın işletmenizi nasıl öğrendiğine ve tüm özelleştirme seçeneklerine bakın ya da planları ve konuşma limitlerini karşılaştırın. Başka bir framework ile mi geliştiriyorsunuz? React sohbet botu bileşeni rehberine ve next/script ile Next.js'e sohbet botu eklemeye bakın.