Strapi'a Asyntai AI Chatbot Nasıl Eklenir

Strapi destekli web siteleri için adım adım kılavuz

Platform:

Headless CMS: Strapi, API üzerinden içerik sağlayan ancak yerleşik bir ön yüz içermeyen headless bir CMS'dir. Chatbot kurulumu, Strapi içeriğinizi işlemek için kullandığınız ön yüz framework'üne bağlıdır. Kurulumunuza uygun aşağıdaki yöntemi seçin.

Adım 1: Yerleştirme Kodunuzu Alın

Önce Asyntai Dashboard'unuza gidin ve "Yerleştirme Kodu" bölümüne inin. Şuna benzeyen benzersiz yerleştirme kodunuzu kopyalayın:

<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

Not: Yukarıdaki kod yalnızca bir örnektir. Kişisel widget kimliğinizi içerdiğinden, kendi benzersiz yerleştirme kodunuzu Dashboard'unuzdan kopyalamanız gerekir.

Yöntem 1: Strapi ile Next.js (Önerilen)

Strapi ön yüzünüz olarak Next.js kullanıyorsanız (en yaygın kurulum), Script bileşenini kullanarak chatbot'u ekleyin:

Ana düzen dosyanızı açın: app/layout.tsx (App Router) veya pages/_app.tsx (Pages Router)
Script bileşenini içe aktarın ve chatbot'u ekleyin:
import Script from 'next/script' export default function RootLayout({ children }) { return ( <html> <body> {children} <Script src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID" strategy="lazyOnload" /> </body> </html> ) }
Replace YOUR_WIDGET_ID with your actual widget ID
Dosyayı kaydedin ve geliştirme sunucunuzu yeniden başlatın

İpucu: strategy="lazyOnload" kullanmak, chatbot'un sayfa tam olarak etkileşimli hale geldikten sonra yüklenmesini sağlayarak Strapi destekli siteniz için en iyi performansı sunar.

Yöntem 2: Strapi ile Gatsby

gatsby-source-strapi kullanan Gatsby siteleri için:

Create or edit gatsby-ssr.js in your project root:
import React from 'react' export const onRenderBody = ({ setPostBodyComponents }) => { setPostBodyComponents([ <script key="asyntai-chatbot" async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID" /> ]) }
Replace YOUR_WIDGET_ID with your actual widget ID
Gatsby geliştirme sunucunuzu yeniden başlatın

Yöntem 3: Strapi ile Nuxt.js

@nuxtjs/strapi kullanan Nuxt.js uygulamaları için:

Nuxt 3:

nuxt.config.ts dosyanıza ekleyin:
export default defineNuxtConfig({ app: { head: { script: [ { src: 'https://asyntai.com/static/js/chat-widget.js', async: true, 'data-asyntai-id': 'YOUR_WIDGET_ID' } ] } } })

Nuxt 2:

nuxt.config.js dosyanıza ekleyin:
export default { head: { script: [ { src: 'https://asyntai.com/static/js/chat-widget.js', async: true, 'data-asyntai-id': 'YOUR_WIDGET_ID' } ] } }

Yöntem 4: Strapi ile React

For standard React apps (Create React App, Vite) consuming Strapi API:

public/index.html dosyanızı (CRA) veya index.html dosyanızı (Vite) açın
Add the embed code before the closing </body> tag:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Dosyayı kaydedin

Veya bir React bileşeni oluşturun:

// components/Chatbot.jsx
import { useEffect } from 'react'

export default function Chatbot() {
  useEffect(() => {
    const script = document.createElement('script')
    script.src = 'https://asyntai.com/static/js/chat-widget.js'
    script.async = true
    script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID')
    document.body.appendChild(script)
    return () => document.body.removeChild(script)
  }, [])
  return null
}

Yöntem 5: Strapi ile SvelteKit

Strapi içeriğini kullanan SvelteKit uygulamaları için:

src/app.html dosyanızı düzenleyin
Add the embed code before the closing </body> tag:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Dosyayı kaydedin

Yöntem 6: Strapi API ile Statik Site

If you're using Strapi's REST or GraphQL API with a static HTML site:

Yerleştirme kodunu HTML dosyanızda kapanış </body> etiketinin öncesine ekleyin:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Dosyayı kaydedin ve barındırma hizmetinize yükleyin

Adım 2: Kurulumu Doğrulayın

Chatbot kodunu Strapi destekli sitenize ekledikten sonra dağıtın veya geliştirme sunucunuzu çalıştırın. Web sitenizi yeni bir tarayıcı sekmesinde veya gizli pencerede ziyaret edin. Sağ alt köşede sohbet widget düğmesini görmelisiniz. Doğru şekilde açıldığından ve çalıştığından emin olmak için üzerine tıklayın.

Widget'ı göremiyorsunuz mu? Komut dosyasını framework'ünüz için doğru dosyaya eklediğinizden emin olun. Tarayıcınızın geliştirici konsolunda hata olup olmadığını kontrol edin. Sunucu tarafı render kullanıyorsanız, komut dosyasının istemci tarafında çalıştığından emin olun. Tarayıcı önbelleğinizi temizlemeyi veya gizli pencerede görüntülemeyi deneyin.

Ortam Değişkenleri: Daha iyi güvenlik ve esneklik için widget kimliğinizi sabit kodlamak yerine bir ortam değişkeninde (ör. Next.js için NEXT_PUBLIC_ASYNTAI_ID veya Vite için VITE_ASYNTAI_ID) saklamayı düşünün.

Belgeler