Herhangi Bir Web Sitesine Asyntai AI Chatbot Nasıl Eklenir

HTML, özel siteler ve statik oluşturucular için evrensel kılavuz

Platform:

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: HTML Dosyanıza Ekleme

Chatbot'u eklemenin en basit yolu, gömme kodunu doğrudan HTML dosyanıza yapıştırmaktır:

HTML dosyanızı bir metin düzenleyicide açın
Kapanış </body> etiketini bulun
Asyntai yerleştirme kodunuzu </body> etiketinin hemen öncesine yapıştırın
Dosyayı kaydedin

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
</head>
<body>
  <!-- Your website content -->

  <!-- Asyntai Chatbot - Add before closing body tag -->
  <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
</body>
</html>

İpucu: Scripti kapanış </body> etiketinden önce eklemek, sayfa içeriğinizden sonra yüklenmesini sağlar; bu performans açısından en uygun yöntemdir ve sayfanızı yavaşlatmaz.

Çok Sayfalı Web Siteleri İçin

Web sitenizin birden fazla HTML sayfası varsa, birkaç seçeneğiniz vardır:

Seçenek A: Her Sayfaya Ekleme

Chatbot'un görünmesini istediğiniz her HTML dosyasına gömme kodunu ekleyin.

Seçenek B: Ortak Footer Include Kullanma

Sunucu tarafı dahil etme (SSI), PHP includes veya benzeri kullanıyorsanız:

Bir footer.html (veya footer.php) dosyası oluşturun
Bu dosyaya Asyntai gömme kodunu ekleyin
Bu footer dosyasını tüm sayfalarınıza dahil edin:
 <?php include 'footer.php'; ?>

Seçenek C: JavaScript ile Dinamik Yükleme

Tüm sayfalarda chatbot'u yükleyen tek bir JavaScript dosyası oluşturun:

asyntai-loader.js adında bir dosya oluşturun:
(function() { var script = document.createElement('script'); script.async = true; script.src = 'https://asyntai.com/static/js/chat-widget.js'; script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID'); document.body.appendChild(script); })();
YOUR_WIDGET_ID kısmını gerçek widget kimliğinizle değiştirin
Bu scripti tüm sayfalarınıza dahil edin:
<script src="/js/asyntai-loader.js"></script>

Statik Site Oluşturucular İçin

Statik site oluşturucu kullanıyorsanız, gömme kodunu temel düzeninize veya şablonunuza ekleyin:

Jekyll

_includes/footer.html veya _layouts/default.html dosyasına ekleyin

Hugo

layouts/partials/footer.html veya layouts/_default/baseof.html dosyasına ekleyin

Gatsby

gatsby-browser.js dosyasına ekleyin veya gatsby-ssr.js kullanın

Next.js

pages/_document.js dosyasına ekleyin veya next/script bileşenini kullanın

Nuxt.js

head.script altında nuxt.config.js dosyasına ekleyin

Eleventy (11ty)

_includes/ dizinindeki temel düzeninize ekleyin

Astro

src/layouts/Layout.astro dosyasında </body> etiketinden önce ekleyin

VuePress

head altında .vuepress/config.js dosyasına ekleyin

React / Vue / Angular Uygulamaları İçin

Tek sayfalı uygulamalar (SPA'lar) için scripti index.html dosyanıza ekleyebilir veya dinamik olarak yükleyebilirsiniz:

React (index.html yöntemi)

<!-- In public/index.html, before </body> -->
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

React (useEffect yöntemi)

// In your App.js or a component
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);
}, []);

Vue (main.js veya App.vue içinde)

// In mounted() or onMounted()
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);

Angular (index.html içinde)

<!-- In src/index.html, before </body> -->
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

Adım 3: Kurulumu Doğrulayın

Kodu ekledikten sonra, web sitenizi yeni bir tarayıcı sekmesinde veya gizli pencerede açın. 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öremiyor musunuz? Scriptin </body> etiketinden önce doğru şekilde yerleştirildiğini kontrol edin. Tarayıcınızın konsolunda JavaScript hataları olmadığından emin olun (geliştirici araçlarını açmak için F12 tuşuna basın). Tarayıcı önbelleğinizi temizlemeyi veya gizli pencerede görüntülemeyi deneyin.

Önemli: Chatbot, web sitenizin HTTP veya HTTPS üzerinden sunulmasını gerektirir (doğrudan dosya olarak açılmamalıdır). Yerel olarak test ediyorsanız, yerel bir geliştirme sunucusu kullanın.

Belgeler