Kako dodati Asyntai AI chatbot na Strapi

Vodic korak po korak za web stranice pokretane Strapijem

Platforma:

Headless CMS: Strapi je headless CMS koji pruza sadrzaj putem API-ja, ali ne ukljucuje ugradeni frontend. Instalacija chatbota ovisi o tome koji frontend okvir koristite za prikaz sadrzaja iz Strapija. Odaberite metodu ispod koja odgovara vasem postavljanju.

Korak 1: Nabavite svoj kod za ugradnju

Prvo idite na svoju Asyntai nadzornu ploču i pomaknite se prema dolje do odjeljka "Kod za ugradnju". Kopirajte svoj jedinstveni kod za ugradnju koji će izgledati ovako:

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

Napomena: Gornji kod je samo primjer. Morate kopirati svoj vlastiti jedinstveni kod za ugradnju sa svoje Nadzorne ploče jer sadrži vaš osobni ID widgeta.

Metoda 1: Next.js sa Strapijem (Preporuceno)

Ako koristite Next.js kao svoj Strapi frontend (najcesca postavka), dodajte chatbot koristeci komponentu Script:

Otvorite svoju glavnu datoteku rasporeda: app/layout.tsx (App Router) ili pages/_app.tsx (Pages Router)
Uvezite komponentu Script i dodajte chatbot:
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> ) }
Zamijenite YOUR_WIDGET_ID svojim stvarnim ID-jem widgeta
Spremite datoteku i ponovno pokrenite razvojni posluzitelj

Savjet: Koristenje strategy="lazyOnload" osigurava ucitavanje chatbota nakon sto je stranica potpuno interaktivna, pruzajuci najbolje performanse za vasu stranicu pokretanu Strapijem.

Metoda 2: Gatsby sa Strapijem

Za Gatsby stranice koje koriste gatsby-source-strapi:

Izradite ili uredite gatsby-ssr.js u korijenu projekta:
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" /> ]) }
Zamijenite YOUR_WIDGET_ID svojim stvarnim ID-jem widgeta
Ponovno pokrenite svoj Gatsby razvojni posluzitelj

Metoda 3: Nuxt.js sa Strapijem

Za Nuxt.js aplikacije koje koriste @nuxtjs/strapi:

Nuxt 3:

Dodajte u svoj 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:

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

Metoda 4: React sa Strapijem

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

Otvorite svoju datoteku public/index.html (CRA) ili index.html (Vite)
Dodajte ugradni kod prije zavrsne oznake </body>:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Spremite datoteku

Ili izradite React komponentu:

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

Metoda 5: SvelteKit sa Strapijem

Za SvelteKit aplikacije koje konzumiraju Strapi sadrzaj:

Uredite svoju datoteku src/app.html
Dodajte ugradni kod prije zavrsne oznake </body>:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Spremite datoteku

Metoda 6: Staticna stranica sa Strapi API-jem

Ako koristite Strapijev REST ili GraphQL API sa staticnom HTML stranicom:

Dodajte ugradni kod u svoju HTML datoteku prije zavrsne oznake </body>:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Spremite datoteku i prenesite na svoj hosting

Korak 2: Provjerite instalaciju

Nakon dodavanja koda chatbota na svoju stranicu pokretanu Strapijem, postavite ili pokrenite razvojni posluzitelj. Posjetite svoju web stranicu u novoj kartici preglednika ili anonimnom prozoru. Trebali biste vidjeti gumb widgeta za razgovor u donjem desnom kutu. Kliknite ga kako biste provjerili otvara li se i radi li ispravno.

Ne vidite widget? Provjerite jeste li dodali skriptu u ispravnu datoteku za svoj okvir. Provjerite konzolu za programere u pregledniku za greske. Ako koristite renderiranje na strani posluzitelja, osigurajte da se skripta izvrsava na strani klijenta. Pokusajte ocistiti predmemoriju preglednika ili pregledavati u anonimnom prozoru.

Varijable okruzenja: Za bolju sigurnost i fleksibilnost, razmislite o pohranjivanju ID-ja widgeta u varijablu okruzenja (npr. NEXT_PUBLIC_ASYNTAI_ID za Next.js ili VITE_ASYNTAI_ID za Vite) umjesto da ga upisite izravno u kod.

Dokumentacija