Cum să adăugați Chatbot-ul AI Asyntai în PayloadCMS

Ghid pas cu pas pentru site-urile bazate pe PayloadCMS

Platformă:

Important: PayloadCMS este un CMS headless. Codul chatbot-ului trebuie adăugat în aplicația frontend, nu în panoul de administrare Payload.

Pasul 1: Obțineți codul de încorporare

Mai întâi, accesați panoul de control Asyntai și derulați în jos până la secțiunea "Cod de integrare". Copiați codul dvs. unic de integrare, care va arăta astfel:

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

Notă: Codul de mai sus este doar un exemplu. Trebuie să copiați propriul cod unic de încorporare din Tabloul de bord, deoarece conține ID-ul personal al widgetului dvs.

Pasul 2: Adăugați în frontend-ul Next.js (Cel mai frecvent)

PayloadCMS folosește în mod obișnuit Next.js ca framework frontend. Adăugați chatbot-ul în layout-ul rădăcină:

App Router (Next.js 13+)

Deschideți app/layout.tsx și adăugați componenta 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

Dacă utilizați Pages Router, deschideți pages/_app.tsx:

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

Sfat: Opțiunea strategy="afterInteractive" asigură că chatbot-ul se încarcă după ce pagina devine interactivă, oferind cea mai bună experiență utilizatorului fără a afecta performanța de încărcare a paginii.

Metoda alternativă 1: Frontend React personalizat

Dacă proiectul PayloadCMS folosește un frontend React personalizat în loc de Next.js, puteți încărca chatbot-ul dinamic cu un hook useEffect:

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

Notă: Înlocuiți YOUR_WIDGET_ID cu ID-ul real al widget-ului din tabloul de bord. Funcția de curățare din instrucțiunea return asigură că scriptul este eliminat dacă componenta se demontează.

Metoda alternativă 2: Utilizarea componentelor personalizate Payload (Doar panoul de administrare)

Dacă doriți ca chatbot-ul să apară în interiorul panoului de administrare Payload (pentru asistență internă), puteți înregistra o componentă personalizată în payload.config.ts:

// payload.config.ts
import { buildConfig } from 'payload/config';

export default buildConfig({
  admin: {
    components: {
      afterDashboard: ['/components/AsyntaiChatbot'],
    },
  },
  // ... rest of your config
})

Apoi creați fișierul componentei:

// components/AsyntaiChatbot.tsx
'use client'
import { useEffect } from 'react';

const AsyntaiChatbot = () => {
  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 null;
};

export default AsyntaiChatbot;

Sfat: Această metodă este doar pentru adăugarea chatbot-ului în panoul de administrare Payload. Pentru site-ul dvs. public, utilizați în schimb Pasul 2 sau Metoda alternativă 1.

Metoda alternativă 3: HTML simplu/Site static

Dacă site-ul dvs. bazat pe PayloadCMS folosește un frontend HTML simplu sau static care consumă API-ul Payload, adăugați codul de integrare direct în HTML:

Deschideți fișierul HTML principal (de obicei index.html)
Adăugați codul de integrare chiar înainte de eticheta de închidere </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>

Pasul 3: Implementați și verificați

După adăugarea codului în aplicația frontend:

Implementați aplicația frontend pe furnizorul dvs. de hosting (Vercel, Netlify, etc.)
Deschideți site-ul live într-o filă nouă de browser
Ar trebui să vedeți butonul widgetului de chat în colțul din dreapta jos
Faceți clic pe el pentru a vă asigura că se deschide și funcționează corect

Nu vedeți widgetul? Asigurați-vă că ați înlocuit YOUR_WIDGET_ID cu ID-ul real al widget-ului din tabloul de bord. Verificați că scriptul se încarcă în fila Network a browserului (F12 > Network). Verificați că frontend-ul a fost reimplementat după adăugarea codului. Pentru Next.js, asigurați-vă că utilizați componenta Script din next/script, nu o etichetă <script> obișnuită. Goliți cache-ul browserului sau testați în modul incognito.

Documentație