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

If your website has multiple HTML pages, you have several options:

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

If you're using server-side includes (SSI), PHP includes, or similar:

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

Create a single JavaScript file that loads the chatbot on all pages:

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); })();
Replace YOUR_WIDGET_ID with your actual widget ID
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

Add to gatsby-browser.js or use gatsby-ssr.js

Next.js

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

Nuxt.js

Add to nuxt.config.js under head.script

Eleventy (11ty)

_includes/ dizinindeki temel düzeninize ekleyin

Astro

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

VuePress

Add to .vuepress/config.js under head

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öremiyorsunuz mu? 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