Kuidas lisada Asyntai AI vestlusrobotit Sanityle

Samm-sammult juhend Sanity põhiste veebisaitide jaoks

Platvorm:

Oluline: Sanity on peata CMS, mis edastab sisu API-de kaudu. Vestlusroboti kood tuleb lisada teie kasutajaliidese rakendusse (Next.js, Gatsby, Nuxt, tavaline HTML jne), mitte Sanity Studiosse endasse.

1. samm: hankige oma manuskood

Esmalt minge oma Asyntai juhtpaneelile ja kerige alla jaotiseni "Manuskood". Kopeerige oma unikaalne manuskood, mis näeb välja selline:

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

Märkus: Ülalolev kood on vaid näide. Peate kopeerima oma unikaalse manuskoodi oma juhtpaneelilt, kuna see sisaldab teie isiklikku vidina ID-d.

2. samm: Lisage Next.js kasutajaliidesse (kõige levinum)

Kui teie Sanity põhine sait kasutab Next.js-i (kõige levinum kombinatsioon), lisage vestlusrobot oma juurküljendusesse:

App Router (Next.js 13+)

Avage app/layout.js (või app/layout.tsx) ja lisage Script komponent:

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

Kui kasutate Pages Routerit, avage 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"
      />
    </>
  )
}

Vihje: Valik strategy="afterInteractive" tagab, et vestlusrobot laadib pärast lehe interaktiivseks muutumist, pakkudes parimat kasutajakogemust ilma lehe laadimise jõudlust mõjutamata.

Alternatiivne meetod 1: Gatsby kasutajaliides

Kui teie Sanity sait kasutab Gatsbyt, lisage skript faili gatsby-ssr.js kaudu:

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

Märkus: Samuti peate lisama sama koodi faili gatsby-browser.js, kui soovite, et vidin püsiks kliendipoolse navigeerimise ajal. Alternatiivina lisage see oma juurküljenduse komponenti.

Alternatiivne meetod 2: Nuxt.js kasutajaliides

Kui teie Sanity sait kasutab Nuxt.js-i, lisage skript failis nuxt.config.js (või 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
        }
      ]
    }
  }
})

Alternatiivne meetod 3: tavaline HTML-kasutajaliides

Kui teie Sanity põhine sait kasutab tavalist HTML-i või staatilist saidi generaatorit, mis tarbib Sanity API-t:

Avage oma peamine HTML-fail (tavaliselt index.html)
Lisage manuskood vahetult enne sulgevat </body> märgendit:

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

Alternatiivne meetod 4: React (Vite või Create React App)

Kui teie kasutajaliides kasutab Reacti koos Vite'i või Create React Appiga:

Lisage skript faili index.html kataloogis 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>

Või kasutage useEffect konksu oma juurkomponendis:

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

3. samm: Juurutage ja kontrollige

Pärast koodi lisamist oma kasutajaliidese rakendusse:

Juurutage oma rakendus oma majutusteenuse pakkujale (Vercel, Netlify jne)
Avage oma aktiivne sait uuel brauseri vahekaardil
Peaksite nägema vestlusvidina nuppu alumises paremas nurgas
Klõpsake sellel, et veenduda selle avamises ja korrektses toimimises

Ei näe vidinat? Veenduge, et asendasite YOUR_WIDGET_ID oma tegeliku vidina ID-ga juhtpaneelilt. Kontrollige, kas skript laadib teie brauseri võrgu vahekaardil (F12 > Network). Veenduge, et kasutajaliides juurutati pärast koodi lisamist uuesti. Next.js-i puhul veenduge, et kasutate Script komponenti paketist next/script, mitte tavalist <script> märgendit. Tühjendage brauseri vahemälu või testige inkognito režiimis.

Dokumentatsioon