Kako dodati Asyntai AI chatbot na Contentful

Vodic korak po korak za web stranice koje koriste Contentful

Platforma:

Headless CMS: Contentful je headless CMS, sto znaci da pruza sadrzaj putem API-ja, ali ne ukljucuje ugradeno sucelje. Instalacija chatbota ovisi o tome koji frontend okvir koristite za prikaz sadrzaja iz Contentfula. Odaberite metodu ispod koja odgovara vasem postavljanju.

Korak 1: Nabavite svoj kod za ugradnju

Prvo idite na svoju Asyntai nadzornu ploču i pomaknite se prema dolje do odjeljka "Kod za ugradnju". Kopirajte svoj jedinstveni kod za ugradnju koji će izgledati ovako:

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

Napomena: Gornji kod je samo primjer. Morate kopirati svoj vlastiti jedinstveni kod za ugradnju sa svoje Nadzorne ploče jer sadrži vaš osobni ID widgeta.

Metoda 1: Next.js s Contentfulom (Preporuceno)

Ako koristite Next.js za prikaz sadrzaja iz Contentfula, dodajte chatbot pomocu komponente Script:

Otvorite svoju glavnu datoteku rasporeda: app/layout.tsx (App Router) ili pages/_app.tsx (Pages Router)
Uvezite komponentu Script i dodajte 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> ) }
Zamijenite YOUR_WIDGET_ID svojim stvarnim ID-jem widgeta
Spremite datoteku i ponovno pokrenite razvojni posluzitelj

Savjet: Koristenje strategy="lazyOnload" osigurava da se chatbot ucitava nakon sto je stranica potpuno interaktivna, pruzajuci najbolje performanse.

Metoda 2: Gatsby s Contentfulom

Za Gatsby stranice koje povlace sadrzaj iz Contentfula:

Instalirajte gatsby-plugin-load-script (neobavezno, ali preporuceno):
npm install gatsby-plugin-load-script
Dodajte u svoj 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, koristite 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" /> ]) }
Ponovno pokrenite svoj Gatsby razvojni posluzitelj

Metoda 3: React s Contentfulom

Za standardne React aplikacije (Create React App, Vite itd.) koje koriste Contentful:

Otvorite svoju datoteku public/index.html
Dodajte ugradni kod prije zavrsne oznake </body>:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Spremite datoteku

Ili koristite React komponentu s 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
}

Metoda 4: Vue/Nuxt s Contentfulom

Za Vue ili Nuxt.js aplikacije koje koriste Contentful:

Nuxt 3:

Dodajte u svoj 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:

Dodajte u svoj index.html prije </body>:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

Metoda 5: Staticni HTML s Contentful API-jem

Ako koristite Contentful Content Delivery API s cistim JavaScriptom:

Dodajte ugradni kod u svoju HTML datoteku prije zavrsne oznake </body>:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Spremite datoteku i prenesite na svoj hosting

Korak 2: Provjerite instalaciju

Nakon sto dodate kod chatbota na svoju stranicu pokretanu Contentfulom, postavite ili pokrenite razvojni posluzitelj. Posjetite svoju web stranicu u novoj kartici preglednika ili anonimnom prozoru. Trebali biste vidjeti gumb widgeta za razgovor u donjem desnom kutu. Kliknite ga kako biste provjerili otvara li se i radi li ispravno.

Ne vidite widget? Provjerite jeste li dodali skriptu u ispravnu datoteku za svoj okvir. Provjerite konzolu za programere u pregledniku za greske. Ako koristite renderiranje na strani posluzitelja, osigurajte da se skripta izvrsava na strani klijenta. Pokusajte ocistiti predmemoriju preglednika ili pregledavati u anonimnom prozoru.

Varijable okruzenja: Za bolju sigurnost i fleksibilnost, razmislite o pohranjivanju ID-ja widgeta u varijablu okruzenja (npr. NEXT_PUBLIC_ASYNTAI_ID za Next.js) umjesto da ga upisite izravno u kod.

Dokumentacija