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

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

Платформа:

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

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

First, go to your Asyntai Dashboard and scroll down to the "Embed Code" section. Copy your unique embed code which will look like this:

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

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

Метод 2: Gatsby зі Strapi

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

Створіть або відредагуйте 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" /> ]) }
Замініть YOUR_WIDGET_ID на ваш фактичний ID віджету
Перезапустіть сервер розробки 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

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

Вiдкрийте файл public/index.html (CRA) або index.html (Vite)
Додайте код вбудовування перед закриваючим тегом </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:

// 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
Додайте код вбудовування перед закриваючим тегом </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>
Збережіть файл

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

Якщо ви використовуєте REST або GraphQL API Strapi зі статичним HTML-сайтом:

Додайте код вбудовування до вашого 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: Перевірка встановлення

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

Не бачите віджет? Переконайтеся, що ви додали скрипт до правильного файлу для вашого фреймворку. Перев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сть жорсткого кодування.

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