Kuidas lisada Asyntai AI vestlusrobotit PayloadCMS-ile

Samm-sammult juhend PayloadCMS-i põhiste veebisaitide jaoks

Platvorm:

Oluline: PayloadCMS on peata sisuhalduslahendus. Vestlusroboti kood tuleb lisada teie kasutajaliidese rakendusse, mitte Payloadi halduspaneeli.

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)

PayloadCMS kasutab tavaliselt Next.js-i oma kasutajaliidese raamistikuna. Lisage vestlusrobot oma juurküljendusesse:

App Router (Next.js 13+)

Avage 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.tsx:

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: kohandatud Reacti kasutajaliides

Kui teie PayloadCMS projekt kasutab Next.js-i asemel kohandatud Reacti kasutajaliidest, saate vestlusroboti dünaamiliselt laadida useEffect konksuga:

// App.tsx or App.jsx
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
  );
}

Märkus: Asendage YOUR_WIDGET_ID oma tegeliku vidina ID-ga juhtpaneelilt. Puhastamisfunktsioon return-lauses tagab, et skript eemaldatakse, kui komponent lahti ühendatakse.

Alternatiivne meetod 2: Payloadi kohandatud komponentide kasutamine (ainult halduspaneel)

Kui soovite, et vestlusrobot kuvataks Payloadi halduspaneelis endas (sisemise toe jaoks), saate registreerida kohandatud komponendi oma failis payload.config.ts:

// payload.config.ts
import { buildConfig } from 'payload/config';

export default buildConfig({
  admin: {
    components: {
      afterDashboard: ['/components/AsyntaiChatbot'],
    },
  },
  // ... rest of your config
})

Seejärel looge komponentfail:

// components/AsyntaiChatbot.tsx
'use client'
import { useEffect } from 'react';

const AsyntaiChatbot = () => {
  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 null;
};

export default AsyntaiChatbot;

Vihje: See meetod on ainult vestlusroboti lisamiseks Payloadi halduspaneeli. Avaliku veebisaidi jaoks kasutage hoopis 2. sammu või alternatiivset meetodit 1.

Alternatiivne meetod 3: tavaline HTML / staatiline sait

Kui teie PayloadCMS-i põhine sait kasutab tavalist HTML-i või staatilist kasutajaliidest, mis tarbib Payloadi API-t, lisage manuskood otse oma HTML-i:

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>

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