Asyntai AI -chatbotin lisääminen Strapiin

Vaiheittainen opas Strapi-pohjaisille verkkosivustoille

Alusta:

Headless CMS: Strapi on headless CMS, joka tarjoaa sisältöä API:n kautta mutta ei sisällä sisäänrakennettua frontendia. Chatbotin asennus riippuu siitä, mitä frontend-kehystä käytät Strapi-sisältösi renderöintiin. Valitse alla oleva menetelmä, joka vastaa asennustasi.

Vaihe 1: Hanki upotuskoodisi

Siirry ensin Asyntai-hallintapaneeliin ja vieritä alas "Upotuskoodi"-osioon. Kopioi yksilöllinen upotuskoodisi, joka näyttää tältä:

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

Huomautus: Yllä oleva koodi on vain esimerkki. Sinun on kopioitava oma yksilöllinen upotuskoodisi Hallintapaneelistasi, sillä se sisältää henkilökohtaisen widget-tunnuksesi.

Menetelmä 1: Next.js ja Strapi (suositeltu)

Jos käytät Next.js:ää Strapi-frontendina (yleisin asennustapa), lisää chatbot Script-komponentin avulla:

Avaa pääasettelutiedostosi: app/layout.tsx (App Router) tai pages/_app.tsx (Pages Router)
Tuo Script-komponentti ja lisää chatbot:
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> ) }
Korvaa YOUR_WIDGET_ID todellisella widget-tunnuksellasi
Tallenna tiedosto ja käynnistä kehityspalvelin uudelleen

Vinkki: strategy="lazyOnload" -asetuksen käyttö varmistaa, että chatbot latautuu vasta, kun sivu on täysin interaktiivinen, mikä takaa parhaan suorituskyvyn Strapi-pohjaiselle sivustollesi.

Menetelmä 2: Gatsby ja Strapi

Gatsby-sivustoille, jotka käyttävät gatsby-source-strapi-lisäosaa:

Luo tai muokkaa gatsby-ssr.js-tiedostoa projektisi juuressa:
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" /> ]) }
Korvaa YOUR_WIDGET_ID todellisella widget-tunnuksellasi
Käynnistä Gatsby-kehityspalvelin uudelleen

Menetelmä 3: Nuxt.js ja Strapi

Nuxt.js-sovelluksille, jotka käyttävät @nuxtjs/strapi-moduulia:

Nuxt 3:

Lisää nuxt.config.ts-tiedostoosi:
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:

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

Menetelmä 4: React ja Strapi

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

Avaa public/index.html-tiedosto (CRA) tai index.html (Vite)
Lisää upotuskoodi ennen sulkevaa </body>-tagia:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Tallenna tiedosto

Tai luo React-komponentti:

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

Menetelmä 5: SvelteKit ja Strapi

SvelteKit-sovelluksille, jotka käyttävät Strapi-sisältöä:

Muokkaa src/app.html-tiedostoasi
Lisää upotuskoodi ennen sulkevaa </body>-tagia:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Tallenna tiedosto

Menetelmä 6: Staattinen sivusto ja Strapi API

Jos käytät Strapin REST- tai GraphQL API:a staattisen HTML-sivuston kanssa:

Lisää upotuskoodi HTML-tiedostoosi ennen sulkevaa </body>-tagia:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Tallenna tiedosto ja lataa se hosting-palveluusi

Vaihe 2: Vahvista asennus

Chatbot-koodin lisäämisen jälkeen Strapi-pohjaiselle sivustollesi ota käyttöön tai käynnistä kehityspalvelin. Avaa verkkosivustosi uudessa selaimen välilehdessä tai incognito-ikkunassa. Chat-widget-painikkeen pitäisi näkyä oikeassa alakulmassa. Napsauta sitä varmistaaksesi, että se avautuu ja toimii oikein.

Etkö näe widgetiä? Varmista, että olet lisännyt skriptin oikeaan tiedostoon kehyksellesi. Tarkista selaimen kehittäjäkonsolista mahdolliset virheet. Jos käytät palvelinpuolen renderöintiä, varmista, että skripti suoritetaan asiakaspuolella. Kokeile tyhjentää selaimen välimuisti tai katsella sivua incognito-ikkunassa.

Ympäristömuuttujat: Paremman tietoturvan ja joustavuuden vuoksi harkitse widget-tunnuksen tallentamista ympäristömuuttujaan (esim. NEXT_PUBLIC_ASYNTAI_ID Next.js:lle tai VITE_ASYNTAI_ID Vitelle) sen sijaan, että kovakoodaisit sen.

Dokumentaatio