Come aggiungere il chatbot IA Asyntai a PayloadCMS

Guida passo passo per siti web basati su PayloadCMS

Piattaforma:

Importante: PayloadCMS è un CMS headless. Il codice del chatbot deve essere aggiunto alla tua applicazione frontend, non al pannello di amministrazione di Payload.

Passaggio 1: ottieni il tuo codice di incorporamento

Per prima cosa, vai alla tua Dashboard Asyntai e scorri fino alla sezione "Codice di incorporamento". Copia il tuo codice di incorporamento univoco che apparirà così:

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

Nota: Il codice sopra è solo un esempio. Devi copiare il tuo codice di incorporamento univoco dalla tua Dashboard poiché contiene il tuo ID widget personale.

Passaggio 2: Aggiungi al frontend Next.js (più comune)

PayloadCMS utilizza comunemente Next.js come framework frontend. Aggiungi il chatbot al tuo layout principale:

App Router (Next.js 13+)

Apri app/layout.tsx e aggiungi il componente 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

Se usi il Pages Router, apri 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"
      />
    </>
  )
}

Suggerimento: L'opzione strategy="afterInteractive" garantisce che il chatbot si carichi dopo che la pagina diventa interattiva, offrendo la migliore esperienza utente senza influire sulle prestazioni di caricamento della pagina.

Metodo alternativo 1: frontend React personalizzato

Se il tuo progetto PayloadCMS utilizza un frontend React personalizzato invece di Next.js, puoi caricare il chatbot dinamicamente con 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
  );
}

Nota: Sostituisci YOUR_WIDGET_ID con il tuo ID widget effettivo dalla dashboard. La funzione di pulizia nell'istruzione return garantisce che lo script venga rimosso se il componente viene smontato.

Metodo alternativo 2: uso dei componenti personalizzati di Payload (solo pannello di amministrazione)

Se vuoi che il chatbot appaia all'interno del pannello di amministrazione di Payload stesso (per supporto interno), puoi registrare un componente personalizzato nel tuo payload.config.ts:

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

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

Quindi crea il file del componente:

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

Suggerimento: Questo metodo serve solo per aggiungere il chatbot al pannello di amministrazione di Payload. Per il tuo sito web pubblico, usa invece il passaggio 2 o il metodo alternativo 1.

Metodo alternativo 3: sito HTML statico

Se il tuo sito basato su PayloadCMS utilizza un frontend HTML statico che consuma l'API di Payload, aggiungi il codice di incorporamento direttamente al tuo HTML:

Apri il tuo file HTML principale (solitamente index.html)
Aggiungi il codice di incorporamento subito prima del tag di chiusura </body>:

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

Passaggio 3: Distribuisci e verifica

Dopo aver aggiunto il codice alla tua applicazione frontend:

Distribuisci il tuo frontend sul tuo provider di hosting (Vercel, Netlify, ecc.)
Apri il tuo sito live in una nuova scheda del browser
Dovresti vedere il pulsante del widget chat nell'angolo in basso a destra della tua pagina
Cliccaci sopra per assicurarti che si apra e funzioni correttamente

Non vedi il widget? Assicurati di aver sostituito YOUR_WIDGET_ID con il tuo ID widget effettivo dalla dashboard. Controlla che lo script si stia caricando nella scheda Network del browser (F12 > Network). Verifica che il frontend sia stato ridistribuito dopo aver aggiunto il codice. Per Next.js, assicurati di usare il componente Script da next/script, non un normale tag <script>. Svuota la cache del browser o testa in modalità incognito.

Documentazione