Dashboard'a Dön

Belgeler

Asyntai'yi nasıl kullanacağınızı öğrenin

Başlangıç
Kurulum Bilgi Tabanı Yapay Zekanızı Test Edin Web Sitelerini Yönet
Özelleştirme
Widget Renkleri Yapay Zeka Asistanı Adı Karşılama Mesajı Widget Konumu Otomatik Tetikleme Karşılama Balonu Okunmamış Rozeti Talimat Modu Soru Sorma Emoji Kullanımı E-postaları Topla Telefon Numaralarını Topla Akıllı Potansiyel Müşteri Toplama Yerelleştirme Markayı Gizle Gizlilik Bağlantısı Özel Bildirim Transkript İndirme Yeni Görüşme Konuşma Geçmişi Alt Başlık ve Durum Noktası Konuşmadan Metne Sohbet Simgesi Şirket Logosu Karakter Sınırı Sıcaklık
AI Talimat İpuçları Planları Karşılaştırın
Özellikler
Web Sitesi Tarama Bilgi Eksiklikleri Ürün Kartları Dinamik Ürün Kartları Dynamic Images Kullanıcı Bağlamı Canlı İzleme İnsan Devralma Yükseltme AI Bildirimleri Günlük Rapor Gerçek Zamanlı Veri Akışı Gerçek Zamanlı Veri Akışı Max Ekip Üyeleri Tek Oturum Açma Görüntüleri Dahil Et Görüntü Tanıma Çeviri Widget'ı Yerelleştirme Potansiyel Müşteriler Akıllı Potansiyel Müşteri Toplama Destek Talepleri Rezervasyonlar Yerleştirmeler Sayfaları Hariç Tut Engellenen IP'ler Daha Akıllı Model Düşünmeyi Etkinleştir Yanıt Önerileri Takip Mesajları Konuşmadan Metne Transkript İndirme Gömülü Sohbet
Analitik
Sohbet Analitiği Sohbet Kayıtları
Entegrasyonlar
REST API Instagram Messenger WhatsApp Zapier Email Mobil Uygulamalar
Diğer
Ana Ekrana Ekle Özel Açma Düğmesi
Yapay Zekaya Sor

Asyntai AI Chatbot'u DatoCMS'e Nasıl Eklersiniz

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

Yerleştirme Kodunu Al
Platform:
HTML HTML/Custom WordPress WordPress Shopify Shopify WooCommerce WooCommerce BigCommerce BigCommerce Ecwid Ecwid Wix Wix Squarespace Squarespace Webflow Webflow Weebly Weebly HubSpot HubSpot Tilda Tilda Adobe Experience Manager Adobe Experience Manager Duda Duda Google Sites Google Sites Bludit Bludit Plesk Plesk Concrete CMS Concrete CMS Craft CMS Craft CMS Contentful Contentful Docusaurus Docusaurus Strapi Strapi Joomla Joomla Kentico Kentico Drupal Drupal Magento Magento Blogger Blogger Bitrix Bitrix TYPO3 TYPO3 PrestaShop PrestaShop OpenCart OpenCart Ghost Ghost Hugo Hugo Statamic Statamic Umbraco Umbraco Volusion Volusion Moodle Moodle SilverStripe SilverStripe Grav Grav October CMS October CMS ProcessWire ProcessWire Sanity Sanity ExpressionEngine ExpressionEngine Sylius Sylius Backdrop CMS Backdrop CMS MODX MODX Bagisto Bagisto PayloadCMS PayloadCMS e107 e107 CrafterCMS CrafterCMS Kirby Kirby MedusaCMS MedusaCMS DatoCMS DatoCMS GoDaddy GoDaddy Framer Framer Bubble Bubble Carrd Carrd Jimdo Jimdo Strikingly Strikingly Kajabi Kajabi Teachable Teachable Thinkific Thinkific ClickFunnels ClickFunnels Hostinger Hostinger Unbounce Unbounce Leadpages Leadpages Systeme.io Systeme.io Instapage Instapage

Headless CMS: DatoCMS, içeriği API'ler aracılığıyla sunan bir headless CMS'dir. Chatbot kodu, DatoCMS kontrol paneline değil, frontend uygulamanıza (Next.js, Gatsby, Nuxt vb.) eklenmelidir.

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.

Adım 2: Next.js Frontend'e Ekleyin (En Yaygın)

Next.js, DatoCMS ile kullanılan en popüler frontend framework'tür. Script bileşenini kullanarak chatbot'u ekleyin:

App Router (app/layout.tsx):

  1. Kök düzen dosyanızı açın: app/layout.tsx
  2. 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="afterInteractive"
            />
          </body>
        </html>
      )
    }
  3. YOUR_WIDGET_ID kısmını gerçek widget kimliğinizle değiştirin
  4. Dosyayı kaydedin ve geliştirme sunucunuzu yeniden başlatın

Pages Router (pages/_app.tsx):

  1. pages/_app.tsx dosyanızı açın
  2. Script bileşenini ekleyin:
    import Script from 'next/script'
    import type { AppProps } from 'next/app'

    export default function App({ Component, pageProps }: AppProps) {
      return (
        <>
          <Component {...pageProps} />
          <Script
            src="https://asyntai.com/static/js/chat-widget.js"
            data-asyntai-id="YOUR_WIDGET_ID"
            strategy="afterInteractive"
          />
        </>
      )
    }

İpucu: strategy="afterInteractive" kullanmak, chatbot'un sayfa etkileşimli hale geldikten hemen sonra yüklenmesini sağlayarak performans ve kullanılabilirlik arasında iyi bir denge sunar.

Alternatif Yöntem 1: Gatsby Frontend

gatsby-source-datocms aracılığıyla DatoCMS'den içerik çeken Gatsby siteleri için:

  1. Proje kök dizininizde gatsby-ssr.js dosyasını oluşturun veya düzenleyin:
    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"
        />
      ])
    }
  2. YOUR_WIDGET_ID kısmını gerçek widget kimliğinizle değiştirin
  3. Gatsby geliştirme sunucunuzu yeniden başlatın

Alternatif Yöntem 2: Nuxt.js Frontend

DatoCMS içeriği kullanan Nuxt.js uygulamaları için:

  1. 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'
            }
          ]
        }
      }
    })
  2. YOUR_WIDGET_ID kısmını gerçek widget kimliğinizle değiştirin
  3. Nuxt geliştirme sunucunuzu yeniden başlatın

Alternatif Yöntem 3: Düz HTML / Statik Site

DatoCMS'nin Content Delivery API'sini statik bir HTML sitesi veya statik site oluşturucu ile kullanıyorsanız:

  1. 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>
  2. YOUR_WIDGET_ID kısmını gerçek widget kimliğinizle değiştirin
  3. Dosyayı kaydedin ve barındırma hizmetinize yükleyin

Alternatif Yöntem 4: React (Vite/CRA)

DatoCMS API'sini kullanan standart React uygulamaları (Create React App, Vite vb.) için:

Seçenek A: public/index.html dosyasına ekleyin

  1. public/index.html dosyanızı (CRA) veya index.html dosyanızı (Vite) açın
  2. Kapanış </body> etiketinden önce gömme kodunu ekleyin
    <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
  3. Dosyayı kaydedin

Seçenek B: Kök bileşende useEffect kullanımı

  1. Bir chatbot bileşeni oluşturun veya kök bileşeninize ekleyin:
    // 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
    }
  2. Bileşeni App.jsx veya kök düzeninize içe aktarın ve render edin

Adım 3: Dağıtın ve Doğrulayın

Chatbot kodunu DatoCMS 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. Açıldığından ve düzgün çalıştığından emin olmak için tıklayın.

Widget'ı göremiyor musunuz? 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.