Jak dodać chatbota AI Asyntai do Contentful

Przewodnik krok po kroku dla stron opartych na Contentful

Platforma:

Bezglowy CMS (Headless CMS): Contentful to bezglowy CMS, co oznacza, że dostarcza treść przez API, ale nie zawiera wbudowanego frontendu. Instalacja chatbota zalezy od tego, jakiego frameworka frontendowego używasz do renderowania treści Contentful. 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 z Contentful (zalecane)

Jeśli używasz Next.js do renderowania treści Contentful, 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, że chatbot ładuje się po pelnym zaladowaniu strony interaktywnej, co zapewnia najlepsza wydajność.

Metoda 2: Gatsby z Contentful

Dla stron Gatsby pobierajacych treść z Contentful:

Zainstaluj gatsby-plugin-load-script (opcjonalne, ale zalecane):
npm install gatsby-plugin-load-script
Dodaj do swojego gatsby-config.js:
module.exports = { plugins: [ { resolve: 'gatsby-plugin-load-script', options: { src: 'https://asyntai.com/static/js/chat-widget.js', attributes: { 'data-asyntai-id': 'YOUR_WIDGET_ID', async: true } } } ] }
Alternatywnie użyj gatsby-ssr.js:
// gatsby-ssr.js 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" /> ]) }
Zrestartuj serwer deweloperski Gatsby

Metoda 3: React z Contentful

Dla standardowych aplikacji React (Create React App, Vite itp.) korzystających z Contentful:

Otwórz plik public/index.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

Lub użyj komponentu React z useEffect:

// 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 4: Vue/Nuxt z Contentful

Dla aplikacji Vue lub Nuxt.js korzystających z Contentful:

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' } ] } } })

Vue 3:

Add to your index.html before </body>:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

Metoda 5: Statyczny HTML z Contentful API

Jeśli używasz Content Delivery API Contentful z czystym JavaScript:

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 Contentful wdróż lub uruchom serwer deweloperski. Odwiedź swoja stronę internetową w nowej karcie przeglądarki lub w oknie incognito. Powinieneś zobaczyć przycisk widgetu czatu w prawym dolnym rogu. Kliknij go, aby upewnić się, że otwiera się i działa prawidłowo.

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żyć przechowywanie identyfikatora widgetu w zmiennej środowiskowej (np. NEXT_PUBLIC_ASYNTAI_ID dla Next.js) zamiast wpisywania go na stale w kodzie.

Dokumentacja