Як додати AI чат-бот Asyntai до Contentful

Покрокова iнструкцiя для веб-сайтiв на базi Contentful

Платформа:

Headless CMS: Contentful - це headless CMS, що означає надання контенту через API без вбудованого фронтенду. Встановлення чат-бота залежить вiд того, який фреймворк ви використовуєте для вiдображення контенту Contentful. Оберiть метод нижче, який вiдповiдає вашому налаштуванню.

Крок 1: Отримайте код для вставки

Спочатку перейдiть до вашої Панелi керування Asyntai та прокрутiть вниз до роздiлу "Код для вставки". Скопiюйте унiкальний код для вставки, який виглядатиме так:

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

Примiтка: Код вище є лише прикладом. Ви повиннi скопiювати власний унiкальний код для вставки з вашої Панелi керування, оскiльки вiн мiстить ваш особистий ID вiджета.

Метод 1: Next.js з Contentful (Рекомендований)

Якщо ви використовуєте Next.js для вiдображення контенту Contentful, додайте чат-бот за допомогою компонента Script:

Вiдкрийте головний файл макету: app/layout.tsx (App Router) або pages/_app.tsx (Pages Router)
Iмпортуйте компонент 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> ) }
Замiнiть YOUR_WIDGET_ID на ваш фактичний ID вiджету
Збережiть файл та перезапустiть сервер розробки

Порада: Використання strategy="lazyOnload" забезпечує завантаження чат-бота пiсля того, як сторiнка стане повнiстю iнтерактивною, що забезпечує найкращу продуктивнiсть.

Метод 2: Gatsby з Contentful

Для сайтiв Gatsby, що отримують контент з Contentful:

Встановiть 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" /> ]) }
Перезапустiть сервер розробки Gatsby

Метод 3: React з Contentful

Для стандартних React-застосункiв (Create React App, Vite тощо), що використовують Contentful:

Вiдкрийте файл 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>
Збережiть файл

Або використовуйте компонент 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

Для застосункiв 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

Якщо ви використовуєте Content Delivery API Contentful з чистим JavaScript:

Додайте код вбудовування до вашого HTML-файлу перед закриваючим тегом </body>:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Збережiть файл та завантажте на хостинг

Крок 2: Перевiрка встановлення

Пiсля додавання коду чат-бота на ваш сайт на базi Contentful розгорнiть або запустiть сервер розробки. Вiдвiдайте свiй веб-сайт у новiй вкладцi браузера або в режимi iнкогнiто. Ви повиннi побачити кнопку чат-вiджету в нижньому правому кутi. Натиснiть на неї, щоб переконатися, що вона вiдкривається та працює коректно.

Не бачите вiджет? Переконайтеся, що ви додали скрипт до правильного файлу для вашого фреймворку. Перевiрте консоль розробника у браузерi на наявнiсть помилок. Якщо ви використовуєте серверний рендеринг, переконайтеся, що скрипт виконується на клiєнтськiй сторонi. Спробуйте очистити кеш браузера або переглянути в режимi iнкогнiто.

Змiннi середовища: Для кращої безпеки та гнучкостi рекомендується зберiгати ID вiджету у змiннiй середовища (наприклад, NEXT_PUBLIC_ASYNTAI_ID для Next.js) замiсть жорсткого кодування.

Документацiя