Kaip pridėti Asyntai AI pokalbių robotą prie Sanity

Žingsnis po žingsnio vadovas Sanity paremtoms svetainėms

Platforma:

Svarbu: Sanity yra be galvutės (headless) TVS, teikiantis turinį per API. Pokalbių roboto kodą reikia pridėti prie jūsų frontend programos (Next.js, Gatsby, Nuxt, paprastas HTML ir kt.), o ne prie pačios Sanity Studio.

1 žingsnis: Gaukite savo įterpimo kodą

Pirma, eikite į savo Asyntai valdymo skydelį ir slinkite žemyn iki "Įterpimo kodas" skyriaus. Nukopijuokite savo unikalų įterpimo kodą, kuris atrodys taip:

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

Pastaba: Aukščiau pateiktas kodas yra tik pavyzdys. Turite nukopijuoti savo unikalų įterpimo kodą iš savo Valdymo skydelio, nes jame yra jūsų asmeninis valdiklio ID.

2 žingsnis: Pridėkite prie Next.js sąsajos (Dažniausias)

Jei jūsų Sanity paremta svetainė naudoja Next.js (dažniausias derinys), pridėkite pokalbių robotą prie savo pagrindinio išdėstymo:

App Router (Next.js 13+)

Atidarykite app/layout.js (arba app/layout.tsx) ir pridėkite 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

Jei naudojate Pages Router, atidarykite 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"
      />
    </>
  )
}

Patarimas: strategy="afterInteractive" parinktis užtikrina, kad pokalbių robotas įkeliamas po to, kai puslapis tampa interaktyvus, suteikiant geriausią naudotojo patirtį nepaveikiant puslapio įkėlimo našumo.

Alternatyvus metodas 1: Gatsby sąsaja

Jei jūsų Sanity svetainė naudoja Gatsby, pridėkite scenarijų per 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"
    />
  ]);
};

Pastaba: Taip pat turite pridėti tą patį kodą į gatsby-browser.js, jei norite, kad valdiklis išliktų naršant kliento pusėje. Arba pridėkite jį prie savo pagrindinio išdėstymo komponento.

Alternatyvus metodas 2: Nuxt.js sąsaja

Jei jūsų Sanity svetainė naudoja Nuxt.js, pridėkite scenarijų nuxt.config.js (arba 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
        }
      ]
    }
  }
})

Alternatyvus metodas 3: paprastas HTML frontend

Jei jūsų Sanity paremta svetainė naudoja paprastą HTML arba statinių svetainių generatorių, naudojantį Sanity API:

Atidarykite savo pagrindinį HTML failą (dažniausiai index.html)
Pridėkite įterpimo kodą prieš pat uždaromąjį </body> žymą:

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

Alternatyvus metodas 4: React (Vite arba Create React App)

Jei jūsų frontend naudoja React su Vite arba Create React App:

Pridėkite scenarijų prie index.html public/ kataloge:

<!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>

Arba naudokite useEffect kabliuką (hook) savo pagrindiniame komponente:

// 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 žingsnis: Įdiekite ir patikrinkite

Pridėję kodą prie savo frontend programos:

Įdiekite savo frontend pas prieglobos tiekėją (Vercel, Netlify ir kt.)
Atidarykite savo veikiančią svetainę naujame naršyklės skirtuke
Turėtumėte matyti pokalbių valdiklio mygtuką apatiniame dešiniajame kampe
Spustelėkite jį, kad įsitikintumėte, jog jis atsidaro ir veikia teisingai

Nematote valdiklio? Įsitikinkite, kad pakeitėte YOUR_WIDGET_ID savo tikruoju valdiklio ID iš valdymo skydelio. Patikrinkite, ar scenarijus įkeliamas naršyklės Network skirtuke (F12 > Network). Patvirtinkite, kad frontend buvo iš naujo įdiegtas pridėjus kodą. Next.js atveju įsitikinkite, kad naudojate Script komponentą iš next/script, o ne įprastą <script> žymą. Išvalykite naršyklės talpyklą arba testuokite inkognito režimu.

Dokumentacija