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

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

Платформа:

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

Крок 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 зі Strapi (Рекомендовано)

Якщо ви використовуєте Next.js як фронтенд Strapi (найпоширеніша конфігурація), додайте чат-бот за допомогою компонента 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" забезпечує завантаження чат-бота після того, як сторінка стане повністю інтерактивною, що забезпечує найкращу продуктивність для вашого сайту на базі Strapi.

Метод 2: Gatsby зі Strapi

Для сайтів Gatsby, що використовують gatsby-source-strapi:

Create or edit gatsby-ssr.js in your project root:
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нiть YOUR_WIDGET_ID на ваш фактичний ID вiджету
Перезапустiть сервер розробки Gatsby

Метод 3: Nuxt.js зі Strapi

Для додатків Nuxt.js, що використовують @nuxtjs/strapi:

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' } ] } } })

Nuxt 2:

Додайте до вашого nuxt.config.js:
export default { head: { script: [ { src: 'https://asyntai.com/static/js/chat-widget.js', async: true, 'data-asyntai-id': 'YOUR_WIDGET_ID' } ] } }

Метод 4: React зі Strapi

For standard React apps (Create React App, Vite) consuming Strapi API:

Вiдкрийте файл public/index.html (CRA) або index.html (Vite)
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:

// 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
}

Метод 5: SvelteKit зі Strapi

Для додатків SvelteKit, що використовують контент Strapi:

Відредагуйте ваш файл src/app.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ть файл

Метод 6: Статичний сайт з API Strapi

If you're using Strapi's REST or GraphQL API with a static HTML site:

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

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

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

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

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

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