Kuidas lisada Asyntai AI vestlusrobot Strapisse

Samm-sammult juhend Strapi põhiste veebisaitide jaoks

Platvorm:

Peata CMS: Strapi on peata CMS, mis pakub sisu API kaudu, kuid ei sisalda sisseehitatud kasutajaliidest. Vestlusroboti paigaldamine sõltub sellest, millist kasutajaliidese raamistikku kasutate oma Strapi 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 Strapiga (soovitatav)

Kui kasutate Next.js-i oma Strapi kasutajaliidese raamistikuna (kõige levinum seadistus), 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: strategy="lazyOnload" kasutamine tagab, et vestlusrobot laadib pärast lehe täielikku interaktiivsust, pakkudes parimat jõudlust teie Strapi põhisele saidile.

Meetod 2: Gatsby koos Strapiga

Gatsby saitide jaoks, mis kasutavad gatsby-source-strapid:

Looge või muutke gatsby-ssr.js oma projekti juurkaustas:
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" /> ]) }
Asendage YOUR_WIDGET_ID oma tegeliku vidina ID-ga
Taaskäivitage oma Gatsby arendusserver

Meetod 3: Nuxt.js koos Strapiga

Nuxt.js rakenduste jaoks, mis kasutavad @nuxtjs/strapid:

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

Nuxt 2:

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

Meetod 4: React koos Strapiga

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

Avage oma fail public/index.html (CRA) või index.html (Vite)
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 looge Reacti komponent:

// 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 5: SvelteKit koos Strapiga

SvelteKiti rakenduste jaoks, mis tarbivad Strapi sisu:

Muutke oma faili src/app.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

Meetod 6: staatiline sait koos Strapi API-ga

Kui kasutate Strapi REST- või GraphQL API-t koos staatilise HTML-saidiga:

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 Strapi põhisele saidile juurutage või käivitage oma arendusserver. Külastage oma veebisaiti uuel brauseri vahekaardil või inkognito aknas. Peaksite nägema vestlusvidina nuppu paremas alanurgas. Klõpsake sellel, et veenduda selle avamises ja korrektses toimimises.

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 või VITE_ASYNTAI_ID Vite jaoks) selle asemel, et see otse koodi kirjutada.

Dokumentatsioon