Jak dodać chatbota Asyntai AI do Strapi

Instrukcja krok po kroku dla stron opartych na Strapi

Platforma:

Bezglowy CMS (Headless CMS): Strapi to bezglowy system CMS dostarczajacy treść przez API, ale nie zawierajacy wbudowanego frontendu. Instalacja chatbota zalezy od tego, jakiego frameworka frontendowego używasz do renderowania treści Strapi. Wybierz poniżej metodę odpowiadajaca Twojej konfiguracji.

Krok 1: Pobierz swój kod osadzania

Najpierw przejdź do swojego Panelu Asyntai i przewiń w dół do sekcji "Kod osadzania". Skopiuj swój unikalny kod osadzania, który będzie wyglądał tak:

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

Uwaga: Powyższy kod to tylko przykład. Musisz skopiować swój własny unikalny kod osadzania z Panelu, ponieważ zawiera on Twój osobisty identyfikator widgetu.

Metoda 1: Next.js ze Strapi (zalecana)

Jeśli używasz Next.js jako frontendu Strapi (najczestsze ustawienie), dodaj chatbota za pomocą komponentu Script:

Otwórz główny plik układu: app/layout.tsx (App Router) lub pages/_app.tsx (Pages Router)
Zaimportuj komponent Script i dodaj 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> ) }
Replace YOUR_WIDGET_ID with your actual widget ID
Zapisz plik i zrestartuj serwer deweloperski

Wskazówka: Użycie strategy="lazyOnload" zapewnia, ze chatbot załaduje sie po pelnym zaladowaniu strony, co gwarantuje najlepsza wydajność dla witryny opartej na Strapi.

Metoda 2: Gatsby ze Strapi

Dla stron Gatsby korzystających z gatsby-source-strapi:

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
Zrestartuj serwer deweloperski Gatsby

Metoda 3: Nuxt.js ze Strapi

Dla aplikacji Nuxt.js korzystających z @nuxtjs/strapi:

Nuxt 3:

Dodaj do swojego 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:

Dodaj do pliku 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 ze Strapi

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

Otwórz plik public/index.html (CRA) lub index.html (Vite)
Add the embed code before the closing </body> tag:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Zapisz plik

Lub utwórz 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
}

Metoda 5: SvelteKit ze Strapi

Dla aplikacji SvelteKit korzystających z treści Strapi:

Edytuj plik src/app.html
Add the embed code before the closing </body> tag:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Zapisz plik

Metoda 6: Strona statyczna z API Strapi

Jeśli używasz API REST lub GraphQL Strapi ze statyczna strona HTML:

Dodaj kod osadzania do pliku HTML przed zamykającym znacznikiem </body>:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Zapisz plik i prześlij na hosting

Krok 2: Zweryfikuj instalację

Po dodaniu kodu chatbota do strony opartej na Strapi wdróż lub uruchom serwer deweloperski. Odwiedź swoja stronę w nowej karcie przeglądarki lub w oknie incognito. Powinieneś zobaczyć przycisk widgetu czatu w prawym dolnym rogu. Kliknij go, aby upewnić sie, ze otwiera sie i działa poprawnie.

Nie widzisz widgetu? Upewnij się, że dodałeś skrypt do właściwego pliku dla swojego frameworka. Sprawdź konsolę deweloperska przeglądarki pod kątem błędów. Jeśli używasz renderowania po stronie serwera, upewnij się, że skrypt uruchamia się po stronie klienta. Spróbuj wyczyść pamięć podręczną przeglądarki lub wyświetlić stronę w oknie incognito.

Zmienne środowiskowe: Dla lepszego bezpieczeństwa i elastyczności rozważ przechowywanie identyfikatora widgetu w zmiennej środowiskowej (np. NEXT_PUBLIC_ASYNTAI_ID dla Next.js lub VITE_ASYNTAI_ID dla Vite) zamiast wpisywania go na stale w kodzie.

Dokumentacja