Asyntai AI -chatbotin lisääminen Contentful-alustalle

Vaiheittainen opas Contentful-pohjaisille verkkosivustoille

Alusta:

Headless CMS: Contentful on headless CMS, mikä tarkoittaa, että se tarjoaa sisältöä API:n kautta, mutta ei sisällä valmista käyttöliittymää. Chatbotin asennus riippuu siitä, mitä frontend-kehystä käytät Contentful-sisällön näyttämiseen. Valitse alta omaa asennustasi vastaava menetelmä.

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.

Tapa 1: Next.js ja Contentful (suositeltu)

Jos käytät Next.js:ää Contentful-sisällön näyttämiseen, 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: Käyttämällä strategy=\"lazyOnload\" varmistetaan, että chatbot latautuu vasta, kun sivu on täysin interaktiivinen, mikä tarjoaa parhaan suorituskyvyn.

Tapa 2: Gatsby ja Contentful

Gatsby-sivustoille, jotka hakevat sisältöä Contentfulista:

Asenna gatsby-plugin-load-script (valinnainen, mutta suositeltava):
npm install gatsby-plugin-load-script
Lisää gatsby-config.js-tiedostoosi:
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 } } } ] }
Vaihtoehtoisesti käytä gatsby-ssr.js-tiedostoa:
// 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" /> ]) }
Käynnistä Gatsby-kehityspalvelin uudelleen

Tapa 3: React ja Contentful

Tavallisille React-sovelluksille (Create React App, Vite jne.), jotka käyttävät Contentfulia:

Avaa public/index.html-tiedosto
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 käytä React-komponenttia useEffect-hookilla:

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

Tapa 4: Vue/Nuxt ja Contentful

Vue- tai Nuxt.js-sovelluksille, jotka käyttävät Contentfulia:

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

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>

Tapa 5: Staattinen HTML ja Contentful API

Jos käytät Contentfulin Content Delivery API:a tavallisella JavaScriptillä:

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

Kun olet lisännyt chatbot-koodin Contentful-pohjaiselle sivustollesi, julkaise tai käynnistä kehityspalvelin. Avaa verkkosivustosi uudessa selaimen välilehdessä tai incognito-ikkunassa. Chat-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) sen sijaan, että kovakoodaisit sen.

Dokumentaatio