Ako pridať Asyntai AI Chatbot do Strapi

Podrobný návod pre webové stránky na platforme Strapi

Platforma:

Headless CMS: Strapi je headless CMS, ktorý poskytuje obsah cez API, ale neobsahuje vstavaný frontend. Inštalácia chatbota závisí od toho, ktorý frontendový framework používate na vykresľovanie obsahu Strapi. Vyberte metódu nižšie, ktorá zodpovedá vášmu nastaveniu.

Krok 1: Ziskajte svoj vkladací kod

Najprv prejdite na svoj Asyntai Dashboard a prejdite nadol k sekcii "Vkladaci kod". Skopirujte svoj jedinečný vkladací kod, ktory bude vyzerat takto:

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

Poznámka: Kod vyššie je len priklad. Musite skopirovat svoj vlastný jedinečný vkladací kod zo svojho Dashboardu, pretože obsahuje vase osobne ID widgetu.

Metóda 1: Next.js so Strapi (Odporúčané)

Ak používate Next.js ako frontend pre Strapi (najčastejšie nastavenie), pridajte chatbota pomocou komponentu Script:

Otvorte svoj hlavny súbor rozloženia: app/layout.tsx (App Router) alebo pages/_app.tsx (Pages Router)
Importujte komponent Script a pridajte chatbota:
import Script from 'next/script' export default function RootLayout({ children }) { return ( <html> <body> {children} <Script src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID" strategy="lazyOnload" /> </body> </html> ) }
Nahradte YOUR_WIDGET_ID vasim skutocnym ID widgetu
Uložte súbor a restartujte svoj vývojový server

Tip: Použitie strategy="lazyOnload" zabezpečuje, že sa chatbot načíta po tom, čo je stránka plne interaktívna, čím poskytuje najlepší výkon pre váš web na platforme Strapi.

Metóda 2: Gatsby so Strapi

Pre weby Gatsby používajúce gatsby-source-strapi:

Vytvorte alebo upravte gatsby-ssr.js v koreni vasho projektu:
import React from 'react' export const onRenderBody = ({ setPostBodyComponents }) => { setPostBodyComponents([ <script key="asyntai-chatbot" async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID" /> ]) }
Nahradte YOUR_WIDGET_ID vasim skutocnym ID widgetu
Restartujte svoj vývojový server Gatsby

Metóda 3: Nuxt.js so Strapi

Pre aplikácie Nuxt.js používajúce @nuxtjs/strapi:

Nuxt 3:

Pridajte do svojho nuxt.config.ts:
export default defineNuxtConfig({ app: { head: { script: [ { src: 'https://asyntai.com/static/js/chat-widget.js', async: true, 'data-asyntai-id': 'YOUR_WIDGET_ID' } ] } } })

Nuxt 2:

Pridajte do svojho nuxt.config.js:
export default { head: { script: [ { src: 'https://asyntai.com/static/js/chat-widget.js', async: true, 'data-asyntai-id': 'YOUR_WIDGET_ID' } ] } }

Metóda 4: React so Strapi

For standard React apps (Create React App, Vite) consuming Strapi API:

Otvorte svoj súbor public/index.html (CRA) alebo index.html (Vite)
Pridajte vkladací kod pred uzatvaraci tag </body>:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Uložte súbor

Alebo vytvorte komponent React:

// components/Chatbot.jsx
import { useEffect } from 'react'

export default function Chatbot() {
  useEffect(() => {
    const script = document.createElement('script')
    script.src = 'https://asyntai.com/static/js/chat-widget.js'
    script.async = true
    script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID')
    document.body.appendChild(script)
    return () => document.body.removeChild(script)
  }, [])
  return null
}

Metóda 5: SvelteKit so Strapi

Pre aplikácie SvelteKit využívajúce obsah Strapi:

Upravte svoj súbor src/app.html
Pridajte vkladací kod pred uzatvaraci tag </body>:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Uložte súbor

Metóda 6: Statický web s API Strapi

Ak používate REST alebo GraphQL API Strapi so statickým HTML webom:

Pridajte vkladací kod do vasho HTML súboru pred uzatvaraci tag </body>:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Uložte súbor a nahrajte na vas hosting

Krok 2: Overenie inštalácie

Po pridaní kódu chatbota na váš web na platforme Strapi nasaďte alebo spustite vývojový server. Navštívte svoj web v novej záložke prehliadača alebo v okne inkognito. V pravom dolnom rohu by ste mali vidieť tlačidlo chatového widgetu. Kliknite naň, aby ste sa uistili, že sa otvára a funguje správne.

Nevidite widget? Uistite sa, ze ste pridali skript do spravneho súboru pre vas framework. Skontrolujte vyvojarsku konzolu vasho prehliadača kvoli pripadnym chybam. Ak používate serverove vykreslovanie, uistite sa, ze skript bezi na strane klienta. Skuste vyčistiť vyrovnávaciu pamat prehliadača alebo zobrazit web v okne inkognito.

Premenne prostredia: Pre lepšiu bezpecnost a flexibilitu zvazite uloženie vasho ID widgetu do premennej prostredia (napr. NEXT_PUBLIC_ASYNTAI_ID pre Next.js alebo VITE_ASYNTAI_ID pre Vite) namiesto jeho priameho zapisania do kodu.

Dokumentacia