Kako dodati klepetalnik Asyntai z UI v Contentful

Vodič po korakih za spletne strani, ki jih poganja Contentful

Platforma:

Brezglavi CMS: Contentful je brezglavi CMS, kar pomeni, da zagotavlja vsebino prek API-ja, vendar ne vključuje vgrajenega čelnega vmesnika. Namestitev klepetalnika je odvisna od tega, kateri čelni okvir uporabljate za izrisovanje vsebine Contentful. Izberite spodnji način, ki ustreza vaši nastavitvi.

Korak 1: Pridobite svojo vdelovalno kodo

Najprej pojdite na svojo Nadzorno ploščo Asyntai in se pomaknite navzdol do razdelka "Vdelovalna koda". Kopirajte svojo edinstveno vdelovalno kodo, ki bo videti takole:

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

Opomba: Zgornja koda je le primer. Svojo edinstveno vdelovalno kodo morate kopirati iz svoje Nadzorne plošče, saj vsebuje vaš osebni ID klepetalnika.

Način 1: Next.js s Contentful (priporočeno)

Če uporabljate Next.js za izrisovanje vsebine Contentful, dodajte klepetalnik z uporabo komponente Script:

Odprite svojo glavno datoteko postavitve: app/layout.tsx (App Router) ali pages/_app.tsx (Pages Router)
Uvozite komponento Script in dodajte klepetalnik:
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> ) }
Replace YOUR_WIDGET_ID with your actual widget ID
Shranite datoteko in znova zaženite razvojni strežnik

Nasvet: Uporaba strategy="lazyOnload" zagotavlja, da se klepetalnik naloži po tem, ko je stran popolnoma interaktivna, kar zagotavlja najboljše delovanje.

Način 2: Gatsby s Contentful

Za strani Gatsby, ki vlečejo vsebino iz Contentful:

Namestite gatsby-plugin-load-script (neobvezno, a priporočeno):
npm install gatsby-plugin-load-script
Dodajte v svojo datoteko 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 } } } ] }
Alternativno uporabite 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" /> ]) }
Znova zaženite razvojni strežnik Gatsby

Način 3: React s Contentful

Za standardne aplikacije React (Create React App, Vite itd.) z uporabo Contentful:

Odprite svojo datoteko public/index.html
Dodajte vdelovalno kodo pred zaključno oznako </body>:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Shranite datoteko

Ali uporabite komponento React z 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
}

Način 4: Vue/Nuxt s Contentful

Za aplikacije Vue ali Nuxt.js z uporabo Contentful:

Nuxt 3:

Dodajte v svojo datoteko 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>

Način 5: Statični HTML z API-jem Contentful

Če uporabljate API za dostavo vsebine Contentful z navadnim JavaScriptom:

Dodajte vdelovalno kodo v svojo datoteko HTML pred zaključno oznako </body>:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Shranite datoteko in jo naložite na svoje gostovanje

Korak 2: Preverite namestitev

Po dodajanju kode klepetalnika na svojo stran, ki jo poganja Contentful, namestite ali zaženite razvojni strežnik. Obiščite svojo spletno stran v novem zavihku brskalnika ali oknu brez beleženja. V spodnjem desnem kotu bi morali videti gumb klepetalnika. Kliknite ga, da preverite, ali se pravilno odpre in deluje.

Ne vidite klepetalnika? Prepričajte se, da ste skript dodali v pravilno datoteko za svoj okvir. Preverite razvijalsko konzolo brskalnika za morebitne napake. Če uporabljate izrisovanje na strežniški strani, zagotovite, da se skript izvaja na odjemalski strani. Poskusite počistiti predpomnilnik brskalnika ali si ogledati stran v oknu brez beleženja.

Okoljske spremenljivke: Za boljšo varnost in prilagodljivost razmislite o shranjevanju ID-ja klepetalnika v okoljsko spremenljivko (npr. NEXT_PUBLIC_ASYNTAI_ID za Next.js) namesto trde zakodiranosti.

Dokumentacija