Az Asyntai AI Chatbot hozzáadása a Strapi-hoz

Lépésről lépésre útmutató a Strapi-alapú weboldalakhoz

Platform:

Headless CMS: A Strapi egy headless CMS, amely API-n keresztül biztosít tartalmat, de nem tartalmaz beépített frontendet. A chatbot telepítése attól függ, milyen frontend keretrendszert használ a Strapi tartalom megjelenítéséhez. Válassza az alábbi módszert, amely megfelel a beállításának.

1. lépés: Szerezze be a beágyazási kódját

Először lépjen az Asyntai Irányítópultra és görgessen le a „Beágyazási kód" szekcióhoz. Másolja le az egyedi beágyazási kódját, amely így fog kinézni:

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

Megjegyzés: A fenti kód csak egy példa. Le kell másolnia saját egyedi beágyazási kódját az Irányítópultról, mivel az tartalmazza személyes widget-azonosítóját.

1. módszer: Next.js a Strapi-val (ajánlott)

Ha a Next.js-t használja Strapi frontendként (a leggyakoribb beállítás), adja hozzá a chatbotot a Script komponens segítségével:

Nyissa meg a fő elrendezési fájlt: app/layout.tsx (App Router) vagy pages/_app.tsx (Pages Router)
Importálja a Script komponenst, és adja hozzá a chatbotot:
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> ) }
Replace YOUR_WIDGET_ID with your actual widget ID
Mentse el a fájlt, és indítsa újra a fejlesztői szervert

Tipp: A strategy="lazyOnload" használata biztosítja, hogy a chatbot az oldal teljes interaktivitása után töltődjön be, ami a legjobb teljesítményt nyújtja a Strapi-alapú webhelyén.

2. módszer: Gatsby a Strapi-val

A gatsby-source-strapi-t használó Gatsby webhelyekhez:

Create or edit gatsby-ssr.js in your project root:
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" /> ]) }
Replace YOUR_WIDGET_ID with your actual widget ID
Indítsa újra a Gatsby fejlesztői szervert

3. módszer: Nuxt.js a Strapi-val

A @nuxtjs/strapi-t használó Nuxt.js alkalmazásokhoz:

Nuxt 3:

Adja hozzá a nuxt.config.ts fájlhoz:
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:

Adja hozzá a nuxt.config.js fájlhoz:
export default { head: { script: [ { src: 'https://asyntai.com/static/js/chat-widget.js', async: true, 'data-asyntai-id': 'YOUR_WIDGET_ID' } ] } }

4. módszer: React a Strapi-val

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

Nyissa meg a public/index.html fájlt (CRA) vagy az index.html fájlt (Vite)
Adja hozzá a beágyazási kódot a záró </body> tag elé:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Mentse el a fájlt

Vagy hozzon létre egy React komponenst:

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

5. módszer: SvelteKit a Strapi-val

A Strapi tartalmat fogyasztó SvelteKit alkalmazásokhoz:

Szerkessze a src/app.html fájlt
Adja hozzá a beágyazási kódot a záró </body> tag elé:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Mentse el a fájlt

6. módszer: Statikus oldal a Strapi API-val

Ha a Strapi REST vagy GraphQL API-ját használja statikus HTML oldallal:

Adja hozzá a beágyazási kódot a HTML fájlhoz a záró </body> tag elé:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Mentse el a fájlt, és töltse fel a tárhelyére

2. lépés: Telepítés ellenőrzése

Miután hozzáadta a chatbot kódot a Strapi-alapú webhelyéhez, telepítse vagy futtassa a fejlesztői szervert. Látogassa meg weboldalát egy új böngészőlapon vagy inkognító ablakban. A jobb alsó sarokban meg kell jelennie a chat widget gombnak. Kattintson rá, hogy megbizonyosodjon arról, hogy megnyílik és megfelelően működik.

Nem látja a widgetet? Győződjön meg arról, hogy a szkriptet a keretrendszerének megfelelő fájlhoz adta hozzá. Ellenőrizze a böngésző fejlesztői konzolját hibák szempontjából. Ha szerver oldali renderelést használ, győződjön meg arról, hogy a szkript az ügyfél oldalon fut. Próbálja meg üríteni a böngésző gyorsítótárát, vagy nézze meg inkognitóablakban.

Környezeti változók: A jobb biztonság és rugalmasság érdekében fontolja meg a widget azonosítójának környezeti változóban való tárolását (pl. NEXT_PUBLIC_ASYNTAI_ID Next.js esetén vagy VITE_ASYNTAI_ID Vite esetén) a közvetlen beírás helyett.

Dokumentacio