Kaip pridėti Asyntai AI pokalbių robotą prie Strapi

Žingsnis po žingsnio vadovas Strapi paremtoms svetainėms

Platforma:

Beantgalinė TVS: Strapi yra be galvutės (headless) TVS, teikiantis turinį per API, bet neturintis integruoto frontend. Pokalbių roboto diegimas priklauso nuo to, kurią frontend sistemą naudojate Strapi turiniui atvaizduoti. Pasirinkite žemiau esantį metodą, atitinkantį jūsų nustatymą.

1 žingsnis: Gaukite savo įterpimo kodą

Pirma, eikite į savo Asyntai valdymo skydelį ir slinkite žemyn iki "Įterpimo kodas" skyriaus. Nukopijuokite savo unikalų įterpimo kodą, kuris atrodys taip:

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

Pastaba: Aukščiau pateiktas kodas yra tik pavyzdys. Turite nukopijuoti savo unikalų įterpimo kodą iš savo Valdymo skydelio, nes jame yra jūsų asmeninis valdiklio ID.

Metodas 1: Next.js su Strapi (rekomenduojama)

Jei naudojate Next.js kaip savo Strapi frontend (dažniausias nustatymas), pridėkite pokalbių robotą naudodami Script komponentą:

Atidarykite pagrindinį išdėstymo failą: app/layout.tsx (App Router) arba pages/_app.tsx (Pages Router)
Importuokite Script komponentą ir pridėkite pokalbių robotą:
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> ) }
Pakeiskite YOUR_WIDGET_ID savo tikruoju valdiklio ID
Išsaugokite failą ir paleiskite kūrimo serverį iš naujo

Patarimas: strategy="lazyOnload" naudojimas užtikrina, kad pokalbių robotas įkeliamas po to, kai puslapis tampa visiškai interaktyvus, suteikiant geriausią našumą jūsų Strapi paremtai svetainei.

Metodas 2: Gatsby su Strapi

Gatsby svetainėms, naudojančioms gatsby-source-strapi:

Sukurkite arba redaguokite gatsby-ssr.js projekto šaknyje:
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" /> ]) }
Pakeiskite YOUR_WIDGET_ID savo tikruoju valdiklio ID
Paleiskite Gatsby kūrimo serverį iš naujo

Metodas 3: Nuxt.js su Strapi

Nuxt.js programoms, naudojančioms @nuxtjs/strapi:

Nuxt 3:

Pridėkite prie savo 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:

Pridėkite prie savo nuxt.config.js:
export default { head: { script: [ { src: 'https://asyntai.com/static/js/chat-widget.js', async: true, 'data-asyntai-id': 'YOUR_WIDGET_ID' } ] } }

Metodas 4: React su Strapi

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

Atidarykite savo public/index.html failą (CRA) arba index.html (Vite)
Pridėkite įterpimo kodą prieš uždaromąjį </body> žymą:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Išsaugokite failą

Arba sukurkite React 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
}

Metodas 5: SvelteKit su Strapi

SvelteKit programoms, naudojančioms Strapi turinį:

Redaguokite savo src/app.html failą
Pridėkite įterpimo kodą prieš uždaromąjį </body> žymą:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Išsaugokite failą

Metodas 6: statinė svetainė su Strapi API

Jei naudojate Strapi REST arba GraphQL API su statine HTML svetaine:

Pridėkite įterpimo kodą prie savo HTML failo prieš uždaromąjį </body> žymą:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Išsaugokite failą ir įkelkite į savo prieglobą

2 žingsnis: Patikrinkite diegimą

Pridėję pokalbių roboto kodą prie savo Strapi paremtos svetainės, įdiekite arba paleiskite kūrimo serverį. Apsilankykite savo svetainėje naujame naršyklės skirtuke arba inkognito lange. Turėtumėte matyti pokalbių valdiklio mygtuką apatiniame dešiniajame kampe. Spustelėkite jį, kad įsitikintumėte, jog jis atsidaro ir veikia teisingai.

Nematote valdiklio? Įsitikinkite, kad pridėjote skriptą į tinkamą failą savo sistemai. Patikrinkite naršyklės kūrėjo konsolę dėl klaidų. Jei naudojate serverio pusės atvaizdavimą, įsitikinkite, kad skriptas vykdomas kliento pusėje. Pabandykite išvalyti naršyklės talpyklą arba peržiūrėkite inkognito lange.

Aplinkos kintamieji: Geresniam saugumui ir lankstumui apsvarstykite galimybę saugoti valdiklio ID aplinkos kintamajame (pvz., NEXT_PUBLIC_ASYNTAI_ID Next.js arba VITE_ASYNTAI_ID Vite) vietoj tiesioginio įrašymo kode.

Dokumentacija