Kaip pridėti Asyntai DI pokalbių robotą prie Contentful

Žingsnis po žingsnio vadovas Contentful valdomoms svetainėms

Platforma:

Beantgalinė TVS: Contentful yra beantgalinė TVS, tai reiškia, kad ji teikia turinį per API, bet neturi integruotos sąsajos. Pokalbių roboto diegimas priklauso nuo to, kurią sąsajos sistemą naudojate Contentful turiniui atvaizduoti. Pasirinkite toliau pateiktą metodą, atitinkantį jūsų konfigūraciją.

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

Jei naudojate Next.js Contentful turiniui atvaizduoti, 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: Naudojant strategy="lazyOnload" užtikrinama, kad pokalbių robotas krausis po to, kai puslapis bus visiškai interaktyvus, suteikdamas geriausią našumą.

Metodas 2: Gatsby su Contentful

Gatsby svetainėms, traukiančioms turinį iš Contentful:

Įdiekite gatsby-plugin-load-script (neprivaloma, bet rekomenduojama):
npm install gatsby-plugin-load-script
Pridėkite prie savo 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 } } } ] }
Alternatyviai naudokite 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" /> ]) }
Paleiskite Gatsby kūrimo serverį iš naujo

Metodas 3: React su Contentful

Standartinėms React programėlėms (Create React App, Vite ir kt.), naudojančioms Contentful:

Atidarykite savo public/index.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ą

Arba naudokite React komponentą su 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
}

Metodas 4: Vue/Nuxt su Contentful

Vue arba Nuxt.js programėlėms, naudojančioms Contentful:

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

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>

Metodas 5: Statinis HTML su Contentful API

Jei naudojate Contentful Content Delivery API su paprastu JavaScript:

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 Contentful valdomos svetainės, įdiekite arba paleiskite kūrimo serverį. Apsilankykite 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) vietoj tiesioginio įrašymo kode.

Dokumentacija