Jak přidat Asyntai AI chatbota do PayloadCMS

Podrobný návod pro weby postavené na PayloadCMS

Platforma:

Důležité: PayloadCMS je headless CMS. Kód chatbota je třeba přidat do vaší frontendové aplikace, nikoli do administračního panelu Payload.

Krok 1: Získejte svůj vkládací kód

Nejprve přejděte na svůj Asyntai Dashboard a přejděte dolů k sekci „Embed Code". Zkopírujte svůj unikátní kód pro vložení, který bude vypadat takto:

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

Poznámka: Kód výše je pouze příklad. Musíte zkopírovat svůj vlastní unikátní kód pro vložení z vašeho Dashboardu, protože obsahuje vaše osobní ID widgetu.

Krok 2: Přidání do Next.js frontendu (nejběžnější)

PayloadCMS běžně používá Next.js jako svůj frontendový framework. Přidejte chatbota do svého kořenového rozložení:

App Router (Next.js 13+)

Otevřete app/layout.tsx a přidejte komponentu 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

Pokud používáte Pages Router, otevřete 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"
      />
    </>
  )
}

Tip: Volba strategy="afterInteractive" zajišťuje, že se chatbot načte až po tom, co se stránka stane interaktivní, coz poskytuje nejlepší uživatelský zážitek bez ovlivnění výkonu načítání stránky.

Alternativní metoda 1: Vlastní React frontend

Pokud váš projekt PayloadCMS používá vlastní React frontend místo Next.js, můžete chatbota načíst dynamicky pomocí hooku 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
  );
}

Poznámka: Nahraďte YOUR_WIDGET_ID svým skutečným ID widgetu z dashboardu. Funkce pro úklid v příkazu return zajistí, že se skript odstraní, pokud se komponenta odpojí.

Alternativní metoda 2: Použití vlastních komponent Payload (pouze administrační panel)

Pokud chcete, aby se chatbot zobrazoval přímo v administračním panelu Payload (pro interní podporu), můžete zaregistrovat vlastní komponentu ve svém payload.config.ts:

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

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

Poté vytvořte soubor komponenty:

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

Tip: Tato metoda je určena pouze pro přidání chatbota do administračního panelu Payload. Pro váš veřejný web použijte místo toho Krok 2 nebo Alternativní metodu 1.

Alternativní metoda 3: Prostý HTML/Statický web

Pokud váš web založený na PayloadCMS používá prostý HTML nebo statický frontend využívající Payload API, přidejte vložený kód přímo do svého HTML:

Otevřete svůj hlavní HTML soubor (obvykle index.html)
Přidejte vložený kód těsně před uzavírací tag </body>:

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

Krok 3: Nasazení a ověření

Po přidání kódu do vaší frontendové aplikace:

Nasaďte svůj frontend k poskytovateli hostingu (Vercel, Netlify atd.)
Otevřete svůj živý web v nové záložce prohlížeče
Měli byste vidět tlačítko chatovacího widgetu v pravém dolním rohu
Klikněte na něj a ověřte, že se správně otevírá a funguje

Nevidíte widget? Ujistěte se, že jste nahradili YOUR_WIDGET_ID svým skutečným ID widgetu z dashboardu. Zkontrolujte, zda se skript načítá na kartě Síť ve vašem prohlížeči (F12 > Network). Ověřte, že byl frontend po přidání kódu znovu nasazen. U Next.js se ujistěte, že používáte komponentu Script z next/script, nikoli běžný tag <script>. Vymažte mezipaměť prohlížeče nebo otestujte v režimu inkognito.

Dokumentace