Kā pievienot Asyntai MI tērzēšanas robotu Contentful

Soli pa solim ceļvedis Contentful vadītām tīmekļa vietnēm

Platforma:

Bezgalvas CMS: Contentful ir bezgalvas CMS, kas nozīmē, ka tas nodrošina saturu caur API, bet neietver iebūvētu priekšgalu. Tērzēšanas robota instalēšana ir atkarīga no tā, kuru priekšgala ietvaru izmantojat Contentful satura renderēšanai. Izvēlieties zemāk metodi, kas atbilst jūsu iestatījumam.

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 Contentful (ieteicams)

Ja izmantojat Next.js Contentful satura renderēšanai, 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", tērzēšanas robots ielādējas pēc tam, kad lapa ir pilnībā interaktīva, nodrošinot labāko veiktspēju.

2. metode: Gatsby ar Contentful

Gatsby vietnēm, kas iegūst saturu no Contentful:

Instalējiet gatsby-plugin-load-script (neobligāts, bet ieteicams):
npm install gatsby-plugin-load-script
Pievienojiet savam gatsby-config.js:
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 } } } ] }
Alternatīvi izmantojiet 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" /> ]) }
Restartējiet savu Gatsby izstrādes serveri

3. metode: React ar Contentful

Standarta React lietotnēm (Create React App, Vite utt.), kas izmanto Contentful:

Atveriet savu public/index.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

Vai izmantojiet React komponentu ar useEffect:

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

4. metode: Vue/Nuxt ar Contentful

Vue vai Nuxt.js lietojumprogrammām, kas izmanto Contentful:

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

Vue 3:

Add to your index.html before </body>:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

5. metode: Statisks HTML ar Contentful API

Ja izmantojat Contentful satura piegādes API ar tīru JavaScript:

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 Contentful vadītajai vietnei izvietojiet vai palaidiet izstrādes serveri. Apmeklējiet savu tīmekļa vietni jaunā pārlūkprogrammas cilnē vai inkognito logā. Jums vajadzētu redzēt tērzēšanas logrīka pogu apakšējā labajā stūrī. 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) nevis to iekodēt.

Dokumentācija