Како додати Asyntai AI чатбот на Strapi

Водич корак по корак за веб-сајтове покретане Strapi-јем

Платформа:

Безглави 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>

Напомена: Код изнад је само пример. Морате копирати свој јединствени код за уграђивање са своје Контролне табле јер садржи ваш лични ИД виџета.

Метода 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 стварним ИД-ом виџета
Сачувајте фајл и рестартујте развојни сервер

Савет: Коришћење 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 стварним ИД-ом виџета
Рестартујте свој 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-јем

Ако користите Strapi REST или GraphQL API са статичким 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-јем, поставите или покрените ваш развојни сервер. Посетите ваш веб-сајт у новој картици прегледача или инкогнито прозору. Требало би да видите дугме виџета за ћаскање у доњем десном углу. Кликните на њега да проверите да ли се отвара и ради исправно.

Не видите виџет? Уверите се да сте додали скрипту у тачан фајл за свој фрејмворк. Проверите развојну конзолу претраживача за евентуалне грешке. Ако користите рендеровање на серверској страни, осигурајте да скрипта ради на клијентској страни. Покушајте да обришете кеш претраживача или прегледате у инкогнито прозору.

Променљиве окружења: За бољу безбедност и флексибилност, размислите о чувању ИД-а виџета у променљивој окружења (нпр. NEXT_PUBLIC_ASYNTAI_ID за Next.js или VITE_ASYNTAI_ID за Vite) уместо да га тврдо кодирате.

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