Ako pridat Asyntai AI chatbota do Contentful

Návod krok za krokom pre webove stránky pohanane Contentful

Platforma:

Headless CMS: Contentful je headless CMS, co znamena, ze poskytuje obsah cez API, ale neobsahuje vstavany frontend. Inštalácia chatbota zavisi od toho, ktory frontendovy framework používate na vykreslovanie obsahu Contentful. Vyberte si metodu nižšie, ktora zodpoveda vasmu nastaveniu.

Krok 1: Ziskajte svoj vkladací kod

Najprv prejdite na svoj Asyntai Dashboard a prejdite nadol k sekcii "Vkladaci kod". Skopirujte svoj jedinečný vkladací kod, ktory bude vyzerat takto:

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

Poznámka: Kod vyššie je len priklad. Musite skopirovat svoj vlastný jedinečný vkladací kod zo svojho Dashboardu, pretože obsahuje vase osobne ID widgetu.

Metoda 1: Next.js s Contentful (odporúčané)

Ak používate Next.js na vykreslovanie vasho obsahu Contentful, pridajte chatbota pomocou komponentu Script:

Otvorte svoj hlavny súbor rozloženia: app/layout.tsx (App Router) alebo pages/_app.tsx (Pages Router)
Importujte komponent Script a pridajte chatbota:
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> ) }
Nahradte YOUR_WIDGET_ID vasim skutocnym ID widgetu
Uložte súbor a restartujte svoj vývojový server

Tip: Použitie strategy="lazyOnload" zabezpeci, ze sa chatbot nacita az po uplnej interaktivite stránky, co poskytuje najlepší výkon.

Metoda 2: Gatsby s Contentful

Pre stránky Gatsby cerpajuce obsah z Contentful:

Nainštalujte gatsby-plugin-load-script (volitelne, ale odporúčané):
npm install gatsby-plugin-load-script
Pridajte do svojho 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 } } } ] }
Alternativne použite 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" /> ]) }
Restartujte svoj vývojový server Gatsby

Metoda 3: React s Contentful

Pre standardne React aplikacie (Create React App, Vite atd.) pouzivajuce Contentful:

Otvorte svoj súbor public/index.html
Pridajte vkladací kod pred uzatvaraci tag </body>:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Uložte súbor

Alebo použite komponent React 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 Contentful

Pre aplikacie Vue alebo Nuxt.js pouzivajuce Contentful:

Nuxt 3:

Pridajte do svojho 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:

Pridajte do svojho index.html pred </body>:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

Metoda 5: Staticke HTML s Contentful API

Ak používate Content Delivery API od Contentful s cistym JavaScriptom:

Pridajte vkladací kod do vasho HTML súboru pred uzatvaraci tag </body>:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Uložte súbor a nahrajte na vas hosting

Krok 2: Overenie inštalácie

Po pridani kodu chatbota na vasu stránku pohananu Contentful nasadte alebo spustite svoj vývojový server. Navštívte svoju webovú stránku v novej karte prehliadača alebo v okne inkognito. Mali by ste vidiet tlačidlo chatoveho widgetu v pravom dolnom rohu. Kliknite nan, aby ste sa uistili, ze sa otvara a funguje správne.

Nevidite widget? Uistite sa, ze ste pridali skript do spravneho súboru pre vas framework. Skontrolujte vyvojarsku konzolu vasho prehliadača kvoli pripadnym chybam. Ak používate serverove vykreslovanie, uistite sa, ze skript bezi na strane klienta. Skuste vyčistiť vyrovnávaciu pamat prehliadača alebo zobrazit web v okne inkognito.

Premenne prostredia: Pre lepšiu bezpecnost a flexibilitu zvazite uloženie vasho ID widgetu do premennej prostredia (napr. NEXT_PUBLIC_ASYNTAI_ID pre Next.js) namiesto jeho priameho zapisania do kodu.

Dokumentacia