Come aggiungere il chatbot IA Asyntai a Strapi

Guida passo passo per siti web basati su Strapi

Piattaforma:

CMS headless: Strapi è un CMS headless che fornisce contenuti tramite API ma non include un frontend integrato. L'installazione del chatbot dipende dal framework frontend che stai usando per renderizzare i contenuti di Strapi. Scegli il metodo qui sotto che corrisponde alla tua configurazione.

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.

Metodo 1: Next.js con Strapi (consigliato)

Se stai usando Next.js come frontend di Strapi (la configurazione più comune), aggiungi il chatbot usando il componente Script:

Apri il file di layout principale: app/layout.tsx (App Router) o pages/_app.tsx (Pages Router)
Importa il componente Script e aggiungi il 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> ) }
Sostituisci YOUR_WIDGET_ID con il tuo ID widget effettivo
Salva il file e riavvia il server di sviluppo

Suggerimento: L'uso di strategy="lazyOnload" garantisce che il chatbot si carichi dopo che la pagina è completamente interattiva, fornendo le migliori prestazioni per il tuo sito basato su Strapi.

Metodo 2: Gatsby con Strapi

Per siti Gatsby che usano gatsby-source-strapi:

Crea o modifica gatsby-ssr.js nella root del progetto:
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" /> ]) }
Sostituisci YOUR_WIDGET_ID con il tuo ID widget effettivo
Riavvia il server di sviluppo Gatsby

Metodo 3: Nuxt.js con Strapi

Per applicazioni Nuxt.js che usano @nuxtjs/strapi:

Nuxt 3:

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

Nuxt 2:

Aggiungi al tuo nuxt.config.js:
export default { head: { script: [ { src: 'https://asyntai.com/static/js/chat-widget.js', async: true, 'data-asyntai-id': 'YOUR_WIDGET_ID' } ] } }

Metodo 4: React con Strapi

For standard React apps (Create React App, Vite) consuming Strapi API:

Apri il file public/index.html (CRA) o index.html (Vite)
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>
Salva il file

Oppure crea un componente React:

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

Metodo 5: SvelteKit con Strapi

Per applicazioni SvelteKit che consumano contenuti di Strapi:

Modifica il tuo file src/app.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>
Salva il file

Metodo 6: sito statico con API Strapi

If you're using Strapi's REST or GraphQL API with a static HTML site:

Aggiungi il codice di incorporamento al file HTML prima del tag di chiusura </body>:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Salva il file e caricalo sul tuo hosting

Passaggio 2: Verifica l'installazione

Dopo aver aggiunto il codice del chatbot al tuo sito basato su Strapi, distribuisci o avvia il tuo server di sviluppo. Visita il tuo sito web in una nuova scheda del browser o in una finestra di navigazione in incognito. Dovresti vedere il pulsante del widget chat nell'angolo in basso a destra. Cliccaci sopra per assicurarti che si apra e funzioni correttamente.

Non vedi il widget? Assicurati di aver aggiunto lo script al file corretto per il tuo framework. Controlla la console per sviluppatori del browser per eventuali errori. Se utilizzi il rendering lato server, assicurati che lo script venga eseguito lato client. Prova a svuotare la cache del browser o a visualizzare in una finestra di navigazione in incognito.

Variabili d'ambiente: Per una maggiore sicurezza e flessibilità, considera di memorizzare l'ID del widget in una variabile d'ambiente (ad es., NEXT_PUBLIC_ASYNTAI_ID per Next.js o VITE_ASYNTAI_ID per Vite) anziché codificarlo direttamente.

Documentazione