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 Bildirim Balonu Okunmamış Rozeti Talimat Modu Soru Sorma Emoji Kullanımı E-posta Toplama Telefon Numarası Toplama 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ı 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 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

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

Contentful 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: Contentful bir headless CMS'dir, yani API aracılığıyla içerik sağlar ancak yerleşik bir frontend içermez. Chatbot kurulumu, Contentful içeriğinizi render etmek için hangi frontend framework'ü kullandığınıza bağlıdır. Kurulumunuza uyan 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: Contentful ile Next.js (Önerilen)

Contentful içeriğinizi render etmek için Next.js kullanıyorsanız, Script bileşenini kullanarak chatbot'u ekleyin:

  1. Ana düzen dosyanızı açın: app/layout.tsx (App Router) veya pages/_app.tsx (Pages Router)
  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="lazyOnload"
            />
          </body>
        </html>
      )
    }
  3. Replace YOUR_WIDGET_ID with your actual widget ID
  4. Dosyayı kaydedin ve geliştirme sunucunuzu yeniden başlatın

İpucu: strategy="lazyOnload" kullanmak, chatbot'un sayfa tamamen etkileşimli hale geldikten sonra yüklenmesini sağlayarak en iyi performansı sunar.

Yöntem 2: Contentful ile Gatsby

Contentful'dan içerik çeken Gatsby siteleri için:

  1. gatsby-plugin-load-script yükleyin (isteğe bağlı ancak önerilir):
    npm install gatsby-plugin-load-script
  2. gatsby-config.js dosyanıza ekleyin:
    module.exports = {
      plugins: [
        {
          resolve: 'gatsby-plugin-load-script',
          options: {
            src: 'https://asyntai.com/static/js/chat-widget.js',
            attributes: {
              'data-asyntai-id': 'YOUR_WIDGET_ID',
              async: true
            }
          }
        }
      ]
    }
  3. Alternatif olarak gatsby-ssr.js kullanın:
    // gatsby-ssr.js
    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"
        />
      ])
    }
  4. Gatsby geliştirme sunucunuzu yeniden başlatın

Yöntem 3: Contentful ile React

Contentful kullanan standart React uygulamaları (Create React App, Vite vb.) için:

  1. public/index.html dosyanızı açın
  2. 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>
  3. Dosyayı kaydedin

Veya useEffect ile bir React bileşeni kullanın:

// 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 4: Contentful ile Vue/Nuxt

Contentful kullanan Vue veya Nuxt.js uygulamaları için:

Nuxt 3:

  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'
            }
          ]
        }
      }
    })

Vue 3:

  1. Add to your index.html before </body>:
    <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

Yöntem 5: Contentful API ile Statik HTML

Contentful'un Content Delivery API'sini vanilla JavaScript 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. Dosyayı kaydedin ve barındırma hizmetinize yükleyin

Adım 2: Kurulumu Doğrulayın

Chatbot kodunu Contentful 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örmeniz gerekir. Düzgün açıldığından ve çalıştığından emin olmak için 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 (örneğin, Next.js için NEXT_PUBLIC_ASYNTAI_ID) saklamayı düşünün.