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: Získajte svoj vkladací kód

Najprv prejdite na svoj Asyntai Dashboard a prejdite nadol k sekcii „Vkladací kód“. Skopírujte svoj jedinečný vkladací kód, ktorý bude vyzerať takto:

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

Poznámka: Kód vyššie je len príklad. Musíte skopírovať svoj vlastný jedinečný vkladací kód zo svojho Dashboardu, pretože obsahuje vaše osobné 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> ) }
Nahraďte YOUR_WIDGET_ID vaším skutočným 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" /> ]) }
Nahraďte YOUR_WIDGET_ID vaším skutočným 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

Pre štandardné React aplikácie (Create React App, Vite) využívajúce 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.

Nevidíte 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.

Dokumentácia