MedusaCMS'e Asyntai AI Chatbot Nasıl Eklenir

Medusa destekli mağaza ön yüzleri için adım adım kılavuz

Platform:

Önemli: Medusa, headless bir e-ticaret platformudur. Chatbot kodu, Medusa sunucusuna/yönetimine değil, mağaza ön yüz uygulamanıza 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 Mağaza Ön Yüzüne Ekleme (En Yaygın)

Medusa'nın varsayılan mağaza başlangıç şablonu Next.js kullanır. Chatbot'u mağaza ön yüzünüzün kök düzenine ekleyin:

App Router (Next.js 13+)

Storefront projenizde app/layout.tsx dosyasını açın ve Script bileşenini ekleyin:

import Script from 'next/script'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://asyntai.com/static/js/chat-widget.js"
          data-asyntai-id="YOUR_WIDGET_ID"
          strategy="afterInteractive"
        />
      </body>
    </html>
  )
}

Pages Router

Storefront'unuz Pages Router kullanıyorsa, pages/_document.tsx veya pages/_app.tsx dosyasını açın:

// pages/_app.tsx
import Script from 'next/script'

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

İpucu: strategy="afterInteractive" seçeneği, chatbot'un sayfa etkileşimli hale geldikten sonra yüklenmesini sağlayarak, sayfa yükleme performansını etkilemeden en iyi kullanıcı deneyimini sunar.

Alternatif Yöntem 1: Gatsby Mağaza Ön Yüzü

Medusa storefront'unuz Gatsby kullanıyorsa, scripti gatsby-ssr.js dosyasında onRenderBody ve setPostBodyComponents kullanarak ekleyin:

// gatsby-ssr.js
import React from 'react'

export const onRenderBody = ({ setPostBodyComponents }) => {
  setPostBodyComponents([
    <script
      key="asyntai"
      async
      src="https://asyntai.com/static/js/chat-widget.js"
      data-asyntai-id="YOUR_WIDGET_ID"
    />
  ]);
};

Not: Widget'ın istemci taraflı gezinme sırasında kalıcı olmasını istiyorsanız aynı kodu gatsby-browser.js dosyasına da eklemelisiniz. Alternatif olarak, kök düzen bileşeninize ekleyin.

Alternatif Yöntem 2: Özel React Mağaza Ön Yüzü

Medusa storefront'unuz özel bir React kurulumu kullanıyorsa (Vite, Create React App vb.):

Scripti public/index.html dosyasında kapanış </body> etiketinden hemen önce ekleyin:

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- ... existing head content ... -->
  </head>
  <body>
    <div id="root"></div>
    <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
  </body>
</html>

Veya kök bileşeninizde bir useEffect hook'u kullanın:

// App.tsx or App.jsx
import { useEffect } from 'react';

function App() {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://asyntai.com/static/js/chat-widget.js';
    script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
    script.async = true;
    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    };
  }, []);

  return (
    // ... your app content
  );
}

Alternatif Yöntem 3: Herhangi Bir Özel Ön Yüz

Medusa destekli mağazanız başka bir HTML tabanlı ön yüz kullanıyorsa, standart script etiketini kapanış </body> etiketinden hemen önce ekleyin:

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

İpucu: Bu yöntem, Vue, Svelte, Angular, Astro ve Medusa arka ucuna bağlı diğerleri dahil olmak üzere HTML çıktısı üreten herhangi bir ön yüz çerçevesi veya statik site oluşturucu ile çalışır.

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

Kodu mağaza ön yüz uygulamanıza ekledikten sonra:

Mağaza ön yüzünüzü barındırma sağlayıcınıza dağıtın (Vercel, Netlify, Railway vb.)
Canlı mağaza ön yüzünüzü yeni bir tarayıcı sekmesinde açın
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öremiyor musunuz? YOUR_WIDGET_ID'yi kontrol panelindeki gerçek widget kimliğinizle değiştirdiğinizden emin olun. Scriptin tarayıcınızın Network sekmesinde (F12 > Network) yüklendiğini kontrol edin. Kodu ekledikten sonra storefront'un yeniden dağıtıldığını doğrulayın. Next.js için normal bir <script> etiketi değil, next/script'ten Script bileşenini kullandığınızdan emin olun. Kod Medusa sunucusuna değil, storefront'a eklenir. Tarayıcı önbelleğinizi temizleyin veya gizli modda test edin.

Belgeler