Kako dodati klepetalnik Asyntai AI v PayloadCMS

Vodič po korakih za spletna mesta, ki jih poganja PayloadCMS

Platforma:

Pomembno: PayloadCMS je brezglav CMS. Kodo klepetalnika je treba dodati v vašo frontend aplikacijo, ne v skrbniški panel Payload.

Korak 1: Pridobite svojo vdelovalno kodo

Najprej pojdite na svojo Nadzorno ploščo Asyntai in se pomaknite navzdol do razdelka "Vdelovalna koda". Kopirajte svojo edinstveno vdelovalno kodo, ki bo videti takole:

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

Opomba: Zgornja koda je le primer. Svojo edinstveno vdelovalno kodo morate kopirati iz svoje Nadzorne plošče, saj vsebuje vaš osebni ID klepetalnika.

Korak 2: Dodajte v čelni vmesnik Next.js (najpogosteje)

PayloadCMS pogosto uporablja Next.js kot svoje frontend ogrodje. Dodajte klepetalnik v svojo korensko postavitev:

App Router (Next.js 13+)

Odprite app/layout.tsx in dodajte komponento Script:

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

Če uporabljate Pages Router, odprite 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"
      />
    </>
  )
}

Nasvet: Možnost strategy="afterInteractive" zagotavlja, da se klepetalnik naloži po tem, ko stran postane interaktivna, kar zagotavlja najboljšo uporabniško izkušnjo brez vpliva na zmogljivost nalaganja strani.

Alternativni način 1: Frontend po meri z React

Če vaš projekt PayloadCMS uporablja frontend React po meri namesto Next.js, lahko klepetalnik naložite dinamično s kavljem useEffect:

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

Opomba: Zamenjajte YOUR_WIDGET_ID s svojim dejanskim ID-jem pripomocka iz nadzorne plošce. Funkcija za cišcenje v stavku return zagotavlja, da se skripta odstrani, če se komponenta odklopi.

Alternativni način 2: Uporaba komponent Payload po meri (samo skrbniški panel)

Če želite, da se klepetalnik prikaže znotraj samega skrbniškega panela Payload (za interno podporo), lahko registrirate komponento po meri v svojem payload.config.ts:

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

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

Nato ustvarite datoteko komponente:

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

Nasvet: Ta način je namenjen samo dodajanju klepetalnika v skrbniški panel Payload. Za vaše javno dostopno spletno mesto namesto tega uporabite korak 2 ali alternativni način 1.

Alternativni način 3: Navaden HTML/statično spletno mesto

Če vaše spletno mesto, ki ga poganja PayloadCMS, uporablja navaden HTML ali staticni frontend, ki porablja API Payload, dodajte vdelano kodo neposredno v svoj HTML:

Odprite svojo glavno datoteko HTML (običajno index.html)
Dodajte vdelano kodo tik pred zaključno oznako </body>:

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

Korak 3: Namestite in preverite

Po dodajanju kode v svojo frontend aplikacijo:

Namestite svoj frontend pri ponudniku gostovanja (Vercel, Netlify itd.)
Odprite svoje živo spletno mesto v novem zavihku brskalnika
V spodnjem desnem kotu bi morali videti gumb klepetalnika
Kliknite nanj, da se prepričajte, da se odpre in pravilno deluje

Ne vidite klepetalnika? Prepričajte se, da ste YOUR_WIDGET_ID zamenjali z dejanskim ID-jem pripomocka iz nadzorne plošce. Preverite, da se skripta nalaga v zavihku Omrežje vašega brskalnika (F12 > Network). Preverite, da je bil frontend ponovno nameščen po dodajanju kode. Za Next.js se prepričajte, da uporabljate komponento Script iz next/script, ne običajne oznake <script>. Počistite predpomnilnik brskalnika ali testirajte v načinu brez beleženja.

Dokumentacija