Πώς να Προσθέσετε το Asyntai AI Chatbot στο PayloadCMS

Οδηγός βήμα προς βήμα για ιστότοπους που τροφοδοτούνται από PayloadCMS

Πλατφόρμα:

Σημαντικό: Το PayloadCMS είναι ένα headless CMS. Ο κώδικας chatbot πρέπει να προστεθεί στην εφαρμογή frontend σας, όχι στον πίνακα διαχείρισης Payload.

Βήμα 1: Αποκτήστε τον Κωδικό Ενσωμάτωσής σας

Αρχικά, μεταβείτε στον Πίνακα ελέγχου Asyntai και μετακινηθείτε προς τα κάτω στην ενότητα «Embed Code». Αντιγράψτε τον μοναδικό σας κωδικό ενσωμάτωσης, ο οποίος θα μοιάζει κάπως έτσι:

<script>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</script>

Σημείωση: Ο παραπάνω κώδικας είναι απλώς ένα παράδειγμα. Πρέπει να αντιγράψετε τον δικό σας μοναδικό κωδικό ενσωμάτωσης από τον Πίνακα Ελέγχου σας, καθώς περιέχει το προσωπικό σας αναγνωριστικό widget.

Βήμα 2: Προσθήκη στο Next.js Frontend (Πιο Συνηθισμένο)

Το PayloadCMS χρησιμοποιεί συνήθως Next.js ως το frontend framework του. Προσθέστε το chatbot στο βασικό layout σας:

App Router (Next.js 13+)

Ανοίξτε το app/layout.tsx και προσθέστε το component Script:

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

Αν χρησιμοποιείτε Pages Router, ανοίξτε το 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"
      />
    </>
  )
}

Συμβουλή: Η επιλογή strategy="afterInteractive" διασφαλίζει ότι το chatbot φορτώνεται αφού η σελίδα γίνει διαδραστική, παρέχοντας την καλύτερη εμπειρία χρήστη χωρίς να επηρεάζει την απόδοση φόρτωσης σελίδας.

Εναλλακτική Μέθοδος 1: Προσαρμοσμένο Frontend React

Αν το έργο PayloadCMS σας χρησιμοποιεί προσαρμοσμένο frontend React αντί για Next.js, μπορείτε να φορτώσετε το chatbot δυναμικά με ένα hook useEffect:

// 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
  );
}

Σημείωση: Αντικαταστήστε το YOUR_WIDGET_ID με το πραγματικό ID γραφικής εφαρμογής σας από τον πίνακα εργαλείων. Η συνάρτηση εκκαθάρισης στη δήλωση return διασφαλίζει ότι το σενάριο αφαιρείται αν το component αποσυναρμολογηθεί.

Εναλλακτική Μέθοδος 2: Χρήση Προσαρμοσμένων Components του Payload (Μόνο Πίνακας Διαχείρισης)

Αν θέλετε το chatbot να εμφανίζεται μέσα στον ίδιο τον πίνακα διαχείρισης Payload (για εσωτερική υποστήριξη), μπορείτε να καταχωρίσετε ένα προσαρμοσμένο component στο payload.config.ts σας:

// payload.config.ts
import { buildConfig } from 'payload/config';

export default buildConfig({
  admin: {
    components: {
      afterDashboard: ['/components/AsyntaiChatbot'],
    },
  },
  // ... rest of your config
})

Στη συνέχεια δημιουργήστε το αρχείο component:

// components/AsyntaiChatbot.tsx
'use client'
import { useEffect } from 'react';

const AsyntaiChatbot = () => {
  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 null;
};

export default AsyntaiChatbot;

Συμβουλή: Αυτή η μέθοδος αφορά μόνο την προσθήκη του chatbot στον πίνακα διαχείρισης Payload. Για τον δημόσιο ιστότοπό σας, χρησιμοποιήστε το Βήμα 2 ή την Εναλλακτική Μέθοδο 1.

Εναλλακτική Μέθοδος 3: Απλό HTML/Στατικός Ιστότοπος

Αν ο ιστότοπός σας που τροφοδοτείται από PayloadCMS χρησιμοποιεί απλό HTML ή στατικό frontend που καταναλώνει το Payload API, προσθέστε τον κώδικα ενσωμάτωσης απευθείας στο HTML σας:

Ανοίξτε το κύριο αρχείο HTML σας (συνήθως index.html)
Προσθέστε τον κώδικα ενσωμάτωσης ακριβώς πριν την ετικέτα κλεισίματος </body>:

    <script>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</script>
  </body>
</html>

Βήμα 3: Ανάπτυξη και Επαλήθευση

Αφού προσθέσετε τον κώδικα στην εφαρμογή frontend σας:

Αναπτύξτε το frontend σας στον πάροχο φιλοξενίας σας (Vercel, Netlify, κ.λπ.)
Ανοίξτε τον ενεργό ιστότοπό σας σε μια νέα καρτέλα προγράμματος περιήγησης
Θα πρέπει να δείτε το κουμπί chat widget στην κάτω δεξιά γωνία
Κάντε κλικ για να βεβαιωθείτε ότι ανοίγει και λειτουργεί σωστά

Δεν βλέπετε το widget; Βεβαιωθείτε ότι αντικαταστήσατε το YOUR_WIDGET_ID με το πραγματικό ID γραφικής εφαρμογής σας από τον πίνακα εργαλείων. Ελέγξτε ότι το σενάριο φορτώνεται στην καρτέλα Network του προγράμματος περιήγησής σας (F12 > Network). Επαληθεύστε ότι το frontend αναπτύχθηκε εκ νέου μετά την προσθήκη του κώδικα. Για Next.js, βεβαιωθείτε ότι χρησιμοποιείτε το component Script από το next/script, όχι μια κανονική ετικέτα <script>. Εκκαθαρίστε την κρυφή μνήμη του προγράμματος περιήγησης ή δοκιμάστε σε λειτουργία ανώνυμης περιήγησης.

Τεκμηρίωση