Cum să adăugați Chatbot-ul AI Asyntai în Contentful

Ghid pas cu pas pentru site-urile bazate pe Contentful

Platformă:

CMS Headless: Contentful este un CMS headless, ceea ce înseamnă că furnizează conținut prin API, dar nu include un frontend integrat. Instalarea chatbot-ului depinde de framework-ul frontend pe care îl utilizați pentru a reda conținutul Contentful. Alegeți metoda de mai jos care corespunde configurației dvs.

Pasul 1: Obțineți codul de încorporare

Mai întâi, accesați Tabloul de bord Asyntai și derulați în jos până la secțiunea "Cod de încorporare". Copiați codul unic de încorporare care va arăta astfel:

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

Notă: Codul de mai sus este doar un exemplu. Trebuie să copiați propriul cod unic de încorporare din Tabloul de bord, deoarece conține ID-ul personal al widgetului dvs.

Metoda 1: Next.js cu Contentful (Recomandat)

Dacă utilizați Next.js pentru a reda conținutul Contentful, adăugați chatbot-ul folosind componenta Script:

Deschideți fișierul de layout principal: app/layout.tsx (App Router) sau pages/_app.tsx (Pages Router)
Importați componenta Script și adăugați chatbot-ul:
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> ) }
Înlocuiți YOUR_WIDGET_ID cu ID-ul real al widget-ului dvs.
Salvați fișierul și reporniți serverul de dezvoltare

Sfat: Utilizarea strategy="lazyOnload" asigură că chatbot-ul se încarcă după ce pagina este complet interactivă, oferind cea mai bună performanță.

Metoda 2: Gatsby cu Contentful

Pentru site-urile Gatsby care preiau conținut din Contentful:

Instalați gatsby-plugin-load-script (opțional, dar recomandat):
npm install gatsby-plugin-load-script
Adăugați în 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 } } } ] }
Alternativ, utilizați 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" /> ]) }
Reporniți serverul de dezvoltare Gatsby

Metoda 3: React cu Contentful

Pentru aplicații React standard (Create React App, Vite, etc.) care utilizează Contentful:

Deschideți fișierul 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>
Salvați fișierul

Sau utilizați o componentă React cu 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 cu Contentful

Pentru aplicații Vue sau Nuxt.js care utilizează Contentful:

Nuxt 3:

Adăugați în 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:

Adăugați în index.html înainte de </body>:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

Metoda 5: HTML static cu API-ul Contentful

Dacă utilizați API-ul Content Delivery al Contentful cu JavaScript simplu:

Adăugați codul de integrare în fișierul HTML înainte de eticheta de închidere </body>:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Salvați fișierul și încărcați-l pe hostingul dvs.

Pasul 2: Verificați instalarea

După ce ați adăugat codul chatbot-ului pe site-ul dvs. bazat pe Contentful, implementați sau rulați serverul de dezvoltare. Vizitați site-ul dvs. într-o filă nouă de browser sau într-o fereastră incognito. Ar trebui să vedeți butonul widget-ului de chat în colțul din dreapta jos. Faceți clic pe el pentru a vă asigura că se deschide și funcționează corect.

Nu vedeți widgetul? Asigurați-vă că ați adăugat scriptul în fișierul corect pentru framework-ul dvs. Verificați consola de dezvoltare a browserului pentru eventuale erori. Dacă utilizați randare pe server, asigurați-vă că scriptul rulează pe partea de client. Încercați să goliți cache-ul browserului sau să vizualizați într-o fereastră incognito.

Variabile de mediu: Pentru o securitate și flexibilitate mai bune, luați în considerare stocarea ID-ului widget-ului într-o variabilă de mediu (de ex., NEXT_PUBLIC_ASYNTAI_ID pentru Next.js) în loc să îl codificați direct.

Documentație