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

Žingsnis po žingsnio vadovas PayloadCMS paremtoms svetainėms

Platforma:

Svarbu: PayloadCMS yra be galvutės (headless) TVS. Pokalbių roboto kodą reikia pridėti prie jūsų frontend programos, o ne prie Payload administravimo skydelio.

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)

PayloadCMS dažniausiai naudoja Next.js kaip savo frontend sistemą. Pridėkite pokalbių robotą prie savo pagrindinio išdėstymo:

App Router (Next.js 13+)

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

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: individuali React frontend programa

Jei jūsų PayloadCMS projektas naudoja individualią React frontend programą vietoj Next.js, galite dinamiškai įkelti pokalbių robotą naudodami useEffect kabliuką:

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

Pastaba: Pakeiskite YOUR_WIDGET_ID savo tikruoju valdiklio ID iš valdymo skydelio. Valymo funkcija return sakinyje užtikrina, kad scenarijus bus pašalintas, kai komponentas bus atjungtas.

Alternatyvus metodas 2: Payload individualių komponentų naudojimas (tik administravimo skydelis)

Jei norite, kad pokalbių robotas būtų rodomas pačiame Payload administravimo skydelyje (vidinei pagalbai), galite užregistruoti individualų komponentą savo payload.config.ts:

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

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

Tada sukurkite komponento failą:

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

Patarimas: Šis metodas skirtas tik pokalbių roboto pridėjimui prie Payload administravimo skydelio. Savo viešai prieinamai svetainei naudokite 2 žingsnį arba alternatyvų metodą 1.

Alternatyvus metodas 3: paprastas HTML/statinė svetainė

Jei jūsų PayloadCMS paremta svetainė naudoja paprastą HTML arba statinį frontend, naudojantį Payload API, pridėkite įterpimo kodą tiesiogiai į savo HTML:

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>

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