Jak přidat Asyntai AI chatbota do Strapi

Průvodce krok za krokem pro weby založené na Strapi

Platforma:

Headless CMS: Strapi je headless CMS, který poskytuje obsah přes API, ale neobsahuje vestavěný frontend. Instalace chatbota závisí na tom, jaký frontendový framework používáte k vykreslování obsahu Strapi. Vyberte níže metodu, která odpovídá vašemu nastavení.

Krok 1: Získejte svůj vkládací kód

Nejprve přejděte na svůj Asyntai Dashboard a přejděte dolů k sekci „Embed Code". Zkopírujte svůj unikátní kód pro vložení, který bude vypadat takto:

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

Poznámka: Kód výše je pouze příklad. Musíte zkopírovat svůj vlastní unikátní kód pro vložení z vašeho Dashboardu, protože obsahuje vaše osobní ID widgetu.

Metoda 1: Next.js se Strapi (doporučeno)

Pokud používáte Next.js jako svůj frontend Strapi (nejčastější nastavení), přidejte chatbota pomocí komponenty Script:

Otevřete svůj hlavní layout soubor: app/layout.tsx (App Router) nebo pages/_app.tsx (Pages Router)
Importujte komponentu Script a přidejte chatbota:
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> ) }
Nahraďte YOUR_WIDGET_ID svým skutečným ID widgetu
Uložte soubor a restartujte vývojový server

Tip: Použití strategy="lazyOnload" zajistí, že se chatbot načte až poté, co je stránka plně interaktivní, a poskytne tak nejlepší výkon pro váš web založený na Strapi.

Metoda 2: Gatsby se Strapi

Pro weby Gatsby používající 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" /> ]) }
Nahraďte YOUR_WIDGET_ID svým skutečným ID widgetu
Restartujte vývojový server Gatsby

Metoda 3: Nuxt.js se Strapi

Pro aplikace Nuxt.js používající @nuxtjs/strapi:

Nuxt 3:

Přidejte do svého 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:

Přidejte do svého nuxt.config.js:
export default { head: { script: [ { src: 'https://asyntai.com/static/js/chat-widget.js', async: true, 'data-asyntai-id': 'YOUR_WIDGET_ID' } ] } }

Metoda 4: React se Strapi

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

Otevřete soubor public/index.html (CRA) nebo index.html (Vite)
Přidejte embed kód před uzavírací značku </body>:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Uložte soubor

Nebo vytvořte React komponentu:

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

Metoda 5: SvelteKit se Strapi

Pro aplikace SvelteKit využívající obsah Strapi:

Upravte svůj soubor src/app.html
Přidejte embed kód před uzavírací značku </body>:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Uložte soubor

Metoda 6: Statický web se Strapi API

Pokud používáte REST nebo GraphQL API Strapi se statickým HTML webem:

Přidejte embed kód do svého HTML souborů před uzavírací značku </body>:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Uložte soubor a nahrajte na hosting

Krok 2: Ověření instalace

Po přidání kódu chatbota na svůj web založený na Strapi nasaďte nebo spusťte svůj vývojový server. Navštivte svůj web v nové záložce prohlížeče nebo v anonymním okně. V pravém dolním rohu byste měli vidět tlačítko chatovacího widgetu. Klikněte na něj a ujistěte se, že se správně otevírá a funguje.

Nevidíte widget? Ujistěte se, že jste skript přidali do správného souborů pro váš framework. Zkontrolujte vývojářskou konzoli prohlížeče, zda nejsou chyby. Pokud používáte server-side rendering, zajistěte, aby se skript spouštěl na straně klienta. Zkuste vymazat mezipaměť prohlížeče nebo zobrazit stránku v anonymním okně.

Proměnné prostředí: Pro lepší zabezpečení a flexibilitu zvažte uložení ID widgetu do proměnné prostředí (např. NEXT_PUBLIC_ASYNTAI_ID pro Next.js nebo VITE_ASYNTAI_ID pro Vite) namísto jeho pevného zadání do kódu.

Dokumentace