Kako dodati klepetalnik Asyntai AI v Strapi

Vodič po korakih za spletna mesta, ki jih poganja Strapi

Platforma:

Brezglavi CMS: Strapi je brezglav CMS, ki zagotavlja vsebino prek API-ja, vendar ne vključuje vgrajenega frontenda. Namestitev klepetalnika je odvisna od tega, katero frontend ogrodje uporabljate za upodabljanje vsebine Strapi. Spodaj izberite 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 Strapi (priporočeno)

Če uporabljate Next.js kot svoj frontend Strapi (najpogostejša nastavitev), 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šo zmogljivost za vaše spletno mesto, ki ga poganja Strapi.

Način 2: Gatsby s Strapi

Za spletna mesta Gatsby, ki uporabljajo gatsby-source-strapi:

Ustvarite ali uredite gatsby-ssr.js v korenu projekta:
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" /> ]) }
Replace YOUR_WIDGET_ID with your actual widget ID
Znova zaženite razvojni strežnik Gatsby

Način 3: Nuxt.js s Strapi

Za aplikacije Nuxt.js, ki uporabljajo @nuxtjs/strapi:

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

Nuxt 2:

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

Način 4: React s Strapi

For standard React apps (Create React App, Vite) consuming Strapi API:

Odprite svojo datoteko public/index.html (CRA) ali index.html (Vite)
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 ustvarite komponento React:

// 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 5: SvelteKit s Strapi

Za aplikacije SvelteKit, ki porabljajo vsebino Strapi:

Uredite svojo datoteko src/app.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

Način 6: Staticno spletno mesto z API Strapi

If you're using Strapi's REST or GraphQL API with a static HTML site:

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 svoje spletno mesto, ki ga poganja Strapi, namestite ali zaženite svoj razvojni strežnik. Obiščite svoje spletno mesto v novem zavihku brskalnika ali oknu brez beleženja. V spodnjem desnem kotu bi morali videti gumb pripomocka za klepet. Kliknite nanj, da se prepričajte, da se odpre in pravilno 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 ali VITE_ASYNTAI_ID za Vite) namesto trde zakodiranosti.

Dokumentacija