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

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

Πλατφόρμα:

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

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

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

<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 (Πιο Συνηθισμένο)

Εάν ο ιστότοπος Sanity χρησιμοποιεί Next.js (η πιο συνηθισμένη σύζευξη), προσθέστε το chatbot στη ριζική διάταξη:

App Router (Next.js 13+)

Ανοίξτε το app/layout.js (ή app/layout.tsx) και προσθέστε το συστατικό 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.js:

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: Gatsby Frontend

Εάν ο ιστότοπος Sanity χρησιμοποιεί Gatsby, προσθέστε το σενάριο μέσω gatsby-ssr.js:

// gatsby-ssr.js
import React from 'react'

export const onRenderBody = ({ setPostBodyComponents }) => {
  setPostBodyComponents([
    <script
      key="asyntai"
      async
      src="https://asyntai.com/static/js/chat-widget.js"
      data-asyntai-id="YOUR_WIDGET_ID"
    />
  ]);
};

Σημείωση: Χρειάζεται επίσης να προσθέσετε τον ίδιο κώδικα στο gatsby-browser.js εάν θέλετε το widget να παραμένει κατά την πλοήγηση στην πλευρά του πελάτη. Εναλλακτικά, προσθέστε το στο ριζικό συστατικό διάταξης.

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

Εάν ο ιστότοπος Sanity χρησιμοποιεί Nuxt.js, προσθέστε το σενάριο στο nuxt.config.js (ή nuxt.config.ts):

// nuxt.config.ts
export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          src: 'https://asyntai.com/static/js/chat-widget.js',
          'data-asyntai-id': 'YOUR_WIDGET_ID',
          async: true
        }
      ]
    }
  }
})

Εναλλακτική Μέθοδος 3: Frontend Απλής HTML

Εάν ο ιστότοπος Sanity χρησιμοποιεί απλή HTML ή γεννήτρια στατικών ιστότοπων που καταναλώνει το Sanity API:

Ανοίξτε το κύριο αρχείο 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>

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

Εάν το frontend χρησιμοποιεί React με Vite ή Create React App:

Προσθέστε το σενάριο στο index.html στον κατάλογο public/:

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- ... existing head content ... -->
  </head>
  <body>
    <div id="root"></div>
    <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>

Ή χρησιμοποιήστε ένα hook useEffect στο βασικό component σας:

// App.jsx or App.tsx
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
  );
}

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

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

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

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

Τεκμηρίωση