Ako pridat Asyntai AI chatbota do Contentful

Návod krok za krokom pre webové stránky poháňané 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: Získajte svoj vkladací kód

Najprv prejdite na svoj Asyntai Dashboard a prejdite nadol k sekcii „Vkladací kód“. Skopírujte svoj jedinečný vkladací kód, ktorý bude vyzerať takto:

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

Poznámka: Kód vyššie je len príklad. Musíte skopírovať svoj vlastný jedinečný vkladací kód zo svojho Dashboardu, pretože obsahuje vaše osobné 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> ) }
Nahraďte YOUR_WIDGET_ID vaším skutočným 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 aplikácie Vue alebo Nuxt.js používajúce 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>

Metóda 5: Statické 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.

Nevidíte 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.

Dokumentácia