Kā pievienot Asyntai AI tērzēšanas robotu Strapi

Soli pa solim ceļvedis Strapi darbinātām tīmekļa vietnēm

Platforma:

Bezgalvas CMS: Strapi ir bezgalvas CMS, kas nodrošina saturu, izmantojot API, bet neietver iebūvētu priekšgalu. Tērzēšanas robota instalācija ir atkarīga no tā, kuru priekšgala ietvaru izmantojat Strapi satura atveidošanai. Izvēlieties tālāk aprakstīto metodi, kas atbilst jūsu konfigurācijai.

1. solis: Iegūstiet savu iegulto kodu

Vispirms dodieties uz savu Asyntai vadības paneli un ritiniet uz leju līdz sadaļai "Iegultais kods". Nokopējiet savu unikālo iegulto kodu, kas izskatīsies šādi:

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

Piezīme: Iepriekš minētais kods ir tikai piemērs. Jums jānokopē savs unikālais iegultais kods no sava Vadības paneļa, jo tas satur jūsu personīgo logrīka ID.

1. metode: Next.js ar Strapi (ieteicams)

Ja izmantojat Next.js kā savu Strapi priekšgalu (visbiežākā konfigurācija), pievienojiet tērzēšanas robotu, izmantojot Script komponentu:

Atveriet savu galveno izkārtojuma failu: app/layout.tsx (App Router) vai pages/_app.tsx (Pages Router)
Importējiet Script komponentu un pievienojiet tērzēšanas robotu:
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> ) }
Aizstājiet YOUR_WIDGET_ID ar savu reālo logrīka ID
Saglabājiet failu un restartējiet izstrādes serveri

Padoms: Izmantojot strategy="lazyOnload", tiek nodrošināts, ka tērzēšanas robots tiek ielādēts pēc tam, kad lapa ir pilnībā interaktīva, nodrošinot labāko veiktspēju jūsu Strapi darbinātajai vietnei.

2. metode: Gatsby ar Strapi

Gatsby vietnēm, kas izmanto gatsby-source-strapi:

Izveidojiet vai rediģējiet gatsby-ssr.js sava projekta saknē:
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" /> ]) }
Aizstājiet YOUR_WIDGET_ID ar savu reālo logrīka ID
Restartējiet savu Gatsby izstrādes serveri

3. metode: Nuxt.js ar Strapi

Nuxt.js lietojumprogrammām, kas izmanto @nuxtjs/strapi:

Nuxt 3:

Pievienojiet savam 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:

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

4. metode: React ar Strapi

Standarta React lietotnēm (Create React App, Vite), kas patērē Strapi API:

Atveriet savu public/index.html failu (CRA) vai index.html (Vite)
Pievienojiet iegulto kodu pirms noslēdzošā </body> taga:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Saglabājiet failu

Vai izveidojiet React komponentu:

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

5. metode: SvelteKit ar Strapi

SvelteKit lietojumprogrammām, kas patērē Strapi saturu:

Rediģējiet savu src/app.html failu
Pievienojiet iegulto kodu pirms noslēdzošā </body> taga:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Saglabājiet failu

6. metode: Statiska vietne ar Strapi API

Ja izmantojat Strapi REST vai GraphQL API ar statisku HTML vietni:

Pievienojiet iegulto kodu savam HTML failam pirms noslēdzošā </body> taga:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Saglabājiet failu un augšupielādējiet savā hostingā

2. solis: Pārbaudiet instalēšanu

Pēc tērzēšanas robota koda pievienošanas savai Strapi darbinātajai vietnei izvietojiet vai palaidiet izstrādes serveri. Apmeklējiet savu tīmekļa vietni jaunā pārlūkprogrammas cilnē vai inkognito logā. Apakšējā labajā stūrī vajadzētu redzēt tērzēšanas logrīka pogu. Noklikšķiniet uz tās, lai pārliecinātos, ka tā atveras un darbojas pareizi.

Neredzat logrīku? Pārliecinieties, ka esat pievienojis skriptu pareizajam failam savam ietvaram. Pārbaudiet pārlūkprogrammas izstrādātāja konsoli, vai nav kļūdu. Ja izmantojat servera puses renderēšanu, pārliecinieties, ka skripts darbojas klienta pusē. Mēģiniet notīrīt pārlūkprogrammas kešatmiņu vai skatīt inkognito logā.

Vides mainīgie: Labākai drošībai un elastībai apsveriet iespēju glabāt savu logrīka ID vides mainīgajā (piemēram, NEXT_PUBLIC_ASYNTAI_ID Next.js vai VITE_ASYNTAI_ID Vite) nevis to iekodēt.

Dokumentācija