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

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

Platforma:

Svarīgi: PayloadCMS ir bezgalvas CMS. Tērzēšanas robota kods jāpievieno jūsu priekšgala lietojumprogrammai, nevis Payload administrēšanas panelim.

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)

PayloadCMS parasti izmanto Next.js kā savu priekšgala ietvaru. Pievienojiet tērzēšanas robotu savam saknes izkārtojumam:

App Router (Next.js 13+)

Atveriet 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.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"
      />
    </>
  )
}

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.

1. alternatīvā metode: Pielāgots React priekšgals

Ja jūsu PayloadCMS projekts izmanto pielāgotu React priekšgalu Next.js vietā, varat dinamiski ielādēt tērzēšanas robotu ar useEffect āķi:

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

Piezīme: Aizstājiet YOUR_WIDGET_ID ar savu faktisko logrīka ID no vadības paneļa. Tīrīšanas funkcija atgriešanas paziņojumā nodrošina, ka skripts tiek noņemts, ja komponents tiek atvienots.

2. alternatīvā metode: Payload pielāgoto komponentu izmantošana (tikai administrēšanas panelim)

Ja vēlaties, lai tērzēšanas robots parādītos pašā Payload administrēšanas panelī (iekšējam atbalstam), varat reģistrēt pielāgotu komponentu savā payload.config.ts:

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

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

Pēc tam izveidojiet komponenta failu:

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

Padoms: Šī metode ir tikai tērzēšanas robota pievienošanai Payload administrēšanas panelim. Publiskajai tīmekļa vietnei izmantojiet 2. soli vai 1. alternatīvo metodi.

3. alternatīvā metode: Vienkāršs HTML/statiska vietne

Ja jūsu PayloadCMS darbinātā vietne izmanto vienkāršu HTML vai statisku priekšgalu, kas patērē Payload API, pievienojiet iegulšanas kodu tieši savam HTML:

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>

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