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

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

Πλατφόρμα:

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

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

First, go to your Asyntai Dashboard and scroll down to the "Embed Code" section. Copy your unique embed code which will look like this:

<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.

Μέθοδος 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> ) }
Αντικαταστήστε το YOUR_WIDGET_ID με το πραγματικό widget ID σας
Αποθηκεύστε το αρχείο και επανεκκινήστε τον διακομιστή ανάπτυξης

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

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

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

Δημιουργήστε ή επεξεργαστείτε το gatsby-ssr.js στη ρίζα του έργου σας:
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" /> ]) }
Αντικαταστήστε το YOUR_WIDGET_ID με το πραγματικό 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

Για τυπικές εφαρμογές React (Create React App, Vite) που χρησιμοποιούν το Strapi API:

Ανοίξτε το αρχείο public/index.html (CRA) ή index.html (Vite)
Προσθέστε τον κώδικα ενσωμάτωσης πριν από την ετικέτα κλεισίματος </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>
Αποθηκεύστε το αρχείο

Ή δημιουργήστε ένα 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 σας
Προσθέστε τον κώδικα ενσωμάτωσης πριν από την ετικέτα κλεισίματος </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>
Αποθηκεύστε το αρχείο

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

Εάν χρησιμοποιείτε το REST ή GraphQL API του Strapi με έναν στατικό ιστότοπο HTML:

Προσθέστε τον κώδικα ενσωμάτωσης στο αρχείο 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>
Αποθηκεύστε το αρχείο και ανεβάστε στον χώρο φιλοξενίας σας

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

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

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

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

Τεκμηρίωση