Како додати Asyntai АИ четбот у Contentful

Водич корак по корак за веб-сајтове покретане Contentful-ом

Платформа:

Безглави CMS: Contentful је безглави CMS, што значи да испоручује садржај путем API-ја, али не укључује уграђени фронтенд. Инсталација четбота зависи од тога који фронтенд фрејмворк користите за рендеровање Contentful садржаја. Изаберите метод испод који одговара вашем подешавању.

Корак 1: Набавите свој код за уграђивање

Прво, идите на своју Asyntai контролну таблу и померите се до одељка „Код за уграђивање". Копирајте свој јединствени код за уграђивање који ће изгледати овако:

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

Напомена: Код изнад је само пример. Морате копирати свој јединствени код за уграђивање са своје Контролне табле јер садржи ваш лични ИД виџета.

Метод 1: Next.js са Contentful-ом (препоручено)

Ако користите Next.js за рендеровање Contentful садржаја, додајте четбот користећи Script компоненту:

Отворите свој главни фајл распореда: app/layout.tsx (App Router) или pages/_app.tsx (Pages Router)
Увезите Script компоненту и додајте четбот:
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> ) }
Замените YOUR_WIDGET_ID стварним ИД-ом виџета
Сачувајте фајл и рестартујте развојни сервер

Савет: Коришћење strategy="lazyOnload" осигурава да се четбот учитава након што страница постане потпуно интерактивна, обезбеђујући најбоље перформансе.

Метод 2: Gatsby са Contentful-ом

За Gatsby сајтове који повлаче садржај из Contentful-а:

Инсталирајте gatsby-plugin-load-script (опционално али препоручено):
npm install gatsby-plugin-load-script
Додајте у свој 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 } } } ] }
Алтернативно, користите 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" /> ]) }
Рестартујте свој Gatsby развојни сервер

Метод 3: React са Contentful-ом

За стандардне React апликације (Create React App, Vite итд.) које користе Contentful:

Отворите свој public/index.html фајл
Add the embed code before the closing </body> tag:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Сачувајте фајл

Или користите React компоненту са 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
}

Метод 4: Vue/Nuxt са Contentful-ом

За Vue или Nuxt.js апликације које користе Contentful:

Nuxt 3:

Додајте у свој 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:

Додајте у свој index.html пре </body>:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

Метод 5: Статички HTML са Contentful API-јем

Ако користите Contentful Content Delivery API са чистим JavaScript-ом:

Додајте код за уграђивање у свој HTML фајл пре затварајуће </body> ознаке:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Сачувајте фајл и отпремите на свој хостинг

Корак 2: Верификујте инсталацију

Након додавања кода четбота на ваш сајт покретан Contentful-ом, деплојујте или покрените развојни сервер. Посетите веб-сајт у новој картици претраживача или инкогнито прозору. Требало би да видите дугме виџета за ћаскање у доњем десном углу. Кликните на њега да бисте се уверили да се отвара и исправно ради.

Не видите виџет? Уверите се да сте додали скрипту у тачан фајл за свој фрејмворк. Проверите развојну конзолу претраживача за евентуалне грешке. Ако користите рендеровање на серверској страни, осигурајте да скрипта ради на клијентској страни. Покушајте да обришете кеш претраживача или прегледате у инкогнито прозору.

Променљиве окружења: За бољу безбедност и флексибилност, размислите о чувању ИД-а виџета у променљивој окружења (нпр. NEXT_PUBLIC_ASYNTAI_ID за Next.js) уместо да га тврдо кодирате.

Документација