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

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

Πλατφόρμα:

Headless CMS: Το DatoCMS είναι ένα headless CMS που παρέχει περιεχόμενο μέσω APIs. Ο κώδικας chatbot πρέπει να προστεθεί στην εφαρμογή frontend (Next.js, Gatsby, Nuxt κ.λπ.), όχι στον πίνακα ελέγχου DatoCMS.

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

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

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

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

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

Το Next.js είναι το πιο δημοφιλές frontend framework που χρησιμοποιείται με DatoCMS. Προσθέστε το chatbot χρησιμοποιώντας το στοιχείο Script:

App Router (app/layout.tsx):

Ανοίξτε το αρχείο ριζικής διάταξης: app/layout.tsx
Εισαγάγετε το στοιχείο 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="afterInteractive" /> </body> </html> ) }
Αντικαταστήστε το YOUR_WIDGET_ID με το πραγματικό widget ID σας
Αποθηκεύστε το αρχείο και επανεκκινήστε τον διακομιστή ανάπτυξης

Pages Router (pages/_app.tsx):

Ανοίξτε το αρχείο pages/_app.tsx
Προσθέστε το στοιχείο Script:
import Script from 'next/script' import type { AppProps } from 'next/app' export default function App({ Component, pageProps }: AppProps) { 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: Gatsby Frontend

Για ιστότοπους Gatsby που αντλούν περιεχόμενο από DatoCMS μέσω gatsby-source-datocms:

Δημιουργήστε ή επεξεργαστείτε το 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

Εναλλακτική Μέθοδος 2: Nuxt.js Frontend

Για εφαρμογές Nuxt.js που χρησιμοποιούν περιεχόμενο DatoCMS:

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

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

Εάν χρησιμοποιείτε το Content Delivery API του DatoCMS με έναν στατικό ιστότοπο HTML ή γεννήτρια στατικών ιστότοπων:

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

Εναλλακτική Μέθοδος 4: React (Vite/CRA)

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

Επιλογή Α: Προσθήκη στο public/index.html

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

Επιλογή Β: useEffect στο Ριζικό Στοιχείο

Δημιουργήστε ένα στοιχείο chatbot ή προσθέστε στο ριζικό στοιχείο σας:
// 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 }
Εισαγάγετε και αποδώστε το στοιχείο στο App.jsx ή στη ριζική διάταξη

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

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

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

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

Τεκμηρίωση