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

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

Πλατφόρμα:

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

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

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

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

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

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

Εάν χρησιμοποιείτε Next.js για να αποδώσετε το περιεχόμενό σας από το Contentful, προσθέστε το chatbot χρησιμοποιώντας το στοιχείο 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 φορτώνει αφού η σελίδα είναι πλήρως διαδραστική, προσφέροντας τη βέλτιστη απόδοση.

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

Για ιστότοπους Gatsby που αντλούν περιεχόμενο από το Contentful:

Εγκαταστήστε το gatsby-plugin-load-script (προαιρετικό αλλά συνιστάται):
npm install gatsby-plugin-load-script
Προσθέστε στο gatsby-config.js σας:
module.exports = { plugins: [ { resolve: 'gatsby-plugin-load-script', options: { src: 'https://asyntai.com/static/js/chat-widget.js', attributes: { 'data-asyntai-id': 'YOUR_WIDGET_ID', async: true } } } ] }
Εναλλακτικά, χρησιμοποιήστε το gatsby-ssr.js:
// 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" /> ]) }
Επανεκκινήστε τον διακομιστή ανάπτυξης Gatsby

Μέθοδος 3: React με Contentful

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

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

Ή χρησιμοποιήστε ένα στοιχείο React με useEffect:

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

Μέθοδος 4: Vue/Nuxt με Contentful

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

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' } ] } } })

Vue 3:

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

Μέθοδος 5: Στατικό HTML με Contentful API

Εάν χρησιμοποιείτε το Content Delivery API του Contentful με vanilla JavaScript:

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

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

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

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

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

Τεκμηρίωση