How to Add Asyntai AI Chatbot to Contentful

Samm-sammult juhend Contentfuliga toetatud veebisaitide jaoks

Platvorm:

Peata CMS: Contentful on peata CMS, mis tähendab, et see pakub sisu API kaudu, kuid ei sisalda sisseehitatud kasutajaliidest. Vestlusroboti paigaldamine sõltub sellest, millist kasutajaliidese raamistikku kasutate Contentfuli sisu renderdamiseks. Valige allpool meetod, mis vastab teie seadistusele.

1. samm: Hankige oma manuskood

Esmalt minge oma Asyntai juhtpaneelile ja kerige alla jaotiseni "Manuskood". Kopeerige oma unikaalne manuskood, mis näeb välja selline:

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

Märkus: Ülalolev kood on vaid näide. Peate kopeerima oma unikaalse manuskoodi oma juhtpaneelilt, kuna see sisaldab teie isiklikku vidina ID-d.

Meetod 1: Next.js koos Contentfuliga (soovitatav)

Kui kasutate Next.js-i oma Contentfuli sisu renderdamiseks, lisage vestlusrobot Script komponendi abil:

Avage oma põhipaigutusfail: app/layout.tsx (App Router) või pages/_app.tsx (Pages Router)
Importige Script komponent ja lisage vestlusrobot:
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> ) }
Asendage YOUR_WIDGET_ID oma tegeliku vidina ID-ga
Salvestage fail ja taaskäivitage oma arendusserver

Vihje: Kasutades strategy="lazyOnload" tagatakse, et vestlusrobot laadib pärast lehe täielikku interaktiivsust, pakkudes parimat jõudlust.

Meetod 2: Gatsby koos Contentfuliga

Gatsby saitidele, mis tõmbavad sisu Contentfulist:

Paigaldage gatsby-plugin-load-script (valikuline, kuid soovitatav):
npm install gatsby-plugin-load-script
Lisage oma gatsby-config.js faili:
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 } } } ] }
Teise võimalusena kasutage 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" /> ]) }
Taaskäivitage oma Gatsby arendusserver

Meetod 3: React koos Contentfuliga

Standardsete React rakenduste jaoks (Create React App, Vite jne), mis kasutavad Contentfuli:

Avage oma fail public/index.html
Lisage manuskood enne sulgevat </body> silti:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Salvestage fail

Või kasutage React komponenti koos useEffectiga:

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

Meetod 4: Vue/Nuxt koos Contentfuliga

Vue või Nuxt.js rakenduste jaoks, mis kasutavad Contentfuli:

Nuxt 3:

Lisage oma nuxt.config.ts faili:
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:

Lisage oma index.html faili enne </body>:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

Meetod 5: staatiline HTML koos Contentfuli API-ga

Kui kasutate Contentfuli sisuedastuse API-t puhta JavaScriptiga:

Lisage manuskood oma HTML-faili enne sulgevat </body> silti:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Salvestage fail ja laadige oma hostingusse üles

2. samm: Kontrollige paigaldust

Pärast vestlusroboti koodi lisamist oma Contentfuliga toetatud saidile jüüruta või käivitage oma arendusserver. Külastage oma veebisaiti uues brauseri vahekaardil või inkognito aknas. Peaksite nägema vestlusvidina nuppu alumises paremas nurgas. Klõpsake sellel, et veenduda, et see avaneb ja töötab korrektselt.

Ei näe vidinat? Veenduge, et lisasite skripti õigesse faili oma raamistiku jaoks. Kontrollige brauseri arenduskonsooli vigade suhtes. Serveripoolse renderdamise kasutamisel veenduge, et skript käivitub kliendi poolel. Proovige brauseri vahemälu tühjendada või vaadata inkognito aknas.

Keskkonnamuutujad: Parema turvalisuse ja paindlikkuse tagamiseks kaaluge oma vidina ID salvestamist keskkonnamuutujasse (nt NEXT_PUBLIC_ASYNTAI_ID Next.js-i jaoks) selle asemel, et see otse koodi kirjutada.

Dokumentatsioon