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

Οδηγός βήμα-βήμα για ιστότοπους με τεχνολογία Strapi

Πλατφόρμα:

Headless CMS: Το Strapi είναι ένα headless CMS που παρέχει περιεχόμενο μέσω API αλλά δεν περιλαμβάνει ενσωματωμένο frontend. Η εγκατάσταση του chatbot εξαρτάται από το frontend framework που χρησιμοποιείτε για να αποδώσετε το περιεχόμενο Strapi. Επιλέξτε την παρακάτω μέθοδο που αντιστοιχεί στη ρύθμισή σας.

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

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

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

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

Μέθοδος 1: Next.js με Strapi (Συνιστάται)

Αν χρησιμοποιείτε Next.js ως frontend για το Strapi (η πιο συνηθισμένη ρύθμιση), προσθέστε το chatbot χρησιμοποιώντας το component Script:

Ανοίξτε το κύριο αρχείο διάταξης: app/layout.tsx (App Router) ή pages/_app.tsx (Pages Router)
Εισαγάγετε το στοιχείο Script και προσθέστε το chatbot:
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> ) }
Replace YOUR_WIDGET_ID with your actual widget ID
Αποθηκεύστε το αρχείο και επανεκκινήστε τον διακομιστή ανάπτυξης

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

Μέθοδος 2: Gatsby με Strapi

Για ιστότοπους Gatsby που χρησιμοποιούν gatsby-source-strapi:

Create or edit gatsby-ssr.js in your project root:
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" /> ]) }
Replace YOUR_WIDGET_ID with your actual widget ID
Επανεκκινήστε τον διακομιστή ανάπτυξης Gatsby

Μέθοδος 3: Nuxt.js με Strapi

Για εφαρμογές Nuxt.js που χρησιμοποιούν @nuxtjs/strapi:

Nuxt 3:

Προσθέστε στο nuxt.config.ts σας:
export default defineNuxtConfig({ app: { head: { script: [ { src: 'https://asyntai.com/static/js/chat-widget.js', async: true, 'data-asyntai-id': 'YOUR_WIDGET_ID' } ] } } })

Nuxt 2:

Προσθέστε στο nuxt.config.js σας:
export default { head: { script: [ { src: 'https://asyntai.com/static/js/chat-widget.js', async: true, 'data-asyntai-id': 'YOUR_WIDGET_ID' } ] } }

Μέθοδος 4: React με Strapi

For standard React apps (Create React App, Vite) consuming Strapi API:

Ανοίξτε το αρχείο public/index.html (CRA) ή index.html (Vite)
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>
Αποθηκεύστε το αρχείο

Ή δημιουργήστε ένα component React:

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

Μέθοδος 5: SvelteKit με Strapi

Για εφαρμογές SvelteKit που χρησιμοποιούν περιεχόμενο Strapi:

Επεξεργαστείτε το αρχείο src/app.html σας
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>
Αποθηκεύστε το αρχείο

Μέθοδος 6: Στατικός ιστότοπος με Strapi API

If you're using Strapi's REST or GraphQL API with a static HTML site:

Προσθέστε τον κώδικα ενσωμάτωσης στο αρχείο HTML σας πριν την ετικέτα κλεισίματος </body>:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Αποθηκεύστε το αρχείο και ανεβάστε στον χώρο φιλοξενίας σας

Βήμα 2: Επαλήθευση Εγκατάστασης

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

Δεν βλέπετε το widget; Βεβαιωθείτε ότι έχετε προσθέσει το script στο σωστό αρχείο για το framework σας. Ελέγξτε την κονσόλα προγραμματιστή του προγράμματος περιήγησης για τυχόν σφάλματα. Εάν χρησιμοποιείτε απόδοση από την πλευρά του διακομιστή, βεβαιωθείτε ότι το script εκτελείται από την πλευρά του πελάτη. Δοκιμάστε να εκκαθαρίσετε την κρυφή μνήμη του προγράμματος περιήγησης ή να το δείτε σε παράθυρο ανώνυμης περιήγησης.

Μεταβλητές Περιβάλλοντος: Για καλύτερη ασφάλεια και ευελιξία, σκεφτείτε να αποθηκεύσετε το αναγνωριστικό widget σας σε μια μεταβλητή περιβάλλοντος (π.χ., NEXT_PUBLIC_ASYNTAI_ID για Next.js ή VITE_ASYNTAI_ID για Vite) αντί να το κωδικοποιείτε απευθείας.

Τεκμηρίωση