Come aggiungere il chatbot IA Asyntai a Sanity

Guida passo passo per siti web basati su Sanity

Piattaforma:

Importante: Sanity è un CMS headless che distribuisce contenuti tramite API. Il codice del chatbot deve essere aggiunto alla tua applicazione frontend (Next.js, Gatsby, Nuxt, HTML semplice, ecc.), non al Sanity Studio stesso.

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)

Se il tuo sito basato su Sanity utilizza Next.js (l'abbinamento più comune), aggiungi il chatbot al tuo layout principale:

App Router (Next.js 13+)

Apri app/layout.js (o 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.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"
      />
    </>
  )
}

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 Gatsby

Se il tuo sito Sanity utilizza Gatsby, aggiungi lo script tramite 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"
    />
  ]);
};

Nota: Devi anche aggiungere lo stesso codice a gatsby-browser.js se vuoi che il widget persista durante la navigazione lato client. In alternativa, aggiungilo al componente del layout principale.

Metodo alternativo 2: Frontend Nuxt.js

Se il tuo sito Sanity utilizza Nuxt.js, aggiungi lo script in nuxt.config.js (o 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
        }
      ]
    }
  }
})

Metodo alternativo 3: frontend HTML semplice

Se il tuo sito basato su Sanity utilizza HTML semplice o un generatore di siti statici che consuma l'API di Sanity:

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>

Metodo alternativo 4: React (Vite o Create React App)

Se il tuo frontend utilizza React con Vite o Create React App:

Aggiungi lo script a index.html nella directory public/:

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- ... existing head content ... -->
  </head>
  <body>
    <div id="root"></div>
    <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
  </body>
</html>

Oppure usa un hook useEffect nel tuo componente principale:

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

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