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

Ghid pas cu pas pentru site-urile bazate pe Sanity

Platformă:

Important: Sanity este un CMS headless care livrează conținut prin API-uri. Codul chatbot-ului trebuie adăugat în aplicația dvs. frontend (Next.js, Gatsby, Nuxt, HTML simplu, etc.), nu în Sanity Studio.

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)

Dacă site-ul dvs. bazat pe Sanity folosește Next.js (cea mai frecventă combinație), adăugați chatbot-ul în layout-ul rădăcină:

App Router (Next.js 13+)

Deschideți app/layout.js (sau 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.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"
      />
    </>
  )
}

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 Gatsby

Dacă site-ul Sanity folosește Gatsby, adăugați scriptul prin 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"
    />
  ]);
};

Notă: De asemenea, trebuie să adăugați același cod în gatsby-browser.js dacă doriți ca widget-ul să persiste în timpul navigării pe partea de client. Alternativ, adăugați-l în componenta de layout rădăcină.

Metoda alternativă 2: Frontend Nuxt.js

Dacă site-ul Sanity folosește Nuxt.js, adăugați scriptul în nuxt.config.js (sau 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
        }
      ]
    }
  }
})

Metoda alternativă 3: Frontend HTML simplu

Dacă site-ul bazat pe Sanity folosește HTML simplu sau un generator de site-uri statice care consumă API-ul Sanity:

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>

Metoda alternativă 4: React (Vite sau Create React App)

Dacă frontend-ul dvs. folosește React cu Vite sau Create React App:

Adăugați scriptul în index.html din directorul 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>

Sau utilizați un hook useEffect în componenta rădăcină:

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

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