Как да добавите Asyntai AI чатбот в Contentful

Ръководство стъпка по стъпка за уебсайтове, задвижвани от Contentful

Платформа:

Headless CMS: Contentful е headless CMS, което означава, че предоставя съдържание чрез API, но не включва вграден frontend. Инсталацията на чатбота зависи от това кой frontend фреймуърк използвате за визуализиране на вашето Contentful съдържание. Изберете метода по-долу, който съответства на вашата конфигурация.

Стъпка 1: Вземете вашия код за вграждане

Първо отидете на вашето Табло за управление на Asyntai и превъртете надолу до секцията "Код за вграждане". Копирайте уникалния си код за вграждане, който ще изглежда така:

<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

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

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

Ако използвате Next.js за визуализиране на вашето Contentful съдържание, добавете чатбота, като използвате компонента 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" гарантира, че чатботът се зарежда след като страницата е напълно интерактивна, осигурявайки най-добрата производителност.

Метод 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 приложения (Create React App, Vite и др.), използващи Contentful:

Отворете вашия файл public/index.html
Добавете кода за вграждане преди затварящия таг </body>:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></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:

Add to your index.html before </body>:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

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

Ако използвате Content Delivery API на Contentful с чист JavaScript:

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

Стъпка 2: Проверете инсталацията

След като добавите кода на чатбота към вашия сайт, задвижван от Contentful, разгърнете или стартирайте сървъра за разработка. Посетете уебсайта си в нов раздел на браузъра или в инкогнито прозорец. Трябва да видите бутона на чат уиджета в долния десен ъгъл. Кликнете върху него, за да се уверите, че се отваря и работи правилно.

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

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

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