Как да добавите Asyntai AI чатбот към 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>

Забележка: Кодът по-горе е само пример. Трябва да копирате собствения си уникален код за вграждане от вашето Табло за управление, тъй като съдържа вашия личен ID на уиджета.

Метод 1: Next.js със Strapi (Препоръчително)

Ако използвате Next.js като фронтенд за Strapi (най-честата настройка), добавете чатбота, използвайки компонента 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 с вашия действителен 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:

Отворете вашия файл 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: Статичен сайт със Strapi API

Ако използвате 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, деплойнете или стартирайте сървъра за разработка. Посетете уебсайта си в нов раздел на браузъра или в режим инкогнито. Трябва да видите бутона на чат уиджета в долния десен ъгъл. Щракнете върху него, за да се уверите, че се отваря и работи правилно.

Не виждате уиджета? Уверете се, че сте добавили скрипта към правилния файл за вашия фреймуърк. Проверете конзолата за разработчици на браузъра за грешки. Ако използвате рендериране от страна на сървъра, уверете се, че скриптът се изпълнява от страна на клиента. Опитайте да изчистите кеша на браузъра или да разгледате в инкогнито прозорец.

Променливи на средата: За по-добра сигурност и гъвкавост, помислете за съхраняване на ID на уиджета в променлива на средата (напр. NEXT_PUBLIC_ASYNTAI_ID за Next.js или VITE_ASYNTAI_ID за Vite) вместо да го записвате директно в кода.

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