Kā pievienot Asyntai AI tērzēšanas robotu Sanity

Soli pa solim ceļvedis Sanity darbinātām tīmekļa vietnēm

Platforma:

Svarīgi: Sanity ir bezgalvas CMS, kas piegādā saturu, izmantojot API. Tērzēšanas robota kods jāpievieno jūsu priekšgala lietojumprogrammai (Next.js, Gatsby, Nuxt, vienkāršs HTML u.c.), nevis pašam Sanity Studio.

1. solis: Iegūstiet savu iegulto kodu

Vispirms dodieties uz savu Asyntai vadības paneli un ritiniet uz leju līdz sadaļai "Iegultais kods". Nokopējiet savu unikālo iegulto kodu, kas izskatīsies šādi:

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

Piezīme: Iepriekš minētais kods ir tikai piemērs. Jums jānokopē savs unikālais iegultais kods no sava Vadības paneļa, jo tas satur jūsu personīgo logrīka ID.

2. solis: Pievienojiet Next.js priekšgalam (visbiežāk)

Ja jūsu Sanity darbinātā vietne izmanto Next.js (visbiežākā kombinācija), pievienojiet tērzēšanas robotu savam saknes izkārtojumam:

App Router (Next.js 13+)

Atveriet app/layout.js (vai app/layout.tsx) un pievienojiet Script komponentu:

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

Ja izmantojat Pages Router, atveriet 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"
      />
    </>
  )
}

Padoms: Opcija strategy="afterInteractive" nodrošina, ka tērzēšanas robots tiek ielādēts pēc tam, kad lapa kļūst interaktīva, nodrošinot labāko lietotāja pieredzi, neietekmējot lapas ielādes veiktspēju.

Alternatīvā metode 1: Gatsby priekšgals

Ja jūsu Sanity vietne izmanto Gatsby, pievienojiet skriptu, izmantojot 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"
    />
  ]);
};

Piezīme: Jums arī jāpievieno tas pats kods failā gatsby-browser.js, ja vēlaties, lai logrīks saglabātos klienta puses navigācijas laikā. Alternatīvi pievienojiet to savam saknes izkārtojuma komponentam.

Alternatīvā metode 2: Nuxt.js priekšgals

Ja jūsu Sanity vietne izmanto Nuxt.js, pievienojiet skriptu failā nuxt.config.js (vai 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
        }
      ]
    }
  }
})

3. alternatīvā metode: Vienkāršs HTML priekšgals

Ja jūsu Sanity darbinātā vietne izmanto vienkāršu HTML vai statisko vietņu ģeneratoru, kas patērē Sanity API:

Atveriet savu galveno HTML failu (parasti index.html)
Pievienojiet iegulšanas kodu tieši pirms noslēdzošā </body> taga:

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

4. alternatīvā metode: React (Vite vai Create React App)

Ja jūsu priekšgals izmanto React ar Vite vai Create React App:

Pievienojiet skriptu failam index.html direktorijā 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>

Vai izmantojiet useEffect āķi savā saknes komponentā:

// 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. solis: Izvietojiet un pārbaudiet

Pēc koda pievienošanas priekšgala lietojumprogrammai:

Izvietojiet savu priekšgalu pie hostinga pakalpojumu sniedzēja (Vercel, Netlify u.c.)
Atveriet savu aktīvo vietni jaunā pārlūkprogrammas cilnē
Jums vajadzētu redzēt tērzēšanas logrīka pogu apakšējā labajā stūrī
Noklikšķiniet uz tā, lai pārliecinātos, ka tas atveras un darbojas pareizi

Neredzat logrīku? Pārliecinieties, ka esat aizstājis YOUR_WIDGET_ID ar savu faktisko logrīka ID no vadības paneļa. Pārbaudiet, vai skripts tiek ielādēts pārlūkprogrammas cilnē Network (F12 > Network). Pārliecinieties, ka priekšgals tika atkārtoti izvietots pēc koda pievienošanas. Next.js gadījumā pārliecinieties, ka izmantojat Script komponentu no next/script, nevis parastu <script> tagu. Notīriet pārlūkprogrammas kešatmiņu vai testējiet inkognito režīmā.

Dokumentācija