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

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

Платформа:

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

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

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

<script>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</script>

Примітка: Код вище є лише прикладом. Ви повинн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> ) }
Замініть YOUR_WIDGET_ID на ваш фактичний ID віджету
Збережіть файл та перезапустіть сервер розробки

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

Метод 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-застосункiв (Create React App, Vite тощо), що використовують Contentful:

Відкрийте файл public/index.html
Додайте код вбудовування перед закриваючим тегом </body>:
<script>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</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>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</script>

Метод 5: Статичний HTML з Contentful API

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

Додайте код вбудовування до вашого HTML-файлу перед закриваючим тегом </body>:
<script>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</script>
Збережіть файл та завантажте на хостинг

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

П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гати ID вiджету у змiннiй середовища (наприклад, NEXT_PUBLIC_ASYNTAI_ID для Next.js) замiсть жорсткого кодування.

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